zabi-components 5.0.22 → 7.0.0

package/dist/molecules/ToasterToast.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { cubicOut } from 'svelte/easing';
+    import { slide, fade, fly } from 'svelte/transition';
+    import {
+        AlertCircle,
+        AlertTriangle,
+        CheckCircle,
+        ChevronDown,
+        Info,
+        X,
+    } from '@lucide/svelte';
+    import Button from '../atoms/Button.svelte';
+    import { toastStore, type ToastItem } from './toast-store.js';
+
+    interface Props {
+        toast: ToastItem;
+    }
+
+    let { toast }: Props = $props();
+
+    /** Seconds until auto-dismiss; `0` means no countdown (manual dismiss only). */
+    function autoDismissSeconds(duration: number | undefined): number {
+        if (duration === undefined) return 14;
+        if (duration <= 0) return 0;
+        return Math.max(1, Math.ceil(duration / 1000));
+    }
+
+    const maxSeconds = $derived(autoDismissSeconds(toast.duration));
+
+    let count = $state(0);
+    let timerActive = $state(false);
+    let isExpanded = $state(false);
+
+    let intervalRef: ReturnType<typeof setInterval> | undefined;
+
+    const expandableText = $derived((toast.detail ?? toast.message).trim());
+
+    const hasExpandable = $derived(expandableText.length > 0);
+
+    const headerTitle = $derived.by(() => {
+        const t = toast.title?.trim();
+        if (t) return t;
+        switch (toast.type) {
+            case 'success':
+                return 'Changes saved';
+            case 'error':
+                return 'Something went wrong';
+            case 'warning':
+                return 'Please review';
+            default:
+                return 'Notice';
+        }
+    });
+
+    const statusIconClass = $derived(
+        toast.type === 'success'
+            ? 'text-success'
+            : toast.type === 'error'
+              ? 'text-error'
+              : toast.type === 'warning'
+                ? 'text-warning'
+                : 'text-info',
+    );
+
+    const progressFillClass = $derived(
+        toast.type === 'success'
+            ? 'bg-success'
+            : toast.type === 'error'
+              ? 'bg-error'
+              : toast.type === 'warning'
+                ? 'bg-warning'
+                : 'bg-info',
+    );
+
+    function stopTimer() {
+        if (intervalRef !== undefined) {
+            clearInterval(intervalRef);
+            intervalRef = undefined;
+        }
+        timerActive = false;
+    }
+
+    onMount(() => {
+        const max = maxSeconds;
+        if (max <= 0) {
+            return () => {};
+        }
+        count = max;
+        timerActive = true;
+
+        intervalRef = setInterval(() => {
+            count -= 1;
+            if (count <= 0) {
+                stopTimer();
+                toastStore.dismiss(toast.id);
+            }
+        }, 1000);
+
+        return () => {
+            if (intervalRef !== undefined) {
+                clearInterval(intervalRef);
+                intervalRef = undefined;
+            }
+        };
+    });
+
+    function handleDismiss() {
+        toastStore.dismiss(toast.id);
+    }
+
+    function handleOkay() {
+        isExpanded = false;
+    }
+
+    const toastEnter = { y: 18, duration: 260, opacity: 0, easing: cubicOut };
+    const toastLeave = { y: 14, duration: 300, opacity: 0, easing: cubicOut };
+</script>
+
+<div
+    class="pointer-events-auto relative w-full min-w-[18rem] overflow-hidden rounded-2xl border border-border bg-surface-1 shadow-xl"
+    in:fly={toastEnter}
+    out:fly={toastLeave}
+    role={toast.type === 'error' ? 'alert' : 'status'}
+>
+    <div class="p-4">
+        <div class="flex items-start gap-3">
+            <div class="shrink-0 pt-0.5">
+                {#if toast.type === 'success'}
+                    <CheckCircle class="size-5 {statusIconClass}" aria-hidden="true" />
+                {:else if toast.type === 'error'}
+                    <AlertCircle class="size-5 {statusIconClass}" aria-hidden="true" />
+                {:else if toast.type === 'warning'}
+                    <AlertTriangle class="size-5 {statusIconClass}" aria-hidden="true" />
+                {:else}
+                    <Info class="size-5 {statusIconClass}" aria-hidden="true" />
+                {/if}
+            </div>
+            <h4 class="min-w-0 flex-1 text-base font-semibold text-headline">
+                {headerTitle}
+            </h4>
+            <div class="flex shrink-0 items-center gap-0.5">
+                {#if hasExpandable}
+                    <button
+                        type="button"
+                        class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                        aria-expanded={isExpanded}
+                        aria-controls="toaster-expand-{toast.id}"
+                        aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
+                        onclick={() => (isExpanded = !isExpanded)}
+                    >
+                        <ChevronDown
+                            class="size-5 transition-transform duration-200 {isExpanded
+                                ? 'rotate-180'
+                                : ''}"
+                            aria-hidden="true"
+                        />
+                    </button>
+                {/if}
+                <button
+                    type="button"
+                    class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                    onclick={handleDismiss}
+                    aria-label="Dismiss notification"
+                >
+                    <X class="size-5" aria-hidden="true" />
+                </button>
+            </div>
+        </div>
+
+        {#if hasExpandable && isExpanded}
+            <div
+                id="toaster-expand-{toast.id}"
+                class="mt-3"
+                transition:slide={{ duration: 200 }}
+            >
+                <p class="text-sm text-description">{expandableText}</p>
+                <Button
+                    variant="primary"
+                    size="sm"
+                    text="Okay"
+                    type="button"
+                    class="mt-3"
+                    onclick={handleOkay}
+                />
+            </div>
+        {/if}
+    </div>
+
+    {#if timerActive}
+        <div class="px-4 pb-3" transition:fade={{ duration: 180 }}>
+            <p class="text-xs text-description">
+                This message will close in {count} seconds.
+                <button
+                    type="button"
+                    class="focus-ring cursor-pointer rounded-sm text-link underline-offset-2 hover:underline focus:outline-none"
+                    onclick={stopTimer}
+                >
+                    Click to stop
+                </button>
+            </p>
+        </div>
+    {/if}
+
+    {#if timerActive}
+        <div
+            class="pointer-events-none absolute bottom-0 left-0 right-0 h-1 bg-border/70"
+            transition:fade={{ duration: 180 }}
+            aria-hidden="true"
+        >
+            <div
+                class="h-full {progressFillClass} transition-all duration-1000 ease-linear"
+                style="width: {(count / maxSeconds) * 100}%"
+            ></div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,7 @@
+import { type ToastItem } from './toast-store.js';
+interface Props {
+    toast: ToastItem;
+}
+declare const ToasterToast: import("svelte").Component<Props, {}, "">;
+type ToasterToast = ReturnType<typeof ToasterToast>;
+export default ToasterToast;

package/dist/molecules/index.d.ts

@@ -11,6 +11,16 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Page } from './Page.svelte';
 export { default as Section } from './Section.svelte';
+export { default as SidebarBrandHeader } from './SidebarBrandHeader.svelte';
+export { default as SidebarFooter } from './SidebarFooter.svelte';
+export { default as SidebarNavSection } from './SidebarNavSection.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as Header } from './Header.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export * from './toast-store.js';

package/dist/molecules/index.js

@@ -11,6 +11,16 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Page } from './Page.svelte';
 export { default as Section } from './Section.svelte';
+export { default as SidebarBrandHeader } from './SidebarBrandHeader.svelte';
+export { default as SidebarFooter } from './SidebarFooter.svelte';
+export { default as SidebarNavSection } from './SidebarNavSection.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as Header } from './Header.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export * from './toast-store.js';

package/dist/molecules/navigation-menu-context.d.ts

@@ -2,5 +2,16 @@ export interface NavigationMenuContextValue {
     activeItem: string | null;
     setActiveItem: (item: string | null) => void;
     isMobile: boolean;
+    /** Prefix for panel `id` / trigger `aria-controls` (one menu instance). */
+    menuInstanceId: string;
 }
 export declare const NAVIGATION_MENU_CONTEXT_KEY: unique symbol;
+/** Panel element id; `itemValue` is sanitized for HTML id rules. */
+export declare function navigationMenuPanelId(menuInstanceId: string, itemValue: string): string;
+/**
+ * Deterministic menu id from item order + values (FNV-1a).
+ * SSR and client must agree — do not use `generateId()` for this pairing.
+ */
+export declare function navigationMenuStableInstanceId(items: ReadonlyArray<{
+    value: string;
+}>): string;

package/dist/molecules/navigation-menu-context.js

@@ -1 +1,19 @@
 export const NAVIGATION_MENU_CONTEXT_KEY = Symbol("navigation-menu");
+/** Panel element id; `itemValue` is sanitized for HTML id rules. */
+export function navigationMenuPanelId(menuInstanceId, itemValue) {
+    const safe = itemValue.replace(/[^a-zA-Z0-9_-]/g, "-");
+    return `${menuInstanceId}-${safe}-panel`;
+}
+/**
+ * Deterministic menu id from item order + values (FNV-1a).
+ * SSR and client must agree — do not use `generateId()` for this pairing.
+ */
+export function navigationMenuStableInstanceId(items) {
+    const raw = items.map((i) => i.value).join("\u001f");
+    let h = 2166136261;
+    for (let i = 0; i < raw.length; i++) {
+        h ^= raw.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return `zabi-nav-${(h >>> 0).toString(36)}`;
+}

package/dist/molecules/toast-store.d.ts

@@ -0,0 +1,38 @@
+export type ToastLevel = 'success' | 'error' | 'warning' | 'info';
+export interface ToastItem {
+    id: string;
+    /** Primary line (always shown). */
+    message: string;
+    type: ToastLevel;
+    title?: string;
+    /** Expandable body; UI can fall back to `message`. */
+    detail?: string;
+    /**
+     * Auto-dismiss duration in milliseconds.
+     * When omitted, the toaster uses 14s. Use `0` to keep the toast until dismissed manually.
+     */
+    duration?: number;
+}
+export declare const toastStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastItem[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    push(options: {
+        message: string;
+        type?: ToastLevel;
+        /** Same semantics as {@link ToastItem.duration}. */
+        duration?: number;
+        id?: string;
+        title?: string;
+        detail?: string;
+    }): string;
+    dismiss: (id: string) => void;
+    clear(): void;
+};
+export declare function pushToast(options: {
+    message: string;
+    type?: ToastLevel;
+    /** Same semantics as {@link ToastItem.duration}. */
+    duration?: number;
+    title?: string;
+    detail?: string;
+}): string;
+export declare function dismissToast(id: string): void;

package/dist/molecules/toast-store.js

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+function createToastStore() {
+    const { subscribe, update } = writable([]);
+    function dismiss(id) {
+        update((list) => list.filter((t) => t.id !== id));
+    }
+    return {
+        subscribe,
+        push(options) {
+            const id = options.id ?? `toast-${Math.random().toString(36).slice(2, 11)}`;
+            const item = {
+                id,
+                message: options.message,
+                type: options.type ?? 'info',
+                duration: options.duration,
+                title: options.title,
+                detail: options.detail,
+            };
+            update((list) => [...list, item]);
+            return id;
+        },
+        dismiss,
+        clear() {
+            update(() => []);
+        },
+    };
+}
+export const toastStore = createToastStore();
+export function pushToast(options) {
+    return toastStore.push(options);
+}
+export function dismissToast(id) {
+    toastStore.dismiss(id);
+}

package/dist/organisms/SidebarAccountPanel.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import SidebarPanel, {
+        type SidebarPanelItem,
+    } from "./SidebarPanel.svelte";
+    import { generateId } from "../util/ssr-safe.js";
+    import { LogOut, Moon, Sun, User } from "@lucide/svelte";
+
+    interface Props {
+        /** Target id for `aria-controls` from the sidebar footer/nav. */
+        panelId?: string;
+        style?: string;
+        profileName?: string;
+        profileEmail?: string;
+        logoutLabel?: string;
+        showThemeToggle?: boolean;
+        showLogout?: boolean;
+        isLightMode?: boolean;
+        onThemeToggle?: (nextIsLightMode: boolean) => void;
+        onLogout?: () => void;
+        onAccount?: () => void;
+        onClose?: () => void;
+        widthClass?: string;
+        variant?: "plain" | "elevated";
+    }
+
+    let {
+        panelId = generateId("account-panel"),
+        style = "",
+        profileName = "Account",
+        profileEmail = "",
+        logoutLabel = "Log out",
+        showThemeToggle = true,
+        showLogout = true,
+        isLightMode = $bindable(false),
+        onThemeToggle,
+        onLogout,
+        onAccount,
+        onClose,
+        widthClass = "w-[320px]",
+        variant = "plain",
+        ...restProps
+    }: Props = $props();
+
+    let selectedItemId = $state("");
+
+    const items = $derived.by((): SidebarPanelItem[] => {
+        const list: SidebarPanelItem[] = [
+            {
+                id: "account",
+                label: "Account",
+                description: profileName,
+                icon: User,
+            },
+        ];
+
+        if (showThemeToggle) {
+            list.push({
+                id: "theme",
+                label: "Theme",
+                description: isLightMode ? "Light mode" : "Dark mode",
+                badgeText: isLightMode ? "Light" : "Dark",
+                icon: isLightMode ? Sun : Moon,
+            });
+        }
+
+        if (showLogout) {
+            list.push({
+                id: "logout",
+                label: logoutLabel,
+                description: "Sign out of this account",
+                icon: LogOut,
+            });
+        }
+
+        return list;
+    });
+
+    function toggleTheme(): void {
+        isLightMode = !isLightMode;
+        onThemeToggle?.(isLightMode);
+    }
+
+    function handleSelect(item: SidebarPanelItem): void {
+        if (item.id === "theme") {
+            toggleTheme();
+        } else if (item.id === "logout") {
+            onLogout?.();
+        } else if (item.id === "account") {
+            onAccount?.();
+        }
+
+        onClose?.();
+    }
+</script>
+
+<div
+    id={panelId}
+    {style}
+    role="dialog"
+    aria-modal="false"
+    aria-label="Account panel"
+    {...restProps}
+>
+    <SidebarPanel
+        title="Account"
+        subtitle={profileEmail}
+        ariaLabel="Account panel"
+        closeLabel="Close account panel"
+        {widthClass}
+        {variant}
+        showSearch={false}
+        items={items}
+        bind:selectedItemId={selectedItemId}
+        onSelect={handleSelect}
+        onClose={onClose}
+    />
+</div>
+

package/dist/organisms/SidebarAccountPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    /** Target id for `aria-controls` from the sidebar footer/nav. */
+    panelId?: string;
+    style?: string;
+    profileName?: string;
+    profileEmail?: string;
+    logoutLabel?: string;
+    showThemeToggle?: boolean;
+    showLogout?: boolean;
+    isLightMode?: boolean;
+    onThemeToggle?: (nextIsLightMode: boolean) => void;
+    onLogout?: () => void;
+    onAccount?: () => void;
+    onClose?: () => void;
+    widthClass?: string;
+    variant?: "plain" | "elevated";
+}
+declare const SidebarAccountPanel: import("svelte").Component<Props, {}, "isLightMode">;
+type SidebarAccountPanel = ReturnType<typeof SidebarAccountPanel>;
+export default SidebarAccountPanel;