@tirox-ui/preset 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# @tirox-ui/preset
+
+Framework-neutral Panda CSS inputs for Tirox UI.
+
+```ts
+import { createThemeCssVariables, slotRecipes } from '@tirox-ui/preset';
+
+const themeCss = createThemeCssVariables();
+const buttonRecipe = slotRecipes.button;
+```
+
+The preset is the single source of truth for primitive and semantic tokens,
+themes, slot recipes, contrast validation, and preset conformance. It uses
+Radix-inspired 12-step scales by default but custom presets may use another
+scale after mapping to the shared semantic contract.
+
+Consumers own the final Panda configuration, static extraction, and CSS
+generation. Solid and future framework adapters consume this package without
+owning renderer-specific styling.

package/dist/conformance.d.ts

@@ -0,0 +1,26 @@
+export declare const presetConformance: {
+    readonly requiredTokenGroups: readonly ['colors', 'spacing', 'radii', 'shadows', 'motion', 'layers'];
+    readonly requiredSemanticGroups: readonly ['text', 'surface', 'border', 'action', 'focus'];
+    readonly requiredRecipes: readonly ['button', 'input', 'checkbox', 'select', 'dialog', 'tooltip'];
+};
+export interface TiroxPresetShape {
+    primitiveTokens: {
+        [key: string]: unknown;
+    };
+    semanticTokens: {
+        colors: {
+            [key: string]: unknown;
+        };
+    };
+    slotRecipes: {
+        [key: string]: unknown;
+    };
+}
+export interface PresetConformanceResult {
+    passes: boolean;
+    missingTokenGroups: string[];
+    missingSemanticGroups: string[];
+    missingRecipes: string[];
+}
+export declare function validatePresetConformance(preset?: TiroxPresetShape): PresetConformanceResult;
+export declare function conformsToTiroxPreset(preset?: TiroxPresetShape): boolean;

package/dist/conformance.js

@@ -0,0 +1,21 @@
+import { primitiveTokens, semanticTokens } from './tokens';
+import { slotRecipes } from './recipes';
+export const presetConformance = {
+    requiredTokenGroups: ['colors', 'spacing', 'radii', 'shadows', 'motion', 'layers'],
+    requiredSemanticGroups: ['text', 'surface', 'border', 'action', 'focus'],
+    requiredRecipes: ['button', 'input', 'checkbox', 'select', 'dialog', 'tooltip'],
+};
+export function validatePresetConformance(preset = { primitiveTokens, semanticTokens, slotRecipes }) {
+    const missingTokenGroups = presetConformance.requiredTokenGroups.filter((key) => !(key in preset.primitiveTokens));
+    const missingSemanticGroups = presetConformance.requiredSemanticGroups.filter((key) => !(key in preset.semanticTokens.colors));
+    const missingRecipes = presetConformance.requiredRecipes.filter((key) => !(key in preset.slotRecipes));
+    return {
+        passes: !missingTokenGroups.length && !missingSemanticGroups.length && !missingRecipes.length,
+        missingTokenGroups,
+        missingSemanticGroups,
+        missingRecipes,
+    };
+}
+export function conformsToTiroxPreset(preset = { primitiveTokens, semanticTokens, slotRecipes }) {
+    return validatePresetConformance(preset).passes;
+}

package/dist/contrast.d.ts

@@ -0,0 +1,15 @@
+export interface ContrastCheck {
+    name: string;
+    foreground: string;
+    background: string;
+    ratio: number;
+    passes: boolean;
+}
+export interface ContrastInput {
+    name: string;
+    foreground: string;
+    background: string;
+    minimumRatio?: number;
+}
+export declare function contrastRatio(foreground: string, background: string): number;
+export declare function validateSemanticContrast(checks?: readonly ContrastInput[]): ContrastCheck[];

package/dist/contrast.js

@@ -0,0 +1,29 @@
+const defaultContrastInputs = [
+    { name: 'text-on-surface', foreground: '#1f2024', background: '#fcfcfd' },
+    { name: 'inverse-on-action', foreground: '#fcfcfd', background: '#0d74ce' },
+    { name: 'danger-on-surface', foreground: '#ce2c31', background: '#fcfcfd' },
+];
+function luminance(hex) {
+    const value = hex.replace('#', '');
+    if (!/^[0-9a-f]{6}$/i.test(value))
+        throw new Error(`Expected a six-digit hex color: ${hex}`);
+    const channels = [0, 2, 4].map((index) => Number.parseInt(value.slice(index, index + 2), 16) / 255);
+    const linear = channels.map((channel) => channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+}
+export function contrastRatio(foreground, background) {
+    const foregroundLuminance = luminance(foreground);
+    const backgroundLuminance = luminance(background);
+    const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+    const darker = Math.min(foregroundLuminance, backgroundLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+export function validateSemanticContrast(checks = defaultContrastInputs) {
+    return checks.map(({ name, foreground, background, minimumRatio = 4.5 }) => ({
+        name,
+        foreground,
+        background,
+        ratio: contrastRatio(foreground, background),
+        passes: contrastRatio(foreground, background) >= minimumRatio,
+    }));
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { primitiveTokens, semanticTokens, themes } from './tokens';
+export { slotRecipes } from './recipes';
+export type { ButtonSize, ButtonVariant } from './recipes';
+export { defineTiroxPandaConfig, tiroxPandaConfig } from './panda';
+export { conformsToTiroxPreset, presetConformance, validatePresetConformance } from './conformance';
+export type { PresetConformanceResult, TiroxPresetShape } from './conformance';
+export { contrastRatio, validateSemanticContrast } from './contrast';
+export type { ContrastCheck, ContrastInput } from './contrast';
+export { createThemeCssVariables, defaultThemeVariables, resolveSystemTheme, resolveTheme, } from './theme';
+export type { ResolvedTheme, ThemeMode, ThemeVariables } from './theme';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { primitiveTokens, semanticTokens, themes } from './tokens';
+export { slotRecipes } from './recipes';
+export { defineTiroxPandaConfig, tiroxPandaConfig } from './panda';
+export { conformsToTiroxPreset, presetConformance, validatePresetConformance } from './conformance';
+export { contrastRatio, validateSemanticContrast } from './contrast';
+export { createThemeCssVariables, defaultThemeVariables, resolveSystemTheme, resolveTheme, } from './theme';

package/dist/panda.d.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@pandacss/dev';
+export declare const tiroxPandaConfig: import("@pandacss/dev").Config & {
+    name: string;
+};
+export declare const defineTiroxPandaConfig: (config?: Parameters<typeof defineConfig>[0]) => import("@pandacss/dev").Config & {
+    name: string;
+};

package/dist/panda.js

@@ -0,0 +1,46 @@
+import { defineConfig } from '@pandacss/dev';
+import { primitiveTokens, semanticTokens } from './tokens';
+import { slotRecipes } from './recipes';
+export const tiroxPandaConfig = defineConfig({
+    theme: {
+        tokens: {
+            colors: Object.fromEntries(Object.entries(primitiveTokens.colors).map(([scale, values]) => [
+                scale,
+                Object.fromEntries(Object.entries(values).map(([step, value]) => [step, { value }])),
+            ])),
+            spacing: Object.fromEntries(Object.entries(primitiveTokens.spacing).map(([key, value]) => [key, { value }])),
+            radii: Object.fromEntries(Object.entries(primitiveTokens.radii).map(([key, value]) => [key, { value }])),
+            shadows: Object.fromEntries(Object.entries(primitiveTokens.shadows).map(([key, value]) => [key, { value }])),
+            durations: Object.fromEntries(Object.entries(primitiveTokens.motion).map(([key, value]) => [key, { value }])),
+            zIndex: Object.fromEntries(Object.entries(primitiveTokens.layers).map(([key, value]) => [key, { value }])),
+        },
+        semanticTokens: {
+            colors: Object.fromEntries(Object.entries(semanticTokens.colors).map(([group, values]) => [
+                group,
+                Object.fromEntries(Object.entries(values).map(([key, value]) => [key, { value }])),
+            ])),
+            shadows: Object.fromEntries(Object.entries(semanticTokens.shadows).map(([key, value]) => [key, { value }])),
+        },
+        slotRecipes: Object.fromEntries(Object.entries(slotRecipes).map(([name, recipe]) => [
+            name,
+            { className: `tx-${name}`, ...recipe },
+        ])),
+    },
+    conditions: { reducedMotion: '@media (prefers-reduced-motion: reduce)' },
+    globalCss: {
+        ':root': { color: '{colors.text.default}', background: '{colors.surface.default}' },
+        '[data-theme="dark"]': {
+            color: '{colors.gray.1}',
+            background: '{colors.gray.12}',
+        },
+        '.dark': {
+            color: '{colors.gray.1}',
+            background: '{colors.gray.12}',
+        },
+    },
+});
+export const defineTiroxPandaConfig = (config = {}) => defineConfig({
+    ...tiroxPandaConfig,
+    ...config,
+    theme: { ...tiroxPandaConfig.theme, ...config.theme },
+});

package/dist/recipes.d.ts

@@ -0,0 +1,299 @@
+export declare const slotRecipes: {
+    readonly button: {
+        readonly slots: readonly ['root', 'icon'];
+        readonly base: {
+            readonly root: {
+                readonly alignItems: 'center';
+                readonly display: 'inline-flex';
+                readonly justifyContent: 'center';
+                readonly borderRadius: 'md';
+                readonly fontWeight: '600';
+                readonly transition: 'background 180ms ease, color 180ms ease';
+                readonly _reducedMotion: {
+                    readonly transition: 'none';
+                };
+            };
+            readonly icon: {
+                readonly flexShrink: 0;
+            };
+        };
+        readonly variants: {
+            readonly variant: {
+                readonly solid: {
+                    readonly root: {
+                        readonly background: 'action.primary';
+                        readonly color: 'text.inverse';
+                        readonly _hover: {
+                            readonly background: 'action.primaryHover';
+                        };
+                    };
+                };
+                readonly outline: {
+                    readonly root: {
+                        readonly borderWidth: '1px';
+                        readonly borderColor: 'border.default';
+                        readonly color: 'text.default';
+                        readonly _hover: {
+                            readonly background: 'surface.subtle';
+                        };
+                    };
+                };
+                readonly ghost: {
+                    readonly root: {
+                        readonly color: 'text.default';
+                        readonly _hover: {
+                            readonly background: 'surface.subtle';
+                        };
+                    };
+                };
+            };
+            readonly size: {
+                readonly sm: {
+                    readonly root: {
+                        readonly minHeight: '2rem';
+                        readonly paddingInline: '0.75rem';
+                        readonly fontSize: '0.875rem';
+                    };
+                };
+                readonly md: {
+                    readonly root: {
+                        readonly minHeight: '2.5rem';
+                        readonly paddingInline: '1rem';
+                        readonly fontSize: '1rem';
+                    };
+                };
+                readonly lg: {
+                    readonly root: {
+                        readonly minHeight: '3rem';
+                        readonly paddingInline: '1.25rem';
+                        readonly fontSize: '1.125rem';
+                    };
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly variant: 'solid';
+            readonly size: 'md';
+        };
+    };
+    readonly input: {
+        readonly slots: readonly ['root'];
+        readonly className: 'tx-input';
+        readonly base: {
+            readonly root: {
+                readonly appearance: 'none';
+                readonly borderWidth: '1px';
+                readonly borderColor: 'border.default';
+                readonly borderRadius: 'md';
+                readonly color: 'text.default';
+                readonly background: 'surface.default';
+                readonly minHeight: '2.5rem';
+                readonly paddingInline: '0.75rem';
+                readonly transition: 'border-color 180ms ease, box-shadow 180ms ease';
+                readonly _reducedMotion: {
+                    readonly transition: 'none';
+                };
+            };
+        };
+        readonly variants: {
+            readonly invalid: {
+                readonly true: {
+                    readonly root: {
+                        readonly borderColor: 'action.danger';
+                    };
+                };
+                readonly false: {
+                    readonly root: {};
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly invalid: 'false';
+        };
+    };
+    readonly checkbox: {
+        readonly slots: readonly ['root', 'control', 'indicator', 'label'];
+        readonly className: 'tx-checkbox';
+        readonly base: {
+            readonly root: {
+                readonly alignItems: 'center';
+                readonly display: 'inline-flex';
+                readonly gap: '0.5rem';
+            };
+            readonly control: {
+                readonly alignItems: 'center';
+                readonly borderWidth: '1px';
+                readonly borderColor: 'border.default';
+                readonly borderRadius: 'sm';
+                readonly display: 'inline-flex';
+                readonly height: '1.25rem';
+                readonly justifyContent: 'center';
+                readonly width: '1.25rem';
+            };
+            readonly indicator: {
+                readonly color: 'text.inverse';
+                readonly fontSize: '0.875rem';
+            };
+            readonly label: {
+                readonly color: 'text.default';
+            };
+        };
+        readonly variants: {
+            readonly disabled: {
+                readonly true: {
+                    readonly root: {
+                        readonly opacity: '0.5';
+                    };
+                };
+                readonly false: {
+                    readonly root: {};
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly disabled: 'false';
+        };
+    };
+    readonly select: {
+        readonly slots: readonly ['root', 'trigger', 'content', 'item', 'value'];
+        readonly className: 'tx-select';
+        readonly base: {
+            readonly root: {
+                readonly appearance: 'none';
+                readonly background: 'surface.default';
+                readonly borderWidth: '1px';
+                readonly borderColor: 'border.default';
+                readonly borderRadius: 'md';
+                readonly color: 'text.default';
+                readonly minHeight: '2.5rem';
+                readonly paddingInline: '0.75rem';
+            };
+            readonly trigger: {
+                readonly width: '100%';
+            };
+            readonly content: {
+                readonly background: 'surface.elevated';
+                readonly color: 'text.default';
+            };
+            readonly item: {
+                readonly padding: '0.5rem';
+            };
+            readonly value: {
+                readonly color: 'text.default';
+            };
+        };
+        readonly variants: {
+            readonly invalid: {
+                readonly true: {
+                    readonly root: {
+                        readonly borderColor: 'action.danger';
+                    };
+                };
+                readonly false: {
+                    readonly root: {};
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly invalid: 'false';
+        };
+    };
+    readonly dialog: {
+        readonly slots: readonly ['root', 'content', 'title', 'description', 'close'];
+        readonly className: 'tx-dialog';
+        readonly base: {
+            readonly root: {
+                readonly borderWidth: '0';
+                readonly borderRadius: 'lg';
+                readonly background: 'surface.elevated';
+                readonly color: 'text.default';
+                readonly boxShadow: 'md';
+                readonly padding: '1.5rem';
+                readonly transition: 'opacity 180ms ease';
+                readonly _reducedMotion: {
+                    readonly transition: 'none';
+                };
+            };
+            readonly content: {
+                readonly display: 'grid';
+                readonly gap: '1rem';
+            };
+            readonly title: {
+                readonly fontSize: '1.25rem';
+                readonly fontWeight: '600';
+            };
+            readonly description: {
+                readonly color: 'text.muted';
+            };
+            readonly close: {
+                readonly color: 'text.muted';
+            };
+        };
+        readonly variants: {
+            readonly state: {
+                readonly open: {
+                    readonly root: {
+                        readonly opacity: '1';
+                    };
+                };
+                readonly closed: {
+                    readonly root: {
+                        readonly opacity: '0';
+                    };
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly state: 'closed';
+        };
+    };
+    readonly tooltip: {
+        readonly slots: readonly ['root', 'trigger', 'content', 'arrow'];
+        readonly className: 'tx-tooltip';
+        readonly base: {
+            readonly root: {
+                readonly display: 'inline-flex';
+                readonly position: 'relative';
+            };
+            readonly trigger: {
+                readonly display: 'inline-flex';
+            };
+            readonly content: {
+                readonly background: 'gray.12';
+                readonly borderRadius: 'sm';
+                readonly boxShadow: 'md';
+                readonly color: 'gray.1';
+                readonly padding: '0.5rem 0.75rem';
+                readonly fontSize: '0.875rem';
+                readonly transition: 'opacity 120ms ease';
+                readonly _reducedMotion: {
+                    readonly transition: 'none';
+                };
+            };
+            readonly arrow: {
+                readonly background: 'gray.12';
+                readonly height: '0.5rem';
+                readonly width: '0.5rem';
+            };
+        };
+        readonly variants: {
+            readonly state: {
+                readonly open: {
+                    readonly content: {
+                        readonly opacity: '1';
+                    };
+                };
+                readonly closed: {
+                    readonly content: {
+                        readonly opacity: '0';
+                    };
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly state: 'closed';
+        };
+    };
+};
+export type ButtonVariant = keyof typeof slotRecipes.button.variants.variant;
+export type ButtonSize = keyof typeof slotRecipes.button.variants.size;

package/dist/recipes.js

@@ -0,0 +1,158 @@
+export const slotRecipes = {
+    button: {
+        slots: ['root', 'icon'],
+        base: {
+            root: {
+                alignItems: 'center',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                borderRadius: 'md',
+                fontWeight: '600',
+                transition: 'background 180ms ease, color 180ms ease',
+                _reducedMotion: { transition: 'none' },
+            },
+            icon: { flexShrink: 0 },
+        },
+        variants: {
+            variant: {
+                solid: {
+                    root: {
+                        background: 'action.primary',
+                        color: 'text.inverse',
+                        _hover: { background: 'action.primaryHover' },
+                    },
+                },
+                outline: {
+                    root: {
+                        borderWidth: '1px',
+                        borderColor: 'border.default',
+                        color: 'text.default',
+                        _hover: { background: 'surface.subtle' },
+                    },
+                },
+                ghost: { root: { color: 'text.default', _hover: { background: 'surface.subtle' } } },
+            },
+            size: {
+                sm: { root: { minHeight: '2rem', paddingInline: '0.75rem', fontSize: '0.875rem' } },
+                md: { root: { minHeight: '2.5rem', paddingInline: '1rem', fontSize: '1rem' } },
+                lg: { root: { minHeight: '3rem', paddingInline: '1.25rem', fontSize: '1.125rem' } },
+            },
+        },
+        defaultVariants: { variant: 'solid', size: 'md' },
+    },
+    input: {
+        slots: ['root'],
+        className: 'tx-input',
+        base: {
+            root: {
+                appearance: 'none',
+                borderWidth: '1px',
+                borderColor: 'border.default',
+                borderRadius: 'md',
+                color: 'text.default',
+                background: 'surface.default',
+                minHeight: '2.5rem',
+                paddingInline: '0.75rem',
+                transition: 'border-color 180ms ease, box-shadow 180ms ease',
+                _reducedMotion: { transition: 'none' },
+            },
+        },
+        variants: {
+            invalid: {
+                true: { root: { borderColor: 'action.danger' } },
+                false: { root: {} },
+            },
+        },
+        defaultVariants: { invalid: 'false' },
+    },
+    checkbox: {
+        slots: ['root', 'control', 'indicator', 'label'],
+        className: 'tx-checkbox',
+        base: {
+            root: { alignItems: 'center', display: 'inline-flex', gap: '0.5rem' },
+            control: {
+                alignItems: 'center',
+                borderWidth: '1px',
+                borderColor: 'border.default',
+                borderRadius: 'sm',
+                display: 'inline-flex',
+                height: '1.25rem',
+                justifyContent: 'center',
+                width: '1.25rem',
+            },
+            indicator: { color: 'text.inverse', fontSize: '0.875rem' },
+            label: { color: 'text.default' },
+        },
+        variants: { disabled: { true: { root: { opacity: '0.5' } }, false: { root: {} } } },
+        defaultVariants: { disabled: 'false' },
+    },
+    select: {
+        slots: ['root', 'trigger', 'content', 'item', 'value'],
+        className: 'tx-select',
+        base: {
+            root: {
+                appearance: 'none',
+                background: 'surface.default',
+                borderWidth: '1px',
+                borderColor: 'border.default',
+                borderRadius: 'md',
+                color: 'text.default',
+                minHeight: '2.5rem',
+                paddingInline: '0.75rem',
+            },
+            trigger: { width: '100%' },
+            content: { background: 'surface.elevated', color: 'text.default' },
+            item: { padding: '0.5rem' },
+            value: { color: 'text.default' },
+        },
+        variants: {
+            invalid: { true: { root: { borderColor: 'action.danger' } }, false: { root: {} } },
+        },
+        defaultVariants: { invalid: 'false' },
+    },
+    dialog: {
+        slots: ['root', 'content', 'title', 'description', 'close'],
+        className: 'tx-dialog',
+        base: {
+            root: {
+                borderWidth: '0',
+                borderRadius: 'lg',
+                background: 'surface.elevated',
+                color: 'text.default',
+                boxShadow: 'md',
+                padding: '1.5rem',
+                transition: 'opacity 180ms ease',
+                _reducedMotion: { transition: 'none' },
+            },
+            content: { display: 'grid', gap: '1rem' },
+            title: { fontSize: '1.25rem', fontWeight: '600' },
+            description: { color: 'text.muted' },
+            close: { color: 'text.muted' },
+        },
+        variants: { state: { open: { root: { opacity: '1' } }, closed: { root: { opacity: '0' } } } },
+        defaultVariants: { state: 'closed' },
+    },
+    tooltip: {
+        slots: ['root', 'trigger', 'content', 'arrow'],
+        className: 'tx-tooltip',
+        base: {
+            root: { display: 'inline-flex', position: 'relative' },
+            trigger: { display: 'inline-flex' },
+            content: {
+                background: 'gray.12',
+                borderRadius: 'sm',
+                boxShadow: 'md',
+                color: 'gray.1',
+                padding: '0.5rem 0.75rem',
+                fontSize: '0.875rem',
+                transition: 'opacity 120ms ease',
+                _reducedMotion: { transition: 'none' },
+            },
+            arrow: { background: 'gray.12', height: '0.5rem', width: '0.5rem' },
+        },
+        variants: {
+            state: { open: { content: { opacity: '1' } }, closed: { content: { opacity: '0' } } },
+        },
+        defaultVariants: { state: 'closed' },
+    },
+};

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+export type ThemeVariables = Readonly<Record<string, string>>;
+export declare const defaultThemeVariables: Readonly<Record<ResolvedTheme, ThemeVariables>>;
+/** Resolves a persisted theme without reading browser globals, so it is SSR-safe. */
+export declare function resolveTheme(mode: ThemeMode, systemTheme?: ResolvedTheme): ResolvedTheme;
+/** Reads system preference only when the caller provides a browser matchMedia implementation. */
+export declare function resolveSystemTheme(matchMedia?: (query: string) => {
+    matches: boolean;
+}): ResolvedTheme;
+export declare function createThemeCssVariables(variables?: Readonly<Record<ResolvedTheme, ThemeVariables>>, options?: {
+    rootSelector?: string;
+    darkSelector?: string;
+}): string;

package/dist/theme.js

@@ -0,0 +1,28 @@
+export const defaultThemeVariables = {
+    light: {
+        '--tx-color-surface-default': '#fcfcfd',
+        '--tx-color-text-default': '#1f2024',
+    },
+    dark: {
+        '--tx-color-surface-default': '#1f2024',
+        '--tx-color-text-default': '#fcfcfd',
+    },
+};
+/** Resolves a persisted theme without reading browser globals, so it is SSR-safe. */
+export function resolveTheme(mode, systemTheme = 'light') {
+    if (mode === 'light' || mode === 'dark')
+        return mode;
+    return systemTheme;
+}
+/** Reads system preference only when the caller provides a browser matchMedia implementation. */
+export function resolveSystemTheme(matchMedia) {
+    return matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+export function createThemeCssVariables(variables = defaultThemeVariables, options = {}) {
+    const rootSelector = options.rootSelector ?? ':root';
+    const darkSelector = options.darkSelector ?? '[data-theme="dark"]';
+    const render = (theme) => Object.entries(theme)
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join('\n');
+    return `${rootSelector} {\n${render(variables.light)}\n}\n\n${darkSelector} {\n${render(variables.dark)}\n}`;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,118 @@
+export declare const primitiveTokens: {
+    readonly colors: {
+        readonly gray: {
+            readonly 1: '#fcfcfd';
+            readonly 2: '#f9f9fb';
+            readonly 3: '#f0f0f3';
+            readonly 4: '#e8e8ec';
+            readonly 5: '#e0e1e6';
+            readonly 6: '#d9d9e0';
+            readonly 7: '#ceced8';
+            readonly 8: '#b9b9c8';
+            readonly 9: '#8b8d98';
+            readonly 10: '#80818b';
+            readonly 11: '#62636c';
+            readonly 12: '#1f2024';
+        };
+        readonly blue: {
+            readonly 1: '#fbfdff';
+            readonly 2: '#f4faff';
+            readonly 3: '#e6f4fe';
+            readonly 4: '#d5efff';
+            readonly 5: '#c2e5ff';
+            readonly 6: '#acd8fc';
+            readonly 7: '#91c8f6';
+            readonly 8: '#74b0ec';
+            readonly 9: '#0090ff';
+            readonly 10: '#0585e5';
+            readonly 11: '#0d74ce';
+            readonly 12: '#113264';
+        };
+        readonly red: {
+            readonly 1: '#fffcfc';
+            readonly 2: '#fff8f8';
+            readonly 3: '#ffebec';
+            readonly 4: '#ffdbdc';
+            readonly 5: '#ffcdce';
+            readonly 6: '#fdbdbe';
+            readonly 7: '#f5a9aa';
+            readonly 8: '#eb8e90';
+            readonly 9: '#e5484d';
+            readonly 10: '#dc3e42';
+            readonly 11: '#ce2c31';
+            readonly 12: '#641723';
+        };
+    };
+    readonly spacing: {
+        readonly 1: '0.25rem';
+        readonly 2: '0.5rem';
+        readonly 3: '0.75rem';
+        readonly 4: '1rem';
+        readonly 5: '1.25rem';
+        readonly 6: '1.5rem';
+        readonly 8: '2rem';
+        readonly 10: '2.5rem';
+    };
+    readonly radii: {
+        readonly sm: '0.25rem';
+        readonly md: '0.5rem';
+        readonly lg: '0.75rem';
+        readonly full: '9999px';
+    };
+    readonly shadows: {
+        readonly sm: '0 1px 2px rgb(0 0 0 / 0.08)';
+        readonly md: '0 4px 12px rgb(0 0 0 / 0.12)';
+    };
+    readonly motion: {
+        readonly fast: '120ms';
+        readonly normal: '180ms';
+        readonly slow: '260ms';
+        readonly ease: 'cubic-bezier(0.2, 0, 0, 1)';
+    };
+    readonly layers: {
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly dialog: 1100;
+        readonly toast: 1200;
+        readonly tooltip: 1300;
+    };
+};
+export declare const semanticTokens: {
+    readonly colors: {
+        readonly text: {
+            readonly default: '{colors.gray.12}';
+            readonly muted: '{colors.gray.11}';
+            readonly inverse: '{colors.gray.1}';
+        };
+        readonly surface: {
+            readonly default: '{colors.gray.1}';
+            readonly subtle: '{colors.gray.2}';
+            readonly elevated: '#ffffff';
+        };
+        readonly border: {
+            readonly default: '{colors.gray.6}';
+            readonly strong: '{colors.gray.8}';
+        };
+        readonly action: {
+            readonly primary: '{colors.blue.11}';
+            readonly primaryHover: '{colors.blue.12}';
+            readonly danger: '{colors.red.9}';
+        };
+        readonly focus: {
+            readonly ring: '{colors.blue.8}';
+        };
+    };
+    readonly shadows: {
+        readonly focus: '0 0 0 3px {colors.blue.5}';
+    };
+};
+export declare const themes: {
+    readonly light: {
+        readonly surface: '{colors.gray.1}';
+        readonly text: '{colors.gray.12}';
+    };
+    readonly dark: {
+        readonly surface: '{colors.gray.12}';
+        readonly text: '{colors.gray.1}';
+    };
+};

package/dist/tokens.js

@@ -0,0 +1,78 @@
+export const primitiveTokens = {
+    colors: {
+        gray: {
+            1: '#fcfcfd',
+            2: '#f9f9fb',
+            3: '#f0f0f3',
+            4: '#e8e8ec',
+            5: '#e0e1e6',
+            6: '#d9d9e0',
+            7: '#ceced8',
+            8: '#b9b9c8',
+            9: '#8b8d98',
+            10: '#80818b',
+            11: '#62636c',
+            12: '#1f2024',
+        },
+        blue: {
+            1: '#fbfdff',
+            2: '#f4faff',
+            3: '#e6f4fe',
+            4: '#d5efff',
+            5: '#c2e5ff',
+            6: '#acd8fc',
+            7: '#91c8f6',
+            8: '#74b0ec',
+            9: '#0090ff',
+            10: '#0585e5',
+            11: '#0d74ce',
+            12: '#113264',
+        },
+        red: {
+            1: '#fffcfc',
+            2: '#fff8f8',
+            3: '#ffebec',
+            4: '#ffdbdc',
+            5: '#ffcdce',
+            6: '#fdbdbe',
+            7: '#f5a9aa',
+            8: '#eb8e90',
+            9: '#e5484d',
+            10: '#dc3e42',
+            11: '#ce2c31',
+            12: '#641723',
+        },
+    },
+    spacing: {
+        1: '0.25rem',
+        2: '0.5rem',
+        3: '0.75rem',
+        4: '1rem',
+        5: '1.25rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+    },
+    radii: { sm: '0.25rem', md: '0.5rem', lg: '0.75rem', full: '9999px' },
+    shadows: { sm: '0 1px 2px rgb(0 0 0 / 0.08)', md: '0 4px 12px rgb(0 0 0 / 0.12)' },
+    motion: { fast: '120ms', normal: '180ms', slow: '260ms', ease: 'cubic-bezier(0.2, 0, 0, 1)' },
+    layers: { base: 0, dropdown: 1000, dialog: 1100, toast: 1200, tooltip: 1300 },
+};
+export const semanticTokens = {
+    colors: {
+        text: { default: '{colors.gray.12}', muted: '{colors.gray.11}', inverse: '{colors.gray.1}' },
+        surface: { default: '{colors.gray.1}', subtle: '{colors.gray.2}', elevated: '#ffffff' },
+        border: { default: '{colors.gray.6}', strong: '{colors.gray.8}' },
+        action: {
+            primary: '{colors.blue.11}',
+            primaryHover: '{colors.blue.12}',
+            danger: '{colors.red.9}',
+        },
+        focus: { ring: '{colors.blue.8}' },
+    },
+    shadows: { focus: '0 0 0 3px {colors.blue.5}' },
+};
+export const themes = {
+    light: { surface: '{colors.gray.1}', text: '{colors.gray.12}' },
+    dark: { surface: '{colors.gray.12}', text: '{colors.gray.1}' },
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@tirox-ui/preset",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tanangular/tirox-ui.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./recipes": {
+      "types": "./dist/recipes.d.ts",
+      "import": "./dist/recipes.js"
+    },
+    "./panda": {
+      "types": "./dist/panda.d.ts",
+      "import": "./dist/panda.js"
+    },
+    "./conformance": {
+      "types": "./dist/conformance.d.ts",
+      "import": "./dist/conformance.js"
+    },
+    "./contrast": {
+      "types": "./dist/contrast.d.ts",
+      "import": "./dist/contrast.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "node ../../scripts/clean-dist.mjs dist && tsc -p tsconfig.build.json",
+    "prepublishOnly": "pnpm build",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@pandacss/dev": "^1.12.0"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.11"
+  }
+}