zabi-components 5.0.15 → 5.0.18

package/dist/atoms/CardContent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<div
+    class="p-6 pt-0 {className}"
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
+

package/dist/atoms/CardContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    className?: string;
+    children?: Snippet;
+}
+declare const CardContent: import("svelte").Component<Props, {}, "">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/atoms/CardDescription.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<p
+    class="text-sm text-description {className}"
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</p>
+

package/dist/atoms/CardDescription.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    className?: string;
+    children?: Snippet;
+}
+declare const CardDescription: import("svelte").Component<Props, {}, "">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

package/dist/atoms/CardFooter.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<footer
+    class="flex items-center p-6 pt-0 {className}"
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</footer>
+

package/dist/atoms/CardFooter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    className?: string;
+    children?: Snippet;
+}
+declare const CardFooter: import("svelte").Component<Props, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/atoms/CardHeader.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<header
+    class="flex flex-col space-y-1.5 p-6 {className}"
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</header>
+

package/dist/atoms/CardHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    className?: string;
+    children?: Snippet;
+}
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/atoms/CardTitle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        level = 3,
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const headingTag = $derived(`h${level}`);
+    const headingClasses = $derived(() => {
+        const baseClasses = "text-2xl font-semibold leading-none tracking-tight text-headline";
+        return `${baseClasses} ${className}`.trim();
+    });
+</script>
+
+<svelte:element
+    this={headingTag}
+    class={headingClasses()}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>
+

package/dist/atoms/CardTitle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+    children?: Snippet;
+}
+declare const CardTitle: import("svelte").Component<Props, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/atoms/Checkbox.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -25,29 +24,27 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe (call directly, not in $state)
     const checkboxId = generateId("checkbox");
 
-    // Checkbox container classes matching M3 design
     const checkboxContainerClasses = $derived(() => {
-        const baseClasses = "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
-        
+        const baseClasses =
+            "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
+
         if (disabled) {
             return `${baseClasses} opacity-50 cursor-not-allowed`;
         }
         return `${baseClasses} cursor-pointer`;
     });
 
-    // Checkbox border and background classes matching M3 design
     const checkboxBoxClasses = $derived(() => {
         if (checked) {
-            return disabled 
-                ? "border-0 bg-brand-300"
-                : "border-0 bg-brand-600";
+            return disabled
+                ? "border-0 opacity-50 bg-brand-500"
+                : "border-0 bg-brand-500";
         }
         return disabled
-            ? "border-2 border-stone-400 bg-transparent"
-            : "border-2 border-stone-400 bg-transparent";
+            ? "border-2 border-base-400 bg-transparent"
+            : "border-2 border-base-400 bg-transparent";
     });
 
     function handleChange(event: Event) {
@@ -63,7 +60,9 @@
 <div class="flex items-center gap-2">
     <label
         for={checkboxId}
-        class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+        class="flex items-center gap-2 cursor-pointer {disabled
+            ? 'opacity-50 cursor-not-allowed'
+            : ''}"
     >
         <div class={checkboxContainerClasses()}>
             <input
@@ -78,16 +77,16 @@
             />
             <div class="absolute inset-0 {checkboxBoxClasses()} rounded"></div>
             {#if checked}
-                <svg 
-                    class="absolute w-3 h-3 text-white pointer-events-none z-10" 
-                    fill="none" 
-                    stroke="currentColor" 
+                <svg
+                    class="absolute w-3 h-3 text-base-50 pointer-events-none z-10"
+                    fill="none"
+                    stroke="currentColor"
                     viewBox="0 0 24 24"
                 >
-                    <path 
-                        stroke-linecap="round" 
-                        stroke-linejoin="round" 
-                        stroke-width="2.5" 
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2.5"
                         d="M5 13l4 4L19 7"
                     />
                 </svg>

package/dist/atoms/CodeBlock.svelte

@@ -30,12 +30,11 @@
 </script>
 
 <div
-    class="code-block relative bg-gray-900 rounded-lg overflow-hidden {className}"
+    class="code-block relative bg-base-900 rounded-lg overflow-hidden {className}"
     {...restProps}
 >
-    <!-- Header -->
     <div
-        class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"
+        class="flex items-center justify-between px-4 py-2 bg-base-800 border-b border-base-700"
     >
         <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full bg-red-500"></div>
@@ -45,7 +44,7 @@
         {#if showCopyButton}
             <button
                 onclick={copyToClipboard}
-                class="flex items-center gap-2 px-3 py-1 text-xs text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors duration-200"
+                class="flex items-center gap-2 px-3 py-1 text-xs text-base-300 hover:text-white hover:bg-base-700 rounded transition-colors duration-200"
                 aria-label="Copy code to clipboard"
             >
                 {#if copied}
@@ -81,8 +80,7 @@
         {/if}
     </div>
 
-    <!-- Code content -->
-    <pre class="p-4 overflow-x-auto text-sm text-gray-100 leading-relaxed"><code
+    <pre class="p-4 overflow-x-auto text-sm text-base-100 leading-relaxed"><code
             class="language-{language}">{@html code}</code
         ></pre>
 </div>
@@ -92,7 +90,6 @@
         font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
     }
 
-    /* Basic syntax highlighting for common languages */
     :global(.language-svelte .token.tag),
     :global(.language-html .token.tag) {
         color: #f92672;

package/dist/atoms/ColorPicker.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-    // SSR-safe ID generation
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import Input from "./Input.svelte";
 
     interface Props {
         value?: string;
@@ -25,90 +18,65 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe
-    const inputId = generateId("color-picker");
-
-    // Hex color validation
     function isValidHex(hex: string): boolean {
         const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
         return hexPattern.test(hex);
     }
 
-    // Handle hex input changes
-    function handleHexInput(event: Event) {
-        const target = event.target as HTMLInputElement;
-        const hexValue = target.value;
+    const variant = $derived(() => {
+        if (value && !isValidHex(value)) {
+            return "error";
+        }
+        return "default";
+    });
 
-        if (hexValue === "" || isValidHex(hexValue)) {
-            value = hexValue;
-            if (onchange) onchange(event);
+    const message = $derived(() => {
+        if (value && !isValidHex(value)) {
+            return "Please enter a valid hex color (e.g., #ff0000 or #f00)";
         }
+        return "";
+    });
+
+    function handleInput(event: Event) {
+        if (onchange) onchange(event);
     }
 
-    // Handle hex input blur - validate and format
-    function handleHexBlur(event: Event) {
+    function handleBlur(event: Event) {
         const target = event.target as HTMLInputElement;
         let hexValue = target.value.trim();
 
-        // Add # if missing
         if (hexValue && !hexValue.startsWith("#")) {
             hexValue = "#" + hexValue;
         }
 
-        // Validate and update
         if (hexValue === "" || isValidHex(hexValue)) {
             value = hexValue;
-            target.value = hexValue;
-        } else {
-            // Reset to current value if invalid
-            target.value = value;
+            if (onchange) onchange(event);
         }
     }
-
-    // Input classes
-    const inputClasses = $derived(() => {
-        const baseClasses =
-            "w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-200";
-        const stateClasses =
-            isValidHex(value) || value === ""
-                ? "border-gray-300 focus:border-brand-500"
-                : "border-red-300 focus:border-red-500 focus:ring-red-200";
-
-        return `${baseClasses} ${stateClasses}`.trim();
-    });
 </script>
 
-<div class="space-y-2" {...restProps}>
-    {#if label}
-        <label for={inputId} class="block text-sm font-medium text-label">
-            {label}
-        </label>
-    {/if}
-
-    <div class="flex items-center space-x-2">
-        <input
-            id={inputId}
-            type="text"
-            {placeholder}
-            {value}
-            oninput={handleHexInput}
-            onblur={handleHexBlur}
-            {disabled}
-            class={inputClasses()}
-            aria-label="Hex color input"
-        />
+<div {...restProps}>
+    <div class="flex items-start gap-2">
+        <div class="flex-1">
+            <Input
+                bind:value
+                {label}
+                {placeholder}
+                {disabled}
+                variant={variant()}
+                message={message()}
+                oninput={handleInput}
+                onblur={handleBlur}
+                aria-label="Hex color input"
+            />
+        </div>
         {#if value && isValidHex(value)}
             <div
-                class="w-8 h-8 rounded border-2 border-gray-300 shrink-0"
+                class="w-8 h-8 rounded border-2 border-base-300 shrink-0 mt-6"
                 style="background-color: {value};"
                 aria-label="Color preview"
             ></div>
         {/if}
     </div>
-
-    {#if value && !isValidHex(value)}
-        <p class="text-xs text-red-500">
-            Please enter a valid hex color (e.g., #ff0000 or #f00)
-        </p>
-    {/if}
 </div>

package/dist/atoms/FeatureCard.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
-    /**
-     * FeatureCard component - SSR-safe implementation
-     * @component
-     */
-
     interface Props {
-        /** Icon to display */
         icon?: string;
-        /** Title of the feature */
         title: string;
-        /** Description of the feature */
         description: string;
-        /** Additional CSS classes */
         className?: string;
     }
 
@@ -34,7 +25,7 @@
 
 {#if mounted}
     <div
-        class="p-6 rounded-lg bg-surface-level-0 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
+        class="p-6 rounded-lg bg-base-50 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
         {...restProps}
     >
         <div class="flex items-start gap-4">
@@ -52,9 +43,8 @@
         </div>
     </div>
 {:else}
-    <!-- SSR fallback -->
     <div
-        class="p-6 rounded-lg bg-gray-100 border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-colors duration-200 {className}"
+        class="p-6 rounded-lg bg-base-100 border border-base-300 hover:border-base-400 hover:shadow-sm transition-colors duration-200 {className}"
         {...restProps}
     >
         <div class="flex items-start gap-4">

package/dist/atoms/FeatureCard.svelte.d.ts

@@ -1,15 +1,7 @@
-/**
- * FeatureCard component - SSR-safe implementation
- * @component
- */
 interface Props {
-    /** Icon to display */
     icon?: string;
-    /** Title of the feature */
     title: string;
-    /** Description of the feature */
     description: string;
-    /** Additional CSS classes */
     className?: string;
 }
 declare const FeatureCard: import("svelte").Component<Props, {}, "">;

package/dist/atoms/Heading.svelte

@@ -6,11 +6,9 @@
 
     let { level = 1, text }: Props = $props();
 
-    // Automatic weight and size based on heading level
     const fontWeight = $derived(level <= 2 ? "700" : "500");
     const Tag = $derived(`h${level}`);
 
-    // Size classes for different heading levels
     const sizeClasses = {
         1: "text-4xl",
         2: "text-3xl",

package/dist/atoms/Input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    
-    // SSR-safe ID generation
+    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
+
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -17,8 +17,8 @@
         label?: string;
         placeholder?: string;
         disabled?: boolean;
-        size?: "sm" | "md" | "lg";
-        variant?: "default" | "success" | "warning" | "error";
+        size?: SizeVariant;
+        variant?: SemanticVariant;
         message?: string;
         oninput?: (event: Event) => void;
     }
@@ -37,34 +37,30 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe (call directly, not in $state)
     const inputId = generateId("input");
 
-    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
         if (size === "sm") {
             return {
                 padding: "px-4 py-2",
                 text: "text-sm",
-                leading: "leading-5"
+                leading: "leading-5",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         } else {
-            // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -75,21 +71,18 @@
                 : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Input classes matching M3 design
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
 
-    // Label classes using semantic text colors
     const labelClasses = $derived(
         () => "block text-sm font-medium text-label mb-1",
     );
 
-    // Message classes based on variant
     const messageClasses = $derived(() => {
         if (variant === "error") {
             return "text-error text-sm mt-1 flex items-center gap-1.5";
@@ -101,7 +94,6 @@
         return "text-description text-sm mt-1 flex items-center gap-1.5";
     });
 
-    // Get icon component based on variant
     const getIcon = $derived(() => {
         if (variant === "error") return AlertCircle;
         if (variant === "success") return CheckCircle;
@@ -113,7 +105,6 @@
         const target = event.target as HTMLInputElement;
         value = target.value;
 
-        // Call the parent's oninput handler if provided
         if (oninput) {
             oninput(event);
         }

package/dist/atoms/Input.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
 interface Props {
     value?: string;
     type?: string;
@@ -5,8 +6,8 @@ interface Props {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    variant?: "default" | "success" | "warning" | "error";
+    size?: SizeVariant;
+    variant?: SemanticVariant;
     message?: string;
     oninput?: (event: Event) => void;
 }

package/dist/atoms/Progress.svelte

@@ -14,17 +14,14 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe
     let progressId = $state(
         typeof window !== "undefined"
             ? `progress-${Math.random().toString(36).substr(2, 9)}`
             : `progress-ssr-${Date.now()}`,
     );
 
-    // Calculate percentage
     let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
 
-    // Simple size classes
     let sizeClasses = $derived({
         sm: "h-1",
         md: "h-2",
@@ -44,7 +41,7 @@
 
     <div
         id={progressId}
-        class="w-full bg-gray-200 rounded-full overflow-hidden {sizeClasses[
+        class="w-full bg-base-200 rounded-full overflow-hidden {sizeClasses[
             size
         ]}"
         role="progressbar"