@trinityui/design-system 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [1.0.10](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.10) (2026-02-24)
+
+### Features
+
+* **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.9](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.9) (2026-02-24)
+
+### Features
+
+* **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.8](https://github.com/Trinity-UI-Components/trinity-design-system/compare/v1.0.0...v1.0.8) (2026-02-24)
 
 ### Features

package/README.md

@@ -1,304 +1,154 @@
 # Trinity Design System
 
-MUI v6/7 with Trinity branding. WCAG 2.1 AA accessible.
+Trinity Design System is an enterprise component platform built on MUI.
+
+[![npm version](https://img.shields.io/npm/v/@trinityui/design-system.svg)](https://www.npmjs.com/package/@trinityui/design-system)
+[![npm css package](https://img.shields.io/npm/v/@trinityui/design-system-css.svg)](https://www.npmjs.com/package/@trinityui/design-system-css)
+[![main publish](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-npm-on-main.yml/badge.svg)](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-npm-on-main.yml)
+[![css publish](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-css-on-main.yml/badge.svg)](https://github.com/Trinity-UI-Components/trinity-design-system/actions/workflows/publish-css-on-main.yml)
+[![license](https://img.shields.io/npm/l/@trinityui/design-system.svg)](./LICENSE)
+
+It provides:
+- A React component library: `@trinityui/design-system`
+- A CSS-only package for non-React apps: `@trinityui/design-system-css`
+
+## Architecture
+
+```mermaid
+flowchart LR
+  A["Design Tokens"] --> B["Theme Layer"]
+  B --> C["React Components<br/>@trinityui/design-system"]
+  A --> D["CSS Variables Build"]
+  D --> E["CSS Package<br/>@trinityui/design-system-css"]
+  C --> F["React Consumer Apps"]
+  E --> G["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
 
 ```bash
-npm install @trinityui/design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
+pnpm add @trinityui/design-system react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
-For Angular/Vue/static HTML (CSS only, no React components):
+### CSS-only package
 
 ```bash
-npm install @trinityui/design-system-css
+pnpm add @trinityui/design-system-css
 ```
 
-## Setup (One Time)
+## React Quick Start
 
 ```tsx
-// App.tsx
 import { ThemeProvider, CssBaseline } from '@mui/material';
 import { lightTheme } from '@trinityui/design-system';
 
-function App() {
+export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider theme={lightTheme}>
       <CssBaseline />
-      <YourApp />
+      {children}
     </ThemeProvider>
   );
 }
 ```
 
-**That's it.** All MUI components now have Trinity styling.
-
----
-
-## The Golden Rule
+## Import Strategy
 
-> **Use MUI for everything.** Trinity just gives you a theme + a few custom components.
-
-### ✅ Use MUI (99% of your code)
-
-```tsx
-import { Button, Card, TextField, Typography, Chip } from '@mui/material';
-```
-
-These are already styled by Trinity's theme. No extra imports needed.
-
-### ✅ Use Trinity (only for these)
+Use MUI for standard UI primitives, and Trinity for domain-specific components and tokens.
 
 ```tsx
-import { 
-  StatusIndicator,    // Status badges (success/warning/error)
-  Modal,              // Accessible modal dialogs
-  Toast, useToast,    // Notifications
-  FileUpload,         // Drag-and-drop upload
-  SimpleTable,        // Basic table (no dependencies)
-  DataCard,           // KPI/metric cards
-} from '@trinityui/design-system';
+import { Button, Card, TextField } from '@mui/material';
+import { StatusIndicator, Toast, useToast } from '@trinityui/design-system';
 ```
 
-### Quick Reference
+## Entry Points
 
-| Need | Import From |
-|------|-------------|
-| Button, Card, TextField, etc. | `@mui/material` |
-| Status badge | `StatusIndicator` from Trinity |
-| Modal dialog | `Modal` from Trinity |
-| Toast notification | `Toast` from Trinity |
-| Simple table | `SimpleTable` from Trinity |
-| Advanced data grid | `@mui/x-data-grid` (optional dep) |
-| Charts | `recharts` (optional dep) |
+| 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 (requires `@mui/x-data-grid`) |
+| `@trinityui/design-system/css` | CSS file from the React package |
 
----
+## Optional Feature Dependency
 
-## Entry Points
+`DataTable` is intentionally isolated behind a subpath.
 
-| Import | What You Get |
-|--------|--------------|
-| `/essentials` | **Start here.** Theme + 10 components (16 exports) |
-| Main | Full API (100+ exports) |
-| `/theme` | Theme utilities only |
-| `/tokens` | Design tokens only |
-| `/css` | CSS variables (no React) |
-
-```tsx
-// Recommended for most projects
-import { lightTheme, StatusIndicator, Modal } from '@trinityui/design-system/essentials';
+Install dependency only if you use it:
 
-// Full API when needed
-import { TopNavHeader, InsightEngine, DataTable } from '@trinityui/design-system';
+```bash
+pnpm add @mui/x-data-grid
 ```
 
----
-
-## Dark Mode
+Import from:
 
 ```tsx
-import { lightTheme, darkTheme } from '@trinityui/design-system';
-
-const theme = isDarkMode ? darkTheme : lightTheme;
+import { DataTable } from '@trinityui/design-system/data-table';
 ```
 
----
-
-## CSS-Only Theme (No React)
+## CSS-Only Usage
 
-For projects **without React** (static HTML, Vue, Angular, vanilla JS), use the CSS file directly.
-
-📄 **[View CSS Source](src/styles/trinity.css)**
-
-### When to Use CSS-Only
-
-| Use Case | Solution |
-|----------|----------|
-| React + MUI app | Use `lightTheme` / `darkTheme` (JS) |
-| Static HTML site | Use CSS file |
-| Vue / Angular / Svelte | Use CSS file |
-| WordPress / PHP | Use CSS file |
-| Email templates | Use CSS file |
-
-### Setup
-
-```html
-<!-- Option 1: Link directly -->
-<link rel="stylesheet" href="node_modules/@trinityui/design-system/dist/trinity.css" />
-
-<!-- Option 2: Copy to your project -->
-<link rel="stylesheet" href="/css/trinity.css" />
-```
+### Option 1: package CSS import
 
 ```css
-/* Option 3: Import in your CSS/SCSS */
-@import '@trinityui/design-system/css';
+@import '@trinityui/design-system-css';
 ```
 
-### Usage
-
-```css
-/* Use Trinity variables in your styles */
-.card {
-  background: var(--trinity-surface);
-  border: 1px solid var(--trinity-border);
-  border-radius: var(--trinity-radius-lg);
-  padding: var(--trinity-space-4);
-  box-shadow: var(--trinity-shadow-md);
-  font-family: var(--trinity-font-family);
-}
-
-.button-primary {
-  background: var(--trinity-coral);
-  color: var(--trinity-white);
-  border-radius: var(--trinity-radius-pill);
-  padding: var(--trinity-space-2) var(--trinity-space-4);
-}
+### Option 2: direct file path
 
-.status-success {
-  color: var(--trinity-success);
-  background: var(--trinity-success-bg);
-}
+```html
+<link rel="stylesheet" href="node_modules/@trinityui/design-system-css/dist/trinity.css" />
 ```
 
-### Dark Mode
+### Dark mode
 
 ```html
-<!-- Add attribute to enable dark mode -->
 <html data-theme="dark">
 ```
 
-```js
-// Toggle with JavaScript
-document.documentElement.setAttribute('data-theme', 'dark');
-```
-
-### Available Variables
-
-| Category | Examples |
-|----------|----------|
-| Brand | `--trinity-navy`, `--trinity-coral`, `--trinity-purple`, `--trinity-azure` |
-| Semantic | `--trinity-text`, `--trinity-background`, `--trinity-surface`, `--trinity-border` |
-| Status | `--trinity-success`, `--trinity-warning`, `--trinity-error`, `--trinity-info` |
-| Spacing | `--trinity-space-1` through `--trinity-space-16` |
-| Radius | `--trinity-radius-sm`, `--trinity-radius-md`, `--trinity-radius-lg`, `--trinity-radius-pill` |
-| Typography | `--trinity-font-family`, `--trinity-text-sm`, `--trinity-font-bold` |
-| Shadows | `--trinity-shadow-sm`, `--trinity-shadow-md`, `--trinity-shadow-lg` |
+## Theming
 
----
-
-## Optional Dependencies
-
-Only install if you need these features:
+```tsx
+import { lightTheme, darkTheme } from '@trinityui/design-system';
 
-```bash
-npm install @mui/x-data-grid  # For DataTable component
-npm install recharts          # For Charts components
+const theme = isDarkMode ? darkTheme : lightTheme;
 ```
 
-> 💡 Use `SimpleTable` for basic tables — no extra deps needed.
-
----
-
 ## Development
 
 ```bash
-npm run storybook    # Component docs at localhost:6006
-npm run dev          # Dev server at localhost:5173
-npm run build        # Production build
-npm run test         # Run tests
-npm run lint         # Lint code
-```
-
----
-
-## Developer Quick Start
-
-### 1. Clone & Install
-
-```bash
-git clone git@github.com:Trinity-UI-Components/trinity-design-system.git
-cd trinity-design-system
-npm install
-```
-
-### 2. Run Storybook
-
-```bash
-npm run storybook
+pnpm install
+pnpm run start
+pnpm run build
+pnpm run test
+pnpm run lint
 ```
 
-Open http://localhost:6006 to see all components with live examples.
-
-### 3. Project Structure
-
-```
-src/
-├── components/       # All components
-├── theme.ts          # MUI theme (lightTheme, darkTheme)
-├── tokens.ts         # Design tokens
-├── essentials.ts     # Simplified entry point
-├── index.ts          # Full public API
-└── stories/          # Storybook stories
-```
-
-### 4. Create a New Component
-
-```tsx
-// src/components/MyComponent/MyComponent.tsx
-import { Box } from '@mui/material';
-import { semanticTokens } from '../../tokens';
-
-export interface MyComponentProps {
-  label: string;
-}
-
-export const MyComponent = ({ label }: MyComponentProps) => (
-  <Box sx={{ color: semanticTokens.text.primary }}>
-    {label}
-  </Box>
-);
-
-// src/components/MyComponent/index.ts
-export { MyComponent } from './MyComponent';
-export type { MyComponentProps } from './MyComponent';
-```
-
-### 5. Add a Story
-
-```tsx
-// src/stories/MyComponent.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { MyComponent } from '../components/MyComponent';
-
-const meta: Meta<typeof MyComponent> = {
-  title: 'Components/MyComponent',
-  component: MyComponent,
-  tags: ['autodocs'],
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Hello World' },
-};
-```
-
-### 6. Export from Public API
-
-```tsx
-// src/index.ts
-export { MyComponent } from './components/MyComponent';
-export type { MyComponentProps } from './components/MyComponent';
-```
+## 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.
 
-## Links
+## Support Docs
 
-- [Storybook](http://localhost:6006) — Interactive component demos
-- [Quick Start Guide](./docs/QUICK_START.md)
-- [Developer Guide](./docs/DEVELOPER_GUIDE.md)
+- [MIGRATION.md](./MIGRATION.md)
+- [CONTRIBUTING.md](./CONTRIBUTING.md)
+- [CHANGELOG.md](./CHANGELOG.md)
 
----
+## License
 
-MIT License • Built with [MUI](https://mui.com) + [Vite](https://vite.dev)
+MIT

package/dist/Legend.js

@@ -7,8 +7,7 @@ import Ce from "@mui/icons-material/Error";
 import We from "@mui/icons-material/Warning";
 import Ie from "@mui/icons-material/Info";
 import ze from "@mui/icons-material/HelpOutline";
-import { s as L, b as h } from "./navigation.js";
-import { I as T } from "./ai.js";
+import { s as L, b as h, I as T } from "./app-shell.js";
 function De(t) {
   const r = t.palette.trinity;
   return {
@@ -180,7 +179,7 @@ const Me = ({
       ]
     }
   );
-}, vi = ({
+}, ki = ({
   open: t,
   onClose: r,
   onConfirm: i,
@@ -212,7 +211,7 @@ const Me = ({
   confirmLabel: "Confirm",
   onConfirm: () => {
   }
-}, Si = () => {
+}, vi = () => {
   const [t, r] = O(U), i = S(
     (c) => {
       r({
@@ -289,7 +288,7 @@ const Me = ({
       )
     }
   );
-}, Li = ({
+}, Si = ({
   children: t,
   defaultPosition: r = "top-right",
   defaultDuration: i = 5e3,
@@ -375,7 +374,7 @@ const Me = ({
 }, Fe = (t) => {
   const r = {};
   return t.startsWith("top") && (r.top = 16), t.startsWith("bottom") && (r.bottom = 16), t.endsWith("left") && (r.left = 16), t.endsWith("right") && (r.right = 16), t.endsWith("center") && (r.left = "50%", r.transform = "translateX(-50%)"), r;
-}, Ci = () => {
+}, Li = () => {
   const t = ne(q);
   if (!t)
     throw new Error("useToast must be used within a ToastProvider");
@@ -660,7 +659,7 @@ const Me = ({
   "no-notifications": He,
   "no-data": qe,
   offline: Je
-}, Wi = ({
+}, Ci = ({
   illustration: t,
   title: r,
   description: i,
@@ -761,7 +760,7 @@ const Me = ({
       ]
     }
   );
-}, Ii = ({
+}, Wi = ({
   title: t = "Drag and drop your file",
   description: r = "or click to browse from your computer",
   acceptedTypes: i = "PNG, JPG, PDF up to 10MB",
@@ -1254,7 +1253,7 @@ const Me = ({
       ]
     }
   );
-}, zi = (t) => {
+}, Ii = (t) => {
   const {
     variant: r = "icon",
     status: i = "info",
@@ -1369,7 +1368,7 @@ const Me = ({
       }
     }
   );
-}, Di = ({
+}, zi = ({
   items: t,
   variant: r = "dot",
   direction: i = "row",
@@ -1442,14 +1441,14 @@ const Me = ({
   );
 };
 export {
-  vi as C,
-  Wi as I,
+  ki as C,
+  Ci as I,
   Me as M,
-  zi as S,
-  Li as T,
-  Ii as U,
-  Di as a,
-  Ci as b,
+  Ii as S,
+  Si as T,
+  Wi as U,
+  zi as a,
+  Li as b,
   $e as c,
-  Si as u
+  vi as u
 };