zabi-components 5.0.22 → 7.0.0

package/dist/atoms/Input.svelte

@@ -1,17 +1,22 @@
 <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 type { SemanticVariant, SizeVariant } from "../types/variants.js";
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
+        /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+        id?: string;
         value?: string;
         type?: string;
         name?: string;
         class?: string;
         label?: string;
+        /** True when FormField supplies the visible `<label>`. */
+        hideLabel?: boolean;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
+        loading?: boolean;
         size?: SizeVariant;
         variant?: SemanticVariant;
         message?: string;
@@ -21,14 +26,17 @@
     }
 
     let {
+        id: idProp,
         value = $bindable(""),
         type = "text",
         name = "",
         class: className = "",
         label = "",
+        hideLabel = false,
         placeholder = "",
         required = false,
         disabled = false,
+        loading = false,
         size = "md",
         variant = "default",
         message = "",
@@ -37,7 +45,9 @@
         ...restProps
     }: Props = $props();
 
-    const inputId = generateId("input");
+    const fallbackId = generateId("input");
+    const inputId = $derived(idProp ?? fallbackId);
+    const isDisabled = $derived(disabled || loading);
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -45,38 +55,46 @@
                 padding: "px-4 py-2",
                 text: "text-sm",
                 leading: "leading-5",
+                spinner: "size-4",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
                 leading: "leading-6",
+                spinner: "size-5",
             };
         } else {
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
                 leading: "leading-6",
+                spinner: "size-5",
             };
         }
     });
 
     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-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                ? "border-error focus-visible:border-error"
+                : "border-input-border focus-visible:border-input-border";
     });
 
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
+        const trailingPad = loading
+            ? size === "sm"
+                ? "pr-9"
+                : "pr-10"
+            : "";
         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";
+            "focus-ring w-full min-w-48 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";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${trailingPad} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
     });
 
     const labelClasses = $derived(
@@ -109,25 +127,39 @@
 </script>
 
 <div>
-    {#if label}
+    {#if label && !hideLabel}
         <label for={inputId} class={labelClasses()}>{label}</label>
     {/if}
-    <input
-        id={inputId}
-        {type}
-        {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}
-    />
+    <div class="relative">
+        <input
+            id={inputId}
+            {type}
+            {name}
+            bind:value
+            {placeholder}
+            {required}
+            disabled={isDisabled}
+            class={inputClasses()}
+            oninput={handleInput}
+            {onblur}
+            aria-invalid={variant === "error" ? "true" : undefined}
+            aria-required={required ? "true" : undefined}
+            aria-busy={loading ? "true" : undefined}
+            aria-describedby={message ? `${inputId}-message` : undefined}
+            {...restProps}
+        />
+        {#if loading}
+            <span
+                class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-description"
+                aria-hidden="true"
+            >
+                <span
+                    class="inline-block {sizeClass()
+                        .spinner} 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={`${inputId}-message`}

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

@@ -1,13 +1,18 @@
-import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
+import type { SemanticVariant, SizeVariant } from "../types/variants.js";
 interface Props {
+    /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+    id?: string;
     value?: string;
     type?: string;
     name?: string;
     class?: string;
     label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     size?: SizeVariant;
     variant?: SemanticVariant;
     message?: string;

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;
@@ -39,7 +39,7 @@
 
     <div
         id={progressId}
-        class="w-full bg-input rounded-full overflow-hidden {sizeClasses[size]}"
+        class="w-full border border-input-border bg-input rounded-full overflow-hidden {sizeClasses[size]}"
         role="progressbar"
         aria-valuenow={value}
         aria-valuemin="0"

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;