zabi-components 4.0.2 → 5.0.2

package/dist/routes/lib/ssr-safe.ts

@@ -0,0 +1,57 @@
+// SSR-safe utilities for zabi-components
+// This ensures components work properly during server-side rendering
+
+// Check if we're in a browser environment
+export function isBrowser(): boolean {
+    return typeof window !== 'undefined';
+}
+
+export function safeWindow(): Window | undefined {
+    return isBrowser() ? window : undefined;
+}
+
+export function safeDocument(): Document | undefined {
+    return isBrowser() ? document : undefined;
+}
+
+export function safeLocalStorage(): Storage | undefined {
+    return isBrowser() ? localStorage : undefined;
+}
+
+export function safeSessionStorage(): Storage | undefined {
+    return isBrowser() ? sessionStorage : undefined;
+}
+
+export function safeRequestAnimationFrame(callback: FrameRequestCallback): number | undefined {
+    return isBrowser() ? requestAnimationFrame(callback) : undefined;
+}
+
+export function safeSetTimeout(callback: () => void, delay: number): NodeJS.Timeout | undefined {
+    return isBrowser() ? setTimeout(callback, delay) : undefined;
+}
+
+export function safeClearTimeout(id: NodeJS.Timeout | undefined): void {
+    if (isBrowser() && id) {
+        clearTimeout(id);
+    }
+}
+
+export function safeSetInterval(callback: () => void, delay: number): NodeJS.Timeout | undefined {
+    return isBrowser() ? setInterval(callback, delay) : undefined;
+}
+
+export function safeClearInterval(id: NodeJS.Timeout | undefined): void {
+    if (isBrowser() && id) {
+        clearInterval(id);
+    }
+}
+
+// Generate SSR-safe unique IDs
+let idCounter = 0;
+export function generateId(prefix: string = 'id'): string {
+    if (isBrowser()) {
+        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+    } else {
+        return `${prefix}-ssr-${++idCounter}`;
+    }
+}

package/dist/routes/lib/variant-utils.ts

@@ -0,0 +1,98 @@
+/**
+ * Utility functions for handling component variants with semantic colors
+ */
+
+export type Variant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * Get variant classes for input components (Input, Textarea)
+ */
+export function getInputVariantClasses(variant: Variant): string {
+    const variantMap: Record<Variant, string> = {
+        default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+        success: 'border-green-300 focus:border-green-500 focus:ring-green-500',
+        warning: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
+        error: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+        info: 'border-blue-300 focus:border-blue-500 focus:ring-blue-500',
+    };
+
+    return variantMap[variant] || variantMap.default;
+}
+
+/**
+ * Get variant classes for card components
+ */
+export function getCardVariantClasses(variant: Variant): string {
+    const variantMap: Record<Variant, string> = {
+        default: 'border-gray-200 bg-white',
+        success: 'border-green-200 bg-green-50',
+        warning: 'border-yellow-200 bg-yellow-50',
+        error: 'border-red-200 bg-red-50',
+        info: 'border-blue-200 bg-blue-50',
+    };
+
+    return variantMap[variant] || variantMap.default;
+}
+
+/**
+ * Get generic variant classes for any component
+ */
+export function getVariantClasses(variant: Variant, type: 'border' | 'text' | 'bg'): string {
+    const variantMap: Record<Variant, Record<'border' | 'text' | 'bg', string>> = {
+        default: {
+            border: 'border-gray-300',
+            text: 'text-gray-900',
+            bg: 'bg-white'
+        },
+        success: {
+            border: 'border-green-300',
+            text: 'text-green-900',
+            bg: 'bg-green-50'
+        },
+        warning: {
+            border: 'border-yellow-300',
+            text: 'text-yellow-900',
+            bg: 'bg-yellow-50'
+        },
+        error: {
+            border: 'border-red-300',
+            text: 'text-red-900',
+            bg: 'bg-red-50'
+        },
+        info: {
+            border: 'border-blue-300',
+            text: 'text-blue-900',
+            bg: 'bg-blue-50'
+        },
+    };
+
+    return variantMap[variant]?.[type] || variantMap.default[type];
+}
+
+/**
+ * Get all variant classes for a component (border, text, background)
+ */
+export function getAllVariantClasses(variant: Variant): {
+    border: string;
+    text: string;
+    bg: string;
+} {
+    return {
+        border: getVariantClasses(variant, 'border'),
+        text: getVariantClasses(variant, 'text'),
+        bg: getVariantClasses(variant, 'bg'),
+    };
+}
+
+/**
+ * Create a variant class map for use in reactive statements
+ */
+export function createVariantClassMap<T extends string>(
+    variants: T[],
+    prefix: string
+): Record<T, string> {
+    return variants.reduce((acc, variant) => {
+        acc[variant] = `${prefix}-${variant}`;
+        return acc;
+    }, {} as Record<T, string>);
+}

package/dist/zabi-components.css

@@ -1 +1,399 @@
-:root{--zabi-primary: #2563eb;--zabi-primary-hover: #1d4ed8;--zabi-primary-active: #1e40af;--zabi-primary-disabled: #93c5fd;--zabi-primary-light: #dbeafe;--zabi-primary-dark: #1e40af;--zabi-secondary: #57534e;--zabi-secondary-hover: #44403c;--zabi-secondary-active: #292524;--zabi-secondary-disabled: #d6d3d1;--zabi-secondary-light: #f5f5f4;--zabi-secondary-dark: #292524;--zabi-success: #16a34a;--zabi-success-hover: #15803d;--zabi-success-active: #166534;--zabi-success-disabled: #86efac;--zabi-success-light: #dcfce7;--zabi-success-dark: #166534;--zabi-warning: #ca8a04;--zabi-warning-hover: #a16207;--zabi-warning-active: #854d0e;--zabi-warning-disabled: #fde047;--zabi-warning-light: #fef9c3;--zabi-warning-dark: #854d0e;--zabi-error: #dc2626;--zabi-error-hover: #b91c1c;--zabi-error-active: #991b1b;--zabi-error-disabled: #fca5a5;--zabi-error-light: #fee2e2;--zabi-error-dark: #991b1b;--zabi-info: #2563eb;--zabi-info-hover: #1d4ed8;--zabi-info-active: #1e40af;--zabi-info-disabled: #93c5fd;--zabi-info-light: #dbeafe;--zabi-info-dark: #1e40af;--zabi-surface: #fff;--zabi-surface-hover: #fafaf9;--zabi-surface-active: #f5f5f4;--zabi-surface-disabled: #f5f5f4;--zabi-border: #d6d3d1;--zabi-border-hover: #a8a29e;--zabi-border-focus: #3b82f6;--zabi-border-disabled: #e7e5e4;--zabi-text: #1c1917;--zabi-text-muted: #57534e;--zabi-text-placeholder: #a8a29e;--zabi-text-inverse: #fff;--zabi-text-disabled: #a8a29e;--zabi-focus-ring: #3b82f6;--zabi-focus-ring-offset: #fff;--zabi-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--zabi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--zabi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--zabi-radius-sm: var(--radius-sm);--zabi-radius-md: var(--radius-md);--zabi-radius-lg: var(--radius-lg);--zabi-spacing-xs: .25rem;--zabi-spacing-sm: .5rem;--zabi-spacing-md: 1rem;--zabi-spacing-lg: 1.5rem;--zabi-spacing-xl: 2rem}.dark{--zabi-surface: #292524;--zabi-surface-hover: #44403c;--zabi-surface-active: #57534e;--zabi-surface-disabled: #44403c;--zabi-border: #57534e;--zabi-border-hover: #78716c;--zabi-border-focus: #60a5fa;--zabi-border-disabled: #57534e;--zabi-text: #e7e5e4;--zabi-text-muted: #78716c;--zabi-text-placeholder: #57534e;--zabi-text-inverse: #292524;--zabi-text-disabled: #57534e;--zabi-focus-ring-offset: #292524}.zabi-primary{background-color:var(--zabi-primary);color:var(--zabi-text-inverse)}.zabi-primary:hover{background-color:var(--zabi-primary-hover)}.zabi-primary:active{background-color:var(--zabi-primary-active)}.zabi-primary:disabled{background-color:var(--zabi-primary-disabled);color:var(--zabi-text-disabled)}.zabi-secondary{background-color:var(--zabi-secondary);color:var(--zabi-text-inverse)}.zabi-secondary:hover{background-color:var(--zabi-secondary-hover)}.zabi-secondary:active{background-color:var(--zabi-secondary-active)}.zabi-secondary:disabled{background-color:var(--zabi-secondary-disabled);color:var(--zabi-text-disabled)}.zabi-success{background-color:var(--zabi-success);color:var(--zabi-text-inverse)}.zabi-success:hover{background-color:var(--zabi-success-hover)}.zabi-success:active{background-color:var(--zabi-success-active)}.zabi-success:disabled{background-color:var(--zabi-success-disabled);color:var(--zabi-text-disabled)}.zabi-warning{background-color:var(--zabi-warning);color:var(--zabi-text-inverse)}.zabi-warning:hover{background-color:var(--zabi-warning-hover)}.zabi-warning:active{background-color:var(--zabi-warning-active)}.zabi-warning:disabled{background-color:var(--zabi-warning-disabled);color:var(--zabi-text-disabled)}.zabi-error{background-color:var(--zabi-error);color:var(--zabi-text-inverse)}.zabi-error:hover{background-color:var(--zabi-error-hover)}.zabi-error:active{background-color:var(--zabi-error-active)}.zabi-error:disabled{background-color:var(--zabi-error-disabled);color:var(--zabi-text-disabled)}.zabi-info{background-color:var(--zabi-info);color:var(--zabi-text-inverse)}.zabi-info:hover{background-color:var(--zabi-info-hover)}.zabi-info:active{background-color:var(--zabi-info-active)}.zabi-info:disabled{background-color:var(--zabi-info-disabled);color:var(--zabi-text-disabled)}.zabi-surface{background-color:var(--zabi-surface);color:var(--zabi-text)}.zabi-surface:hover{background-color:var(--zabi-surface-hover)}.zabi-surface:active{background-color:var(--zabi-surface-active)}.zabi-border{border-color:var(--zabi-border)}.zabi-border:hover{border-color:var(--zabi-border-hover)}.zabi-border:focus{border-color:var(--zabi-border-focus)}.zabi-border:disabled{border-color:var(--zabi-border-disabled)}.zabi-text{color:var(--zabi-text)}.zabi-text-muted{color:var(--zabi-text-muted)}.zabi-text-placeholder{color:var(--zabi-text-placeholder)}.zabi-text-inverse{color:var(--zabi-text-inverse)}.zabi-text-disabled{color:var(--zabi-text-disabled)}.zabi-focus{outline:2px solid var(--zabi-focus-ring);outline-offset:2px}.zabi-focus-ring{box-shadow:0 0 0 2px var(--zabi-focus-ring-offset),0 0 0 4px var(--zabi-focus-ring)}
+/* Zabi Components CSS */
+@import "tailwindcss";
+
+/* ========================================
+   SEMANTIC COLOR SYSTEM
+   ======================================== */
+
+@theme {
+  /* Surface Colors - Semantic naming with stone palette */
+  --color-surface: theme(colors.stone.50);
+  --color-surface-secondary: theme(colors.stone.100);
+  --color-surface-tertiary: theme(colors.stone.200);
+  --color-surface-elevated: theme(colors.white);
+  --color-surface-hover: theme(colors.stone.100);
+  --color-surface-active: theme(colors.stone.200);
+  --color-surface-inverse: theme(colors.stone.900);
+  --color-surface-disabled: theme(colors.stone.200);
+
+  /* Background Colors */
+  --color-background: theme(colors.white);
+  --color-background-secondary: theme(colors.stone.50);
+  --color-background-tertiary: theme(colors.stone.100);
+
+  /* Page Colors */
+  --color-page: theme(colors.white);
+  --color-page-secondary: theme(colors.stone.50);
+
+  /* Card Colors */
+  --color-card: theme(colors.white);
+  --color-card-hover: theme(colors.stone.50);
+  --color-card-active: theme(colors.stone.100);
+  --color-card-elevated: theme(colors.white);
+
+  /* Text Colors */
+  --color-headline: theme(colors.stone.900);
+  --color-body: theme(colors.stone.800);
+  --color-description: theme(colors.stone.600);
+  --color-caption: theme(colors.stone.500);
+  --color-input-placeholder: theme(colors.stone.400);
+  --color-label: theme(colors.stone.700);
+  --color-link: theme(colors.blue.600);
+  --color-link-hover: theme(colors.blue.700);
+  --color-success: theme(colors.green.700);
+  --color-warning: theme(colors.yellow.700);
+  --color-error: theme(colors.red.700);
+  --color-inverse: theme(colors.white);
+  --color-disabled: theme(colors.stone.400);
+
+  /* Border Colors */
+  --color-border: theme(colors.stone.200);
+  --color-border-secondary: theme(colors.stone.300);
+  --color-border-hover: theme(colors.stone.400);
+  --color-border-focus: theme(colors.blue.500);
+  --color-border-disabled: theme(colors.stone.200);
+
+  /* Focus Colors */
+  --color-focus: theme(colors.blue.500);
+  --color-focus-hover: theme(colors.blue.600);
+  --color-focus-active: theme(colors.blue.700);
+  --color-focus-disabled: theme(colors.blue.300);
+  --color-focus-light: theme(colors.blue.50);
+  --color-focus-dark: theme(colors.blue.700);
+  --color-focus-surface: theme(colors.blue.50);
+  --color-focus-text: theme(colors.blue.700);
+  --color-focus-ring: theme(colors.blue.500);
+  --color-focus-ring-offset: theme(colors.white);
+
+  /* Primary Colors */
+  --color-primary: theme(colors.blue.600);
+  --color-primary-hover: theme(colors.blue.700);
+  --color-primary-active: theme(colors.blue.800);
+  --color-primary-disabled: theme(colors.blue.300);
+  --color-primary-light: theme(colors.blue.100);
+  --color-primary-dark: theme(colors.blue.800);
+
+  /* Secondary Colors */
+  --color-secondary: theme(colors.stone.600);
+  --color-secondary-hover: theme(colors.stone.700);
+  --color-secondary-active: theme(colors.stone.800);
+  --color-secondary-disabled: theme(colors.stone.300);
+  --color-secondary-light: theme(colors.stone.100);
+  --color-secondary-dark: theme(colors.stone.800);
+
+  /* Success Colors */
+  --color-success: theme(colors.green.600);
+  --color-success-hover: theme(colors.green.700);
+  --color-success-active: theme(colors.green.800);
+  --color-success-disabled: theme(colors.green.300);
+  --color-success-light: theme(colors.green.100);
+  --color-success-dark: theme(colors.green.800);
+  --color-success-surface: theme(colors.green.100);
+  --color-success-text: theme(colors.green.800);
+
+  /* Warning Colors */
+  --color-warning: theme(colors.yellow.600);
+  --color-warning-hover: theme(colors.yellow.700);
+  --color-warning-active: theme(colors.yellow.800);
+  --color-warning-disabled: theme(colors.yellow.300);
+  --color-warning-light: theme(colors.yellow.100);
+  --color-warning-dark: theme(colors.yellow.800);
+  --color-warning-surface: theme(colors.yellow.100);
+  --color-warning-text: theme(colors.yellow.800);
+
+  /* Error Colors */
+  --color-error: theme(colors.red.600);
+  --color-error-hover: theme(colors.red.700);
+  --color-error-active: theme(colors.red.800);
+  --color-error-disabled: theme(colors.red.300);
+  --color-error-light: theme(colors.red.100);
+  --color-error-dark: theme(colors.red.800);
+  --color-error-surface: theme(colors.red.100);
+  --color-error-text: theme(colors.red.800);
+
+  /* Info Colors */
+  --color-info: theme(colors.blue.600);
+  --color-info-hover: theme(colors.blue.700);
+  --color-info-active: theme(colors.blue.800);
+  --color-info-disabled: theme(colors.blue.300);
+  --color-info-light: theme(colors.blue.100);
+  --color-info-dark: theme(colors.blue.800);
+  --color-info-surface: theme(colors.blue.100);
+  --color-info-text: theme(colors.blue.800);
+
+  /* Shadow Colors */
+  --shadow-color: 0 0 0;
+  --shadow-opacity: 0.1;
+  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* Z-index */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+}
+
+/* ========================================
+   DARK MODE THEME
+   ======================================== */
+.dark {
+  /* Surface Colors - Dark mode variants */
+  --color-surface: theme(colors.stone.800);
+  --color-surface-secondary: theme(colors.stone.700);
+  --color-surface-tertiary: theme(colors.stone.600);
+  --color-surface-elevated: theme(colors.stone.800);
+  --color-surface-hover: theme(colors.stone.700);
+  --color-surface-active: theme(colors.stone.600);
+  --color-surface-inverse: theme(colors.stone.100);
+  --color-surface-disabled: theme(colors.stone.700);
+
+  /* Background Colors */
+  --color-background: theme(colors.stone.900);
+  --color-background-secondary: theme(colors.stone.800);
+  --color-background-tertiary: theme(colors.stone.700);
+
+  /* Page Colors */
+  --color-page: theme(colors.stone.800);
+  --color-page-secondary: theme(colors.stone.800);
+
+  /* Card Colors */
+  --color-card: theme(colors.stone.800);
+  --color-card-hover: theme(colors.stone.700);
+  --color-card-active: theme(colors.stone.600);
+  --color-card-elevated: theme(colors.stone.800);
+
+  /* Text Colors */
+  --color-headline: theme(colors.stone.100);
+  --color-body: theme(colors.stone.200);
+  --color-description: theme(colors.stone.300);
+  --color-caption: theme(colors.stone.400);
+  --color-input-placeholder: theme(colors.stone.500);
+  --color-label: theme(colors.stone.200);
+  --color-link: theme(colors.blue.400);
+  --color-link-hover: theme(colors.blue.300);
+  --color-success: theme(colors.green.400);
+  --color-warning: theme(colors.yellow.400);
+  --color-error: theme(colors.red.400);
+  --color-inverse: theme(colors.stone.900);
+  --color-disabled: theme(colors.stone.500);
+
+  /* Border Colors */
+  --color-border: theme(colors.stone.600);
+  --color-border-secondary: theme(colors.stone.500);
+  --color-border-hover: theme(colors.stone.400);
+  --color-border-focus: theme(colors.blue.400);
+  --color-border-disabled: theme(colors.stone.600);
+
+  /* Focus Colors */
+  --color-focus: theme(colors.blue.400);
+  --color-focus-hover: theme(colors.blue.500);
+  --color-focus-active: theme(colors.blue.600);
+  --color-focus-disabled: theme(colors.blue.600);
+  --color-focus-light: theme(colors.blue.900);
+  --color-focus-dark: theme(colors.blue.400);
+  --color-focus-surface: theme(colors.blue.900);
+  --color-focus-text: theme(colors.blue.400);
+  --color-focus-ring: theme(colors.blue.400);
+  --color-focus-ring-offset: theme(colors.stone.700);
+
+  /* Primary Colors */
+  --color-primary: theme(colors.blue.600);
+  --color-primary-hover: theme(colors.blue.700);
+  --color-primary-active: theme(colors.blue.800);
+  --color-primary-disabled: theme(colors.blue.300);
+  --color-primary-light: theme(colors.blue.100);
+  --color-primary-dark: theme(colors.blue.800);
+
+  /* Secondary Colors */
+  --color-secondary: theme(colors.stone.600);
+  --color-secondary-hover: theme(colors.stone.700);
+  --color-secondary-active: theme(colors.stone.800);
+  --color-secondary-disabled: theme(colors.stone.300);
+  --color-secondary-light: theme(colors.stone.100);
+  --color-secondary-dark: theme(colors.stone.800);
+
+  /* Success Colors */
+  --color-success: theme(colors.green.600);
+  --color-success-hover: theme(colors.green.700);
+  --color-success-active: theme(colors.green.800);
+  --color-success-disabled: theme(colors.green.300);
+  --color-success-light: theme(colors.green.100);
+  --color-success-dark: theme(colors.green.800);
+  --color-success-surface: theme(colors.green.100);
+  --color-success-text: theme(colors.green.800);
+
+  /* Warning Colors */
+  --color-warning: theme(colors.yellow.600);
+  --color-warning-hover: theme(colors.yellow.700);
+  --color-warning-active: theme(colors.yellow.800);
+  --color-warning-disabled: theme(colors.yellow.300);
+  --color-warning-light: theme(colors.yellow.100);
+  --color-warning-dark: theme(colors.yellow.800);
+  --color-warning-surface: theme(colors.yellow.100);
+  --color-warning-text: theme(colors.yellow.800);
+
+  /* Error Colors */
+  --color-error: theme(colors.red.600);
+  --color-error-hover: theme(colors.red.700);
+  --color-error-active: theme(colors.red.800);
+  --color-error-disabled: theme(colors.red.300);
+  --color-error-light: theme(colors.red.100);
+  --color-error-dark: theme(colors.red.800);
+  --color-error-surface: theme(colors.red.100);
+  --color-error-text: theme(colors.red.800);
+
+  /* Info Colors */
+  --color-info: theme(colors.blue.600);
+  --color-info-hover: theme(colors.blue.700);
+  --color-info-active: theme(colors.blue.800);
+  --color-info-disabled: theme(colors.blue.300);
+  --color-info-light: theme(colors.blue.100);
+  --color-info-dark: theme(colors.blue.800);
+  --color-info-surface: theme(colors.blue.100);
+  --color-info-text: theme(colors.blue.800);
+
+  /* Shadow Colors */
+  --shadow-opacity: 0.3;
+  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+}
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Surface utilities */
+.bg-surface {
+  background-color: var(--color-surface);
+}
+
+.bg-surface-secondary {
+  background-color: var(--color-surface-secondary);
+}
+
+.bg-surface-tertiary {
+  background-color: var(--color-surface-tertiary);
+}
+
+.bg-surface-elevated {
+  background-color: var(--color-surface-elevated);
+}
+
+.bg-surface-hover:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.bg-surface-active:active {
+  background-color: var(--color-surface-active);
+}
+
+.bg-page {
+  background-color: var(--color-page);
+}
+
+/* Text utilities */
+.text-headline {
+  color: var(--color-headline);
+}
+
+.text-body {
+  color: var(--color-body);
+}
+
+.text-description {
+  color: var(--color-description);
+}
+
+.text-caption {
+  color: var(--color-caption);
+}
+
+.text-input-placeholder {
+  color: var(--color-input-placeholder);
+}
+
+.text-label {
+  color: var(--color-label);
+}
+
+.text-link {
+  color: var(--color-link);
+}
+
+.text-link:hover {
+  color: var(--color-link-hover);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-error {
+  color: var(--color-error);
+}
+
+.text-inverse {
+  color: var(--color-inverse);
+}
+
+.text-disabled {
+  color: var(--color-disabled);
+}
+
+/* Border utilities */
+.border-primary {
+  border-color: var(--color-border);
+}
+
+.border-secondary {
+  border-color: var(--color-border-secondary);
+}
+
+.border-hover:hover {
+  border-color: var(--color-border-hover);
+}
+
+.border-focus:focus {
+  border-color: var(--color-border-focus);
+}
+
+.border-disabled:disabled {
+  border-color: var(--color-border-disabled);
+}
+
+/* Focus utilities */
+.focus-ring {
+  box-shadow: 0 0 0 2px var(--color-focus-ring-offset), 0 0 0 4px var(--color-focus-ring);
+}
+
+.focus-outline {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "zabi-components",
-  "version": "4.0.2",
-  "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS, and 100% SSR-safe components",
+  "version": "5.0.2",
+  "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
-  "main": "dist/index/index.js",
-  "module": "dist/index/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index/index.js",
-      "svelte": "./dist/index/index.js"
+      "import": "./dist/index.js",
+      "svelte": "./dist/index.js"
     },
     "./atoms": {
       "types": "./dist/atoms/index.d.ts",
@@ -31,6 +31,18 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/types/index.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./lib/ssr-safe": {
+      "types": "./dist/routes/lib/ssr-safe.ts",
+      "import": "./dist/routes/lib/ssr-safe.ts"
+    },
+    "./lib/variant-utils": {
+      "types": "./dist/routes/lib/variant-utils.ts",
+      "import": "./dist/routes/lib/variant-utils.ts"
+    },
     "./dist/zabi-components.css": "./dist/zabi-components.css",
     "./package.json": "./package.json"
   },
@@ -58,7 +70,8 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run build:types",
-    "build:lib": "vite build --config vite.lib.config.ts && node scripts/generate-types.js",
+    "build:lib": "svelte-package -o dist --input src/components && mkdir -p dist/routes/lib && cp src/routes/lib/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/ && npm run build:css && npm run build:types",
+    "build:css": "echo '/* Zabi Components CSS */' > dist/zabi-components.css && cat src/app.css >> dist/zabi-components.css && find dist -name '*.css' -not -name 'zabi-components.css' -exec cat {} \\; >> dist/zabi-components.css",
     "build:types": "tsc --project tsconfig.lib.json",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
@@ -69,26 +82,31 @@
   "devDependencies": {
     "@storybook/addon-svelte-csf": "^5.0.8",
     "@storybook/sveltekit": "^9.1.7",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.44.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@tsconfig/svelte": "^5.0.2",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.47.2",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@tsconfig/svelte": "^5.0.5",
     "@types/node": "^24.5.2",
+    "@types/react": "^19.2.2",
+    "@tailwindcss/postcss": "^4.1.13",
     "autoprefixer": "^10.4.17",
     "postcss": "^8.4.35",
     "storybook": "^9.1.7",
     "svelte": "^5.38.10",
-    "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^6.0.0"
+    "svelte-check": "^4.3.1",
+    "tailwindcss": "^4.1.13",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.6"
   },
   "dependencies": {
     "@lucide/svelte": "^0.544.0",
-    "@opentelemetry/api": "^1.9.0"
+    "@opentelemetry/api": "^1.9.0",
+    "glob": "^11.0.3"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
+    "react": "^18.0.0",
     "svelte": "^5.38.10"
   },
   "peerDependenciesMeta": {
@@ -97,8 +115,14 @@
     },
     "@sveltejs/kit": {
       "optional": true
+    },
+    "react": {
+      "optional": true
     }
   },
-  "svelte": "./dist/index/index.js",
+  "overrides": {
+    "cookie": "^0.7.0"
+  },
+  "svelte": "./dist/index.js",
   "ssr": true
 }