Package Exports

@trinityui/design-system
@trinityui/design-system/css
@trinityui/design-system/data-table
@trinityui/design-system/essentials
@trinityui/design-system/theme
@trinityui/design-system/tokens

Readme

Trinity Design System

Trinity Design System is an enterprise component platform built on MUI for Trinity LifeSciences.

It provides:

A React component library: @trinityui/design-system
A CSS-only package for non-React apps: @trinityui/design-system-css

Architecture

Design Tokens -> Theme Layer -> React Components (@trinityui/design-system) -> React Consumer Apps
Design Tokens -> CSS Variables Build -> CSS Package (@trinityui/design-system-css) -> Angular / Vue / Static Apps

Packages

Package	Use Case
`@trinityui/design-system`	React + MUI applications
`@trinityui/design-system-css`	Angular, Vue, static HTML, or any CSS-only integration

Installation

React package

pnpm add @trinityui/design-system react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

Commercial licensing: For MUI, AG Grid, or Syncfusion license procurement/renewal, contact Arun Manoharan, Rahul Desai, or Sangeetha before production use.

CSS-only package

pnpm add @trinityui/design-system-css

React Quick Start

import { ThemeProvider, CssBaseline } from '@mui/material';
import { lightTheme } from '@trinityui/design-system';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

Import Strategy

Use MUI for standard UI primitives, and Trinity for domain-specific components and tokens.

import { Button, Card, TextField } from '@mui/material';
import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';

Async Autocomplete

Autocomplete supports asynchronous loading from either a callback (dataSource) or a URL (url), including infinite pagination on scroll.

Data source mode

import { Autocomplete, type AutocompleteAsyncRequest } from '@trinityui/design-system';

type UserOption = { id: string; name: string; email: string };

const loadUsers = async ({ search, page, pageSize, signal }: AutocompleteAsyncRequest) => {
  const response = await fetch(`/api/users?q=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`, { signal });
  const data = await response.json();
  return {
    options: data.items as UserOption[],
    hasMore: data.hasMore as boolean,
    nextPage: page + 1,
  };
};

<Autocomplete<UserOption, true, false, false>
  name="users"
  label="Users"
  options={[]}
  multiple
  value={[]}
  onHandleChange={(next) => setUsers(next as UserOption[])}
  labelProperty="name"
  valueProperty="id"
  optionValues={['name', 'email']}
  async={{
    dataSource: loadUsers,
    paginate: true,
    pageSize: 25,
    debounceMs: 250,
    minSearchLength: 1,
  }}
/>;

Sortable Multi-Select Autocomplete

Enable sortableSelected to reorder selected chips.

Mouse: drag and drop chips.
Keyboard: Ctrl/Cmd + Shift + Arrow keys on a selected chip.

<Autocomplete<string, true, false, false>
  name="focus-areas"
  label="Focus Areas"
  options={['Oncology', 'Safety', 'AI', 'Regulatory']}
  multiple
  value={selected}
  onHandleChange={(next) => setSelected(next as string[])}
  sortableSelected
  virtualized={false}
/>;

Predictive Text Input (OpenAI via Azure Function)

Use PredictiveTextInput with createOpenAIPredictor and point it to your backend endpoint (for example, an Azure Function at /api/predictive-text).

import { PredictiveTextInput, createOpenAIPredictor } from '@trinityui/design-system';

const predictor = createOpenAIPredictor({
  endpoint: '/api/predictive-text',
  maxSuggestions: 5,
});

<PredictiveTextInput
  label="Prompt"
  value={value}
  onChange={setValue}
  onPredict={predictor}
/>;

Azure Function template:

URL mode

<Autocomplete<UserOption, true, false, false>
  name="users-url"
  label="Users"
  options={[]}
  multiple
  value={[]}
  onHandleChange={(next) => setUsers(next as UserOption[])}
  labelProperty="name"
  valueProperty="id"
  async={{
    url: '/api/users/search',
    method: 'GET',
    queryParam: 'q',
    pageParam: 'page',
    pageSizeParam: 'pageSize',
    paginate: true,
    mapResponse: (response) => {
      const data = response as { results: UserOption[]; hasMore: boolean };
      return { options: data.results, hasMore: data.hasMore };
    },
  }}
/>;

Entry Points

Import	Purpose
`@trinityui/design-system`	Full API
`@trinityui/design-system/essentials`	Lean entry for common setup and core components
`@trinityui/design-system/theme`	Theme-only exports
`@trinityui/design-system/tokens`	Token-only exports
`@trinityui/design-system/data-table`	DataTable exports (AG Grid powered)
`@trinityui/design-system/css`	CSS file from the React package

DataTable Entry

DataTable is intentionally isolated behind a subpath:

import { DataTable } from '@trinityui/design-system/data-table';

Set your AG Grid Enterprise license key once during app bootstrap:

import { setAgGridEnterpriseLicenseKey } from '@trinityui/design-system/data-table';

setAgGridEnterpriseLicenseKey('<AG_GRID_ENTERPRISE_LICENSE_KEY>');

For AG Grid Enterprise licensing, coordinate with Arun Manoharan, Rahul Desai, or Sangeetha.

CSS-Only Usage

Option 1: package CSS import

@import '@trinityui/design-system-css';

Option 2: direct file path

<link rel="stylesheet" href="node_modules/@trinityui/design-system-css/dist/trinity.css" />

Dark mode

<html data-theme="dark">

Theming

import { lightTheme, darkTheme } from '@trinityui/design-system';

const theme = isDarkMode ? darkTheme : lightTheme;

Development

pnpm install
pnpm run start
pnpm run build
pnpm run test
pnpm run lint

Release and Publishing

Push to main triggers publish workflows for:
- @trinityui/design-system
- @trinityui/design-system-css
Version is auto-bumped if the current version is already published.
CHANGELOG.md is generated during release workflow.

Support Docs

License

MIT