zabi-components 5.0.17 → 5.0.19

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,10 +24,8 @@
         ...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";
@@ -39,7 +36,6 @@
         return `${baseClasses} cursor-pointer`;
     });
 
-    // Checkbox border and background classes matching M3 design
     const checkboxBoxClasses = $derived(() => {
         if (checked) {
             return disabled

package/dist/atoms/CodeBlock.svelte

@@ -33,7 +33,6 @@
     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-base-800 border-b border-base-700"
     >
@@ -81,7 +80,6 @@
         {/if}
     </div>
 
-    <!-- Code content -->
     <pre class="p-4 overflow-x-auto text-sm text-base-100 leading-relaxed"><code
             class="language-{language}">{@html code}</code
         ></pre>
@@ -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 bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg text-sm text-body placeholder:text-description transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
-        const stateClasses =
-            isValidHex(value) || value === ""
-                ? "border-base-300 focus:border-brand-500 focus:ring-brand-500"
-                : "border-red-300 focus:border-red-500 focus:ring-red-500";
-
-        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-base-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;
     }
 
@@ -52,7 +43,6 @@
         </div>
     </div>
 {:else}
-    <!-- SSR fallback -->
     <div
         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}

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";
+    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
 
-    // SSR-safe ID generation
     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,10 +37,8 @@
         ...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 {
@@ -55,7 +53,6 @@
                 leading: "leading-6",
             };
         } else {
-            // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
@@ -64,7 +61,6 @@
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -75,7 +71,6 @@
                 : "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 =
@@ -84,12 +79,10 @@
         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",

package/dist/atoms/Select.svelte

@@ -7,7 +7,6 @@
         AlertCircle,
     } from "@lucide/svelte";
 
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -47,7 +46,6 @@
 
     let isOpen = $state(false);
 
-    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
         if (size === "sm") {
             return {
@@ -62,7 +60,6 @@
                 leading: "leading-6",
             };
         } else {
-            // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
@@ -71,7 +68,6 @@
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -82,7 +78,6 @@
                 : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Trigger button classes matching M3 design
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
@@ -91,12 +86,10 @@
         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";
@@ -108,7 +101,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;
@@ -116,10 +108,8 @@
         return null;
     });
 
-    // Generate unique ID - SSR safe
     const selectId = generateId("select");
 
-    // Get selected option label
     const selectedLabel = $derived(() => {
         if (isEmpty()) {
             return String(placeholder || "Select an option");
@@ -130,7 +120,6 @@
             : String(placeholder || "Select an option");
     });
 
-    // Check if value is empty
     const isEmpty = $derived(() => {
         return value === undefined || value === null || value === "";
     });
@@ -140,7 +129,6 @@
         value = optionValue;
         isOpen = false;
 
-        // Create a synthetic event for onchange
         if (onchange) {
             const syntheticEvent = new Event("change", { bubbles: true });
             Object.defineProperty(syntheticEvent, "target", {
@@ -157,7 +145,6 @@
         isOpen = !isOpen;
     }
 
-    // Close dropdown when clicking outside
     function handleClickOutside(event: MouseEvent) {
         if (
             isOpen &&
@@ -167,7 +154,6 @@
         }
     }
 
-    // Handle escape key
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === "Escape" && isOpen) {
             isOpen = false;

package/dist/atoms/Textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
 
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -17,7 +17,8 @@
         placeholder?: string;
         disabled?: boolean;
         rows?: number;
-        variant?: "default" | "success" | "warning" | "error";
+        size?: SizeVariant;
+        variant?: SemanticVariant;
         message?: string;
         oninput?: (event: Event) => void;
     }
@@ -35,10 +36,8 @@
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe (call directly, not in $state)
     const textareaId = generateId("textarea");
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
             ? "border-success focus:border-success focus:ring-success"
@@ -49,7 +48,6 @@
                 : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Textarea classes matching M3 design
     const textareaClasses = $derived(() => {
         const baseClasses =
             "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 resize-y px-4 py-2.5 text-base leading-6";
@@ -57,12 +55,10 @@
         return `${baseClasses} ${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";
@@ -74,7 +70,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;
@@ -86,7 +81,6 @@
         const target = event.target as HTMLTextAreaElement;
         value = target.value;
 
-        // Call the parent's oninput handler if provided
         if (oninput) {
             oninput(event);
         }

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

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

package/dist/atoms/ThemeToggle.svelte

@@ -2,7 +2,6 @@
     import { onMount } from "svelte";
     import { Sun, Moon } from "@lucide/svelte";
     
-    // SSR-safe utilities
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
     }
@@ -28,7 +27,6 @@
 
     onMount(() => {
         mounted = true;
-        // Check for saved theme preference or default to light mode
         const storage = safeLocalStorage();
         if (storage) {
             const savedTheme = storage.getItem("theme");
@@ -71,7 +69,6 @@
         }
     }
 
-    // Size classes matching M3 design
     const sizeClass = $derived(() => {
         if (size === "sm") {
             return {
@@ -84,7 +81,6 @@
                 icon: 24
             };
         } else {
-            // default md
             return {
                 button: "w-10 h-10",
                 icon: 20
@@ -92,14 +88,12 @@
         }
     });
 
-    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         if (variant === "ghost") {
             return "bg-transparent hover:bg-base-100 border-0";
         } else if (variant === "outline") {
             return "bg-base-50 hover:bg-base-100 border border-border";
         } else {
-            // default
             return "bg-base-50 hover:bg-base-100 border-0";
         }
     });
@@ -141,7 +135,6 @@
         {/if}
     </button>
 {:else}
-    <!-- SSR fallback -->
     <button
         class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer"
         aria-label="Theme toggle"

package/dist/atoms/Toast.svelte

@@ -16,7 +16,6 @@
 
     let isVisible = $state(true);
 
-    // Simple type classes
     const typeClasses = {
         success: "bg-green-100 border-green-300 text-success",
         error: "bg-red-100 border-red-300 text-error",