zabi-components 5.0.20 → 5.0.22

package/dist/atoms/ListItem.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { ArrowRight } from "@lucide/svelte";
+    import type { Component } from "svelte";
+
+    export interface ListItemData {
+        /** Unique identifier for stable rendering and active-state tracking. */
+        id: string;
+        /** Primary item label. */
+        label: string;
+        /** Optional secondary text shown under the label. */
+        description?: string;
+        /** Optional URL; when set, the item renders as an anchor. */
+        href?: string;
+        /** Optional leading icon rendered before text. */
+        icon?: Component<{ size?: number; class?: string }>;
+        /** Link target, only used when href is provided. */
+        target?: "_self" | "_blank" | "_parent" | "_top";
+        /** Link rel attribute, only used when href is provided. */
+        rel?: string;
+        /** Disabled state for the item. */
+        disabled?: boolean;
+    }
+
+    interface Props {
+        /** Item data to render. */
+        item: ListItemData;
+        /** Active-state styling flag. */
+        selected?: boolean;
+        /** Whether to show the right-arrow icon. */
+        showArrow?: boolean;
+        /** Item click callback. */
+        onclick?: (item: ListItemData, event: MouseEvent) => void;
+    }
+
+    let {
+        item,
+        selected = false,
+        showArrow = true,
+        onclick,
+        ...restProps
+    }: Props = $props();
+
+    const itemClasses = $derived.by(() => {
+        const baseClasses =
+            "group flex w-full items-center gap-3 rounded-xl border border-border px-4 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset";
+        const interactiveClasses = item.disabled
+            ? "cursor-not-allowed opacity-50"
+            : "cursor-pointer hover:ring-1 hover:ring-focus focus-visible:bg-base-100";
+        const selectedClasses = selected
+            ? "bg-action-primary-subtle border-brand-500"
+            : "";
+        return `${baseClasses} ${interactiveClasses} ${selectedClasses}`.trim();
+    });
+
+    const ariaCurrent = $derived(item.href && selected ? "page" : undefined);
+
+    const rel = $derived.by(() => {
+        if (item.rel) {
+            return item.rel;
+        }
+        if (item.target === "_blank") {
+            return "noopener noreferrer";
+        }
+        return undefined;
+    });
+
+    const handleItemClick = (event: MouseEvent): void => {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        onclick?.(item, event);
+    };
+</script>
+
+{#if item.href}
+    <a
+        href={item.href}
+        target={item.target}
+        {rel}
+        aria-current={ariaCurrent}
+        aria-disabled={item.disabled ? "true" : undefined}
+        tabindex={item.disabled ? -1 : undefined}
+        class={itemClasses}
+        onclick={handleItemClick}
+        {...restProps}
+    >
+        {#if item.icon}
+            <span
+                class="flex size-5 shrink-0 items-center justify-center text-description"
+                aria-hidden="true"
+            >
+                <item.icon size={16} />
+            </span>
+        {/if}
+        <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium text-headline"
+                >{item.label}</span
+            >
+            {#if item.description}
+                <span class="mt-0.5 block text-sm text-description"
+                    >{item.description}</span
+                >
+            {/if}
+        </span>
+        {#if showArrow}
+            <ArrowRight
+                size={16}
+                class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5"
+                aria-hidden="true"
+            />
+        {/if}
+    </a>
+{:else}
+    <button
+        type="button"
+        class={itemClasses}
+        disabled={item.disabled}
+        onclick={handleItemClick}
+        {...restProps}
+    >
+        {#if item.icon}
+            <span
+                class="flex size-5 shrink-0 items-center justify-center text-description"
+                aria-hidden="true"
+            >
+                <item.icon size={16} />
+            </span>
+        {/if}
+        <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium text-headline"
+                >{item.label}</span
+            >
+            {#if item.description}
+                <span class="mt-0.5 block text-sm text-description"
+                    >{item.description}</span
+                >
+            {/if}
+        </span>
+        {#if showArrow}
+            <ArrowRight
+                size={16}
+                class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5"
+                aria-hidden="true"
+            />
+        {/if}
+    </button>
+{/if}

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

@@ -0,0 +1,35 @@
+import type { Component } from "svelte";
+export interface ListItemData {
+    /** Unique identifier for stable rendering and active-state tracking. */
+    id: string;
+    /** Primary item label. */
+    label: string;
+    /** Optional secondary text shown under the label. */
+    description?: string;
+    /** Optional URL; when set, the item renders as an anchor. */
+    href?: string;
+    /** Optional leading icon rendered before text. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** Link target, only used when href is provided. */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    /** Link rel attribute, only used when href is provided. */
+    rel?: string;
+    /** Disabled state for the item. */
+    disabled?: boolean;
+}
+interface Props {
+    /** Item data to render. */
+    item: ListItemData;
+    /** Active-state styling flag. */
+    selected?: boolean;
+    /** Whether to show the right-arrow icon. */
+    showArrow?: boolean;
+    /** Item click callback. */
+    onclick?: (item: ListItemData, event: MouseEvent) => void;
+}
+declare const ListItem: Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/atoms/Progress.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { generateId } from "../../routes/lib/ssr-safe.js";
+
     interface Props {
         value?: number;
         max?: number;
@@ -14,11 +16,7 @@
         ...restProps
     }: Props = $props();
 
-    let progressId = $state(
-        typeof window !== "undefined"
-            ? `progress-${Math.random().toString(36).substr(2, 9)}`
-            : `progress-ssr-${Date.now()}`,
-    );
+    const progressId = generateId("progress");
 
     let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
 

package/dist/atoms/Select.svelte

@@ -1,19 +1,13 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
+    import Button from "./Button.svelte";
     import {
         ChevronDown,
         CheckCircle,
         AlertTriangle,
         AlertCircle,
     } from "@lucide/svelte";
-
-    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 | number | undefined;
@@ -22,30 +16,65 @@
             label: string;
             disabled?: boolean;
         }>;
+        /** Enables the search input inside the dropdown. */
+        searchable?: boolean;
+        /** Placeholder for the search input. */
+        searchPlaceholder?: string;
+        /** Max height for the options list (supports any valid CSS length). */
+        maxMenuHeight?: string;
+        /** Width for the dropdown menu (supports any valid CSS length). */
+        menuWidth?: string;
+        /** Message shown when no options match the search. */
+        noResultsText?: string;
+        /** Shows a loading state while options are being fetched. */
+        isLoading?: boolean;
+        /** Loading text shown in trigger and dropdown body. */
+        loadingText?: string;
+        /** Empty state title shown when there are no available options. */
+        emptyStateTitle?: string;
+        /** Empty state description shown when there are no available options. */
+        emptyStateDescription?: string;
+        /** Optional empty state action label. */
+        emptyStateActionLabel?: string;
         placeholder?: string;
         label?: string;
+        required?: boolean;
         disabled?: boolean;
         size?: "sm" | "md" | "lg";
         variant?: "default" | "success" | "warning" | "error";
         message?: string;
         onchange?: (event: Event) => void;
+        onEmptyStateAction?: () => void;
     }
 
     let {
-        value = undefined,
+        value = $bindable(undefined),
         options = [],
+        searchable = true,
+        searchPlaceholder = "Search options",
+        maxMenuHeight = "60vh",
+        menuWidth = "100%",
+        noResultsText = "No results found",
+        isLoading = false,
+        loadingText = "Loading options...",
+        emptyStateTitle = "No options available",
+        emptyStateDescription = "Add an option to start making selections.",
+        emptyStateActionLabel = "",
         placeholder = "Select an option",
         label = "",
+        required = false,
         disabled = false,
         size = "md",
         variant = "default",
         message = "",
         onchange,
+        onEmptyStateAction,
         ...restProps
     }: Props = $props();
 
     let isOpen = $state(false);
     let selectContainer: HTMLDivElement;
+    let searchQuery = $state("");
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -93,13 +122,13 @@
 
     const messageClasses = $derived(() => {
         if (variant === "error") {
-            return "text-error text-sm mt-1 flex items-center gap-1.5";
+            return "text-error text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "success") {
-            return "text-success text-sm mt-1 flex items-center gap-1.5";
+            return "text-success text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "warning") {
-            return "text-warning text-sm mt-1 flex items-center gap-1.5";
+            return "text-warning text-sm mt-1 flex items-center gap-1.5 w-full";
         }
-        return "text-description text-sm mt-1 flex items-center gap-1.5";
+        return "text-description text-sm mt-1 flex items-center gap-1.5 w-full";
     });
 
     const getIcon = $derived(() => {
@@ -125,8 +154,35 @@
         return value === undefined || value === null || value === "";
     });
 
+    const normalizedOptions = $derived(() => {
+        const fallbackOptions = (restProps as { options?: Props["options"] })
+            .options;
+        return Array.from(options ?? fallbackOptions ?? []);
+    });
+
+    const hasSearchQuery = $derived(() => {
+        return searchQuery.trim().length > 0;
+    });
+
+    const filteredOptions = $derived(() => {
+        const query = searchQuery.trim().toLowerCase();
+        const availableOptions = normalizedOptions();
+        if (!searchable || query.length === 0) {
+            return availableOptions;
+        }
+        return availableOptions.filter((option) =>
+            option.label.toLowerCase().includes(query),
+        );
+    });
+
+    $effect(() => {
+        if (!isOpen && searchQuery.length > 0) {
+            searchQuery = "";
+        }
+    });
+
     function handleOptionClick(optionValue: string | number) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         value = optionValue;
         isOpen = false;
 
@@ -141,7 +197,7 @@
     }
 
     function handleTriggerClick(event: MouseEvent) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         event.stopPropagation();
         isOpen = !isOpen;
     }
@@ -179,8 +235,8 @@
         {isOpen}
         placement="bottom-start"
         selectedValue={value}
-        {options}
         onOptionClick={handleOptionClick}
+        ariaLabel="Select options"
     >
         {#snippet trigger()}
             <button
@@ -194,14 +250,20 @@
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
                 <span
-                    class="text-left flex-1 {isEmpty()
+                    class="text-left flex-1 truncate {isLoading
+                        ? 'text-description'
+                        : isEmpty()
                         ? 'text-description'
                         : 'text-body'}"
                 >
-                    {isEmpty()
+                    {#if isLoading}
+                        {loadingText}
+                    {:else}
+                        {isEmpty()
                         ? placeholder
                         : options.find((opt) => opt.value === value)?.label ||
                           placeholder}
+                    {/if}
                 </span>
                 <ChevronDown
                     size={20}
@@ -211,9 +273,80 @@
                 />
             </button>
         {/snippet}
+        {#snippet children()}
+            <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
+                {#if searchable && !isLoading}
+                    <div class="px-1 pb-2">
+                        <input
+                            type="text"
+                            class="w-full rounded-md bg-input hover:bg-input-hover focus:bg-input-focus text-body placeholder:text-description px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            placeholder={searchPlaceholder}
+                            bind:value={searchQuery}
+                            aria-label={searchPlaceholder}
+                            {disabled}
+                        />
+                    </div>
+                {/if}
+                <div
+                    class="overflow-y-auto px-1"
+                    style:max-height={maxMenuHeight}
+                >
+                    {#if isLoading}
+                        <div class="space-y-2 px-2 py-2" role="status" aria-live="polite">
+                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
+                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
+                            <p class="text-xs text-description">{loadingText}</p>
+                        </div>
+                    {:else if filteredOptions().length > 0}
+                        {#each filteredOptions() as option (option.value)}
+                            {@const buttonRestProps = {
+                                "data-value": String(option.value),
+                            } as Record<string, string>}
+                            <div class="w-full my-0.5">
+                                <Button
+                                    variant={value === option.value
+                                        ? "outline"
+                                        : "ghost"}
+                                    size="sm"
+                                    isFullWidth={true}
+                                    disabled={option.disabled}
+                                    onclick={() => handleOptionClick(option.value)}
+                                    {...buttonRestProps}
+                                >
+                                    {option.label}
+                                </Button>
+                            </div>
+                        {/each}
+                    {:else if hasSearchQuery()}
+                        <div class="px-3 py-2 text-sm text-description">
+                            {noResultsText}
+                        </div>
+                    {:else}
+                        <div class="rounded-md border border-border bg-base-50 px-3 py-3 text-sm">
+                            <p class="font-medium text-headline">{emptyStateTitle}</p>
+                            <p class="mt-1 text-description">{emptyStateDescription}</p>
+                            {#if emptyStateActionLabel && onEmptyStateAction}
+                                <button
+                                    type="button"
+                                    class="mt-3 inline-flex min-h-11 items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
+                                    onclick={onEmptyStateAction}
+                                >
+                                    {emptyStateActionLabel}
+                                </button>
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/snippet}
     </Dropdown>
     {#if message && variant !== "default"}
-        <p id={`${selectId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${selectId}-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/Select.svelte.d.ts

@@ -5,14 +5,36 @@ interface Props {
         label: string;
         disabled?: boolean;
     }>;
+    /** Enables the search input inside the dropdown. */
+    searchable?: boolean;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /** Max height for the options list (supports any valid CSS length). */
+    maxMenuHeight?: string;
+    /** Width for the dropdown menu (supports any valid CSS length). */
+    menuWidth?: string;
+    /** Message shown when no options match the search. */
+    noResultsText?: string;
+    /** Shows a loading state while options are being fetched. */
+    isLoading?: boolean;
+    /** Loading text shown in trigger and dropdown body. */
+    loadingText?: string;
+    /** Empty state title shown when there are no available options. */
+    emptyStateTitle?: string;
+    /** Empty state description shown when there are no available options. */
+    emptyStateDescription?: string;
+    /** Optional empty state action label. */
+    emptyStateActionLabel?: string;
     placeholder?: string;
     label?: string;
+    required?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "success" | "warning" | "error";
     message?: string;
     onchange?: (event: Event) => void;
+    onEmptyStateAction?: () => void;
 }
-declare const Select: import("svelte").Component<Props, {}, "">;
+declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/atoms/Textarea.svelte

@@ -1,20 +1,14 @@
 <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;
         name?: string;
         label?: string;
         placeholder?: string;
+        required?: boolean;
         disabled?: boolean;
         rows?: number;
         size?: SizeVariant;
@@ -28,6 +22,7 @@
         name = "",
         label = "",
         placeholder = "",
+        required = false,
         disabled = false,
         rows = 4,
         variant = "default",
@@ -96,16 +91,23 @@
         {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"}
-        <p id={`${textareaId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${textareaId}-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/Textarea.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     name?: string;
     label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     rows?: number;
     size?: SizeVariant;

package/dist/atoms/Toggle.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-    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 {
         checked?: boolean;

package/dist/atoms/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         content?: string;
@@ -17,8 +17,8 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
-    let triggerId = `tooltip-trigger-${Math.random().toString(36).substr(2, 9)}`;
-    let tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    const triggerId = generateId("tooltip-trigger");
+    const tooltipId = generateId("tooltip");
     let isVisible = $state(false);
     let triggerElement: HTMLElement | null = $state(null);
 
@@ -56,17 +56,10 @@
     function handleMouseLeave() {
         isVisible = false;
     }
-
-    onMount(() => {
-        if (typeof window !== "undefined") {
-            window.addEventListener("keydown", handleKeydown);
-            return () => {
-                window.removeEventListener("keydown", handleKeydown);
-            };
-        }
-    });
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 <div
     class="tooltip-container relative inline-block"
     data-placement={placement}
@@ -249,8 +242,8 @@
 
     @media (prefers-contrast: high) {
         :root {
-            --tooltip-bg: #000000;
-            --tooltip-color: #ffffff;
+            --tooltip-bg: CanvasText;
+            --tooltip-color: Canvas;
             --tooltip-padding: 0.75rem 1rem;
         }
     }
@@ -276,7 +269,7 @@
     }
 
     .tooltip-container:focus-visible {
-        outline: 2px solid var(--color-focus, #8fa8ff);
+        outline: 2px solid var(--color-focus);
         outline-offset: 2px;
         border-radius: var(--tooltip-radius);
     }

package/dist/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
@@ -9,5 +10,7 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';

package/dist/atoms/index.js

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
@@ -9,5 +10,7 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';