@trinityui/design-system 1.0.12 → 1.0.15

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [1.0.15](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.15) (2026-03-10)
+
+### Features
+
+* **Combobox:** add visible checkboxes and Select All option ([435e01a](https://github.com/Trinity-UI-Components/trinity-design-system/commit/435e01a71f0c6ba7fab9decb7d0d9b5cd760bbb1))
+* **css:** expand trinity.css with comprehensive design tokens ([e1a9f22](https://github.com/Trinity-UI-Components/trinity-design-system/commit/e1a9f22c97d58959afcbf0d4c1aa76a76db52126))
+* simplify dependencies - remove date-pickers, add SimpleTable ([ee02f3e](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ee02f3e299e13173e77355925dca513f3becf8a4))
+* simplify developer experience with essentials entry point ([a7e4a2f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/a7e4a2fb1b221da9c2ee01f1b8c1a851f4e45697))
+* **storybook:** add interactive Component Picker page ([2642326](https://github.com/Trinity-UI-Components/trinity-design-system/commit/2642326fbb68d30c865ea008cdb283fff96562a1))
+* **storybook:** add Trinity branding with custom logo and theme ([8859283](https://github.com/Trinity-UI-Components/trinity-design-system/commit/8859283b58ad77f22b303f0e31f915c0f4f9aecd)), closes [#050742](https://github.com/Trinity-UI-Components/trinity-design-system/issues/050742) [#7841C9](https://github.com/Trinity-UI-Components/trinity-design-system/issues/7841C9)
+* **theme:** add theme presets system for app variations ([ec21481](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ec2148114bfb33b508755675abcd00a0abf3662c))
+* **TopNav:** add white-label logo support with invert option ([0d0a337](https://github.com/Trinity-UI-Components/trinity-design-system/commit/0d0a337de5500ac75919b4ccead9c6b159775600))
+
+### Bug Fixes
+
+* **DataCard:** use theme-aware status backgrounds for dark mode ([621a039](https://github.com/Trinity-UI-Components/trinity-design-system/commit/621a039446736238cabb7ed5919333c97145f009)), closes [#F0FDF4](https://github.com/Trinity-UI-Components/trinity-design-system/issues/F0FDF4) [#FFFBEB](https://github.com/Trinity-UI-Components/trinity-design-system/issues/FFFBEB)
+* improve Storybook configurability and documentation ([912194f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/912194f35d20903d9252f25cb87ae7b7fc266db5))
+* replace light-mode-only overlays with theme-aware action palette ([00ff8ad](https://github.com/Trinity-UI-Components/trinity-design-system/commit/00ff8adb5a5b345e6a8c239da792276d2e38aa94))
+* update CSS theme to match brandColors from theme.ts ([481e0ca](https://github.com/Trinity-UI-Components/trinity-design-system/commit/481e0cafb55eed6c6d426115f25c3cfaef918b1e))
+## [1.0.13](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.13) (2026-03-10)
+
+### Features
+
+* **Combobox:** add visible checkboxes and Select All option ([435e01a](https://github.com/Trinity-UI-Components/trinity-design-system/commit/435e01a71f0c6ba7fab9decb7d0d9b5cd760bbb1))
+* **css:** expand trinity.css with comprehensive design tokens ([e1a9f22](https://github.com/Trinity-UI-Components/trinity-design-system/commit/e1a9f22c97d58959afcbf0d4c1aa76a76db52126))
+* simplify dependencies - remove date-pickers, add SimpleTable ([ee02f3e](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ee02f3e299e13173e77355925dca513f3becf8a4))
+* simplify developer experience with essentials entry point ([a7e4a2f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/a7e4a2fb1b221da9c2ee01f1b8c1a851f4e45697))
+* **storybook:** add interactive Component Picker page ([2642326](https://github.com/Trinity-UI-Components/trinity-design-system/commit/2642326fbb68d30c865ea008cdb283fff96562a1))
+* **storybook:** add Trinity branding with custom logo and theme ([8859283](https://github.com/Trinity-UI-Components/trinity-design-system/commit/8859283b58ad77f22b303f0e31f915c0f4f9aecd)), closes [#050742](https://github.com/Trinity-UI-Components/trinity-design-system/issues/050742) [#7841C9](https://github.com/Trinity-UI-Components/trinity-design-system/issues/7841C9)
+* **theme:** add theme presets system for app variations ([ec21481](https://github.com/Trinity-UI-Components/trinity-design-system/commit/ec2148114bfb33b508755675abcd00a0abf3662c))
+* **TopNav:** add white-label logo support with invert option ([0d0a337](https://github.com/Trinity-UI-Components/trinity-design-system/commit/0d0a337de5500ac75919b4ccead9c6b159775600))
+
+### Bug Fixes
+
+* **DataCard:** use theme-aware status backgrounds for dark mode ([621a039](https://github.com/Trinity-UI-Components/trinity-design-system/commit/621a039446736238cabb7ed5919333c97145f009)), closes [#F0FDF4](https://github.com/Trinity-UI-Components/trinity-design-system/issues/F0FDF4) [#FFFBEB](https://github.com/Trinity-UI-Components/trinity-design-system/issues/FFFBEB)
+* improve Storybook configurability and documentation ([912194f](https://github.com/Trinity-UI-Components/trinity-design-system/commit/912194f35d20903d9252f25cb87ae7b7fc266db5))
+* replace light-mode-only overlays with theme-aware action palette ([00ff8ad](https://github.com/Trinity-UI-Components/trinity-design-system/commit/00ff8adb5a5b345e6a8c239da792276d2e38aa94))
+* update CSS theme to match brandColors from theme.ts ([481e0ca](https://github.com/Trinity-UI-Components/trinity-design-system/commit/481e0cafb55eed6c6d426115f25c3cfaef918b1e))
 ## [1.0.12](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.12) (2026-02-26)
 
 ### Features

package/CONTRIBUTING.md

@@ -39,6 +39,8 @@ Please be respectful and constructive in all interactions. We are committed to p
    npm install
    ```
 
+   Commercial licensing note: For MUI, AG Grid, or Syncfusion license procurement/renewal, contact Arun Manoharan, Rahul Desai, or Sangeetha before production rollout.
+
 3. Start the development server:
    ```bash
    npm run dev

package/README.md

@@ -30,6 +30,8 @@ It provides:
 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
 
 ```bash
@@ -61,6 +63,117 @@ 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
+
+```tsx
+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.
+
+```tsx
+<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`).
+
+```tsx
+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:
+- [`examples/azure-functions/predictive-text/index.ts`](./examples/azure-functions/predictive-text/index.ts)
+- [`examples/azure-functions/predictive-text/README.md`](./examples/azure-functions/predictive-text/README.md)
+
+### URL mode
+
+```tsx
+<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 |
@@ -69,25 +182,27 @@ import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';
 | `@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 (requires `@mui/x-data-grid`) |
+| `@trinityui/design-system/data-table` | DataTable exports (AG Grid powered) |
 | `@trinityui/design-system/css` | CSS file from the React package |
 
-## Optional Feature Dependency
+## DataTable Entry
 
-`DataTable` is intentionally isolated behind a subpath.
+`DataTable` is intentionally isolated behind a subpath:
 
-Install dependency only if you use it:
-
-```bash
-pnpm add @mui/x-data-grid
+```tsx
+import { DataTable } from '@trinityui/design-system/data-table';
 ```
 
-Import from:
+Set your AG Grid Enterprise license key once during app bootstrap:
 
 ```tsx
-import { DataTable } from '@trinityui/design-system/data-table';
+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