zabi-components 6.0.0 → 7.0.1

package/dist/atoms/Skeleton.svelte

@@ -1,30 +1,54 @@
 <script lang="ts">
+    type Variant = "text" | "circle" | "block";
+
     interface Props {
-        width?: string;
-        height?: string;
-        className?: string;
+        variant?: Variant;
+        /** CSS length or px number; omit to use variant default (circle stays square). */
+        width?: string | number;
+        /** CSS length or px number; omit for variant default height. */
+        height?: string | number;
+        class?: string;
         "aria-label"?: string;
     }
 
     let {
-        width = "100%",
-        height = "1rem",
-        className = "",
-        "aria-label": ariaLabel = "Loading...",
-        ...restProps
+        variant = "text",
+        width,
+        height,
+        class: className = "",
+        "aria-label": ariaLabel = "Loading…",
     }: Props = $props();
 
-    const classes = $derived(
-        `animate-pulse bg-action-secondary rounded${className ? ` ${className}` : ""}`,
+    const radius: Record<Variant, string> = {
+        text: "rounded-md",
+        circle: "rounded-full",
+        block: "rounded-lg",
+    };
+
+    const defaultShape: Record<Variant, string> = {
+        text: "w-full h-3",
+        circle: "w-10 aspect-square",
+        block: "w-full h-32",
+    };
+
+    function toSize(value: string | number): string {
+        return typeof value === "number" ? `${value}px` : value;
+    }
+
+    const inlineStyle = $derived(
+        [
+            width !== undefined ? `width: ${toSize(width)}` : null,
+            height !== undefined ? `height: ${toSize(height)}` : null,
+        ]
+            .filter(Boolean)
+            .join("; "),
     );
-    const styles = $derived(`width: ${width}; height: ${height};`);
 </script>
 
 <div
-    class={classes}
-    style={styles}
+    class="animate-pulse bg-surface-2 {defaultShape[variant]} {radius[variant]} {className}"
+    style={inlineStyle || undefined}
+    role="status"
     aria-busy="true"
     aria-label={ariaLabel}
-    role="status"
-    {...restProps}
 ></div>

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

@@ -1,7 +1,11 @@
+type Variant = "text" | "circle" | "block";
 interface Props {
-    width?: string;
-    height?: string;
-    className?: string;
+    variant?: Variant;
+    /** CSS length or px number; omit to use variant default (circle stays square). */
+    width?: string | number;
+    /** CSS length or px number; omit for variant default height. */
+    height?: string | number;
+    class?: string;
     "aria-label"?: string;
 }
 declare const Skeleton: import("svelte").Component<Props, {}, "">;

package/dist/atoms/Table.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        /** Visible `<caption>` when set. */
+        caption?: string;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let { caption, class: className = '', children }: Props = $props();
+</script>
+
+<div
+    class="overflow-x-auto rounded-lg border border-border shadow-sm {className}"
+>
+    <table class="w-full min-w-[20rem] border-collapse text-left text-sm text-body">
+        {#if caption}
+            <caption class="border-b border-border bg-base-50 px-4 py-3 text-left text-headline">
+                {caption}
+            </caption>
+        {/if}
+        {#if children}
+            {@render children()}
+        {/if}
+    </table>
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Visible `<caption>` when set. */
+    caption?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/atoms/Text.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+    type Size = 'sm' | 'md' | 'lg';
+
+    interface Props {
+        as?: 'p' | 'span' | 'div';
+        tone?: Tone;
+        size?: Size;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let {
+        as: Tag = 'p',
+        tone = 'body',
+        size = 'md',
+        class: className = '',
+        children,
+    }: Props = $props();
+
+    const toneClass: Record<Tone, string> = {
+        body: 'text-body',
+        description: 'text-description',
+        caption: 'text-caption',
+        headline: 'text-headline',
+        label: 'text-label',
+        error: 'text-error',
+    };
+
+    const sizeClass: Record<Size, string> = {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+    };
+</script>
+
+<svelte:element
+    this={Tag}
+    class={[toneClass[tone], sizeClass[size], className].filter(Boolean).join(' ')}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+type Size = 'sm' | 'md' | 'lg';
+interface Props {
+    as?: 'p' | 'span' | 'div';
+    tone?: Tone;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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-input-border focus:ring-2 focus:ring-brand-500";
+        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 border 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 cursor-pointer 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>;