zabi-components 6.0.0 → 7.0.1

package/dist/atoms/List.svelte

@@ -4,17 +4,12 @@
     export type ListItem = ListItemData;
 
     interface Props {
-        /** Collection of items rendered in the list. */
         items: ListItemData[];
-        /** Accessible label for the list container. */
+        /** `aria-label` on the list region. */
         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;
     }
 
@@ -29,7 +24,7 @@
     }: Props = $props();
 
     const listClasses = $derived(
-        `space-y-1 overflow-hidden rounded-xl border border-border bg-surface p-1 ${className}`.trim(),
+        `space-y-1 overflow-hidden rounded-xl ${className}`.trim(),
     );
 </script>
 

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

@@ -1,17 +1,12 @@
 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. */
+    /** `aria-label` on the list region. */
     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, {}, "">;

package/dist/atoms/ListItem.svelte

@@ -1,34 +1,29 @@
 <script lang="ts">
     import { ArrowRight } from "@lucide/svelte";
-    import type { Component } from "svelte";
+    import type { Component, Snippet } from "svelte";
+    import ListItemLeading from "./ListItemLeading.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. */
+        /** Leading image; wins over `icon` when both are set. */
+        avatar?: string;
+        /** `avatar` alt text; `""` if decorative. */
+        avatarAlt?: string;
         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. */
+        /** Shown before the chevron when `showArrow` is true. */
+        trailing?: Snippet;
         onclick?: (item: ListItemData, event: MouseEvent) => void;
     }
 
@@ -36,16 +31,17 @@
         item,
         selected = false,
         showArrow = true,
+        trailing,
         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";
+            "group focus-ring flex w-full items-center gap-3 rounded-xl border border-border px-4 py-3 pr-5 text-left transition-all duration-150";
         const interactiveClasses = item.disabled
             ? "cursor-not-allowed opacity-50"
-            : "cursor-pointer hover:ring-1 hover:ring-focus focus-visible:bg-base-100";
+            : "cursor-pointer focus-visible:bg-base-100";
         const selectedClasses = selected
             ? "bg-action-primary-subtle border-brand-500"
             : "";
@@ -73,6 +69,47 @@
     };
 </script>
 
+{#snippet rowContent()}
+    {#if item.avatar}
+        <ListItemLeading class="rounded-full">
+            <img
+                src={item.avatar}
+                alt={item.avatarAlt ?? ""}
+                class="block size-full min-h-0 min-w-0 object-cover"
+                loading="lazy"
+                decoding="async"
+            />
+        </ListItemLeading>
+    {:else if item.icon}
+        <ListItemLeading>
+            <span aria-hidden="true">
+                <item.icon size={16} />
+            </span>
+        </ListItemLeading>
+    {/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 trailing}
+        <span class="flex shrink-0 items-center gap-2 text-sm text-description">
+            {@render trailing()}
+        </span>
+    {/if}
+    {#if showArrow}
+        <ArrowRight
+            size={16}
+            class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-1 group-focus-visible:translate-x-1"
+            aria-hidden="true"
+        />
+    {/if}
+{/snippet}
+
 {#if item.href}
     <a
         href={item.href}
@@ -85,31 +122,7 @@
         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}
+        {@render rowContent()}
     </a>
 {:else}
     <button
@@ -119,30 +132,6 @@
         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}
+        {@render rowContent()}
     </button>
 {/if}

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

@@ -1,33 +1,27 @@
-import type { Component } from "svelte";
+import type { Component, Snippet } 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. */
+    /** Leading image; wins over `icon` when both are set. */
+    avatar?: string;
+    /** `avatar` alt text; `""` if decorative. */
+    avatarAlt?: string;
     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. */
+    /** Shown before the chevron when `showArrow` is true. */
+    trailing?: Snippet;
     onclick?: (item: ListItemData, event: MouseEvent) => void;
 }
 declare const ListItem: Component<Props, {}, "">;

package/dist/atoms/ListItemLeading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        /** e.g. `rounded-full` for avatars; default is `rounded-md` for icons. */
+        class?: string;
+        children?: Snippet;
+    }
+
+    let { class: className = "", children }: Props = $props();
+
+    const roundingClass = $derived(className.trim() ? className.trim() : "rounded-md");
+</script>
+
+<span
+    class="flex size-[length:var(--spacing-xl)] shrink-0 select-none items-center justify-center overflow-hidden text-description {roundingClass}"
+>
+    {@render children?.()}
+</span>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** e.g. `rounded-full` for avatars; default is `rounded-md` for icons. */
+    class?: string;
+    children?: Snippet;
+}
+declare const ListItemLeading: import("svelte").Component<Props, {}, "">;
+type ListItemLeading = ReturnType<typeof ListItemLeading>;
+export default ListItemLeading;

package/dist/atoms/Progress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
         value?: number;

package/dist/atoms/Radio.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import SelectionControl from "./SelectionControl.svelte";
+    import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
+    import { RADIO_CHECKED_DOT_CLASSES } from "./selection-control.styles";
+
+    interface Props {
+        id?: string;
+        name?: string;
+        value?: string;
+        label?: string;
+        disabled?: boolean;
+        defaultChecked?: boolean;
+        checked?: boolean;
+        onChange?: (event: Event) => void;
+        onchange?: (event: Event) => void;
+    }
+
+    let {
+        id,
+        name = "",
+        value = "",
+        label = "",
+        disabled = false,
+        defaultChecked = false,
+        checked = $bindable(defaultChecked),
+        onChange,
+        onchange,
+        ...restProps
+    }: Props = $props();
+</script>
+
+{#snippet mark(_props: SelectionControlMarkProps)}
+    <span class={RADIO_CHECKED_DOT_CLASSES} aria-hidden="true"></span>
+{/snippet}
+
+<SelectionControl
+    type="radio"
+    shape="circle"
+    {id}
+    {name}
+    {value}
+    {label}
+    {disabled}
+    bind:checked
+    {defaultChecked}
+    {onChange}
+    {onchange}
+    {mark}
+    {...restProps}
+/>
+

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

@@ -0,0 +1,14 @@
+interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+}
+declare const Radio: import("svelte").Component<Props, {}, "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/atoms/Select.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
-    import Button from "./Button.svelte";
     import Input from "./Input.svelte";
     import {
         ChevronDown,
@@ -8,7 +7,7 @@
         AlertTriangle,
         AlertCircle,
     } from "@lucide/svelte";
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
         value?: string | number | undefined;
@@ -17,25 +16,15 @@
             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;
@@ -101,18 +90,18 @@
 
     const variantClass = $derived(() => {
         return variant === "success"
-            ? "border-success focus:border-success focus:ring-success"
+            ? "border-success focus-visible:border-success"
             : variant === "warning"
-              ? "border-warning focus:border-warning focus:ring-warning"
+              ? "border-warning focus-visible:border-warning"
               : variant === "error"
-                ? "border-error focus:border-error focus:ring-error"
-                : "border-input-border focus:ring-2 focus:ring-brand-500";
+                ? "border-error focus-visible:border-error"
+                : "border-input-border";
     });
 
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "flex w-full cursor-pointer items-center justify-between rounded-lg border bg-input text-body transition-all duration-200 hover:bg-input-hover focus:bg-input-focus focus:outline-none focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-input-disabled disabled:opacity-50";
+            "focus-ring flex w-full cursor-pointer items-center justify-between rounded-lg border bg-input text-body transition-all duration-200 hover:bg-input-hover active:bg-input-focus focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:opacity-50";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
@@ -209,7 +198,6 @@
         const target = event.target as HTMLElement;
         const clickedSelectContainer = target.closest(".select-container");
 
-        // Close if clicking outside any select container, or clicking on a different select
         if (
             !clickedSelectContainer ||
             clickedSelectContainer !== selectContainer
@@ -233,21 +221,21 @@
     {/if}
 
     <Dropdown
-        {isOpen}
+        bind:isOpen={isOpen}
         placement="bottom-start"
         selectedValue={value}
         onOptionClick={handleOptionClick}
         ariaLabel="Select options"
+        menuRole="listbox"
     >
-        {#snippet trigger()}
+        {#snippet trigger(aria)}
             <button
                 type="button"
                 id={selectId}
                 class={triggerClasses()}
                 {disabled}
                 onclick={handleTriggerClick}
-                aria-haspopup="listbox"
-                aria-expanded={isOpen}
+                {...aria}
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
                 <span
@@ -305,18 +293,23 @@
                                 "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}
+                                <button
+                                    type="button"
+                                    role="option"
+                                    aria-selected={value === option.value
+                                        ? true
+                                        : undefined}
+                                    class="focus-ring flex w-full items-center justify-start rounded-md border-2 px-3 py-2 text-left text-sm font-medium transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {value ===
+                                    option.value
+                                        ? 'border-action-primary bg-transparent text-headline'
+                                        : 'border-transparent bg-transparent text-body hover:bg-base-100'}"
                                     disabled={option.disabled}
-                                    onclick={() => handleOptionClick(option.value)}
                                     {...buttonRestProps}
+                                    onclick={() =>
+                                        handleOptionClick(option.value)}
                                 >
                                     {option.label}
-                                </Button>
+                                </button>
                             </div>
                         {/each}
                     {:else if hasSearchQuery()}

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

@@ -5,25 +5,15 @@ 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;

package/dist/atoms/SelectionControl.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { generateId } from "../util/ssr-safe.js";
+    import {
+        SELECTION_CONTROL_LABEL_ROW,
+        selectionControlRingOverlayClasses,
+        selectionControlShellClasses,
+        type SelectionControlShape,
+    } from "./selection-control.styles";
+
+    type SelectionControlType = "checkbox" | "radio";
+
+    export type SelectionControlMarkProps = {
+        checked: boolean;
+        loading: boolean;
+        disabled: boolean;
+    };
+
+    interface Props {
+        id?: string;
+        type: SelectionControlType;
+        shape: SelectionControlShape;
+        name?: string;
+        value?: string;
+        label?: string;
+        disabled?: boolean;
+        loading?: boolean;
+        defaultChecked?: boolean;
+        checked?: boolean;
+        onChange?: (event: Event) => void;
+        onchange?: (event: Event) => void;
+        mark?: Snippet<[SelectionControlMarkProps]>;
+    }
+
+    let {
+        id: idProp,
+        type,
+        shape,
+        name = "",
+        value = "",
+        label = "",
+        disabled = false,
+        loading = false,
+        defaultChecked = false,
+        checked = $bindable(defaultChecked),
+        onChange,
+        onchange,
+        mark,
+        ...restProps
+    }: Props = $props();
+
+    /** Call once per mount — `generateId()` in `$derived` would churn ids every tick. */
+    const fallbackId = generateId("selection-control");
+    const controlId = $derived(idProp ?? fallbackId);
+    const isDisabled = $derived(disabled || loading);
+
+    const labelWrapperClasses = SELECTION_CONTROL_LABEL_ROW;
+
+    const controlContainerClasses = $derived(selectionControlShellClasses(shape));
+
+    const controlRingClasses = $derived(selectionControlRingOverlayClasses(shape));
+
+    function handleChange(event: Event) {
+        if (isDisabled) return;
+        const target = event.target as HTMLInputElement;
+        checked = target.checked;
+        onChange?.(event);
+        onchange?.(event);
+    }
+</script>
+
+<div class="flex items-center gap-2">
+    <label for={controlId} class={labelWrapperClasses}>
+        <span class={controlContainerClasses}>
+            <input
+                {type}
+                id={controlId}
+                {name}
+                {value}
+                {checked}
+                disabled={isDisabled}
+                class="sr-only"
+                aria-busy={loading ? "true" : undefined}
+                onchange={handleChange}
+                {...restProps}
+            />
+            <span class={controlRingClasses}></span>
+            {#if mark}
+                {@render mark({ checked, loading, disabled: isDisabled })}
+            {/if}
+        </span>
+        {#if label}
+            <span class="text-sm font-medium text-label">
+                {label}
+            </span>
+        {/if}
+    </label>
+</div>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+import { type SelectionControlShape } from "./selection-control.styles";
+type SelectionControlType = "checkbox" | "radio";
+export type SelectionControlMarkProps = {
+    checked: boolean;
+    loading: boolean;
+    disabled: boolean;
+};
+interface Props {
+    id?: string;
+    type: SelectionControlType;
+    shape: SelectionControlShape;
+    name?: string;
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    mark?: Snippet<[SelectionControlMarkProps]>;
+}
+declare const SelectionControl: import("svelte").Component<Props, {}, "checked">;
+type SelectionControl = ReturnType<typeof SelectionControl>;
+export default SelectionControl;