zabi-components 5.0.21 → 5.0.22

package/dist/molecules/Tabs.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+    function createId(prefix: string): string {
+        if (typeof window !== "undefined") {
+            return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
+        }
+        return `${prefix}-ssr-${Date.now()}`;
+    }
+
     interface Props {
         tabs?: Array<{
             id: string;
@@ -19,17 +26,69 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
+    const tabsBaseId = createId("tabs");
+
     function selectTab(tabId: string) {
         activeTab = tabId;
     }
 
+    function getEnabledTabs() {
+        return tabs.filter((tab) => !tab.disabled);
+    }
+
+    function getTabIndex(tabId: string) {
+        return tabs.findIndex((tab) => tab.id === tabId);
+    }
+
+    function getTabId(tabId: string) {
+        return `${tabsBaseId}-tab-${tabId}`;
+    }
+
+    function getPanelId(tabId: string) {
+        return `${tabsBaseId}-panel-${tabId}`;
+    }
+
+    $effect(() => {
+        if (tabs.length === 0) {
+            return;
+        }
+
+        const activeExists = tabs.some((tab) => tab.id === activeTab && !tab.disabled);
+        if (!activeExists) {
+            const firstEnabledTab = tabs.find((tab) => !tab.disabled);
+            if (firstEnabledTab) {
+                activeTab = firstEnabledTab.id;
+            }
+        }
+    });
+
     function handleKeydown(event: KeyboardEvent) {
+        const enabledTabs = getEnabledTabs();
+        if (enabledTabs.length === 0) {
+            return;
+        }
+
+        const currentIndex = enabledTabs.findIndex((tab) => tab.id === activeTab);
+        const fallbackIndex = currentIndex === -1 ? 0 : currentIndex;
+
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-            const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+            event.preventDefault();
             const direction = event.key === "ArrowLeft" ? -1 : 1;
             const nextIndex =
-                (currentIndex + direction + tabs.length) % tabs.length;
-            selectTab(tabs[nextIndex].id);
+                (fallbackIndex + direction + enabledTabs.length) %
+                enabledTabs.length;
+            selectTab(enabledTabs[nextIndex].id);
+        } else if (event.key === "Home") {
+            event.preventDefault();
+            selectTab(enabledTabs[0].id);
+        } else if (event.key === "End") {
+            event.preventDefault();
+            selectTab(enabledTabs[enabledTabs.length - 1].id);
+        } else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (currentIndex === -1) {
+                selectTab(enabledTabs[0].id);
+            }
         }
     }
 </script>
@@ -45,6 +104,7 @@
             <button
                 type="button"
                 role="tab"
+                id={getTabId(tab.id)}
                 class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
                 tab.id
                     ? variant === 'pills'
@@ -54,13 +114,20 @@
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}
+                aria-controls={getPanelId(tab.id)}
+                tabindex={activeTab === tab.id ? 0 : -1}
             >
                 {tab.label}
             </button>
         {/each}
     </div>
 
-    <div class="mt-4">
+    <div
+        class="mt-4"
+        role="tabpanel"
+        id={getPanelId(activeTab)}
+        aria-labelledby={getTabId(activeTab)}
+    >
         {@render children?.({ activeTab })}
     </div>
 </div>

package/dist/molecules/index.d.ts

@@ -12,6 +12,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
 export { default as Section } from './Section.svelte';
-export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/molecules/index.js

@@ -12,6 +12,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
 export { default as Section } from './Section.svelte';
-export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

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

@@ -0,0 +1,6 @@
+export interface NavigationMenuContextValue {
+    activeItem: string | null;
+    setActiveItem: (item: string | null) => void;
+    isMobile: boolean;
+}
+export declare const NAVIGATION_MENU_CONTEXT_KEY: unique symbol;

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

@@ -0,0 +1 @@
+export const NAVIGATION_MENU_CONTEXT_KEY = Symbol("navigation-menu");

package/dist/organisms/Navigation.svelte

@@ -12,6 +12,7 @@
         variant?: "header" | "sidebar";
         items?: NavigationItem[];
         currentPath?: string;
+        preventNavigation?: boolean;
         onclick?: (event: Event) => void;
         className?: string;
     }
@@ -20,13 +21,16 @@
         variant = "header",
         items = [],
         currentPath = "",
+        preventNavigation = false,
         onclick,
         className = "",
         ...restProps
     }: Props & { children?: any } = $props();
 
-    function handleClick(item: NavigationItem, event: MouseEvent) {
-        event.preventDefault();
+    function handleClick(event: MouseEvent) {
+        if (preventNavigation) {
+            event.preventDefault();
+        }
         if (onclick) {
             onclick(event as any);
         }
@@ -88,8 +92,7 @@
             <a
                 href={item.href}
                 class={iconContainerClasses}
-                onclick={(e) => handleClick(item, e)}
-                role="button"
+                onclick={handleClick}
                 aria-current={isActive ? "page" : undefined}
             >
                 <div class={getStateLayerClasses()}>

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

@@ -9,6 +9,7 @@ interface Props {
     variant?: "header" | "sidebar";
     items?: NavigationItem[];
     currentPath?: string;
+    preventNavigation?: boolean;
     onclick?: (event: Event) => void;
     className?: string;
 }

package/dist/organisms/SidebarNavigation.svelte

@@ -0,0 +1,420 @@
+<script lang="ts">
+    import Badge from "../atoms/Badge.svelte";
+    import Input from "../atoms/Input.svelte";
+    import { Search, LogOut, Sun, Moon } from "@lucide/svelte";
+    import type { Component } from "svelte";
+
+    export interface SidebarNavigationItem {
+        id: string;
+        label: string;
+        href: string;
+        icon?: Component<{ size?: number; class?: string }>;
+        badgeText?: string | number;
+        badgeCount?: number;
+        group?: "primary" | "secondary";
+    }
+
+    interface Props {
+        mode?: "expanded" | "collapsed";
+        items?: SidebarNavigationItem[];
+        currentPath?: string;
+        ariaLabel?: string;
+        className?: string;
+        showProfile?: boolean;
+        profileName?: string;
+        profileEmail?: string;
+        profileInitials?: string;
+        showSearch?: boolean;
+        searchMode?: "input" | "button";
+        searchPlaceholder?: string;
+        searchValue?: string;
+        showLogout?: boolean;
+        logoutLabel?: string;
+        showThemeToggle?: boolean;
+        lightModeLabel?: string;
+        isLightMode?: boolean;
+        emptyStateTitle?: string;
+        emptyStateDescription?: string;
+        emptyStateActionLabel?: string;
+        onNavigate?: (item: SidebarNavigationItem, event: MouseEvent) => void;
+        onSearchClick?: () => void;
+        onLogout?: () => void;
+        onThemeToggle?: (nextIsLightMode: boolean) => void;
+        onEmptyStateAction?: () => void;
+    }
+
+    let {
+        mode = "expanded",
+        items = [],
+        currentPath = "",
+        ariaLabel = "Sidebar navigation",
+        className = "",
+        showProfile = true,
+        profileName = "Zabi",
+        profileEmail = "hello@zabi.dev",
+        profileInitials = "ZA",
+        showSearch = true,
+        searchMode = "input",
+        searchPlaceholder = "Search...",
+        searchValue = $bindable(""),
+        showLogout = true,
+        logoutLabel = "Logout",
+        showThemeToggle = true,
+        lightModeLabel = "Light mode",
+        isLightMode = $bindable(false),
+        emptyStateTitle = "Create your first navigation item",
+        emptyStateDescription = "Add your first sidebar item so users can start navigating your product.",
+        emptyStateActionLabel = "Add navigation item",
+        onNavigate,
+        onSearchClick,
+        onLogout,
+        onThemeToggle,
+        onEmptyStateAction,
+        ...restProps
+    }: Props = $props();
+
+    const isCollapsed = $derived(mode === "collapsed");
+    const normalizedSearchTerm = $derived(searchValue.trim().toLowerCase());
+    const primaryItems = $derived(
+        items.filter((item) => item.group !== "secondary"),
+    );
+    const secondaryItems = $derived(
+        items.filter((item) => item.group === "secondary"),
+    );
+    const filteredPrimaryItems = $derived(
+        searchMode === "input" && normalizedSearchTerm
+            ? primaryItems.filter((item) =>
+                  item.label.toLowerCase().includes(normalizedSearchTerm),
+              )
+            : primaryItems,
+    );
+    const filteredSecondaryItems = $derived(
+        searchMode === "input" && normalizedSearchTerm
+            ? secondaryItems.filter((item) =>
+                  item.label.toLowerCase().includes(normalizedSearchTerm),
+              )
+            : secondaryItems,
+    );
+    const hasFilteredItems = $derived(
+        filteredPrimaryItems.length + filteredSecondaryItems.length > 0,
+    );
+
+    const containerClasses = $derived.by(() => {
+        const widthClass = isCollapsed ? "w-[104px]" : "w-[266px]";
+        const surfaceClasses = "bg-background border-border text-headline";
+        const baseClasses =
+            "h-full min-h-[640px] border-r flex flex-col justify-between px-6 py-6";
+
+        return `${baseClasses} ${widthClass} ${surfaceClasses} ${className}`.trim();
+    });
+
+    const avatarClasses = $derived(
+        "size-14 rounded-2xl bg-action-primary text-action-primary flex items-center justify-center font-semibold text-base shrink-0",
+    );
+
+    const searchButtonClasses = $derived(
+        "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center justify-center px-0 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0",
+    );
+    const searchTriggerClasses = $derived.by(() => {
+        return isCollapsed
+            ? searchButtonClasses
+            : "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center gap-3 px-4 py-2.5 text-left focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+    });
+    const iconContainerClasses = $derived(
+        "flex size-6 shrink-0 items-center justify-center leading-none",
+    );
+    const shouldRenderSearchButton = $derived(
+        isCollapsed || searchMode === "button" || Boolean(onSearchClick),
+    );
+
+    function getTextToneClass(isMuted = false): string {
+        return isMuted ? "text-description" : "text-headline";
+    }
+
+    function getNavItemClasses(item: SidebarNavigationItem): string {
+        const isActive = currentPath === item.href;
+        const baseClasses =
+            "w-full rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+        const layoutClasses = isCollapsed
+            ? "flex min-h-11 items-center justify-center px-0 py-2.5"
+            : "flex min-h-11 items-center gap-3 px-4 py-2.5";
+
+        if (isActive) {
+            return `${baseClasses} ${layoutClasses} bg-action-primary-subtle text-headline`;
+        }
+
+        return `${baseClasses} ${layoutClasses} text-description hover:bg-base-50 hover:text-headline`;
+    }
+
+    function getControlButtonClasses(): string {
+        const baseClasses =
+            "w-full rounded-lg text-description hover:text-headline hover:bg-base-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+        const layoutClasses = isCollapsed
+            ? "flex min-h-11 items-center justify-center px-0 py-2.5"
+            : "flex min-h-11 items-center gap-3 px-4 py-2.5";
+
+        return `${baseClasses} ${layoutClasses}`;
+    }
+
+    const themeToggleContainerClasses = $derived(
+        isCollapsed
+            ? "flex w-full justify-center py-1"
+            : "flex w-full justify-start py-1",
+    );
+
+    function handleNavigate(item: SidebarNavigationItem, event: MouseEvent) {
+        if (onNavigate) {
+            onNavigate(item, event);
+        }
+    }
+
+    function handleSearchClick() {
+        if (onSearchClick) {
+            onSearchClick();
+        }
+    }
+
+    function handleLogout() {
+        if (onLogout) {
+            onLogout();
+        }
+    }
+
+    function handleThemeToggle() {
+        isLightMode = !isLightMode;
+        if (onThemeToggle) {
+            onThemeToggle(isLightMode);
+        }
+    }
+
+    function handleEmptyStateAction() {
+        if (onEmptyStateAction) {
+            onEmptyStateAction();
+        }
+    }
+
+    function getItemBadgeText(item: SidebarNavigationItem): string | null {
+        if (item.badgeText !== undefined) {
+            return String(item.badgeText);
+        }
+        if (item.badgeCount !== undefined) {
+            return String(item.badgeCount);
+        }
+        return null;
+    }
+</script>
+
+<nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
+    <div class="flex w-full flex-col gap-11">
+        {#if showProfile}
+            <div class="flex w-full items-center gap-3">
+                <div class={avatarClasses} aria-hidden="true">
+                    {profileInitials}
+                </div>
+                {#if !isCollapsed}
+                    <div class="min-w-0">
+                        <p
+                            class="truncate text-base font-bold {getTextToneClass()}"
+                        >
+                            {profileName}
+                        </p>
+                        <p class="truncate text-sm {getTextToneClass(true)}">
+                            {profileEmail}
+                        </p>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+
+        <div class="flex w-full flex-col gap-6">
+            {#if showSearch}
+                {#if shouldRenderSearchButton}
+                    <button
+                        type="button"
+                        class={searchTriggerClasses}
+                        onclick={handleSearchClick}
+                        aria-label={searchPlaceholder}
+                    >
+                        <span class="truncate text-base {getTextToneClass(true)}">
+                            {searchValue || searchPlaceholder}
+                        </span>
+                    </button>
+                {:else}
+                    <div class="relative w-full">
+                        <span
+                            class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 z-10"
+                            aria-hidden="true"
+                        >
+                            <Search size={20} class={getTextToneClass(true)} />
+                        </span>
+                        <Input
+                            type="search"
+                            bind:value={searchValue}
+                            placeholder={searchPlaceholder}
+                            aria-label={searchPlaceholder}
+                            class="w-full min-w-0 rounded-2xl pl-12"
+                        />
+                    </div>
+                {/if}
+            {/if}
+
+            {#if hasFilteredItems}
+                <ul
+                    class="flex w-full flex-col gap-2"
+                    aria-label="Primary navigation"
+                >
+                    {#each filteredPrimaryItems as item (item.id)}
+                        {@const Icon = item.icon}
+                        <li>
+                            <a
+                                href={item.href}
+                                class={getNavItemClasses(item)}
+                                onclick={(event) => handleNavigate(item, event)}
+                                aria-current={currentPath === item.href
+                                    ? "page"
+                                    : undefined}
+                                aria-label={isCollapsed
+                                    ? item.label
+                                    : undefined}
+                            >
+                                {#if Icon}
+                                    <span
+                                        class={iconContainerClasses}
+                                        aria-hidden="true"
+                                    >
+                                        <Icon size={20} />
+                                    </span>
+                                {/if}
+                                {#if !isCollapsed}
+                                    <span class="text-base leading-snug"
+                                        >{item.label}</span
+                                    >
+                                {/if}
+                                {#if !isCollapsed && getItemBadgeText(item) !== null}
+                                    <span class="ml-auto">
+                                        <Badge
+                                            variant="default"
+                                            size="sm"
+                                            text={getItemBadgeText(item) ?? ""}
+                                        />
+                                    </span>
+                                {/if}
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+
+                {#if filteredSecondaryItems.length > 0}
+                    <ul
+                        class="flex w-full flex-col gap-3"
+                        aria-label="Secondary navigation"
+                    >
+                        {#each filteredSecondaryItems as item (item.id)}
+                            {@const Icon = item.icon}
+                            <li>
+                                <a
+                                    href={item.href}
+                                    class={getNavItemClasses(item)}
+                                    onclick={(event) =>
+                                        handleNavigate(item, event)}
+                                    aria-current={currentPath === item.href
+                                        ? "page"
+                                        : undefined}
+                                    aria-label={isCollapsed
+                                        ? item.label
+                                        : undefined}
+                                >
+                                    {#if Icon}
+                                        <span
+                                            class={iconContainerClasses}
+                                            aria-hidden="true"
+                                        >
+                                            <Icon size={20} />
+                                        </span>
+                                    {/if}
+                                    {#if !isCollapsed}
+                                        <span class="text-base leading-snug"
+                                            >{item.label}</span
+                                        >
+                                    {/if}
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            {:else}
+                <div
+                    class="rounded-2xl border border-border border-dashed bg-base-50 px-4 py-5"
+                >
+                    <h3 class="text-base font-semibold {getTextToneClass()}">
+                        {normalizedSearchTerm
+                        && searchMode === "input"
+                            ? "No matching navigation items"
+                            : emptyStateTitle}
+                    </h3>
+                    <p class="mt-1 text-sm {getTextToneClass(true)}">
+                        {normalizedSearchTerm
+                        && searchMode === "input"
+                            ? `No results found for "${searchValue}". Try another keyword.`
+                            : emptyStateDescription}
+                    </p>
+                    {#if !(normalizedSearchTerm && searchMode === "input")}
+                        <button
+                            type="button"
+                            class="mt-4 inline-flex min-h-11 items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary hover:bg-action-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
+                            onclick={handleEmptyStateAction}
+                        >
+                            {emptyStateActionLabel}
+                        </button>
+                    {/if}
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    <div class="flex w-full flex-col gap-2">
+        {#if showLogout}
+            <button
+                type="button"
+                class={getControlButtonClasses()}
+                onclick={handleLogout}
+            >
+                <span class={iconContainerClasses} aria-hidden="true">
+                    <LogOut size={20} />
+                </span>
+                {#if !isCollapsed}
+                    <span class="text-base">{logoutLabel}</span>
+                {/if}
+            </button>
+        {/if}
+
+        {#if showThemeToggle}
+            <div class={themeToggleContainerClasses}>
+                <button
+                    type="button"
+                    class="inline-flex h-8 w-14 items-center rounded-2xl p-1 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0 {isLightMode
+                        ? 'bg-action-primary'
+                        : 'bg-base-200'}"
+                    onclick={handleThemeToggle}
+                    role="switch"
+                    aria-checked={isLightMode}
+                    aria-label={isLightMode
+                        ? "Switch to dark mode"
+                        : "Switch to light mode"}
+                >
+                    <span
+                        class="flex h-6 w-6 items-center justify-center rounded-xl leading-none shadow-sm transition-transform duration-150 {isLightMode
+                            ? 'translate-x-6 bg-base-900 text-action-primary'
+                            : 'translate-x-0 bg-base-900 text-base-50'}"
+                    >
+                        {#if isLightMode}
+                            <Sun size={14} />
+                        {:else}
+                            <Moon size={14} />
+                        {/if}
+                    </span>
+                </button>
+            </div>
+        {/if}
+    </div>
+</nav>

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

@@ -0,0 +1,44 @@
+import type { Component } from "svelte";
+export interface SidebarNavigationItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    badgeText?: string | number;
+    badgeCount?: number;
+    group?: "primary" | "secondary";
+}
+interface Props {
+    mode?: "expanded" | "collapsed";
+    items?: SidebarNavigationItem[];
+    currentPath?: string;
+    ariaLabel?: string;
+    className?: string;
+    showProfile?: boolean;
+    profileName?: string;
+    profileEmail?: string;
+    profileInitials?: string;
+    showSearch?: boolean;
+    searchMode?: "input" | "button";
+    searchPlaceholder?: string;
+    searchValue?: string;
+    showLogout?: boolean;
+    logoutLabel?: string;
+    showThemeToggle?: boolean;
+    lightModeLabel?: string;
+    isLightMode?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateActionLabel?: string;
+    onNavigate?: (item: SidebarNavigationItem, event: MouseEvent) => void;
+    onSearchClick?: () => void;
+    onLogout?: () => void;
+    onThemeToggle?: (nextIsLightMode: boolean) => void;
+    onEmptyStateAction?: () => void;
+}
+declare const SidebarNavigation: Component<Props, {}, "searchValue" | "isLightMode">;
+type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
+export default SidebarNavigation;