zabi-components 5.0.11 → 5.0.13

package/dist/atoms/Select.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Dropdown from "../molecules/Dropdown.svelte";
+    import { ChevronDown, CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
@@ -19,6 +22,8 @@
         label?: string;
         disabled?: boolean;
         size?: "sm" | "md" | "lg";
+        variant?: "default" | "success" | "warning" | "error";
+        message?: string;
         onchange?: (event: Event) => void;
     }
 
@@ -29,27 +34,55 @@
         label = "",
         disabled = false,
         size = "md",
+        variant = "default",
+        message = "",
         ...restProps
     }: Props = $props();
 
-    // Generate unique ID - SSR safe (call directly, not in $state)
-    const selectId = generateId("select");
+    let isOpen = $state(false);
 
-    // Size classes using full class names
+    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
-        return size === "sm"
-            ? "px-3 py-1.5 text-sm"
-            : size === "lg"
-              ? "px-5 py-3 text-base"
-              : "px-4 py-2 text-sm"; // default md
+        if (size === "sm") {
+            return {
+                padding: "px-4 py-2",
+                text: "text-sm",
+                leading: "leading-5"
+            };
+        } else if (size === "lg") {
+            return {
+                padding: "px-4 py-3",
+                text: "text-base",
+                leading: "leading-6"
+            };
+        } else {
+            // default md
+            return {
+                padding: "px-4 py-2.5",
+                text: "text-base",
+                leading: "leading-6"
+            };
+        }
     });
 
-    // Select classes using Badge pattern
-    const selectClasses = $derived(() => {
+    // Variant classes using semantic colors
+    const variantClass = $derived(() => {
+        return variant === "success"
+            ? "border-success focus:border-success focus:ring-success"
+            : variant === "warning"
+              ? "border-warning focus:border-warning focus:ring-warning"
+              : variant === "error"
+                ? "border-error focus:border-error focus:ring-error"
+                : "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 =
-            "w-full border border-border rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface focus:ring-focus focus:border-focus disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled";
+            "w-full bg-brand-100 rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
 
-        return `${baseClasses} ${sizeClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
 
     // Label classes using semantic text colors
@@ -57,32 +90,130 @@
         () => "block text-sm font-medium text-label mb-1",
     );
 
-    function handleChange(event: Event) {
-        const target = event.target as HTMLSelectElement;
-        value = target.value;
+    // Message classes based on variant
+    const messageClasses = $derived(() => {
+        if (variant === "error") {
+            return "text-error text-sm mt-1 flex items-center gap-1.5";
+        } else if (variant === "success") {
+            return "text-success text-sm mt-1 flex items-center gap-1.5";
+        } else if (variant === "warning") {
+            return "text-warning text-sm mt-1 flex items-center gap-1.5";
+        }
+        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;
+        if (variant === "warning") return AlertTriangle;
+        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");
+        }
+        const selected = options.find((opt) => opt.value === value);
+        return selected?.label ? String(selected.label) : String(placeholder || "Select an option");
+    });
+
+    // Check if value is empty
+    const isEmpty = $derived(() => {
+        return value === undefined || value === null || value === "";
+    });
+
+    function handleOptionClick(optionValue: string | number) {
+        if (disabled) return;
+        value = optionValue;
+        isOpen = false;
+
+        // Create a synthetic event for onchange
+        if (onchange) {
+            const syntheticEvent = new Event("change", { bubbles: true });
+            Object.defineProperty(syntheticEvent, "target", {
+                value: { value: optionValue },
+                enumerable: true
+            });
+            (onchange as (event: Event) => void)(syntheticEvent);
+        }
+    }
+
+    function handleTriggerClick(event: MouseEvent) {
+        if (disabled) return;
+        event.stopPropagation();
+        isOpen = !isOpen;
+    }
+
+    // Close dropdown when clicking outside
+    function handleClickOutside(event: MouseEvent) {
+        if (isOpen && !(event.target as HTMLElement).closest('.select-container')) {
+            isOpen = false;
+        }
+    }
+
+    // Handle escape key
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && isOpen) {
+            isOpen = false;
+        }
     }
 </script>
 
-<div>
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="w-full select-container">
     {#if label}
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
-    <select
-        id={selectId}
-        {value}
-        {disabled}
-        class={selectClasses()}
-        onchange={handleChange}
-        {...restProps}
-    >
-        {#if placeholder && !value}
-            <option value="" disabled>{placeholder}</option>
-        {/if}
-        {#each options as option (option.value)}
-            <option value={option.value} disabled={option.disabled}>
-                {option.label}
-            </option>
-        {/each}
-    </select>
-</div>
+    <Dropdown isOpen={isOpen} placement="bottom-start">
+        {#snippet trigger()}
+            <button
+                type="button"
+                id={selectId}
+                class={triggerClasses()}
+                {disabled}
+                onclick={handleTriggerClick}
+                aria-haspopup="listbox"
+                aria-expanded={isOpen}
+                aria-describedby={message ? `${selectId}-message` : undefined}
+            >
+                <span class="text-left flex-1 {isEmpty() ? 'text-description' : 'text-body'}">
+                    {isEmpty() ? placeholder : (options.find((opt) => opt.value === value)?.label || placeholder)}
+                </span>
+                <ChevronDown
+                    size={20}
+                    class="text-description transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+                />
+            </button>
+        {/snippet}
+        {#snippet children()}
+            <div class="px-2 py-2">
+                {#each options as option (option.value)}
+                    <button
+                        type="button"
+                        class="w-full text-left px-4 py-2 text-body hover:bg-brand-50 transition-colors rounded-md my-0.5 {option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} {value === option.value ? 'bg-brand-50' : ''}"
+                        onclick={() => handleOptionClick(option.value)}
+                        disabled={option.disabled}
+                    >
+                        {option.label}
+                    </button>
+                {/each}
+            </div>
+        {/snippet}
+    </Dropdown>
+    {#if message && variant !== "default"}
+        <p id={`${selectId}-message`} class={messageClasses()} role="alert">
+            {#if getIcon()}
+                {@const Icon = getIcon()}
+                <Icon size={14} class="shrink-0" />
+            {/if}
+            <span>{message}</span>
+        </p>
+    {/if}
+</div>

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

@@ -9,6 +9,8 @@ interface Props {
     label?: string;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
+    variant?: "default" | "success" | "warning" | "error";
+    message?: string;
     onchange?: (event: Event) => void;
 }
 declare const Select: import("svelte").Component<Props, {}, "">;

package/dist/atoms/ThemeToggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { Sun, Moon } from "@lucide/svelte";
+    
     // SSR-safe utilities
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
@@ -11,12 +12,18 @@
     }
 
     interface Props {
-        isDark?: boolean;
+        size?: "sm" | "md" | "lg";
+        variant?: "default" | "ghost" | "outline";
         onclick?: (event: Event) => void;
     }
 
-    let { isDark = false, ...restProps }: Props = $props();
+    let { 
+        size = "md",
+        variant = "default",
+        ...restProps 
+    }: Props = $props();
 
+    let isDark = $state(false);
     let mounted = $state(false);
 
     onMount(() => {
@@ -27,14 +34,10 @@
             const savedTheme = storage.getItem("theme");
             let prefersDark = false;
 
-            // Only check media query when mounted and in browser
-            if (mounted && typeof window !== "undefined" && window.matchMedia) {
+            if (window.matchMedia) {
                 try {
-                    prefersDark = window.matchMedia(
-                        "(prefers-color-scheme: dark)",
-                    ).matches;
+                    prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
                 } catch (e) {
-                    // Fallback if matchMedia fails
                     prefersDark = false;
                 }
             }
@@ -51,6 +54,10 @@
         if (mounted && storage) {
             storage.setItem("theme", isDark ? "dark" : "light");
         }
+        
+        if (onclick) {
+            (onclick as (event: Event) => void)(event);
+        }
     }
 
     function updateTheme() {
@@ -63,26 +70,82 @@
             }
         }
     }
+
+    // Size classes matching M3 design
+    const sizeClass = $derived(() => {
+        if (size === "sm") {
+            return {
+                button: "w-8 h-8",
+                icon: 16
+            };
+        } else if (size === "lg") {
+            return {
+                button: "w-12 h-12",
+                icon: 24
+            };
+        } else {
+            // default md
+            return {
+                button: "w-10 h-10",
+                icon: 20
+            };
+        }
+    });
+
+    // Variant classes using semantic colors
+    const variantClass = $derived(() => {
+        if (variant === "ghost") {
+            return "bg-transparent hover:bg-surface-hover border-0";
+        } else if (variant === "outline") {
+            return "bg-surface-elevated hover:bg-surface-hover border border-border";
+        } else {
+            // default
+            return "bg-surface-elevated hover:bg-surface-hover border-0";
+        }
+    });
+
+    const buttonClasses = $derived(() => {
+        const sizeStyles = sizeClass();
+        return `
+            ${sizeStyles.button}
+            ${variantClass()}
+            rounded-lg
+            flex
+            items-center
+            justify-center
+            text-label
+            cursor-pointer
+            transition-colors
+            duration-200
+            focus:outline-none
+            focus:ring-2
+            focus:ring-brand-500
+            focus:ring-offset-2
+            focus:ring-offset-surface
+        `.trim().replace(/\s+/g, " ");
+    });
 </script>
 
 {#if mounted}
     <button
         onclick={toggleTheme}
-        class="w-10 h-10 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-500"
+        class={buttonClasses()}
         aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        type="button"
         {...restProps}
     >
         {#if isDark}
-            <Moon size={20} class="text-label" />
+            <Moon size={sizeClass().icon} class="text-label" />
         {:else}
-            <Sun size={20} class="text-label" />
+            <Sun size={sizeClass().icon} class="text-label" />
         {/if}
     </button>
 {:else}
     <!-- SSR fallback -->
     <button
-        class="w-10 h-10 bg-gray-100 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 cursor-pointer"
+        class="w-10 h-10 bg-surface-elevated rounded-lg flex items-center justify-center text-label cursor-pointer"
         aria-label="Theme toggle"
+        type="button"
         {...restProps}
     >
         <Sun size={20} class="text-label" />

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

@@ -1,5 +1,6 @@
 interface Props {
-    isDark?: boolean;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost" | "outline";
     onclick?: (event: Event) => void;
 }
 declare const ThemeToggle: import("svelte").Component<Props, {}, "">;

package/dist/atoms/Toggle.svelte

@@ -39,21 +39,21 @@
         if (onchange) onchange({ checked });
     }
 
-    // Toggle button classes using full class names
+    // Toggle button classes matching M3 design
     const toggleButtonClasses = $derived(() =>
         [
-            "relative inline-flex w-10 h-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
-            checked ? "bg-brand-600" : "bg-gray-200",
+            "relative inline-flex w-10 h-6 flex-shrink-0 cursor-pointer rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+            checked ? "bg-brand-600" : "bg-stone-300",
             disabled && "opacity-50 cursor-not-allowed",
         ]
             .filter(Boolean)
             .join(" "),
     );
 
-    // Toggle thumb classes using full class names
+    // Toggle thumb classes matching M3 design
     const toggleThumbClasses = $derived(() => {
         const baseClasses =
-            "pointer-events-none inline-block w-5 h-5 transform rounded-full bg-white shadow-lg transition duration-200 ease-in-out";
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-200 ease-in-out";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
 
         return `${baseClasses} ${positionClasses}`.trim();

package/dist/molecules/Dropdown.svelte

@@ -11,118 +11,56 @@
         trigger,
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
+
+    // Get positioning classes based on placement
+    const placementClasses = $derived(() => {
+        const base = "absolute z-dropdown min-w-[12rem]";
+        const positioning = {
+            "bottom-start": "top-full left-0 mt-2",
+            "bottom-end": "top-full right-0 mt-2",
+            "top-start": "bottom-full left-0 mb-2",
+            "top-end": "bottom-full right-0 mb-2",
+        };
+        return `${base} ${positioning[placement]}`;
+    });
+
+    // Get transform classes based on placement and open state
+    const transformClasses = $derived(() => {
+        if (!isOpen) {
+            const hiddenTransform = {
+                "bottom-start": "translate-y-1",
+                "bottom-end": "translate-y-1",
+                "top-start": "-translate-y-1",
+                "top-end": "-translate-y-1",
+            };
+            return `opacity-0 invisible ${hiddenTransform[placement]}`;
+        }
+        return "opacity-100 visible translate-y-0";
+    });
+
+    // Get dropdown content classes
+    const dropdownContentClasses = $derived(() => {
+        return `
+            ${placementClasses()}
+            bg-brand-100
+            rounded-lg
+            shadow-lg
+            border-0
+            py-2
+            transition-all
+            duration-200
+            ease-in-out
+            ${transformClasses()}
+        `.trim().replace(/\s+/g, " ");
+    });
 </script>
 
-<div
-    class="dropdown-container group relative inline-block"
-    data-placement={placement}
->
+<div class="relative inline-block" data-placement={placement}>
     {@render trigger?.()}
 
     {#if isOpen}
-        <div
-            class="dropdown-content opacity-100 visible transform-none group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible"
-        >
+        <div class={dropdownContentClasses()}>
             {@render children?.()}
         </div>
     {/if}
 </div>
-
-<style>
-    .dropdown-container {
-        position: relative;
-        display: inline-block;
-    }
-
-    .dropdown-content {
-        position: absolute;
-        z-index: 50;
-        background-color: white;
-        border: 1px solid #e5e7eb;
-        border-radius: 0.5rem;
-        box-shadow:
-            0 10px 15px -3px rgba(0, 0, 0, 0.1),
-            0 4px 6px -2px rgba(0, 0, 0, 0.05);
-        min-width: 12rem;
-        opacity: 0;
-        visibility: hidden;
-        transition:
-            opacity 0.2s ease-in-out,
-            visibility 0.2s ease-in-out,
-            transform 0.2s ease-in-out;
-    }
-
-    /* Positioning based on data-placement */
-    .dropdown-container[data-placement="bottom-start"] .dropdown-content {
-        top: calc(100% + 8px);
-        left: 0;
-        transform: translateY(4px);
-    }
-
-    .dropdown-container[data-placement="bottom-end"] .dropdown-content {
-        top: calc(100% + 8px);
-        right: 0;
-        transform: translateY(4px);
-    }
-
-    .dropdown-container[data-placement="top-start"] .dropdown-content {
-        bottom: calc(100% + 8px);
-        left: 0;
-        transform: translateY(-4px);
-    }
-
-    .dropdown-container[data-placement="top-end"] .dropdown-content {
-        bottom: calc(100% + 8px);
-        right: 0;
-        transform: translateY(-4px);
-    }
-
-    /* Show on hover/focus */
-    .dropdown-container:hover .dropdown-content,
-    .dropdown-container:focus-within .dropdown-content {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0);
-    }
-
-    /* Arrow styling */
-    .dropdown-content::before {
-        content: "";
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 6px;
-        border-color: transparent;
-    }
-
-    .dropdown-container[data-placement="bottom-start"]
-        .dropdown-content::before,
-    .dropdown-container[data-placement="bottom-end"] .dropdown-content::before {
-        top: -6px;
-        border-bottom-color: white;
-    }
-
-    .dropdown-container[data-placement="top-start"] .dropdown-content::before,
-    .dropdown-container[data-placement="top-end"] .dropdown-content::before {
-        bottom: -6px;
-        border-top-color: white;
-    }
-
-    .dropdown-container[data-placement="bottom-start"]
-        .dropdown-content::before {
-        left: 1rem;
-    }
-
-    .dropdown-container[data-placement="bottom-end"] .dropdown-content::before {
-        right: 1rem;
-    }
-
-    .dropdown-container[data-placement="top-start"] .dropdown-content::before {
-        left: 1rem;
-    }
-
-    .dropdown-container[data-placement="top-end"] .dropdown-content::before {
-        right: 1rem;
-    }
-</style>

package/dist/molecules/ImageUpload.svelte

@@ -23,6 +23,8 @@
     let fileInput = $state<HTMLInputElement>();
 
     function handleFileSelect(event: Event) {
+        if (disabled) return;
+
         const input = event.target as HTMLInputElement;
         if (!input.files || input.files.length === 0) return;
 
@@ -36,6 +38,8 @@
     }
 
     function removeImage() {
+        if (disabled) return;
+
         if (value && typeof URL !== "undefined" && URL.revokeObjectURL) {
             URL.revokeObjectURL(value);
         }
@@ -43,6 +47,7 @@
     }
 
     function triggerFileSelect() {
+        if (disabled) return;
         fileInput?.click();
     }
 </script>
@@ -54,10 +59,10 @@
             <img
                 src={value}
                 alt=""
-                class="w-full h-32 object-cover rounded-lg border border-border"
+                class="w-full h-32 object-cover rounded-lg border-0"
             />
             <div
-                class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
+                class="absolute inset-0 bg-black/50 dark:bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button
@@ -82,11 +87,15 @@
     {:else}
         <!-- Empty State -->
         <div
-            class="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-border-strong transition-colors cursor-pointer"
+            class="border-2 border-dashed border-stone-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
+                ? 'cursor-not-allowed opacity-50'
+                : 'cursor-pointer'}"
             onclick={triggerFileSelect}
             role="button"
-            tabindex="0"
-            onkeydown={(e) => e.key === "Enter" && triggerFileSelect()}
+            tabindex={disabled ? -1 : 0}
+            onkeydown={(e) =>
+                e.key === "Enter" && !disabled && triggerFileSelect()}
+            aria-disabled={disabled}
         >
             <div class="space-y-3">
                 <div
@@ -110,6 +119,7 @@
         type="file"
         {accept}
         onchange={handleFileSelect}
+        {disabled}
         class="hidden"
     />
 </div>