zabi-components 5.0.20 → 5.0.22

package/dist/atoms/CodeBlock.svelte

@@ -92,31 +92,31 @@
 
     :global(.language-svelte .token.tag),
     :global(.language-html .token.tag) {
-        color: #f92672;
+        color: var(--color-error-text);
     }
 
     :global(.language-svelte .token.attr-name),
     :global(.language-html .token.attr-name) {
-        color: #a6e22e;
+        color: var(--color-success-text);
     }
 
     :global(.language-svelte .token.attr-value),
     :global(.language-html .token.attr-value) {
-        color: #e6db74;
+        color: var(--color-warning-text);
     }
 
     :global(.language-javascript .token.keyword),
     :global(.language-typescript .token.keyword) {
-        color: #66d9ef;
+        color: var(--color-info-text);
     }
 
     :global(.language-javascript .token.string),
     :global(.language-typescript .token.string) {
-        color: #e6db74;
+        color: var(--color-warning-text);
     }
 
     :global(.language-javascript .token.function),
     :global(.language-typescript .token.function) {
-        color: #a6e22e;
+        color: var(--color-success-text);
     }
 </style>

package/dist/atoms/ColorPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Input from "./Input.svelte";
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, tick } from "svelte";
 
     interface Props {
         value?: string;
@@ -20,11 +20,10 @@
     }: Props = $props();
 
     let isOpen = $state(false);
-    let pickerContainer: HTMLDivElement;
-    let colorMap: HTMLCanvasElement;
-    let colorMapContainer: HTMLDivElement;
-    let hueSlider: HTMLInputElement;
     let isDragging = $state(false);
+    let pickerContainer: HTMLDivElement | undefined;
+    let colorMap: HTMLCanvasElement | undefined;
+    let colorMapContainer: HTMLDivElement | undefined;
 
     // HSL values (0-360, 0-100, 0-100)
     let hue = $state(0);
@@ -96,46 +95,56 @@
         }
     }
 
-    const variant = $derived(() => {
-        if (value && !isValidHex(value)) {
-            return "error";
-        }
-        return "default";
-    });
+    const variant = $derived(value && !isValidHex(value) ? "error" : "default");
 
-    const message = $derived(() => {
-        if (value && !isValidHex(value)) {
-            return "Please enter a valid hex color (e.g., #ff0000 or #f00)";
-        }
-        return "";
-    });
+    const message = $derived(
+        value && !isValidHex(value)
+            ? "Please enter a valid hex color (e.g., #ff0000 or #f00)"
+            : "",
+    );
 
     function handleInput(event: Event) {
         if (onchange) onchange(event);
         updateFromHex(value);
     }
 
-    function handleBlur(event: Event) {
-        const target = event.target as HTMLInputElement;
-        let hexValue = target.value.trim();
+    function normalizeHexValue(rawValue: string): string {
+        let hexValue = rawValue.trim();
 
         if (hexValue && !hexValue.startsWith("#")) {
             hexValue = "#" + hexValue;
         }
 
-        if (hexValue === "" || isValidHex(hexValue)) {
-            value = hexValue;
-            updateFromHex(hexValue);
+        return hexValue;
+    }
+
+    function commitCurrentValue(event: Event) {
+        const normalizedHex = normalizeHexValue(value);
+
+        if (normalizedHex === "" || isValidHex(normalizedHex)) {
+            value = normalizedHex;
+            updateFromHex(normalizedHex);
             if (onchange) onchange(event);
         }
     }
 
-    function togglePicker() {
+    function handleBlur(event: Event) {
+        commitCurrentValue(event);
+    }
+
+    async function togglePicker() {
         if (!disabled) {
+            if (isOpen) {
+                commitCurrentValue(new Event("change"));
+            }
             isOpen = !isOpen;
             if (isOpen && value && isValidHex(value)) {
                 updateFromHex(value);
             }
+            if (isOpen) {
+                await tick();
+                drawColorMap();
+            }
         }
     }
 
@@ -178,6 +187,10 @@
         }
     }
 
+    function handleMouseUp() {
+        isDragging = false;
+    }
+
     function handleHueChange(event: Event) {
         const target = event.target as HTMLInputElement;
         hue = parseInt(target.value);
@@ -185,26 +198,38 @@
         drawColorMap();
     }
 
-    $effect(() => {
-        if (isOpen && colorMap) {
-            // Use setTimeout to ensure canvas is rendered
-            setTimeout(() => {
-                drawColorMap();
-            }, 0);
-        }
-    });
+    function setPickerContainer(node: HTMLDivElement) {
+        pickerContainer = node;
+        return {
+            destroy() {
+                if (pickerContainer === node) {
+                    pickerContainer = undefined;
+                }
+            },
+        };
+    }
 
-    $effect(() => {
-        if (hue !== undefined && colorMap && isOpen) {
-            drawColorMap();
-        }
-    });
+    function setColorMap(node: HTMLCanvasElement) {
+        colorMap = node;
+        return {
+            destroy() {
+                if (colorMap === node) {
+                    colorMap = undefined;
+                }
+            },
+        };
+    }
 
-    $effect(() => {
-        if (value && isValidHex(value) && !isDragging) {
-            updateFromHex(value);
-        }
-    });
+    function setColorMapContainer(node: HTMLDivElement) {
+        colorMapContainer = node;
+        return {
+            destroy() {
+                if (colorMapContainer === node) {
+                    colorMapContainer = undefined;
+                }
+            },
+        };
+    }
 
     function handleClickOutside(event: MouseEvent) {
         if (
@@ -214,6 +239,7 @@
                 '[aria-label="Open color picker"]',
             )
         ) {
+            commitCurrentValue(new Event("change"));
             isOpen = false;
         }
     }
@@ -223,36 +249,19 @@
             updateFromHex(value);
         }
         window.addEventListener("mousedown", handleClickOutside);
-        window.addEventListener("mouseup", () => {
-            isDragging = false;
-        });
+        window.addEventListener("mouseup", handleMouseUp);
         window.addEventListener("mousemove", handleColorMapDrag);
     });
 
     onDestroy(() => {
         window.removeEventListener("mousedown", handleClickOutside);
-        window.removeEventListener("mouseup", () => {});
+        window.removeEventListener("mouseup", handleMouseUp);
         window.removeEventListener("mousemove", handleColorMapDrag);
     });
 
-    const displayColor = $derived(() => {
-        if (value && isValidHex(value)) {
-            return value;
-        }
-        return placeholder;
-    });
-
-    const currentHslColor = $derived(() => {
-        return `hsl(${hue}, 100%, 50%)`;
-    });
-
-    const pickerIndicatorX = $derived(() => {
-        return `${(saturation / 100) * 100}%`;
-    });
-
-    const pickerIndicatorY = $derived(() => {
-        return `${100 - (lightness / 100) * 100}%`;
-    });
+    const displayColor = $derived(value && isValidHex(value) ? value : placeholder);
+    const pickerIndicatorX = $derived(`${saturation}%`);
+    const pickerIndicatorY = $derived(`${100 - lightness}%`);
 </script>
 
 <div {...restProps}>
@@ -263,8 +272,8 @@
                 {label}
                 {placeholder}
                 {disabled}
-                variant={variant()}
-                message={message()}
+                {variant}
+                {message}
                 oninput={handleInput}
                 onblur={handleBlur}
                 aria-label="Hex color input"
@@ -276,14 +285,14 @@
                 onclick={togglePicker}
                 {disabled}
                 class="w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-brand-500 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-                style="background-color: {displayColor()};"
+                style="background-color: {displayColor};"
                 aria-label="Open color picker"
                 aria-expanded={isOpen}
             ></button>
 
             {#if isOpen}
                 <div
-                    bind:this={pickerContainer}
+                    use:setPickerContainer
                     class="absolute top-12 right-0 z-50 bg-input rounded-2xl shadow-lg p-4 w-80"
                     role="dialog"
                     aria-label="Color picker"
@@ -291,7 +300,7 @@
                     <div class="space-y-4">
                         <!-- Color Map -->
                         <div
-                            bind:this={colorMapContainer}
+                            use:setColorMapContainer
                             class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
                             onmousedown={(e) => {
                                 isDragging = true;
@@ -301,7 +310,7 @@
                             tabindex="0"
                         >
                             <canvas
-                                bind:this={colorMap}
+                                use:setColorMap
                                 width={256}
                                 height={192}
                                 class="w-full h-full"
@@ -309,7 +318,7 @@
                             <!-- Color indicator -->
                             <div
                                 class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
-                                style="left: {pickerIndicatorX()}; top: {pickerIndicatorY()};"
+                                style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
@@ -323,7 +332,6 @@
                                     style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));"
                                 ></div>
                                 <input
-                                    bind:this={hueSlider}
                                     type="range"
                                     min="0"
                                     max="360"

package/dist/atoms/IconButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+
+    interface Props {
+        /** Visual style variant. */
+        variant?: ButtonVariant;
+        /** Size variant controlling padding and radius. */
+        size?: SizeVariant;
+        /** Whether the button is disabled. */
+        disabled?: boolean;
+        /** Button type attribute. */
+        type?: "button" | "submit" | "reset";
+        /** Accessible label for icon-only buttons. */
+        label?: string;
+        /** Click handler for native click events. */
+        onclick?: (event: MouseEvent) => void;
+        /** Icon content. */
+        children?: Snippet;
+    }
+
+    let {
+        variant = "primary",
+        size = "md",
+        disabled = false,
+        type = "button",
+        label = "",
+        onclick,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClass = $derived(() => {
+        if (size === "sm") {
+            return {
+                padding: "p-2",
+                radius: "rounded-md",
+            };
+        } else if (size === "lg") {
+            return {
+                padding: "p-3",
+                radius: "rounded-xl",
+            };
+        } else {
+            return {
+                padding: "p-2.5",
+                radius: "rounded-lg",
+            };
+        }
+    });
+
+    const variantClass = $derived(() => {
+        return variant === "primary"
+            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+            : variant === "secondary"
+              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+              : variant === "danger"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                : variant === "ghost"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 focus:ring-2 focus:ring-base-500 focus:ring-offset-2 disabled:text-disabled"
+                  : variant === "outline"
+                    ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:border-disabled disabled:text-disabled"
+                    : variant === "link"
+                      ? "text-brand-700 active:text-brand-700 underline-offset-4 hover:underline focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:text-disabled disabled:no-underline"
+                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2";
+    });
+
+    const buttonClasses = $derived(() => {
+        const sizeStyles = sizeClass();
+        const baseClasses =
+            "inline-flex items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none";
+
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass()}`.trim();
+    });
+</script>
+
+<button
+    {type}
+    class={buttonClasses()}
+    {disabled}
+    {onclick}
+    aria-label={label || undefined}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</button>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Visual style variant. */
+    variant?: ButtonVariant;
+    /** Size variant controlling padding and radius. */
+    size?: SizeVariant;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Button type attribute. */
+    type?: "button" | "submit" | "reset";
+    /** Accessible label for icon-only buttons. */
+    label?: string;
+    /** Click handler for native click events. */
+    onclick?: (event: MouseEvent) => void;
+    /** Icon content. */
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/atoms/Input.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
     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)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         value?: string;
         type?: string;
         name?: string;
+        class?: string;
         label?: string;
         placeholder?: string;
+        required?: boolean;
         disabled?: boolean;
         size?: SizeVariant;
         variant?: SemanticVariant;
@@ -29,8 +24,10 @@
         value = $bindable(""),
         type = "text",
         name = "",
+        class: className = "",
         label = "",
         placeholder = "",
+        required = false,
         disabled = false,
         size = "md",
         variant = "default",
@@ -79,7 +76,7 @@
         const baseClasses =
             "w-full min-w-48 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();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
     });
 
     const labelClasses = $derived(
@@ -121,16 +118,23 @@
         {name}
         bind:value
         {placeholder}
+        {required}
         {disabled}
         class={inputClasses()}
         oninput={handleInput}
         {onblur}
         aria-invalid={variant === "error" ? "true" : undefined}
+        aria-required={required ? "true" : undefined}
         aria-describedby={message ? `${inputId}-message` : undefined}
         {...restProps}
     />
     {#if message && variant !== "default"}
-        <p id={`${inputId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${inputId}-message`}
+            class={messageClasses()}
+            role={variant === "error" ? "alert" : "status"}
+            aria-live={variant === "error" ? "assertive" : "polite"}
+        >
             {#if getIcon()}
                 {@const Icon = getIcon()}
                 <Icon size={14} class="shrink-0" />

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

@@ -3,8 +3,10 @@ interface Props {
     value?: string;
     type?: string;
     name?: string;
+    class?: string;
     label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     size?: SizeVariant;
     variant?: SemanticVariant;

package/dist/atoms/List.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import ListItemRow, { type ListItemData } from "./ListItem.svelte";
+
+    export type ListItem = ListItemData;
+
+    interface Props {
+        /** Collection of items rendered in the list. */
+        items: ListItemData[];
+        /** Accessible label for the list container. */
+        ariaLabel?: string;
+        /** Optional active item id for current state styling. */
+        selectedId?: string;
+        /** Whether to show the arrow icon for each row. */
+        showArrow?: boolean;
+        /** Optional custom class names for the list container. */
+        className?: string;
+        /** Item click callback. */
+        onclick?: (item: ListItem, event: MouseEvent) => void;
+    }
+
+    let {
+        items,
+        ariaLabel = "List items",
+        selectedId = "",
+        showArrow = true,
+        className = "",
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    const listClasses = $derived(
+        `space-y-1 overflow-hidden rounded-xl border border-border bg-surface p-1 ${className}`.trim(),
+    );
+</script>
+
+<ul class={listClasses} role="list" aria-label={ariaLabel} {...restProps}>
+    {#each items as item (item.id)}
+        <li>
+            <ListItemRow
+                {item}
+                selected={item.id === selectedId}
+                {showArrow}
+                {onclick}
+            />
+        </li>
+    {/each}
+</ul>

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

@@ -0,0 +1,19 @@
+import { type ListItemData } from "./ListItem.svelte";
+export type ListItem = ListItemData;
+interface Props {
+    /** Collection of items rendered in the list. */
+    items: ListItemData[];
+    /** Accessible label for the list container. */
+    ariaLabel?: string;
+    /** Optional active item id for current state styling. */
+    selectedId?: string;
+    /** Whether to show the arrow icon for each row. */
+    showArrow?: boolean;
+    /** Optional custom class names for the list container. */
+    className?: string;
+    /** Item click callback. */
+    onclick?: (item: ListItem, event: MouseEvent) => void;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;