@stylixui/types 0.1.0

package/dist/compiler.d.ts

@@ -0,0 +1,44 @@
+import type { TokenConfig } from './tokens.js';
+import type { UIComponent } from './semantic.js';
+/** Configuration passed to the Stylix compiler */
+export interface CompilerConfig {
+    tokens: TokenConfig;
+    /** Which components to generate styles for (defaults to all) */
+    components?: UIComponent[];
+    /** CSS layer order override */
+    layers?: string[];
+    /** Custom prefix for CSS variables (default: 'sx') */
+    prefix?: string;
+}
+/** A single generated CSS rule */
+export interface CSSRule {
+    selector: string;
+    properties: Record<string, string>;
+}
+/** A CSS layer with its rules */
+export interface CSSLayer {
+    name: string;
+    rules: CSSRule[];
+    /** Raw CSS to include directly (e.g., for @media blocks) */
+    raw?: string;
+}
+/** Complete compiler output */
+export interface CompilerOutput {
+    /** The layer ordering declaration */
+    layerOrder: string[];
+    /** Generated CSS layers with their rules */
+    layers: CSSLayer[];
+    /** Full compiled CSS string */
+    css: string;
+}
+/** Options for a single component compilation pass */
+export interface ComponentStyleDef {
+    component: UIComponent;
+    /** Base styles applied to all instances of this component */
+    base: Record<string, string>;
+    /** Variant styles keyed by semantic dimension + value */
+    variants: Record<string, Record<string, Record<string, string>>>;
+    /** State styles (hover, focus, disabled, etc.) */
+    states?: Record<string, Record<string, string>>;
+}
+//# sourceMappingURL=compiler.d.ts.map

package/dist/compiler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,eAAe,CAAC;AAEhE,kDAAkD;AAClD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,WAAW,CAAC;IACpB,gEAAgE;IAChE,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,kCAAkC;AAClC,MAAM,WAAW,OAAO;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,iCAAiC;AACjC,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,+BAA+B;AAC/B,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,4CAA4C;IAC5C,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,sDAAsD;AACtD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,CAAC;IACvB,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IACjE,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACjD"}

package/dist/compiler.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=compiler.js.map

package/dist/compiler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './semantic.js';
+export * from './tokens.js';
+export * from './compiler.js';
+export * from './schema.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './semantic.js';
+export * from './tokens.js';
+export * from './compiler.js';
+export * from './schema.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/jsx.d.ts

@@ -0,0 +1,29 @@
+/**
+ * JSX type augmentation for Stylix semantic attributes.
+ *
+ * Import this module in your app to enable `ui`, `tone`, `emphasis`, etc.
+ * on all HTML elements in JSX:
+ *
+ *   import '@stylixui/types/jsx';
+ *
+ * Or add it to your tsconfig types array.
+ */
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        ui?: string;
+        tone?: string;
+        emphasis?: string;
+        size?: string;
+        density?: string;
+        surface?: string;
+        radius?: string;
+        shadow?: string;
+        gap?: string;
+        align?: string;
+        weight?: string;
+        direction?: string;
+        padding?: string;
+    }
+}
+export {};
+//# sourceMappingURL=jsx.d.ts.map

package/dist/jsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx.d.ts","sourceRoot":"","sources":["../src/jsx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,cAAc,CAAC,CAAC;QACxB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB;CACF"}

package/dist/jsx.js

@@ -0,0 +1,12 @@
+/**
+ * JSX type augmentation for Stylix semantic attributes.
+ *
+ * Import this module in your app to enable `ui`, `tone`, `emphasis`, etc.
+ * on all HTML elements in JSX:
+ *
+ *   import '@stylixui/types/jsx';
+ *
+ * Or add it to your tsconfig types array.
+ */
+export {};
+//# sourceMappingURL=jsx.js.map

package/dist/jsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx.js","sourceRoot":"","sources":["../src/jsx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG"}

package/dist/schema.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates a JSON Schema object that fully describes the Stylix semantic
+ * vocabulary. Intended for consumption by LLMs, AI code generators, and
+ * validation tooling so they can produce valid Stylix markup.
+ */
+export declare function generateSchema(): Record<string, unknown>;
+//# sourceMappingURL=schema.d.ts.map

package/dist/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAuFA;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CA8ExD"}

package/dist/schema.js

@@ -0,0 +1,158 @@
+import { COMPONENT_DIMENSIONS } from './semantic.js';
+/**
+ * Descriptions for each UI component type.
+ */
+const COMPONENT_DESCRIPTIONS = {
+    button: 'Interactive button element for user actions',
+    card: 'Container with visual grouping via surface treatment, shadow, and padding',
+    stack: 'Layout component that arranges children in a row or column with gap spacing',
+    text: 'Typographic element with semantic size, weight, and tone',
+    input: 'Form input field for user data entry',
+    section: 'Page-level content region with padding and optional surface treatment',
+    badge: 'Small label or status indicator, often paired with tone and emphasis',
+    container: 'Centered max-width container for page layout',
+    divider: 'Horizontal or vertical divider line for separating content',
+    alert: 'Contextual feedback message for user actions or system events',
+    select: 'Dropdown selection input for choosing from predefined options',
+    textarea: 'Multi-line text input field for longer form content',
+    avatar: 'Visual representation of a user or entity, typically circular',
+    toggle: 'Binary on/off switch control for boolean settings',
+    tabs: 'Tabbed navigation for switching between content panels',
+    dialog: 'Modal overlay for focused user interactions or confirmations',
+    tooltip: 'Small contextual popup that appears on hover or focus',
+    table: 'Structured data display with rows and columns',
+    nav: 'Navigation container for organizing links and menu items',
+    checkbox: 'Binary selection control for toggling individual options',
+    radio: 'Single-selection control within a mutually exclusive group',
+};
+/**
+ * Full definition of each semantic dimension: its allowed values and description.
+ */
+const DIMENSION_DEFINITIONS = {
+    tone: {
+        description: 'Color intention — what role does this element play?',
+        values: ['neutral', 'brand', 'success', 'warning', 'danger'],
+    },
+    emphasis: {
+        description: 'Visual prominence — how loud should this element be?',
+        values: ['low', 'medium', 'high'],
+    },
+    size: {
+        description: 'Physical scale of the element',
+        values: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    density: {
+        description: 'Content density controlling internal spacing',
+        values: ['compact', 'comfortable', 'spacious'],
+    },
+    surface: {
+        description: 'Background treatment for container elements',
+        values: ['flat', 'subtle', 'elevated'],
+    },
+    radius: {
+        description: 'Corner rounding applied to the element',
+        values: ['none', 'sm', 'md', 'lg', 'pill'],
+    },
+    shadow: {
+        description: 'Drop shadow depth for visual elevation',
+        values: ['none', 'sm', 'md', 'lg'],
+    },
+    gap: {
+        description: 'Spacing between children in layout components',
+        values: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    align: {
+        description: 'Content alignment within the element',
+        values: ['start', 'center', 'end', 'stretch'],
+    },
+    weight: {
+        description: 'Text or font weight',
+        values: ['regular', 'medium', 'semibold', 'bold'],
+    },
+    direction: {
+        description: 'Layout direction for stack-like components',
+        values: ['horizontal', 'vertical'],
+    },
+    padding: {
+        description: 'Padding scale applied inside the element',
+        values: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+};
+/**
+ * Generates a JSON Schema object that fully describes the Stylix semantic
+ * vocabulary. Intended for consumption by LLMs, AI code generators, and
+ * validation tooling so they can produce valid Stylix markup.
+ */
+export function generateSchema() {
+    const components = Object.keys(COMPONENT_DIMENSIONS);
+    // Build per-component sub-schemas that list only the relevant dimensions.
+    const componentSchemas = {};
+    for (const comp of components) {
+        const relevantDims = COMPONENT_DIMENSIONS[comp];
+        const properties = {};
+        for (const dim of relevantDims) {
+            if (dim === 'ui')
+                continue;
+            const def = DIMENSION_DEFINITIONS[dim];
+            properties[dim] = {
+                type: 'string',
+                description: def.description,
+                enum: def.values,
+            };
+        }
+        componentSchemas[comp] = {
+            description: COMPONENT_DESCRIPTIONS[comp],
+            type: 'object',
+            properties: {
+                ui: { type: 'string', const: comp },
+                ...properties,
+            },
+            required: ['ui'],
+            additionalProperties: false,
+        };
+    }
+    // Build the full dimension property map (all dimensions, for the top-level
+    // "any element" schema).
+    const allDimensionProperties = {};
+    for (const [key, def] of Object.entries(DIMENSION_DEFINITIONS)) {
+        allDimensionProperties[key] = {
+            type: 'string',
+            description: def.description,
+            enum: def.values,
+        };
+    }
+    return {
+        $schema: 'https://json-schema.org/draft/2020-12/schema',
+        $id: 'https://stylix.dev/schema.json',
+        title: 'Stylix Semantic Vocabulary',
+        description: 'JSON Schema describing every valid Stylix component, semantic dimension, and their allowed values. Use this to generate or validate Stylix markup.',
+        type: 'object',
+        properties: {
+            ui: {
+                type: 'string',
+                description: 'Stylix component type',
+                enum: components,
+            },
+            ...allDimensionProperties,
+        },
+        required: ['ui'],
+        additionalProperties: true,
+        // Conditional schemas: when ui equals a specific component, only its
+        // relevant dimensions are included.
+        oneOf: components.map((comp) => ({
+            $ref: `#/$defs/components/${comp}`,
+        })),
+        $defs: {
+            components: componentSchemas,
+            dimensions: Object.fromEntries(Object.entries(DIMENSION_DEFINITIONS).map(([key, def]) => [
+                key,
+                {
+                    type: 'string',
+                    description: def.description,
+                    enum: def.values,
+                },
+            ])),
+        },
+    };
+}
+//# sourceMappingURL=schema.js.map

package/dist/schema.js.map

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

package/dist/semantic.d.ts

@@ -0,0 +1,50 @@
+/** Primitive UI component types that Stylix understands */
+export type UIComponent = 'button' | 'card' | 'stack' | 'text' | 'input' | 'section' | 'badge' | 'container' | 'divider' | 'alert' | 'select' | 'textarea' | 'avatar' | 'toggle' | 'tabs' | 'dialog' | 'tooltip' | 'table' | 'nav' | 'checkbox' | 'radio';
+/** Color intention — what role does this element play? */
+export type Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+/** Visual prominence — how loud should this element be? */
+export type Emphasis = 'low' | 'medium' | 'high';
+/** Physical scale */
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Content density */
+export type Density = 'compact' | 'comfortable' | 'spacious';
+/** Background treatment */
+export type Surface = 'flat' | 'subtle' | 'elevated';
+/** Corner rounding */
+export type Radius = 'none' | 'sm' | 'md' | 'lg' | 'pill';
+/** Drop shadow depth */
+export type Shadow = 'none' | 'sm' | 'md' | 'lg';
+/** Spacing between children (for layout components) */
+export type Gap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Content alignment */
+export type Align = 'start' | 'center' | 'end' | 'stretch';
+/** Text/font weight */
+export type Weight = 'regular' | 'medium' | 'semibold' | 'bold';
+/** Layout direction for stack-like components */
+export type Direction = 'horizontal' | 'vertical';
+/** Padding scale — reuses Size tokens */
+export type Padding = Size;
+/**
+ * The full set of semantic props that any Stylix element can receive.
+ * Not every component uses every prop — the compiler handles relevance.
+ */
+export interface SemanticProps {
+    ui?: UIComponent;
+    tone?: Tone;
+    emphasis?: Emphasis;
+    size?: Size;
+    density?: Density;
+    surface?: Surface;
+    radius?: Radius;
+    shadow?: Shadow;
+    gap?: Gap;
+    align?: Align;
+    weight?: Weight;
+    direction?: Direction;
+    padding?: Padding;
+}
+/** Keys of SemanticProps for iteration */
+export type SemanticPropKey = keyof SemanticProps;
+/** Map of which semantic dimensions are relevant per component */
+export declare const COMPONENT_DIMENSIONS: Record<UIComponent, SemanticPropKey[]>;
+//# sourceMappingURL=semantic.d.ts.map

package/dist/semantic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../src/semantic.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,OAAO,GACP,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,SAAS,GACT,OAAO,GACP,KAAK,GACL,UAAU,GACV,OAAO,CAAC;AAEZ,0DAA0D;AAC1D,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1E,2DAA2D;AAC3D,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjD,qBAAqB;AACrB,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,sBAAsB;AACtB,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAE7D,2BAA2B;AAC3B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,sBAAsB;AACtB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1D,wBAAwB;AACxB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,uDAAuD;AACvD,MAAM,MAAM,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,wBAAwB;AACxB,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAE3D,uBAAuB;AACvB,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEhE,iDAAiD;AACjD,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,yCAAyC;AACzC,MAAM,MAAM,OAAO,GAAG,IAAI,CAAC;AAE3B;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,0CAA0C;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,EAAE,CAsBvE,CAAC"}

package/dist/semantic.js

@@ -0,0 +1,25 @@
+/** Map of which semantic dimensions are relevant per component */
+export const COMPONENT_DIMENSIONS = {
+    button: ['tone', 'emphasis', 'size', 'radius'],
+    card: ['surface', 'radius', 'shadow', 'padding'],
+    stack: ['gap', 'align', 'direction', 'padding'],
+    text: ['size', 'weight', 'tone', 'align'],
+    input: ['size', 'tone', 'radius'],
+    section: ['padding', 'surface', 'gap'],
+    badge: ['tone', 'emphasis', 'size', 'radius'],
+    container: ['padding'],
+    divider: [],
+    alert: ['tone', 'emphasis', 'radius', 'padding'],
+    select: ['size', 'tone', 'radius'],
+    textarea: ['size', 'tone', 'radius'],
+    avatar: ['size', 'radius'],
+    toggle: ['size', 'tone'],
+    tabs: ['size', 'tone', 'gap'],
+    dialog: ['surface', 'radius', 'shadow', 'padding'],
+    tooltip: ['tone', 'size', 'radius'],
+    table: ['size', 'tone'],
+    nav: ['direction', 'gap', 'align'],
+    checkbox: ['size', 'tone'],
+    radio: ['size', 'tone'],
+};
+//# sourceMappingURL=semantic.js.map

package/dist/semantic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.js","sourceRoot":"","sources":["../src/semantic.ts"],"names":[],"mappings":"AAmFA,kEAAkE;AAClE,MAAM,CAAC,MAAM,oBAAoB,GAA2C;IAC1E,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC;IAC9C,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IAChD,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC;IAC/C,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;IACzC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;IACjC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;IACtC,KAAK,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC;IAC7C,SAAS,EAAE,CAAC,SAAS,CAAC;IACtB,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC;IAChD,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC1B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;IAC7B,MAAM,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;IACnC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IACvB,GAAG,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/tokens.d.ts

@@ -0,0 +1,74 @@
+import type { Size, Radius, Shadow } from './semantic.js';
+/** A single color scale with numbered stops */
+export interface ColorScale {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+/** Complete color token set */
+export interface ColorTokens {
+    neutral: ColorScale;
+    brand: ColorScale;
+    success: ColorScale;
+    warning: ColorScale;
+    danger: ColorScale;
+}
+/** Spacing scale */
+export type SpacingTokens = Record<Size | '2xs' | '2xl' | '3xl', string>;
+/** Radius tokens */
+export type RadiusTokens = Record<Exclude<Radius, 'none'> | 'full' | 'pill', string>;
+/** Shadow tokens */
+export type ShadowTokens = Record<Exclude<Shadow, 'none'>, string>;
+/** Typography scale entry */
+export interface TypeStep {
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing?: string;
+}
+/** Typography tokens */
+export type TypographyTokens = Record<Size, TypeStep>;
+/** Font weight values */
+export interface FontWeightTokens {
+    regular: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+}
+/** Semantic surface colors for a theme */
+export interface SurfaceTokens {
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    ring: string;
+}
+/** A complete theme definition */
+export interface ThemeTokens {
+    colors: ColorTokens;
+    surfaces: SurfaceTokens;
+}
+/** The full token configuration */
+export interface TokenConfig {
+    colors: ColorTokens;
+    spacing: SpacingTokens;
+    radius: RadiusTokens;
+    shadows: ShadowTokens;
+    typography: TypographyTokens;
+    fontWeights: FontWeightTokens;
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEhE,+CAA+C;AAC/C,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,+BAA+B;AAC/B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,oBAAoB;AACpB,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,MAAM,CAAC,CAAC;AAEzE,oBAAoB;AACpB,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;AAErF,oBAAoB;AACpB,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnE,6BAA6B;AAC7B,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAwB;AACxB,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAEtD,yBAAyB;AACzB,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,0CAA0C;AAC1C,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,kCAAkC;AAClC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;CACnB"}

package/dist/tokens.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@stylixui/types",
+  "version": "0.1.0",
+  "description": "Shared TypeScript types for the Stylix design system compiler",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "typescript": "^5.4.0"
+  }
+}