zabi-components 5.0.22 → 7.0.0

package/dist/atoms/Select.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
-    import Button from "./Button.svelte";
+    import Input from "./Input.svelte";
     import {
         ChevronDown,
         CheckCircle,
         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;
@@ -16,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;
@@ -100,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-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                ? "border-error focus-visible:border-error"
+                : "border-input-border";
     });
 
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
+            "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();
     });
@@ -208,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
@@ -232,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
@@ -277,9 +266,10 @@
             <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
                 {#if searchable && !isLoading}
                     <div class="px-1 pb-2">
-                        <input
+                        <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"
+                            size="sm"
+                            class="min-w-0"
                             placeholder={searchPlaceholder}
                             bind:value={searchQuery}
                             aria-label={searchPlaceholder}
@@ -303,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()}
@@ -328,7 +323,7 @@
                             {#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"
+                                    class="mt-3 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
                                     onclick={onEmptyStateAction}
                                 >
                                     {emptyStateActionLabel}

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;

package/dist/atoms/Skeleton.svelte

@@ -1,30 +1,54 @@
 <script lang="ts">
+    type Variant = "text" | "circle" | "block";
+
     interface Props {
-        width?: string;
-        height?: string;
-        className?: string;
+        variant?: Variant;
+        /** CSS length or px number; omit to use variant default (circle stays square). */
+        width?: string | number;
+        /** CSS length or px number; omit for variant default height. */
+        height?: string | number;
+        class?: string;
         "aria-label"?: string;
     }
 
     let {
-        width = "100%",
-        height = "1rem",
-        className = "",
-        "aria-label": ariaLabel = "Loading...",
-        ...restProps
+        variant = "text",
+        width,
+        height,
+        class: className = "",
+        "aria-label": ariaLabel = "Loading…",
     }: Props = $props();
 
-    const classes = $derived(
-        `animate-pulse bg-action-secondary rounded${className ? ` ${className}` : ""}`,
+    const radius: Record<Variant, string> = {
+        text: "rounded-md",
+        circle: "rounded-full",
+        block: "rounded-lg",
+    };
+
+    const defaultShape: Record<Variant, string> = {
+        text: "w-full h-3",
+        circle: "w-10 aspect-square",
+        block: "w-full h-32",
+    };
+
+    function toSize(value: string | number): string {
+        return typeof value === "number" ? `${value}px` : value;
+    }
+
+    const inlineStyle = $derived(
+        [
+            width !== undefined ? `width: ${toSize(width)}` : null,
+            height !== undefined ? `height: ${toSize(height)}` : null,
+        ]
+            .filter(Boolean)
+            .join("; "),
     );
-    const styles = $derived(`width: ${width}; height: ${height};`);
 </script>
 
 <div
-    class={classes}
-    style={styles}
+    class="animate-pulse bg-surface-2 {defaultShape[variant]} {radius[variant]} {className}"
+    style={inlineStyle || undefined}
+    role="status"
     aria-busy="true"
     aria-label={ariaLabel}
-    role="status"
-    {...restProps}
 ></div>

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

@@ -1,7 +1,11 @@
+type Variant = "text" | "circle" | "block";
 interface Props {
-    width?: string;
-    height?: string;
-    className?: string;
+    variant?: Variant;
+    /** CSS length or px number; omit to use variant default (circle stays square). */
+    width?: string | number;
+    /** CSS length or px number; omit for variant default height. */
+    height?: string | number;
+    class?: string;
     "aria-label"?: string;
 }
 declare const Skeleton: import("svelte").Component<Props, {}, "">;

package/dist/atoms/Table.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        /** Visible `<caption>` when set. */
+        caption?: string;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let { caption, class: className = '', children }: Props = $props();
+</script>
+
+<div
+    class="overflow-x-auto rounded-lg border border-border shadow-sm {className}"
+>
+    <table class="w-full min-w-[20rem] border-collapse text-left text-sm text-body">
+        {#if caption}
+            <caption class="border-b border-border bg-base-50 px-4 py-3 text-left text-headline">
+                {caption}
+            </caption>
+        {/if}
+        {#if children}
+            {@render children()}
+        {/if}
+    </table>
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Visible `<caption>` when set. */
+    caption?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/atoms/Text.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+    type Size = 'sm' | 'md' | 'lg';
+
+    interface Props {
+        as?: 'p' | 'span' | 'div';
+        tone?: Tone;
+        size?: Size;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let {
+        as: Tag = 'p',
+        tone = 'body',
+        size = 'md',
+        class: className = '',
+        children,
+    }: Props = $props();
+
+    const toneClass: Record<Tone, string> = {
+        body: 'text-body',
+        description: 'text-description',
+        caption: 'text-caption',
+        headline: 'text-headline',
+        label: 'text-label',
+        error: 'text-error',
+    };
+
+    const sizeClass: Record<Size, string> = {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+    };
+</script>
+
+<svelte:element
+    this={Tag}
+    class={[toneClass[tone], sizeClass[size], className].filter(Boolean).join(' ')}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+type Size = 'sm' | 'md' | 'lg';
+interface Props {
+    as?: 'p' | 'span' | 'div';
+    tone?: Tone;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;