zabi-components 5.0.22 → 7.0.0

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

@@ -1,4 +1,6 @@
+import type { Snippet } from "svelte";
 import type { Component } from "svelte";
+import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 export interface SidebarNavigationItem {
     id: string;
     label: string;
@@ -10,13 +12,19 @@ export interface SidebarNavigationItem {
     badgeText?: string | number;
     badgeCount?: number;
     group?: "primary" | "secondary";
+    /** Groups items under a section heading in the rail. */
+    section?: string;
 }
 interface Props {
     mode?: "expanded" | "collapsed";
+    layout?: "rail" | "card";
     items?: SidebarNavigationItem[];
     currentPath?: string;
     ariaLabel?: string;
     className?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    brandName?: string;
     showProfile?: boolean;
     profileName?: string;
     profileEmail?: string;
@@ -25,6 +33,13 @@ interface Props {
     searchMode?: "input" | "button";
     searchPlaceholder?: string;
     searchValue?: string;
+    /** Trigger icon when search is a button or rail is collapsed; input mode keeps `Search` on the field. */
+    searchTriggerIcon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    searchTriggerVariant?: ButtonVariant;
+    searchTriggerSize?: SizeVariant;
     showLogout?: boolean;
     logoutLabel?: string;
     showThemeToggle?: boolean;
@@ -38,7 +53,13 @@ interface Props {
     onLogout?: () => void;
     onThemeToggle?: (nextIsLightMode: boolean) => void;
     onEmptyStateAction?: () => void;
+    onProfileClick?: (event?: MouseEvent) => void;
+    profilePanelOpen?: boolean;
+    profilePanelControlsId?: string;
+    profilePanel?: Snippet;
+    /** Parent nav href to highlight when `currentPath` is a deeper leaf (e.g. category row). */
+    activePrimaryHref?: string;
 }
-declare const SidebarNavigation: Component<Props, {}, "searchValue" | "isLightMode">;
+declare const SidebarNavigation: Component<Props, {}, "isLightMode" | "searchValue">;
 type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
 export default SidebarNavigation;

package/dist/organisms/{SidebarProjectPanel.svelte → SidebarPanel.svelte}

@@ -4,7 +4,7 @@
     import { Search, X } from "@lucide/svelte";
     import type { Component } from "svelte";
 
-    export interface SidebarProjectPanelItem {
+    export interface SidebarPanelItem {
         id: string;
         label: string;
         icon?: Component<{ size?: number; class?: string }>;
@@ -15,39 +15,45 @@
     interface Props {
         className?: string;
         widthClass?: string;
+        variant?: "plain" | "elevated";
         ariaLabel?: string;
         title?: string;
         subtitle?: string;
         showSearch?: boolean;
         searchPlaceholder?: string;
         searchValue?: string;
-        items?: SidebarProjectPanelItem[];
+        items?: SidebarPanelItem[];
         selectedItemId?: string;
         emptyStateTitle?: string;
         emptyStateDescription?: string;
+        emptyStateActionLabel?: string;
         selectLabel?: string;
         closeLabel?: string;
-        onSelect?: (item: SidebarProjectPanelItem) => void;
+        onSelect?: (item: SidebarPanelItem) => void;
         onClose?: () => void;
+        onEmptyStateAction?: () => void;
     }
 
     let {
         className = "",
         widthClass = "w-80",
-        ariaLabel = "Project picker panel",
-        title = "Projects",
-        subtitle = "Choose a project to continue",
+        variant = "elevated",
+        ariaLabel = "Picker panel",
+        title = "Items",
+        subtitle = "Choose an item to continue",
         showSearch = true,
-        searchPlaceholder = "Search projects...",
+        searchPlaceholder = "Search...",
         searchValue = $bindable(""),
         items = [],
         selectedItemId = $bindable(""),
-        emptyStateTitle = "No projects found",
-        emptyStateDescription = "Try a different keyword or create a new project.",
-        selectLabel = "Select project",
+        emptyStateTitle = "No matches",
+        emptyStateDescription = "Try a different keyword.",
+        emptyStateActionLabel = "",
+        selectLabel = "Select item",
         closeLabel = "Close panel",
         onSelect,
         onClose,
+        onEmptyStateAction,
         ...restProps
     }: Props = $props();
 
@@ -60,22 +66,27 @@
             : items,
     );
 
+    const isElevated = $derived(variant === "elevated");
+
     const containerClasses = $derived.by(() => {
         const resolvedWidthClass = widthClass.trim() || "w-80";
-        return `${resolvedWidthClass} shrink-0 rounded-2xl border border-border bg-background p-4 ${className}`.trim();
+        const shell = isElevated
+            ? "rounded-3xl border border-border bg-card text-headline shadow-md ring-1 ring-border/50"
+            : "rounded-3xl border border-border bg-card text-headline shadow-sm";
+        return `${resolvedWidthClass} shrink-0 p-5 ${shell} ${className}`.trim();
     });
 
     function getItemClasses(itemId: string): string {
         const isActive = selectedItemId === itemId;
         const baseClasses =
-            "w-full rounded-xl px-3 py-3 text-left transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg px-3 py-2.5 text-left transition-colors duration-150";
         if (isActive) {
-            return `${baseClasses} bg-action-primary-subtle text-headline`;
+            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border/80`;
         }
-        return `${baseClasses} hover:bg-base-50 text-description`;
+        return `${baseClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
     }
 
-    function handleSelect(item: SidebarProjectPanelItem): void {
+    function handleSelect(item: SidebarPanelItem): void {
         selectedItemId = item.id;
         if (onSelect) {
             onSelect(item);
@@ -87,65 +98,76 @@
             onClose();
         }
     }
+
+    function handleEmptyStateAction(): void {
+        if (onEmptyStateAction) {
+            onEmptyStateAction();
+        }
+    }
 </script>
 
 <aside class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div class="mb-4 flex items-start justify-between gap-3">
-        <div class="min-w-0">
-            <h3 class="truncate text-base font-semibold text-headline">{title}</h3>
-            <p class="mt-1 text-sm text-description">{subtitle}</p>
+    <div class="mb-5 flex items-start justify-between gap-3">
+        <div class="min-w-0 pr-1">
+            <h3 class="truncate text-base font-semibold tracking-tight text-headline">
+                {title}
+            </h3>
+            <p class="mt-0.5 text-sm leading-relaxed text-description">{subtitle}</p>
         </div>
         <button
             type="button"
-            class="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-description hover:bg-base-50 hover:text-headline focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
+            class="-mr-0.5 -mt-0.5 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-nav-menu-item transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-ring focus-ring--nav"
             aria-label={closeLabel}
             onclick={handleClose}
         >
-            <X size={16} />
+            <X size={18} />
         </button>
     </div>
 
     {#if showSearch}
-        <div class="relative mb-3">
+        <div class="relative mb-5">
             <span
-                class="pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-description"
+                class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-description"
                 aria-hidden="true"
             >
-                <Search size={18} />
+                <Search size={17} />
             </span>
             <Input
                 type="search"
                 bind:value={searchValue}
                 placeholder={searchPlaceholder}
                 aria-label={searchPlaceholder}
-                class="w-full min-w-0 rounded-xl pl-11"
+                class="w-full min-w-0 min-h-10 rounded-xl border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent focus-ring focus-ring--nav"
             />
         </div>
     {/if}
 
     {#if filteredItems.length > 0}
-        <ul class="space-y-2" aria-label={selectLabel}>
+        <ul class="space-y-1" role="listbox" aria-label={selectLabel}>
             {#each filteredItems as item (item.id)}
-                <li>
+                <li role="presentation">
                     <button
                         type="button"
+                        role="option"
                         class={getItemClasses(item.id)}
                         onclick={() => handleSelect(item)}
-                        aria-pressed={selectedItemId === item.id}
+                        aria-selected={selectedItemId === item.id}
                     >
                         <span class="flex items-center justify-between gap-3">
-                            <span class="flex min-w-0 items-start gap-2">
+                            <span class="flex min-w-0 items-start gap-2.5">
                                 {#if item.icon}
                                     {@const Icon = item.icon}
                                     <span
-                                        class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-current"
+                                        class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center text-current"
                                         aria-hidden="true"
                                     >
-                                        <Icon size={16} />
+                                        <Icon size={18} />
                                     </span>
                                 {/if}
                                 <span class="min-w-0">
-                                    <span class="block truncate text-sm font-medium text-current">
+                                    <span
+                                        class="block truncate text-sm font-medium text-current"
+                                    >
                                         {item.label}
                                     </span>
                                     {#if item.description}
@@ -166,9 +188,20 @@
             {/each}
         </ul>
     {:else}
-        <div class="rounded-xl border border-dashed border-border bg-base-50 p-4">
+        <div
+            class="rounded-xl border border-dashed border-border bg-transparent px-3.5 py-4 ring-1 ring-border/40"
+        >
             <h4 class="text-sm font-semibold text-headline">{emptyStateTitle}</h4>
-            <p class="mt-1 text-sm text-description">{emptyStateDescription}</p>
+            <p class="mt-1 text-sm leading-relaxed text-description">{emptyStateDescription}</p>
+            {#if emptyStateActionLabel.trim() && onEmptyStateAction}
+                <button
+                    type="button"
+                    class="mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm font-medium text-action-primary transition-colors hover:bg-action-primary-hover focus-ring focus-ring--nav"
+                    onclick={handleEmptyStateAction}
+                >
+                    {emptyStateActionLabel.trim()}
+                </button>
+            {/if}
         </div>
     {/if}
 </aside>

package/dist/organisms/{SidebarProjectPanel.svelte.d.ts → SidebarPanel.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-export interface SidebarProjectPanelItem {
+export interface SidebarPanelItem {
     id: string;
     label: string;
     icon?: Component<{
@@ -12,21 +12,24 @@ export interface SidebarProjectPanelItem {
 interface Props {
     className?: string;
     widthClass?: string;
+    variant?: "plain" | "elevated";
     ariaLabel?: string;
     title?: string;
     subtitle?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
     searchValue?: string;
-    items?: SidebarProjectPanelItem[];
+    items?: SidebarPanelItem[];
     selectedItemId?: string;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
+    emptyStateActionLabel?: string;
     selectLabel?: string;
     closeLabel?: string;
-    onSelect?: (item: SidebarProjectPanelItem) => void;
+    onSelect?: (item: SidebarPanelItem) => void;
     onClose?: () => void;
+    onEmptyStateAction?: () => void;
 }
-declare const SidebarProjectPanel: Component<Props, {}, "searchValue" | "selectedItemId">;
-type SidebarProjectPanel = ReturnType<typeof SidebarProjectPanel>;
-export default SidebarProjectPanel;
+declare const SidebarPanel: Component<Props, {}, "searchValue" | "selectedItemId">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

package/dist/organisms/TopNavbar.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+    import ThemeToggle from "../atoms/ThemeToggle.svelte";
+    import type { Component, Snippet } from "svelte";
+
+    export interface TopNavbarNavItem {
+        label: string;
+        href: string;
+        icon?: Component<{ size?: number; class?: string }>;
+        iconFilled?: Component<{ size?: number; class?: string }>;
+    }
+
+    interface Props {
+        brand?: string;
+        brandHref?: string;
+        /** `aria-label` on `<nav>` when multiple nav landmarks exist. */
+        ariaLabel?: string;
+        showThemeToggle?: boolean;
+        className?: string;
+        /** Slim mode: only the `nav` region (no full chrome bar). */
+        embedded?: boolean;
+        items?: TopNavbarNavItem[];
+        navVariant?: "header" | "sidebar";
+        currentPath?: string;
+        preventNavigation?: boolean;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        brand = "",
+        brandHref,
+        ariaLabel,
+        showThemeToggle = true,
+        className = "",
+        embedded = false,
+        items = [],
+        navVariant = "header",
+        currentPath = "",
+        preventNavigation = false,
+        onclick,
+        nav,
+        actions,
+        ...restProps
+    }: Props & { nav?: Snippet; actions?: Snippet } = $props();
+
+    let isMenuOpen = $state(false);
+
+    function toggleMenu() {
+        isMenuOpen = !isMenuOpen;
+    }
+
+    function handleNavLinkClick(event: MouseEvent) {
+        if (preventNavigation) {
+            event.preventDefault();
+        }
+        if (onclick) {
+            onclick(event);
+        }
+    }
+
+    /** App routes: prefix match except `/` and absolute URLs (exact match). */
+    function isNavItemActive(href: string): boolean {
+        if (href.startsWith("http://") || href.startsWith("https://")) {
+            return currentPath === href;
+        }
+        if (href === "/") {
+            return currentPath === "/";
+        }
+        return currentPath === href || currentPath.startsWith(`${href}/`);
+    }
+
+    const ulClasses = $derived.by(() => {
+        return navVariant === "sidebar"
+            ? "flex flex-col gap-1"
+            : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
+    });
+
+    function getNavItemClasses(): string {
+        return "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer w-full md:w-auto";
+    }
+
+    function getIconContainerClasses(): string {
+        return "focus-ring focus-ring--nav group/nav-item flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 text-nav-menu-item transition-colors duration-200 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover aria-[current=page]:bg-nav-menu-active aria-[current=page]:text-nav-menu-item-active";
+    }
+
+    function getStateLayerClasses(): string {
+        return "box-border flex gap-1 h-10 items-center px-4 py-2 relative shrink-0";
+    }
+
+    function getLabelClasses(): string {
+        return "font-medium leading-4 relative shrink-0 text-center text-nowrap tracking-[0.5px] whitespace-pre text-xs text-inherit";
+    }
+
+    function getIconWrapperClasses(): string {
+        return "overflow-clip relative shrink-0 size-4 text-current";
+    }
+</script>
+
+{#snippet defaultNavList()}
+    <ul class="{ulClasses} list-none m-0 p-0">
+        {#each items as item (item.href)}
+            {@const isActive = isNavItemActive(item.href)}
+            <li class={getNavItemClasses()}>
+                <a
+                    href={item.href}
+                    class={getIconContainerClasses()}
+                    onclick={handleNavLinkClick}
+                    aria-current={isActive ? "page" : undefined}
+                >
+                    <div class={getStateLayerClasses()}>
+                        {#if item.iconFilled && isActive}
+                            {@const Icon = item.iconFilled}
+                            <div class={getIconWrapperClasses()}>
+                                <Icon size={16} class="w-4 h-4" />
+                            </div>
+                        {:else if item.icon}
+                            {@const Icon = item.icon}
+                            <div class={getIconWrapperClasses()}>
+                                <Icon size={16} class="w-4 h-4" />
+                            </div>
+                        {/if}
+                        <p class={getLabelClasses()}>
+                            {item.label}
+                        </p>
+                    </div>
+                </a>
+            </li>
+        {/each}
+    </ul>
+{/snippet}
+
+{#if embedded}
+    <nav class={className} aria-label={ariaLabel} {...restProps}>
+        {#if nav}
+            {@render nav()}
+        {:else}
+            {@render defaultNavList()}
+        {/if}
+    </nav>
+{:else}
+    <nav
+        class="border-b border-border bg-background sticky top-0 z-50 {className}"
+        aria-label={ariaLabel}
+        {...restProps}
+    >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="shrink-0">
+                    {#if brandHref}
+                        <a
+                            href={brandHref}
+                            class="focus-ring text-xl font-bold text-headline hover:opacity-90"
+                        >
+                            {brand}
+                        </a>
+                    {:else}
+                        <span class="text-xl font-bold text-headline">{brand}</span>
+                    {/if}
+                </div>
+
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        {#if nav}
+                            {@render nav()}
+                        {:else if items.length > 0}
+                            {@render defaultNavList()}
+                        {/if}
+                    </div>
+                </div>
+
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center space-x-4">
+                        {@render actions?.()}
+                        {#if showThemeToggle}
+                            <ThemeToggle />
+                        {/if}
+                    </div>
+                </div>
+
+                <div class="md:hidden">
+                    <button
+                        type="button"
+                        class="cursor-pointer text-description hover:text-body"
+                        onclick={toggleMenu}
+                        aria-label="Toggle menu"
+                    >
+                        <span class="text-2xl">☰</span>
+                    </button>
+                </div>
+            </div>
+
+            {#if isMenuOpen}
+                <div class="md:hidden">
+                    <div
+                        class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-border"
+                    >
+                        {#if nav}
+                            {@render nav()}
+                        {:else if items.length > 0}
+                            {@render defaultNavList()}
+                        {/if}
+                        <div class="pt-4">
+                            {@render actions?.()}
+                            {#if showThemeToggle}
+                                <div class="mt-2">
+                                    <ThemeToggle />
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </nav>
+{/if}

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

@@ -0,0 +1,35 @@
+import type { Component, Snippet } from "svelte";
+export interface TopNavbarNavItem {
+    label: string;
+    href: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    iconFilled?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+}
+interface Props {
+    brand?: string;
+    brandHref?: string;
+    /** `aria-label` on `<nav>` when multiple nav landmarks exist. */
+    ariaLabel?: string;
+    showThemeToggle?: boolean;
+    className?: string;
+    /** Slim mode: only the `nav` region (no full chrome bar). */
+    embedded?: boolean;
+    items?: TopNavbarNavItem[];
+    navVariant?: "header" | "sidebar";
+    currentPath?: string;
+    preventNavigation?: boolean;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    nav?: Snippet;
+    actions?: Snippet;
+};
+declare const TopNavbar: Component<$$ComponentProps, {}, "">;
+type TopNavbar = ReturnType<typeof TopNavbar>;
+export default TopNavbar;

package/dist/organisms/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
+export { default as TopNavbar } from './TopNavbar.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
+export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';

package/dist/organisms/index.js

@@ -1,4 +1,4 @@
-export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
+export { default as TopNavbar } from './TopNavbar.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
+export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';

package/dist/routes/lib/focus-utils.d.ts

@@ -1,23 +1,12 @@
-/**
- * Focus management utilities for accessibility
- */
-/**
- * Get all focusable elements within a container
- */
+/** Focus helpers for overlays (modals, sheets). Requires `app.css` focus ring classes. */
+/** From `app.css` `@layer components` — import the library/app stylesheet. */
+export declare const FOCUS_BRAND_CLASS = "focus-brand";
+export declare const FOCUS_NAV_CLASS = "focus-nav";
 export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
-/**
- * Trap focus within a container element
- */
+/** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export declare function trapFocus(container: HTMLElement): () => void;
-/**
- * Save the currently focused element
- */
 export declare function saveFocus(): void;
-/**
- * Return focus to the previously focused element
- */
+/** Restores focus from the last `saveFocus`. Skips disconnected or unfocusable nodes. */
 export declare function returnFocus(): void;
-/**
- * Focus the first focusable element in a container
- */
 export declare function focusFirstElement(container: HTMLElement): void;
+//# sourceMappingURL=focus-utils.d.ts.map