zabi-components 5.0.22 → 7.0.0

package/dist/molecules/Dropdown.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-    import Button from "../atoms/Button.svelte";
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import type { Snippet } from 'svelte';
+
+    export type DropdownTriggerProps = {
+        'aria-expanded': boolean;
+        'aria-haspopup': 'menu' | 'listbox';
+        'aria-controls': string;
+    };
 
     interface Props {
         isOpen?: boolean;
-        placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+        placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
         ariaLabel?: string;
+        /** `listbox` for Select-style; `menu` for actions. */
+        menuRole?: 'menu' | 'listbox';
         selectedValue?: string | number | null;
         options?: Array<{
             value: string | number;
@@ -13,31 +21,40 @@
             disabled?: boolean;
         }>;
         onOptionClick?: (value: string | number) => void;
+        trigger: Snippet<[DropdownTriggerProps]>;
+        children?: Snippet;
     }
 
     let {
-        isOpen = false,
-        placement = "bottom-start",
-        ariaLabel = "Menu",
+        isOpen = $bindable(false),
+        placement = 'bottom-start',
+        ariaLabel = 'Menu',
+        menuRole = 'menu',
         selectedValue = null,
         options = [],
         onOptionClick,
-        children,
         trigger,
+        children,
         ...restProps
-    }: Props & { children?: any; trigger?: any } = $props();
+    }: Props = $props();
+
+    const menuId = generateId('dropdown-menu');
+    let rootEl = $state<HTMLDivElement | null>(null);
 
-    const dropdownId = generateId("dropdown");
-    let triggerElement = $state<HTMLElement | null>(null);
-    let menuElement = $state<HTMLElement | null>(null);
     let openedViaKeyboard = $state(false);
 
+    const triggerAria = $derived({
+        'aria-expanded': isOpen,
+        'aria-haspopup': menuRole === 'listbox' ? 'listbox' as const : 'menu' as const,
+        'aria-controls': menuId,
+    } satisfies DropdownTriggerProps);
+
     function handleKeydown(event: KeyboardEvent) {
         if (!isOpen) {
             if (
-                event.key === "Enter" ||
-                event.key === " " ||
-                event.key === "ArrowDown"
+                event.key === 'Enter' ||
+                event.key === ' ' ||
+                event.key === 'ArrowDown'
             ) {
                 event.preventDefault();
                 openedViaKeyboard = true;
@@ -47,38 +64,39 @@
         }
 
         switch (event.key) {
-            case "Escape":
+            case 'Escape':
                 event.preventDefault();
                 isOpen = false;
-                triggerElement?.focus();
                 break;
-            case "ArrowDown":
+            case 'ArrowDown':
                 event.preventDefault();
                 focusNextItem();
                 break;
-            case "ArrowUp":
+            case 'ArrowUp':
                 event.preventDefault();
                 focusPreviousItem();
                 break;
-            case "Home":
+            case 'Home':
                 event.preventDefault();
                 focusFirstItem();
                 break;
-            case "End":
+            case 'End':
                 event.preventDefault();
                 focusLastItem();
                 break;
-            case "Tab":
+            case 'Tab':
                 isOpen = false;
                 break;
         }
     }
 
+    let menuElement = $state<HTMLElement | null>(null);
+
     function getMenuItems(): HTMLElement[] {
         if (!menuElement) return [];
         return Array.from(
             menuElement.querySelectorAll<HTMLElement>(
-                '[role="menuitem"], button, a',
+                '[role="menuitem"], [role="option"]',
             ),
         );
     }
@@ -104,8 +122,7 @@
     }
 
     function focusFirstItem() {
-        const items = getMenuItems();
-        items[0]?.focus();
+        getMenuItems()[0]?.focus();
     }
 
     function focusLastItem() {
@@ -113,126 +130,107 @@
         items[items.length - 1]?.focus();
     }
 
-    // Focus first item when dropdown opens via keyboard
     $effect(() => {
         if (isOpen && menuElement && openedViaKeyboard) {
-            setTimeout(() => {
+            const t = setTimeout(() => {
                 focusFirstItem();
                 openedViaKeyboard = false;
             }, 0);
-        } else if (!isOpen) {
+            return () => clearTimeout(t);
+        }
+        if (!isOpen) {
             openedViaKeyboard = false;
         }
     });
 
-    // Mark selected items
     $effect(() => {
-        if (isOpen && menuElement) {
-            // Small delay to ensure DOM is ready
-            setTimeout(() => {
-                const items = getMenuItems();
-                items.forEach((item) => {
-                    if (selectedValue !== null && selectedValue !== undefined) {
-                        const itemValue =
-                            item.getAttribute("data-value") ||
-                            item.textContent?.trim();
-                        if (String(itemValue) === String(selectedValue)) {
-                            item.setAttribute("data-selected", "true");
-                            item.setAttribute("aria-selected", "true");
-                        } else {
-                            item.removeAttribute("data-selected");
-                            item.removeAttribute("aria-selected");
-                        }
-                    } else {
-                        item.removeAttribute("data-selected");
-                        item.removeAttribute("aria-selected");
-                    }
-                });
-            }, 0);
+        if (!isOpen) return;
+        function onDocMouseDown(e: MouseEvent) {
+            const t = e.target as Node;
+            if (rootEl && !rootEl.contains(t)) {
+                isOpen = false;
+            }
         }
+        document.addEventListener('mousedown', onDocMouseDown);
+        return () => document.removeEventListener('mousedown', onDocMouseDown);
     });
 
     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",
+        const base = 'absolute z-dropdown min-w-[12rem]';
+        const positioning: Record<typeof placement, string> = {
+            '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]}`;
     });
 
     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",
+            const hiddenTransform: Record<typeof placement, string> = {
+                '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 `invisible opacity-0 ${hiddenTransform[placement]}`;
         }
-        return "opacity-100 visible translate-y-0";
+        return 'visible translate-y-0 opacity-100';
     });
 
     const dropdownContentClasses = $derived(() => {
-        return `
-            ${placementClasses()}
-            bg-input
-            rounded-lg
-            shadow-lg
-            border-0
-            py-2
-            transition-all
-            duration-200
-            ease-in-out
-            ${transformClasses()}
-        `
-            .trim()
-            .replace(/\s+/g, " ");
+        return [
+            placementClasses(),
+            'rounded-lg border border-border bg-card py-2 shadow-lg transition-all duration-200 ease-in-out',
+            transformClasses(),
+        ]
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();
     });
+
+    const itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
+
+    const optionClasses =
+        'focus-ring flex w-full items-center justify-start rounded-md px-3 py-2 text-left text-sm text-body transition-colors hover:bg-base-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50';
 </script>
 
 <div
+    bind:this={rootEl}
     class="relative inline-block"
     data-placement={placement}
     onkeydown={handleKeydown}
     {...restProps}
 >
-    <div bind:this={triggerElement}>
-        {@render trigger?.()}
-    </div>
+    {@render trigger(triggerAria)}
 
     {#if isOpen}
         <div
             bind:this={menuElement}
-            id={dropdownId}
+            id={menuId}
             class={dropdownContentClasses()}
-            role="menu"
+            role={menuRole === 'listbox' ? 'listbox' : 'menu'}
             aria-label={ariaLabel}
-            tabindex="-1"
         >
             {#if options.length > 0}
-                <div class="px-2 py-2">
+                <div class="px-2 py-1">
                     {#each options as option (option.value)}
-                        {@const buttonRestProps = {
-                            "data-value": String(option.value),
-                        } as any}
-                        <div class="w-full my-0.5">
-                            <Button
-                                variant={selectedValue === option.value
-                                    ? "outline"
-                                    : "ghost"}
-                                size="sm"
-                                isFullWidth={true}
-                                disabled={option.disabled}
-                                onclick={() => onOptionClick?.(option.value)}
-                                {...buttonRestProps}
-                            >
-                                {option.label}
-                            </Button>
-                        </div>
+                        <button
+                            type="button"
+                            role={itemRole}
+                            aria-selected={menuRole === 'listbox' &&
+                            selectedValue !== null &&
+                            String(selectedValue) === String(option.value)
+                                ? true
+                                : undefined}
+                            data-value={String(option.value)}
+                            disabled={option.disabled}
+                            class={optionClasses}
+                            onclick={() => onOptionClick?.(option.value)}
+                        >
+                            {option.label}
+                        </button>
                     {/each}
                 </div>
             {:else if children}
@@ -241,10 +239,3 @@
         </div>
     {/if}
 </div>
-
-<style>
-    :global([role="menu"] button) {
-        justify-content: flex-start;
-        text-align: left;
-    }
-</style>

package/dist/molecules/Dropdown.svelte.d.ts

@@ -1,7 +1,15 @@
+import type { Snippet } from 'svelte';
+export type DropdownTriggerProps = {
+    'aria-expanded': boolean;
+    'aria-haspopup': 'menu' | 'listbox';
+    'aria-controls': string;
+};
 interface Props {
     isOpen?: boolean;
-    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     ariaLabel?: string;
+    /** `listbox` for Select-style; `menu` for actions. */
+    menuRole?: 'menu' | 'listbox';
     selectedValue?: string | number | null;
     options?: Array<{
         value: string | number;
@@ -9,11 +17,9 @@ interface Props {
         disabled?: boolean;
     }>;
     onOptionClick?: (value: string | number) => void;
+    trigger: Snippet<[DropdownTriggerProps]>;
+    children?: Snippet;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-    trigger?: any;
-};
-declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Dropdown: import("svelte").Component<Props, {}, "isOpen">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/molecules/EmptyState.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { generateId } from "../util/ssr-safe.js";
+
+    interface Props {
+        title: string;
+        description: string;
+        class?: string;
+        action?: Snippet;
+        media?: Snippet;
+    }
+
+    let {
+        title,
+        description,
+        class: className = "",
+        action,
+        media,
+    }: Props = $props();
+
+    const titleId = generateId("empty-state-title");
+</script>
+
+<section
+    class="mx-auto flex flex-col items-center justify-center gap-4 px-6 py-12 text-center {className}"
+    aria-labelledby={titleId}
+>
+    {#if media}
+        <div class="text-description" aria-hidden="true">
+            {@render media()}
+        </div>
+    {/if}
+    <div class="space-y-2">
+        <h2 id={titleId} class="text-lg font-semibold text-headline">
+            {title}
+        </h2>
+        <p class="text-sm text-description">{description}</p>
+    </div>
+    {#if action}
+        <div class="mt-2 flex flex-wrap items-center justify-center gap-2">
+            {@render action()}
+        </div>
+    {/if}
+</section>

package/dist/molecules/EmptyState.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    description: string;
+    class?: string;
+    action?: Snippet;
+    media?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/molecules/FormField.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { generateId } from "../util/ssr-safe.js";
+
+    export type FormFieldControlProps = {
+        id: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: 'true';
+        disabled?: boolean;
+        required?: boolean;
+    };
+
+    interface Props {
+        id?: string;
+        label: string;
+        description?: string;
+        error?: string;
+        required?: boolean;
+        disabled?: boolean;
+        class?: string;
+        labelClass?: string;
+        control: Snippet<[FormFieldControlProps]>;
+        meta?: Snippet;
+    }
+
+    let {
+        id: idProp,
+        label,
+        description,
+        error,
+        required = false,
+        disabled = false,
+        class: className = '',
+        labelClass = '',
+        control,
+        meta,
+    }: Props = $props();
+
+    const fallbackId = generateId('field');
+    const fieldId = $derived(idProp ?? fallbackId);
+    const descriptionId = $derived(
+        description ? `${fieldId}-description` : undefined,
+    );
+    const errorId = $derived(error ? `${fieldId}-error` : undefined);
+    const describedBy = $derived(
+        [descriptionId, errorId].filter(Boolean).join(' ') || undefined,
+    );
+</script>
+
+<div class={['space-y-1.5', className].filter(Boolean).join(' ')}>
+    <div class="flex items-baseline justify-between gap-3">
+        <label
+            class={[
+                'text-sm font-medium text-label',
+                disabled ? 'opacity-60' : '',
+                labelClass,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            for={fieldId}
+        >
+            {label}
+            {#if required}
+                <span class="ml-1 text-error" aria-hidden="true">*</span>
+                <span class="sr-only">(required)</span>
+            {/if}
+        </label>
+
+        {#if meta}
+            <div class="text-xs text-description">{@render meta()}</div>
+        {/if}
+    </div>
+
+    {@render control({
+        id: fieldId,
+        'aria-describedby': describedBy,
+        'aria-invalid': error ? 'true' : undefined,
+        disabled,
+        required,
+    })}
+
+    {#if description}
+        <p id={descriptionId} class="text-xs text-description">{description}</p>
+    {/if}
+
+    {#if error}
+        <p id={errorId} class="text-xs text-error" role="alert">{error}</p>
+    {/if}
+</div>

package/dist/molecules/FormField.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export type FormFieldControlProps = {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: 'true';
+    disabled?: boolean;
+    required?: boolean;
+};
+interface Props {
+    id?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    labelClass?: string;
+    control: Snippet<[FormFieldControlProps]>;
+    meta?: Snippet;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/molecules/Header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import Badge from "../atoms/Badge.svelte";
+    import Heading from "../atoms/Heading.svelte";
+    import type { ComponentCategory } from "../types/page.types";
+
+    interface Props {
+        title: string;
+        description: string;
+        category: ComponentCategory;
+        variantsStates?: string[];
+    }
+
+    let { title, description, category, variantsStates }: Props = $props();
+</script>
+
+<header class="space-y-4">
+    <div class="space-y-2">
+        <Heading level={1} text={title} />
+        <p class="text-lg whitespace-pre-line text-description">{description}</p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="info" text={category} />
+        {#if variantsStates?.length}
+            <Badge variant="info" text="{variantsStates.length} variants" />
+        {/if}
+    </div>
+
+    {#if variantsStates?.length}
+        <div class="flex flex-wrap items-center gap-2">
+            <span class="text-sm font-medium text-headline">
+                Variants / states:
+            </span>
+            {#each variantsStates as v (v)}
+                <span class="rounded-md bg-base-100 px-2 py-1 text-xs text-headline">
+                    {v}
+                </span>
+            {/each}
+        </div>
+    {/if}
+</header>

package/dist/molecules/Header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentCategory } from "../types/page.types";
+interface Props {
+    title: string;
+    description: string;
+    category: ComponentCategory;
+    variantsStates?: string[];
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/molecules/ImageUpload.svelte

@@ -75,7 +75,7 @@
                 class="w-full h-32 min-w-64 object-cover rounded-2xl border-0"
             />
             <div
-                class="absolute inset-0 bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
+                class="absolute inset-0 border border-input-border bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button