@trinityui/design-system 1.0.2 → 1.0.4

package/dist/presets/analytics.d.ts

@@ -0,0 +1,197 @@
+/**
+ * Analytics/Dashboard Application Preset
+ *
+ * Optimized for data-heavy analytics dashboards:
+ * - Extended color palette for data visualization
+ * - Dense layouts for dashboards
+ * - Enhanced chart styling
+ * - Focus on data readability
+ */
+import { TrinityThemePreset } from '../theme';
+/**
+ * Extended color palette for charts and data visualization
+ * Designed for accessibility and clear differentiation
+ */
+export declare const dataVizColors: {
+    /** Primary series colors (categorical) */
+    categorical: string[];
+    /** Sequential colors for gradients/heatmaps */
+    sequential: {
+        blue: string[];
+        green: string[];
+        orange: string[];
+    };
+    /** Diverging colors for positive/negative */
+    diverging: {
+        greenRed: string[];
+        blueOrange: string[];
+    };
+    /** Status colors for metrics */
+    status: {
+        positive: string;
+        negative: string;
+        neutral: string;
+        warning: string;
+    };
+    /** Trend colors */
+    trend: {
+        up: string;
+        down: string;
+        flat: string;
+    };
+};
+/**
+ * Analytics-specific configuration options
+ */
+export declare const analyticsConfig: {
+    /** Default date range for dashboards */
+    defaultDateRange: "last30days";
+    /** Auto-refresh interval (ms), 0 = disabled */
+    autoRefreshInterval: number;
+    /** Enable real-time updates */
+    enableRealtime: boolean;
+    /** Default chart animation duration (ms) */
+    chartAnimationDuration: number;
+    /** Enable chart tooltips */
+    enableTooltips: boolean;
+    /** Enable chart legends */
+    enableLegends: boolean;
+    /** Default number format locale */
+    numberLocale: string;
+    /** Compact number threshold (show 1.2M instead of 1,200,000) */
+    compactNumberThreshold: number;
+    /** Data visualization color palette */
+    colors: {
+        /** Primary series colors (categorical) */
+        categorical: string[];
+        /** Sequential colors for gradients/heatmaps */
+        sequential: {
+            blue: string[];
+            green: string[];
+            orange: string[];
+        };
+        /** Diverging colors for positive/negative */
+        diverging: {
+            greenRed: string[];
+            blueOrange: string[];
+        };
+        /** Status colors for metrics */
+        status: {
+            positive: string;
+            negative: string;
+            neutral: string;
+            warning: string;
+        };
+        /** Trend colors */
+        trend: {
+            up: string;
+            down: string;
+            flat: string;
+        };
+    };
+    /** Enable data export */
+    enableExport: boolean;
+    /** Enable drill-down */
+    enableDrillDown: boolean;
+    /** Show trend indicators */
+    showTrendIndicators: boolean;
+};
+/**
+ * Analytics Light Theme Preset
+ */
+export declare const analyticsLightPreset: TrinityThemePreset;
+/**
+ * Analytics Dark Theme Preset
+ */
+export declare const analyticsDarkPreset: TrinityThemePreset;
+/** Analytics preset with both light and dark themes */
+export declare const analyticsPreset: {
+    light: TrinityThemePreset;
+    dark: TrinityThemePreset;
+    config: {
+        /** Default date range for dashboards */
+        defaultDateRange: "last30days";
+        /** Auto-refresh interval (ms), 0 = disabled */
+        autoRefreshInterval: number;
+        /** Enable real-time updates */
+        enableRealtime: boolean;
+        /** Default chart animation duration (ms) */
+        chartAnimationDuration: number;
+        /** Enable chart tooltips */
+        enableTooltips: boolean;
+        /** Enable chart legends */
+        enableLegends: boolean;
+        /** Default number format locale */
+        numberLocale: string;
+        /** Compact number threshold (show 1.2M instead of 1,200,000) */
+        compactNumberThreshold: number;
+        /** Data visualization color palette */
+        colors: {
+            /** Primary series colors (categorical) */
+            categorical: string[];
+            /** Sequential colors for gradients/heatmaps */
+            sequential: {
+                blue: string[];
+                green: string[];
+                orange: string[];
+            };
+            /** Diverging colors for positive/negative */
+            diverging: {
+                greenRed: string[];
+                blueOrange: string[];
+            };
+            /** Status colors for metrics */
+            status: {
+                positive: string;
+                negative: string;
+                neutral: string;
+                warning: string;
+            };
+            /** Trend colors */
+            trend: {
+                up: string;
+                down: string;
+                flat: string;
+            };
+        };
+        /** Enable data export */
+        enableExport: boolean;
+        /** Enable drill-down */
+        enableDrillDown: boolean;
+        /** Show trend indicators */
+        showTrendIndicators: boolean;
+    };
+    colors: {
+        /** Primary series colors (categorical) */
+        categorical: string[];
+        /** Sequential colors for gradients/heatmaps */
+        sequential: {
+            blue: string[];
+            green: string[];
+            orange: string[];
+        };
+        /** Diverging colors for positive/negative */
+        diverging: {
+            greenRed: string[];
+            blueOrange: string[];
+        };
+        /** Status colors for metrics */
+        status: {
+            positive: string;
+            negative: string;
+            neutral: string;
+            warning: string;
+        };
+        /** Trend colors */
+        trend: {
+            up: string;
+            down: string;
+            flat: string;
+        };
+    };
+};
+/** Analytics light theme (direct MUI theme object) */
+export declare const analyticsLightTheme: import("@mui/material").Theme;
+/** Analytics dark theme (direct MUI theme object) */
+export declare const analyticsDarkTheme: import("@mui/material").Theme;
+//# sourceMappingURL=analytics.d.ts.map

package/dist/presets/analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.d.ts","sourceRoot":"","sources":["../../src/presets/analytics.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMxE;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,0CAA0C;;IAc1C,+CAA+C;;;;;;IAO/C,6CAA6C;;;;;IAM7C,gCAAgC;;;;;;;IAQhC,mBAAmB;;;;;;CAMpB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B,wCAAwC;;IAGxC,+CAA+C;;IAG/C,+BAA+B;;IAG/B,4CAA4C;;IAG5C,4BAA4B;;IAG5B,2BAA2B;;IAG3B,mCAAmC;;IAGnC,gEAAgE;;IAGhE,uCAAuC;;QA3EvC,0CAA0C;;QAc1C,+CAA+C;;;;;;QAO/C,6CAA6C;;;;;QAM7C,gCAAgC;;;;;;;QAQhC,mBAAmB;;;;;;;IA2CnB,yBAAyB;;IAGzB,wBAAwB;;IAGxB,4BAA4B;;CAE7B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,kBA6IjC,CAAC;AAMH;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,kBA2FhC,CAAC;AAMH,uDAAuD;AACvD,eAAO,MAAM,eAAe;;;;QApS1B,wCAAwC;;QAGxC,+CAA+C;;QAG/C,+BAA+B;;QAG/B,4CAA4C;;QAG5C,4BAA4B;;QAG5B,2BAA2B;;QAG3B,mCAAmC;;QAGnC,gEAAgE;;QAGhE,uCAAuC;;YA3EvC,0CAA0C;;YAc1C,+CAA+C;;;;;;YAO/C,6CAA6C;;;;;YAM7C,gCAAgC;;;;;;;YAQhC,mBAAmB;;;;;;;QA2CnB,yBAAyB;;QAGzB,wBAAwB;;QAGxB,4BAA4B;;;;QApF5B,0CAA0C;;QAc1C,+CAA+C;;;;;;QAO/C,6CAA6C;;;;;QAM7C,gCAAgC;;;;;;;QAQhC,mBAAmB;;;;;;;CAyTpB,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,mBAAmB,+BAA6B,CAAC;AAE9D,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,+BAA4B,CAAC"}

package/dist/presets/crm.d.ts

@@ -0,0 +1,67 @@
+/**
+ * CRM Application Preset
+ *
+ * Optimized for customer relationship management applications:
+ * - Compact data tables for viewing many records
+ * - Enhanced form controls
+ * - Quick action buttons
+ * - Status-heavy interfaces
+ */
+import { TrinityThemePreset } from '../theme';
+/**
+ * CRM-specific configuration options
+ */
+export declare const crmConfig: {
+    /** Default page size for data tables */
+    defaultPageSize: number;
+    /** Available page size options */
+    pageSizeOptions: number[];
+    /** Enable AI-powered insights */
+    enableAI: boolean;
+    /** Default table density */
+    tableDensity: "compact";
+    /** Enable bulk actions in tables */
+    enableBulkActions: boolean;
+    /** Enable data export features */
+    enableExport: boolean;
+    /** Show row numbers in tables */
+    showRowNumbers: boolean;
+    /** Enable inline editing */
+    enableInlineEdit: boolean;
+};
+/**
+ * CRM Light Theme Preset
+ */
+export declare const crmLightPreset: TrinityThemePreset;
+/**
+ * CRM Dark Theme Preset
+ */
+export declare const crmDarkPreset: TrinityThemePreset;
+/** CRM preset with both light and dark themes */
+export declare const crmPreset: {
+    light: TrinityThemePreset;
+    dark: TrinityThemePreset;
+    config: {
+        /** Default page size for data tables */
+        defaultPageSize: number;
+        /** Available page size options */
+        pageSizeOptions: number[];
+        /** Enable AI-powered insights */
+        enableAI: boolean;
+        /** Default table density */
+        tableDensity: "compact";
+        /** Enable bulk actions in tables */
+        enableBulkActions: boolean;
+        /** Enable data export features */
+        enableExport: boolean;
+        /** Show row numbers in tables */
+        showRowNumbers: boolean;
+        /** Enable inline editing */
+        enableInlineEdit: boolean;
+    };
+};
+/** CRM light theme (direct MUI theme object) */
+export declare const crmLightTheme: import("@mui/material").Theme;
+/** CRM dark theme (direct MUI theme object) */
+export declare const crmDarkTheme: import("@mui/material").Theme;
+//# sourceMappingURL=crm.d.ts.map

package/dist/presets/crm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crm.d.ts","sourceRoot":"","sources":["../../src/presets/crm.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMxE;;GAEG;AACH,eAAO,MAAM,SAAS;IACpB,wCAAwC;;IAGxC,kCAAkC;;IAGlC,iCAAiC;;IAGjC,4BAA4B;;IAG5B,oCAAoC;;IAGpC,kCAAkC;;IAGlC,iCAAiC;;IAGjC,4BAA4B;;CAE7B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,kBAkF3B,CAAC;AAMH;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,kBAgD1B,CAAC;AAMH,iDAAiD;AACjD,eAAO,MAAM,SAAS;;;;QAlLpB,wCAAwC;;QAGxC,kCAAkC;;QAGlC,iCAAiC;;QAGjC,4BAA4B;;QAG5B,oCAAoC;;QAGpC,kCAAkC;;QAGlC,iCAAiC;;QAGjC,4BAA4B;;;CAiK7B,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,aAAa,+BAAuB,CAAC;AAElD,+CAA+C;AAC/C,eAAO,MAAM,YAAY,+BAAsB,CAAC"}

package/dist/presets/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Trinity Design System - Theme Presets
+ *
+ * Pre-configured theme variations for different application types.
+ * Each preset maintains Trinity brand consistency while optimizing
+ * for specific use cases.
+ *
+ * @example
+ * ```tsx
+ * import { crmPreset } from '@trinitydesign/design-system/presets';
+ *
+ * <ThemeProvider theme={crmPreset.light.theme}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export { crmPreset, crmLightTheme, crmDarkTheme, crmConfig } from './crm';
+export { portalPreset, portalLightTheme, portalDarkTheme, portalConfig } from './portal';
+export { analyticsPreset, analyticsLightTheme, analyticsDarkTheme, analyticsConfig, dataVizColors } from './analytics';
+export type { TrinityThemePreset, TrinityThemePresetOptions } from '../theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGvH,YAAY,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}

package/dist/presets/portal.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Portal/Customer-Facing Application Preset
+ *
+ * Optimized for external-facing customer portals:
+ * - Larger touch targets for mobile/tablet
+ * - More generous spacing
+ * - Prominent call-to-action buttons
+ * - Accessible focus indicators
+ */
+import { TrinityThemePreset } from '../theme';
+/**
+ * Portal-specific configuration options
+ */
+export declare const portalConfig: {
+    /** Default page size for lists */
+    defaultPageSize: number;
+    /** Enable simplified navigation */
+    simplifiedNav: boolean;
+    /** Show help tooltips */
+    showHelpTooltips: boolean;
+    /** Enable accessibility announcements */
+    enableA11yAnnouncements: boolean;
+    /** Minimum touch target size (px) */
+    minTouchTarget: number;
+    /** Enable high contrast mode option */
+    enableHighContrast: boolean;
+    /** Show breadcrumbs */
+    showBreadcrumbs: boolean;
+    /** Enable step-by-step wizards */
+    enableWizards: boolean;
+};
+/**
+ * Portal Light Theme Preset
+ */
+export declare const portalLightPreset: TrinityThemePreset;
+/**
+ * Portal Dark Theme Preset
+ */
+export declare const portalDarkPreset: TrinityThemePreset;
+/** Portal preset with both light and dark themes */
+export declare const portalPreset: {
+    light: TrinityThemePreset;
+    dark: TrinityThemePreset;
+    config: {
+        /** Default page size for lists */
+        defaultPageSize: number;
+        /** Enable simplified navigation */
+        simplifiedNav: boolean;
+        /** Show help tooltips */
+        showHelpTooltips: boolean;
+        /** Enable accessibility announcements */
+        enableA11yAnnouncements: boolean;
+        /** Minimum touch target size (px) */
+        minTouchTarget: number;
+        /** Enable high contrast mode option */
+        enableHighContrast: boolean;
+        /** Show breadcrumbs */
+        showBreadcrumbs: boolean;
+        /** Enable step-by-step wizards */
+        enableWizards: boolean;
+    };
+};
+/** Portal light theme (direct MUI theme object) */
+export declare const portalLightTheme: import("@mui/material").Theme;
+/** Portal dark theme (direct MUI theme object) */
+export declare const portalDarkTheme: import("@mui/material").Theme;
+//# sourceMappingURL=portal.d.ts.map

package/dist/presets/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/presets/portal.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA4B,kBAAkB,EAAe,MAAM,UAAU,CAAC;AAMrF;;GAEG;AACH,eAAO,MAAM,YAAY;IACvB,kCAAkC;;IAGlC,mCAAmC;;IAGnC,yBAAyB;;IAGzB,yCAAyC;;IAGzC,qCAAqC;;IAGrC,uCAAuC;;IAGvC,uBAAuB;;IAGvB,kCAAkC;;CAEnC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,kBAgK9B,CAAC;AAMH;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBAsE7B,CAAC;AAMH,oDAAoD;AACpD,eAAO,MAAM,YAAY;;;;QAtRvB,kCAAkC;;QAGlC,mCAAmC;;QAGnC,yBAAyB;;QAGzB,yCAAyC;;QAGzC,qCAAqC;;QAGrC,uCAAuC;;QAGvC,uBAAuB;;QAGvB,kCAAkC;;;CAqQnC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,gBAAgB,+BAA0B,CAAC;AAExD,kDAAkD;AAClD,eAAO,MAAM,eAAe,+BAAyB,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,221 @@
+import { createTheme, type ThemeOptions } from '@mui/material/styles';
+import { TrinityTokens } from './tokens';
+/**
+ * Generate all CSS custom properties from tokens
+ * Returns a CSS string that can be injected into :root
+ */
+export declare function generateCssVariables(tokenSet?: TrinityTokens): string;
+/**
+ * Generate CSS variables string for dark mode overrides
+ */
+export declare function generateDarkModeCssVariables(tokenSet?: TrinityTokens): string;
+/**
+ * Returns a set of CSS custom properties for key Trinity tokens.
+ * Call this at runtime to inject variables into :root.
+ */
+export declare function injectTrinityCssVariables(tokenSet?: TrinityTokens): void;
+/**
+ * Inject dark mode CSS variables
+ * Adds a style block that applies dark mode overrides when [data-theme="dark"] or .dark-mode is present
+ */
+export declare function injectDarkModeCssVariables(tokenSet?: TrinityTokens): void;
+/**
+ * Calculate contrast ratio between two hex colors (WCAG 2.1)
+ * @param fg - Foreground color (hex)
+ * @param bg - Background color (hex)
+ * @returns Contrast ratio (number)
+ */
+export declare function getContrastRatio(fg: string, bg: string): number;
+/**
+ * Validate accessible color pairs and warn if not WCAG AA compliant.
+ * @param fg - Foreground color (hex)
+ * @param bg - Background color (hex)
+ * @param minRatio - Minimum contrast ratio (default 4.5)
+ */
+export declare function validateAccessibility(fg: string, bg: string, minRatio?: number): boolean;
+/**
+ * Configuration options for creating a Trinity theme preset
+ */
+export interface TrinityThemePresetOptions {
+    /** Theme mode */
+    mode: 'light' | 'dark';
+    /** Optional name for the preset (for debugging) */
+    name?: string;
+    /** Token overrides - customize colors, spacing, etc. */
+    tokens?: Partial<TrinityTokens>;
+    /** MUI Palette overrides - extend or modify the color palette */
+    palette?: ThemeOptions['palette'];
+    /** MUI Component overrides - customize component styles/defaults */
+    components?: ThemeOptions['components'] | Record<string, unknown>;
+    /** Typography overrides */
+    typography?: ThemeOptions['typography'];
+    /** Shape overrides (border radius) */
+    shape?: ThemeOptions['shape'];
+    /** Custom configuration for app-specific settings */
+    config?: Record<string, unknown>;
+}
+/**
+ * A Trinity theme preset with additional metadata
+ */
+export interface TrinityThemePreset {
+    /** The MUI theme object */
+    theme: ReturnType<typeof createTheme>;
+    /** Preset name */
+    name: string;
+    /** Theme mode */
+    mode: 'light' | 'dark';
+    /** Custom configuration passed to the preset */
+    config: Record<string, unknown>;
+}
+/**
+ * Factory to create a Trinity MUI theme preset with full customization.
+ * Use this for creating app-specific theme variations while maintaining Trinity branding.
+ *
+ * @example
+ * ```tsx
+ * // CRM App Preset - compact tables, specific colors
+ * const crmPreset = createTrinityThemePreset({
+ *   mode: 'light',
+ *   name: 'CRM',
+ *   palette: {
+ *     tertiary: { main: '#8B5CF6' },
+ *   },
+ *   components: {
+ *     MuiDataGrid: {
+ *       defaultProps: { density: 'compact' },
+ *     },
+ *   },
+ *   config: {
+ *     defaultPageSize: 25,
+ *     enableAI: true,
+ *   },
+ * });
+ *
+ * // Use the theme
+ * <ThemeProvider theme={crmPreset.theme}>
+ * ```
+ */
+export declare function createTrinityThemePreset(options: TrinityThemePresetOptions): TrinityThemePreset;
+/**
+ * Factory to create a Trinity MUI theme from tokens.
+ * For simple theme creation, use this function.
+ * For full preset customization, use createTrinityThemePreset instead.
+ *
+ * @param mode 'light' | 'dark'
+ * @param overrides Optional token overrides
+ */
+export declare function createTrinityTheme(mode: 'light' | 'dark', overrides?: Partial<TrinityTokens>): ReturnType<typeof createTheme>;
+export { baseTokens, semanticTokens, componentTokens, darkModeTokens, tokens } from './tokens';
+export { hierarchy, elevationHierarchy, typographicHierarchy, attentionHierarchy, scaleHierarchy, contrastHierarchy, interactiveHierarchy, spacingHierarchy, getElevation, getTypography, getAttentionColor, getHierarchySpacing, } from './tokens';
+export declare const brandColors: {
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    neutral: {
+        white: string;
+        lightGray: string;
+        gray100: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        darkBg: string;
+        darkPaper: string;
+    };
+};
+export declare const accessibleCombinations: {
+    whiteOnNavy: {
+        text: string;
+        bg: string;
+    };
+    whiteOnPurple: {
+        text: string;
+        bg: string;
+    };
+    navyOnWhite: {
+        text: string;
+        bg: string;
+    };
+    navyOnCoral: {
+        text: string;
+        bg: string;
+    };
+    navyOnAzure: {
+        text: string;
+        bg: string;
+    };
+    purpleOnWhite: {
+        text: string;
+        bg: string;
+    };
+    coralOnNavy: {
+        text: string;
+        bg: string;
+    };
+    azureOnNavy: {
+        text: string;
+        bg: string;
+    };
+};
+/**
+ * Trinity light theme (MUI Theme)
+ * @see createTrinityTheme
+ */
+export declare const lightTheme: import("@mui/material").Theme;
+/**
+ * Trinity dark theme (MUI Theme)
+ * @see createTrinityTheme
+ */
+export declare const darkTheme: import("@mui/material").Theme;
+export interface UseTrinityTokensResult {
+    /** All Trinity tokens */
+    tokens: TrinityTokens;
+    /** Base primitive tokens */
+    base: TrinityTokens['base'];
+    /** Semantic tokens */
+    semantic: TrinityTokens['semantic'];
+    /** Component-specific tokens */
+    component: TrinityTokens['component'];
+    /** Dark mode override tokens */
+    darkMode: TrinityTokens['darkMode'];
+    /** Current theme mode */
+    mode: 'light' | 'dark';
+    /** Whether dark mode is active */
+    isDarkMode: boolean;
+    /** Get the appropriate color value based on current mode */
+    getColor: <T extends string>(lightColor: T, darkColor?: T) => T;
+    /** Get semantic color with automatic dark mode handling */
+    getSemanticColor: (category: keyof TrinityTokens['semantic']['colors'], name: string) => string;
+    /** Helper to get spacing value in pixels */
+    spacing: (size: keyof TrinityTokens['base']['spacing']) => number;
+    /** Helper to get CSS spacing value */
+    spacingCss: (size: keyof TrinityTokens['base']['spacing']) => string;
+    /** Helper to get border radius */
+    radius: (size: keyof TrinityTokens['base']['borderRadius']) => number;
+    /** Helper to get shadow */
+    shadow: (size: keyof TrinityTokens['base']['shadows']) => string;
+}
+/**
+ * React hook to access Trinity design tokens with theme awareness.
+ * Provides typed access to all token layers and utility functions.
+ *
+ * @example
+ * ```tsx
+ * const { base, semantic, isDarkMode, spacing, getColor } = useTrinityTokens();
+ *
+ * <Box sx={{
+ *   backgroundColor: getColor(semantic.colors.background.primary),
+ *   padding: spacingCss(4),
+ *   borderRadius: radius('md'),
+ * }} />
+ * ```
+ */
+export declare function useTrinityTokens(): UseTrinityTokensResult;
+export type { TrinityTokens } from './tokens';
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}