zabi-components 5.0.22 → 7.0.0

package/dist/atoms/Textarea.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-    import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { CheckCircle, AlertTriangle, AlertCircle } from '@lucide/svelte';
+    import type { SemanticVariant, SizeVariant } from '../types/variants.js';
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
+        id?: string;
         value?: string;
         name?: string;
+        class?: string;
         label?: string;
+        hideLabel?: boolean;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
+        loading?: boolean;
         rows?: number;
         size?: SizeVariant;
         variant?: SemanticVariant;
@@ -18,95 +22,112 @@
     }
 
     let {
-        value = "",
-        name = "",
-        label = "",
-        placeholder = "",
+        id: idProp,
+        value = $bindable(''),
+        name = '',
+        class: className = '',
+        label = '',
+        hideLabel = false,
+        placeholder = '',
         required = false,
         disabled = false,
+        loading = false,
         rows = 4,
-        variant = "default",
-        message = "",
+        size = 'md',
+        variant = 'default',
+        message = '',
         oninput,
         ...restProps
     }: Props = $props();
 
-    const textareaId = generateId("textarea");
+    const fallbackId = generateId('textarea');
+    const textareaId = $derived(idProp ?? fallbackId);
+    const isDisabled = $derived(disabled || loading);
 
     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
+        return variant === 'success'
+            ? 'border-success focus-visible:border-success'
+            : variant === 'warning'
+              ? 'border-warning focus-visible:border-warning'
+              : variant === 'error'
+                ? 'border-error focus-visible:border-error'
+                : 'border-input-border';
     });
 
     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";
+            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6';
 
-        return `${baseClasses} ${variantClass()}`.trim();
+        return `${baseClasses} ${variantClass()} ${className}`.trim();
     });
 
     const labelClasses = $derived(
-        () => "block text-sm font-medium text-label mb-1",
+        () => 'mb-1 block text-sm font-medium text-label',
     );
 
     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";
+        if (variant === 'error') {
+            return 'mt-1 flex items-center gap-1.5 text-sm text-error';
+        } else if (variant === 'success') {
+            return 'mt-1 flex items-center gap-1.5 text-sm text-success';
+        } else if (variant === 'warning') {
+            return 'mt-1 flex items-center gap-1.5 text-sm text-warning';
         }
-        return "text-description text-sm mt-1 flex items-center gap-1.5";
+        return 'mt-1 flex items-center gap-1.5 text-sm text-description';
     });
 
     const getIcon = $derived(() => {
-        if (variant === "error") return AlertCircle;
-        if (variant === "success") return CheckCircle;
-        if (variant === "warning") return AlertTriangle;
+        if (variant === 'error') return AlertCircle;
+        if (variant === 'success') return CheckCircle;
+        if (variant === 'warning') return AlertTriangle;
         return null;
     });
 
     function handleInput(event: Event) {
         const target = event.target as HTMLTextAreaElement;
         value = target.value;
-
-        if (oninput) {
-            oninput(event);
-        }
+        oninput?.(event);
     }
 </script>
 
 <div>
-    {#if label}
+    {#if label && !hideLabel}
         <label for={textareaId} class={labelClasses()}>{label}</label>
     {/if}
-    <textarea
-        id={textareaId}
-        {name}
-        {value}
-        {placeholder}
-        {required}
-        {disabled}
-        {rows}
-        class={textareaClasses()}
-        oninput={handleInput}
-        aria-invalid={variant === "error" ? "true" : undefined}
-        aria-required={required ? "true" : undefined}
-        aria-describedby={message ? `${textareaId}-message` : undefined}
-        {...restProps}
-    ></textarea>
-    {#if message && variant !== "default"}
+    <div class="relative">
+        <textarea
+            id={textareaId}
+            {name}
+            bind:value
+            {placeholder}
+            {required}
+            disabled={isDisabled}
+            {rows}
+            class={textareaClasses()}
+            oninput={handleInput}
+            aria-invalid={variant === 'error' ? 'true' : undefined}
+            aria-required={required ? 'true' : undefined}
+            aria-busy={loading ? 'true' : undefined}
+            aria-describedby={message ? `${textareaId}-message` : undefined}
+            {...restProps}
+        ></textarea>
+        {#if loading}
+            <span
+                class="pointer-events-none absolute top-3 right-3 flex items-center text-description"
+                aria-hidden="true"
+            >
+                <span
+                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
+                ></span>
+            </span>
+        {/if}
+    </div>
+    {#if message && variant !== 'default'}
         <p
             id={`${textareaId}-message`}
             class={messageClasses()}
-            role={variant === "error" ? "alert" : "status"}
-            aria-live={variant === "error" ? "assertive" : "polite"}
+            role={variant === 'error' ? 'alert' : 'status'}
+            aria-live={variant === 'error' ? 'assertive' : 'polite'}
         >
             {#if getIcon()}
                 {@const Icon = getIcon()}

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

@@ -1,17 +1,21 @@
-import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
+import type { SemanticVariant, SizeVariant } from '../types/variants.js';
 interface Props {
+    id?: string;
     value?: string;
     name?: string;
+    class?: string;
     label?: string;
+    hideLabel?: boolean;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     rows?: number;
     size?: SizeVariant;
     variant?: SemanticVariant;
     message?: string;
     oninput?: (event: Event) => void;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "">;
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/atoms/ThemeToggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { Sun, Moon } from "@lucide/svelte";
+    import { FOCUS_BRAND_CLASS } from "../util/focus-utils.js";
     
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
@@ -13,13 +14,15 @@
     interface Props {
         size?: "sm" | "md" | "lg";
         variant?: "default" | "ghost" | "outline";
+        disabled?: boolean;
         onclick?: (event: Event) => void;
     }
 
-    let { 
+    let {
         size = "md",
         variant = "default",
-        ...restProps 
+        disabled = false,
+        ...restProps
     }: Props = $props();
 
     let isDark = $state(false);
@@ -27,25 +30,27 @@
 
     onMount(() => {
         mounted = true;
-        const storage = safeLocalStorage();
-        if (storage) {
-            const savedTheme = storage.getItem("theme");
-            let prefersDark = false;
+        const doc = safeDocument();
+        if (doc) {
+            isDark = doc.documentElement.classList.contains("dark");
+        }
 
-            if (window.matchMedia) {
-                try {
-                    prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-                } catch (e) {
-                    prefersDark = false;
-                }
-            }
+        if (!window.matchMedia) return;
 
-            isDark = savedTheme === "dark" || (!savedTheme && prefersDark);
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleSystemChange = (event: MediaQueryListEvent) => {
+            const storage = safeLocalStorage();
+            if (storage && storage.getItem("theme")) return;
+            isDark = event.matches;
             updateTheme();
-        }
+        };
+
+        media.addEventListener("change", handleSystemChange);
+        return () => media.removeEventListener("change", handleSystemChange);
     });
 
     function toggleTheme(event: Event) {
+        if (disabled) return;
         isDark = !isDark;
         updateTheme();
         const storage = safeLocalStorage();
@@ -63,8 +68,10 @@
         if (mounted && doc) {
             if (isDark) {
                 doc.documentElement.classList.add("dark");
+                doc.documentElement.style.colorScheme = "dark";
             } else {
                 doc.documentElement.classList.remove("dark");
+                doc.documentElement.style.colorScheme = "light";
             }
         }
     }
@@ -90,11 +97,11 @@
 
     const variantClass = $derived(() => {
         if (variant === "ghost") {
-            return "bg-transparent hover:bg-base-100 border-0";
+            return "bg-transparent hover:bg-base-100 active:bg-base-200 border-0";
         } else if (variant === "outline") {
-            return "bg-base-50 hover:bg-base-100 border border-border";
+            return "bg-base-50 hover:bg-base-100 active:bg-base-200 border border-border";
         } else {
-            return "bg-base-50 hover:bg-base-100 border-0";
+            return "bg-base-50 hover:bg-base-100 active:bg-base-200 border-0";
         }
     });
 
@@ -111,11 +118,12 @@
             cursor-pointer
             transition-colors
             duration-200
-            focus:outline-none
-            focus:ring-2
-            focus:ring-brand-500
-            focus:ring-offset-2
-            focus:ring-offset-base-50
+            active:scale-[0.96]
+            disabled:opacity-50
+            disabled:cursor-not-allowed
+            disabled:active:scale-100
+            disabled:hover:bg-base-50
+            ${FOCUS_BRAND_CLASS}
         `.trim().replace(/\s+/g, " ");
     });
 </script>
@@ -125,7 +133,9 @@
         onclick={toggleTheme}
         class={buttonClasses()}
         aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        aria-pressed={isDark}
         type="button"
+        {disabled}
         {...restProps}
     >
         {#if isDark}
@@ -136,9 +146,10 @@
     </button>
 {:else}
     <button
-        class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer"
+        class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         aria-label="Theme toggle"
         type="button"
+        {disabled}
         {...restProps}
     >
         <Sun size={20} class="text-label" />

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

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

package/dist/atoms/Toast.svelte

@@ -1,57 +1,81 @@
 <script lang="ts">
     interface Props {
         message?: string;
-        type?: "success" | "error" | "warning" | "info";
+        type?: 'success' | 'error' | 'warning' | 'info';
         closable?: boolean;
         onclick?: (event: Event) => void;
+        class?: string;
+        /** `viewport`: fixed corner; `inline`: block in flow (e.g. demos). */
+        layout?: 'viewport' | 'inline';
     }
 
     let {
-        message = "",
-        type = "info",
+        message = '',
+        type = 'info',
         closable = true,
         onclick,
+        class: className = '',
+        layout = 'viewport',
         ...restProps
     }: Props = $props();
 
     let isVisible = $state(true);
 
-    const typeClasses = {
-        success: "bg-green-100 border-green-300 text-success",
-        error: "bg-red-100 border-red-300 text-error",
-        warning: "bg-yellow-100 border-yellow-300 text-warning",
-        info: "bg-iris-100 border-iris-300 text-body",
+    const typeClasses: Record<NonNullable<Props['type']>, string> = {
+        success: 'border-success bg-card text-success',
+        error: 'border-error bg-card text-error',
+        warning: 'border-warning bg-card text-warning',
+        info: 'border-border bg-card text-body',
     };
 
+    const cardClasses =
+        'box-border w-full min-w-[18rem] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-lg border p-4 shadow-lg';
+
     function closeToast(event: Event) {
         isVisible = false;
-        if (onclick) {
-            onclick(event);
-        }
+        onclick?.(event);
     }
 </script>
 
+{#snippet toastBody()}
+    <div class="flex min-w-0 items-start gap-3">
+        <div class="min-w-0 max-w-full flex-1 basis-0">
+            <p class="text-sm break-words [overflow-wrap:anywhere]">{message}</p>
+        </div>
+
+        {#if closable}
+            <button
+                type="button"
+                class="focus-ring shrink-0 cursor-pointer rounded-md text-description hover:text-headline focus:outline-none"
+                onclick={closeToast}
+                aria-label="Close notification"
+            >
+                ×
+            </button>
+        {/if}
+    </div>
+{/snippet}
+
 {#if isVisible}
-    <div
-        class="fixed top-4 right-4 max-w-sm w-full bg-white border rounded-lg shadow-lg p-4 z-50"
-        role="alert"
-        {...restProps}
-    >
-        <div class="flex items-start">
-            <div class="flex-1">
-                <p class="text-sm {typeClasses[type]}">{message}</p>
+    {#if layout === 'viewport'}
+        <div
+            class="pointer-events-none fixed top-4 right-4 left-4 z-toast flex justify-end sm:left-auto"
+        >
+            <div
+                class="pointer-events-auto {cardClasses} {typeClasses[type]} {className}"
+                role="alert"
+                {...restProps}
+            >
+                {@render toastBody()}
             </div>
-
-            {#if closable}
-                <button
-                    type="button"
-                    class="ml-3 text-base-400 hover:text-base-600"
-                    onclick={closeToast}
-                    aria-label="Close notification"
-                >
-                    ×
-                </button>
-            {/if}
         </div>
-    </div>
+    {:else}
+        <div
+            class="relative z-toast mx-auto {cardClasses} {typeClasses[type]} {className}"
+            role="alert"
+            {...restProps}
+        >
+            {@render toastBody()}
+        </div>
+    {/if}
 {/if}

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

@@ -1,8 +1,11 @@
 interface Props {
     message?: string;
-    type?: "success" | "error" | "warning" | "info";
+    type?: 'success' | 'error' | 'warning' | 'info';
     closable?: boolean;
     onclick?: (event: Event) => void;
+    class?: string;
+    /** `viewport`: fixed corner; `inline`: block in flow (e.g. demos). */
+    layout?: 'viewport' | 'inline';
 }
 declare const Toast: import("svelte").Component<Props, {}, "">;
 type Toast = ReturnType<typeof Toast>;

package/dist/atoms/Toggle.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
         checked?: boolean;
         disabled?: boolean;
+        loading?: boolean;
         label?: string;
         onclick?: (event: MouseEvent) => void;
         onchange?: (event: { checked: boolean }) => void;
     }
 
     let {
-        checked = false,
+        checked = $bindable(false),
         disabled = false,
+        loading = false,
         label = "",
         onclick,
         onchange,
@@ -19,38 +21,40 @@
     }: Props = $props();
 
     const toggleId = generateId("toggle");
+    const isDisabled = $derived(disabled || loading);
 
     function handleClick(event: MouseEvent) {
-        if (disabled) return;
+        if (isDisabled) return;
         checked = !checked;
 
         if (onclick) onclick(event);
         if (onchange) onchange({ checked });
     }
 
-    const toggleButtonClasses = $derived(() =>
-        [
-            "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-action-primary" : "bg-base-400",
-            disabled && "opacity-50 cursor-not-allowed",
-        ]
-            .filter(Boolean)
-            .join(" "),
-    );
+    const toggleButtonClasses = $derived(() => {
+        const base =
+            "focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:outline-none";
+        const colorClass = checked
+            ? "bg-action-primary hover:bg-action-primary-hover active:bg-action-primary-active"
+            : "bg-base-400 hover:bg-base-500 active:bg-base-500";
+        const stateClass = isDisabled
+            ? "opacity-50 cursor-not-allowed"
+            : "cursor-pointer";
+        return `${base} ${colorClass} ${stateClass}`;
+    });
 
     const toggleThumbClasses = $derived(() => {
-        const baseClasses =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card transition-transform duration-200 ease-in-out";
+        const base =
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow transition-transform duration-200 ease-in-out flex items-center justify-center";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
-
-        return `${baseClasses} ${positionClasses}`.trim();
+        return `${base} ${positionClasses}`;
     });
 
     function handleKeydown(event: KeyboardEvent) {
-        if (disabled) return;
+        if (isDisabled) return;
         if (event.key === " " || event.key === "Enter") {
             event.preventDefault();
-            handleClick(event as any);
+            handleClick(event as unknown as MouseEvent);
         }
     }
 </script>
@@ -61,19 +65,30 @@
         role="switch"
         id={toggleId}
         aria-checked={checked}
-        aria-label={label || "Toggle"}
-        {disabled}
+        aria-label={label ? undefined : "Toggle"}
+        aria-busy={loading ? "true" : undefined}
+        disabled={isDisabled}
         onclick={handleClick}
         onkeydown={handleKeydown}
         class={toggleButtonClasses()}
+        {...restProps}
     >
-        <span class={toggleThumbClasses()}></span>
+        <span class={toggleThumbClasses()}>
+            {#if loading}
+                <span
+                    class="inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-brand-500 border-t-transparent"
+                    aria-hidden="true"
+                ></span>
+            {/if}
+        </span>
     </button>
 
     {#if label}
         <label
             for={toggleId}
-            class="text-sm font-medium text-label cursor-pointer"
+            class="text-sm font-medium text-label {isDisabled
+                ? 'cursor-not-allowed opacity-50'
+                : 'cursor-pointer'}"
         >
             {label}
         </label>

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

@@ -1,12 +1,13 @@
 interface Props {
     checked?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     label?: string;
     onclick?: (event: MouseEvent) => void;
     onchange?: (event: {
         checked: boolean;
     }) => void;
 }
-declare const Toggle: import("svelte").Component<Props, {}, "">;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;