sve-ui 0.1.2 → 0.2.0

package/dist/internal/variants.js

@@ -0,0 +1,54 @@
+/**
+ * defineVariants — typed CVA-like variant resolver.
+ *
+ * Returns a resolver function that maps variant × color × size props to a
+ * merged CSS class string. No external dependencies. No `any` in the public
+ * surface. Visual values live in scoped CSS keyed by the emitted class names.
+ */
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+/**
+ * Create a variant resolver function from a config.
+ *
+ * @example
+ * const button = defineVariants({
+ *   base: 'btn',
+ *   variants: {
+ *     variant: { solid: 'btn--solid', ghost: 'btn--ghost' },
+ *     size:    { sm: 'btn--sm', md: 'btn--md' },
+ *   },
+ *   defaultVariants: { variant: 'solid', size: 'md' },
+ * });
+ *
+ * button()                          // → 'btn btn--solid btn--md'
+ * button({ variant: 'ghost' })      // → 'btn btn--ghost btn--md'
+ * button({ class: 'extra' })        // → 'btn btn--solid btn--md extra'
+ */
+export function defineVariants(config) {
+    return function resolveVariants(props) {
+        const parts = [];
+        // 1. Base class
+        if (config.base) {
+            parts.push(config.base);
+        }
+        // 2. Per-axis class resolution
+        for (const axis in config.variants) {
+            const axisMap = config.variants[axis];
+            // Prefer explicit prop value, fall back to defaultVariants
+            const value = props?.[axis] ??
+                config.defaultVariants?.[axis];
+            if (value !== undefined) {
+                const cls = axisMap[value];
+                if (cls) {
+                    parts.push(cls);
+                }
+            }
+        }
+        // 3. Extra class prop
+        if (props?.class) {
+            parts.push(props.class);
+        }
+        return parts.join(' ');
+    };
+}

package/dist/theme/breakpoints.d.ts

@@ -6,3 +6,4 @@ export declare const breakpoints: {
     xl: string;
     "2xl": string;
 };
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/theme/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/lib/theme/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAA"}

package/dist/theme/index.d.ts

@@ -1,183 +1,13 @@
-export declare const theme: {
-    fonts: {
-        heading: string;
-        body: string;
-    };
-    fontSizes: {
-        '6xs': string;
-        '5xs': string;
-        "4xs": string;
-        "3xs": string;
-        "2xs": string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        '4xl': string;
-        '5xl': string;
-        '6xl': string;
-        '7xl': string;
-        '8xl': string;
-        '9xl': string;
-        '10xl': string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-    letterSpacings: {
-        tighter: string;
-        tight: string;
-        normal: string;
-        wide: string;
-        wider: string;
-        widest: string;
-    };
-    lineHeights: {
-        normal: string;
-        none: number;
-        shorter: number;
-        short: number;
-        base: number;
-        tall: number;
-        taller: string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "10": string;
-    };
-    colors: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        dark: string;
-        light: string;
-    };
-    sizes: {
-        container: {
-            base: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        px: string;
-        0.5: string;
-        1: string;
-        1.5: string;
-        2: string;
-        2.5: string;
-        3: string;
-        3.5: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        44: string;
-        48: string;
-        52: string;
-        56: string;
-        60: string;
-        64: string;
-        72: string;
-        80: string;
-        96: string;
-        max: string;
-        min: string;
-        full: string;
-        "3xs": string;
-        "2xs": string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        prose: string;
-    };
-    spacing: {
-        px: string;
-        0.5: string;
-        1: string;
-        1.5: string;
-        2: string;
-        2.5: string;
-        3: string;
-        3.5: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        44: string;
-        48: string;
-        52: string;
-        56: string;
-        60: string;
-        64: string;
-        72: string;
-        80: string;
-        96: string;
-    };
-    radius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        full: string;
-    };
-    breakpoints: {
-        base: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-    };
+/**
+ * sve-ui/theme subpath export
+ *
+ * Re-exports all token types, scales, and token maps.
+ * The old flat `theme` export has been removed (WU-2 restructure).
+ */
+export { palette, primaryScale, secondaryScale, successScale, warningScale, dangerScale, defaultScale, type PaletteScale, } from './palette';
+export { lightTokens, darkTokens, themeToVars, type SveTheme, type PartialSveTheme, type SveColors, type SveColorRole, type SveSpacing, type SveRadius, type SveTypography, } from './tokens';
+export declare const tokens: {
+    light: import("./tokens").SveTheme;
+    dark: import("./tokens").SveTheme;
 };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,WAAW,CAAC;AAGnB,OAAO,EACL,WAAW,EACX,UAAU,EACV,WAAW,EACX,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,MAAM;;;CAA2C,CAAC"}

package/dist/theme/index.js

@@ -1,19 +1,13 @@
-import { sizes } from './sizes';
-import { radius } from './radius';
-import { spacing } from './spacing';
-import { typography } from './typography';
-import { breakpoints } from './breakpoints';
-export const theme = {
-    colors: {
-        primary: '#F56565',
-        secondary: '#ED8936',
-        tertiary: '#ECC94B',
-        dark: '#2D3748',
-        light: '#EDF2F7',
-    },
-    sizes,
-    spacing,
-    radius,
-    breakpoints,
-    ...typography
-};
+/**
+ * sve-ui/theme subpath export
+ *
+ * Re-exports all token types, scales, and token maps.
+ * The old flat `theme` export has been removed (WU-2 restructure).
+ */
+// Palette scales (raw color values — use semantic tokens in components)
+export { palette, primaryScale, secondaryScale, successScale, warningScale, dangerScale, defaultScale, } from './palette';
+// Semantic token maps and types
+export { lightTokens, darkTokens, themeToVars, } from './tokens';
+// Convenience grouped export: import { tokens } from 'sve-ui/theme'
+import { lightTokens, darkTokens } from './tokens';
+export const tokens = { light: lightTokens, dark: darkTokens };

package/dist/theme/palette.d.ts

@@ -0,0 +1,153 @@
+/**
+ * Color palette scales — raw values (50–900) per semantic family.
+ * Seeded from the original flat colors and expanded to full 9-stop scales.
+ * Components should NOT import these directly — use semantic tokens instead.
+ */
+export declare const primaryScale: {
+    readonly 50: "#fff5f5";
+    readonly 100: "#fed7d7";
+    readonly 200: "#feb2b2";
+    readonly 300: "#fc8181";
+    readonly 400: "#f87171";
+    readonly 500: "#f56565";
+    readonly 600: "#e53e3e";
+    readonly 700: "#c53030";
+    readonly 800: "#9b2c2c";
+    readonly 900: "#742a2a";
+};
+export declare const secondaryScale: {
+    readonly 50: "#fffaf0";
+    readonly 100: "#feebc8";
+    readonly 200: "#fbd38d";
+    readonly 300: "#f6ad55";
+    readonly 400: "#ed9e40";
+    readonly 500: "#ed8936";
+    readonly 600: "#dd6b20";
+    readonly 700: "#c05621";
+    readonly 800: "#9c4221";
+    readonly 900: "#7b341e";
+};
+export declare const successScale: {
+    readonly 50: "#f0fff4";
+    readonly 100: "#c6f6d5";
+    readonly 200: "#9ae6b4";
+    readonly 300: "#68d391";
+    readonly 400: "#48bb78";
+    readonly 500: "#38a169";
+    readonly 600: "#2f855a";
+    readonly 700: "#276749";
+    readonly 800: "#22543d";
+    readonly 900: "#1c4532";
+};
+export declare const warningScale: {
+    readonly 50: "#fffff0";
+    readonly 100: "#fefcbf";
+    readonly 200: "#faf089";
+    readonly 300: "#f6e05e";
+    readonly 400: "#ecc94b";
+    readonly 500: "#d69e2e";
+    readonly 600: "#b7791f";
+    readonly 700: "#975a16";
+    readonly 800: "#744210";
+    readonly 900: "#5f370e";
+};
+export declare const dangerScale: {
+    readonly 50: "#fff5f5";
+    readonly 100: "#fed7d7";
+    readonly 200: "#fc8181";
+    readonly 300: "#f56565";
+    readonly 400: "#e53e3e";
+    readonly 500: "#c53030";
+    readonly 600: "#9b2c2c";
+    readonly 700: "#822727";
+    readonly 800: "#63171b";
+    readonly 900: "#3d0a0a";
+};
+export declare const defaultScale: {
+    readonly 50: "#f7fafc";
+    readonly 100: "#edf2f7";
+    readonly 200: "#e2e8f0";
+    readonly 300: "#cbd5e0";
+    readonly 400: "#a0aec0";
+    readonly 500: "#718096";
+    readonly 600: "#4a5568";
+    readonly 700: "#2d3748";
+    readonly 800: "#1a202c";
+    readonly 900: "#171923";
+};
+export type PaletteScale = typeof primaryScale;
+export declare const palette: {
+    readonly primary: {
+        readonly 50: "#fff5f5";
+        readonly 100: "#fed7d7";
+        readonly 200: "#feb2b2";
+        readonly 300: "#fc8181";
+        readonly 400: "#f87171";
+        readonly 500: "#f56565";
+        readonly 600: "#e53e3e";
+        readonly 700: "#c53030";
+        readonly 800: "#9b2c2c";
+        readonly 900: "#742a2a";
+    };
+    readonly secondary: {
+        readonly 50: "#fffaf0";
+        readonly 100: "#feebc8";
+        readonly 200: "#fbd38d";
+        readonly 300: "#f6ad55";
+        readonly 400: "#ed9e40";
+        readonly 500: "#ed8936";
+        readonly 600: "#dd6b20";
+        readonly 700: "#c05621";
+        readonly 800: "#9c4221";
+        readonly 900: "#7b341e";
+    };
+    readonly success: {
+        readonly 50: "#f0fff4";
+        readonly 100: "#c6f6d5";
+        readonly 200: "#9ae6b4";
+        readonly 300: "#68d391";
+        readonly 400: "#48bb78";
+        readonly 500: "#38a169";
+        readonly 600: "#2f855a";
+        readonly 700: "#276749";
+        readonly 800: "#22543d";
+        readonly 900: "#1c4532";
+    };
+    readonly warning: {
+        readonly 50: "#fffff0";
+        readonly 100: "#fefcbf";
+        readonly 200: "#faf089";
+        readonly 300: "#f6e05e";
+        readonly 400: "#ecc94b";
+        readonly 500: "#d69e2e";
+        readonly 600: "#b7791f";
+        readonly 700: "#975a16";
+        readonly 800: "#744210";
+        readonly 900: "#5f370e";
+    };
+    readonly danger: {
+        readonly 50: "#fff5f5";
+        readonly 100: "#fed7d7";
+        readonly 200: "#fc8181";
+        readonly 300: "#f56565";
+        readonly 400: "#e53e3e";
+        readonly 500: "#c53030";
+        readonly 600: "#9b2c2c";
+        readonly 700: "#822727";
+        readonly 800: "#63171b";
+        readonly 900: "#3d0a0a";
+    };
+    readonly default: {
+        readonly 50: "#f7fafc";
+        readonly 100: "#edf2f7";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e0";
+        readonly 400: "#a0aec0";
+        readonly 500: "#718096";
+        readonly 600: "#4a5568";
+        readonly 700: "#2d3748";
+        readonly 800: "#1a202c";
+        readonly 900: "#171923";
+    };
+};
+//# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/theme/palette.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;CAWd,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOV,CAAC"}

package/dist/theme/palette.js

@@ -0,0 +1,85 @@
+/**
+ * Color palette scales — raw values (50–900) per semantic family.
+ * Seeded from the original flat colors and expanded to full 9-stop scales.
+ * Components should NOT import these directly — use semantic tokens instead.
+ */
+export const primaryScale = {
+    50: '#fff5f5',
+    100: '#fed7d7',
+    200: '#feb2b2',
+    300: '#fc8181',
+    400: '#f87171',
+    500: '#f56565', // original primary
+    600: '#e53e3e',
+    700: '#c53030',
+    800: '#9b2c2c',
+    900: '#742a2a',
+};
+export const secondaryScale = {
+    50: '#fffaf0',
+    100: '#feebc8',
+    200: '#fbd38d',
+    300: '#f6ad55',
+    400: '#ed9e40',
+    500: '#ed8936', // original secondary
+    600: '#dd6b20',
+    700: '#c05621',
+    800: '#9c4221',
+    900: '#7b341e',
+};
+export const successScale = {
+    50: '#f0fff4',
+    100: '#c6f6d5',
+    200: '#9ae6b4',
+    300: '#68d391',
+    400: '#48bb78',
+    500: '#38a169',
+    600: '#2f855a',
+    700: '#276749',
+    800: '#22543d',
+    900: '#1c4532',
+};
+export const warningScale = {
+    50: '#fffff0',
+    100: '#fefcbf',
+    200: '#faf089',
+    300: '#f6e05e',
+    400: '#ecc94b', // original tertiary/warning
+    500: '#d69e2e',
+    600: '#b7791f',
+    700: '#975a16',
+    800: '#744210',
+    900: '#5f370e',
+};
+export const dangerScale = {
+    50: '#fff5f5',
+    100: '#fed7d7',
+    200: '#fc8181',
+    300: '#f56565',
+    400: '#e53e3e',
+    500: '#c53030',
+    600: '#9b2c2c',
+    700: '#822727',
+    800: '#63171b',
+    900: '#3d0a0a',
+};
+export const defaultScale = {
+    50: '#f7fafc',
+    100: '#edf2f7', // original light
+    200: '#e2e8f0',
+    300: '#cbd5e0',
+    400: '#a0aec0',
+    500: '#718096',
+    600: '#4a5568',
+    700: '#2d3748', // original dark
+    800: '#1a202c',
+    900: '#171923',
+};
+export const palette = {
+    primary: primaryScale,
+    secondary: secondaryScale,
+    success: successScale,
+    warning: warningScale,
+    danger: dangerScale,
+    default: defaultScale,
+};

package/dist/theme/radius.d.ts

@@ -8,3 +8,4 @@ export declare const radius: {
     '3xl': string;
     full: string;
 };
+//# sourceMappingURL=radius.d.ts.map

package/dist/theme/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../src/lib/theme/radius.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAA"}

package/dist/theme/sizes.d.ts

@@ -58,3 +58,4 @@ export declare const sizes: {
     "8xl": string;
     prose: string;
 };
+//# sourceMappingURL=sizes.d.ts.map

package/dist/theme/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/lib/theme/sizes.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIjB,CAAA"}

package/dist/theme/spacing.d.ts

@@ -33,3 +33,4 @@ export declare const spacing: {
     80: string;
     96: string;
 };
+//# sourceMappingURL=spacing.d.ts.map

package/dist/theme/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/theme/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCnB,CAAA"}