zabi-components 5.0.19 → 5.0.21

package/dist/molecules/Section.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { SizeVariant } from "../../types/variants.js";
+    import Heading from "../atoms/Heading.svelte";
+
+    interface Props {
+        /** Section title */
+        title?: string;
+        /** Section description/subtitle */
+        description?: string;
+        /** Heading level for title (1-6) */
+        headingLevel?: number;
+        /** Section size variant */
+        size?: SizeVariant;
+        /** Maximum width of the section container */
+        maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
+        /** Background variant */
+        background?: "default" | "muted" | "accent" | "transparent";
+        /** Padding variant */
+        padding?: "none" | "sm" | "md" | "lg" | "xl";
+        /** Whether to center the content */
+        centered?: boolean;
+        /** Additional CSS classes */
+        className?: string;
+        /** Section content */
+        children?: Snippet;
+    }
+
+    let {
+        title = "",
+        description = "",
+        headingLevel = 2,
+        size = "md",
+        maxWidth = "xl",
+        background = "default",
+        padding = "lg",
+        centered = false,
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClasses = $derived(() => {
+        switch (size) {
+            case "sm":
+                return "text-sm";
+            case "lg":
+                return "text-lg";
+            default:
+                return "text-base";
+        }
+    });
+
+    const maxWidthClasses = $derived(() => {
+        switch (maxWidth) {
+            case "sm":
+                return "max-w-screen-sm";
+            case "md":
+                return "max-w-screen-md";
+            case "lg":
+                return "max-w-screen-lg";
+            case "xl":
+                return "max-w-screen-xl";
+            case "2xl":
+                return "max-w-screen-2xl";
+            case "full":
+                return "max-w-full";
+            case "none":
+                return "";
+            default:
+                return "max-w-screen-xl";
+        }
+    });
+
+    const backgroundClasses = $derived(() => {
+        switch (background) {
+            case "muted":
+                return "bg-base-50";
+            case "accent":
+                return "bg-brand-50 dark:bg-brand-950";
+            case "transparent":
+                return "bg-transparent";
+            default:
+                return "bg-background";
+        }
+    });
+
+    const paddingClasses = $derived(() => {
+        switch (padding) {
+            case "none":
+                return "";
+            case "sm":
+                return "py-8 sm:py-12";
+            case "md":
+                return "py-12 sm:py-16";
+            case "lg":
+                return "py-16 sm:py-24";
+            case "xl":
+                return "py-24 sm:py-32";
+            default:
+                return "py-16 sm:py-24";
+        }
+    });
+
+    const containerClasses = $derived(() => {
+        const base = "w-full";
+        const maxWidthClass = maxWidthClasses();
+        const centeredClass = centered ? "mx-auto" : "";
+        return `${base} ${maxWidthClass} ${centeredClass}`.trim();
+    });
+
+    const contentClasses = $derived(() => {
+        const base = "px-4 sm:px-6 lg:px-8";
+        const centeredClass = centered ? "text-center" : "";
+        return `${base} ${centeredClass}`.trim();
+    });
+</script>
+
+<section
+    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    {...restProps}
+>
+    <div class={containerClasses()}>
+        <div class={contentClasses()}>
+            {#if title}
+                <div class="mb-6 {centered ? 'mx-auto' : ''}">
+                    <Heading level={headingLevel} text={title} />
+                    {#if description}
+                        <p
+                            class="mt-4 {sizeClasses()} text-description {centered
+                                ? 'mx-auto max-w-2xl'
+                                : ''}"
+                        >
+                            {description}
+                        </p>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if children}
+                <div class="section-content {centered ? 'mx-auto' : ''}">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+    </div>
+</section>
+
+<style>
+    .section {
+        position: relative;
+        width: 100%;
+    }
+
+    .section-content {
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Section title */
+    title?: string;
+    /** Section description/subtitle */
+    description?: string;
+    /** Heading level for title (1-6) */
+    headingLevel?: number;
+    /** Section size variant */
+    size?: SizeVariant;
+    /** Maximum width of the section container */
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
+    /** Background variant */
+    background?: "default" | "muted" | "accent" | "transparent";
+    /** Padding variant */
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Whether to center the content */
+    centered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Section content */
+    children?: Snippet;
+}
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/molecules/Sidebar.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    interface SidebarItem {
+        id: string;
+        label: string;
+        description?: string;
+        icon?: any;
+        onClick?: () => void;
+    }
+
+    interface SidebarSection {
+        title?: string;
+        items: SidebarItem[];
+    }
+
+    interface Props {
+        title?: string;
+        sections?: SidebarSection[];
+        items?: SidebarItem[];
+        selectedItemId?: string;
+        selectedSectionId?: string;
+        onItemClick?: (item: SidebarItem) => void;
+        onSectionClick?: (sectionId: string) => void;
+        className?: string;
+        header?: Snippet;
+        footer?: Snippet;
+        isOpen?: boolean;
+        onClose?: () => void;
+        mobileResponsive?: boolean;
+    }
+
+    let {
+        title = "",
+        sections = [],
+        items = [],
+        selectedItemId = "",
+        selectedSectionId = "",
+        onItemClick,
+        onSectionClick,
+        className = "",
+        header,
+        footer,
+        isOpen = true,
+        onClose,
+        mobileResponsive = true,
+        ...restProps
+    }: Props = $props();
+
+    let isMobile = $state(false);
+    let sidebarElement = $state<HTMLElement | null>(null);
+
+    function checkMobile() {
+        if (mobileResponsive) {
+            isMobile = window.innerWidth < 768;
+        } else {
+            isMobile = false;
+        }
+    }
+
+    function handleItemClick(item: SidebarItem) {
+        if (item.onClick) {
+            item.onClick();
+        }
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        // Close sidebar on mobile when item is clicked
+        if (isMobile && onClose) {
+            onClose();
+        }
+    }
+
+    function handleSectionClick(sectionId: string) {
+        if (onSectionClick) {
+            onSectionClick(sectionId);
+        }
+    }
+
+    function handleBackdropClick(event: MouseEvent) {
+        if (event.target === event.currentTarget && onClose) {
+            onClose();
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && isOpen && isMobile && onClose) {
+            onClose();
+        }
+    }
+
+    onMount(() => {
+        checkMobile();
+        if (mobileResponsive) {
+            window.addEventListener("resize", checkMobile);
+            return () => window.removeEventListener("resize", checkMobile);
+        }
+    });
+
+    const hasSections = $derived(sections.length > 0);
+    const hasItems = $derived(items.length > 0);
+</script>
+
+{#if isMobile && mobileResponsive}
+    <!-- Mobile: Overlay and Drawer -->
+    {#if isOpen}
+        <div
+            class="fixed inset-0 bg-overlay z-modal md:hidden"
+            onclick={handleBackdropClick}
+            onkeydown={handleKeydown}
+            role="dialog"
+            aria-modal="true"
+            aria-label="Sidebar navigation"
+            tabindex="-1"
+        >
+            <aside
+                bind:this={sidebarElement}
+                class="fixed left-0 top-0 bottom-0 w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto transform transition-transform duration-300 ease-in-out {isOpen ? 'translate-x-0' : '-translate-x-full'} {className}"
+                role="complementary"
+                aria-label="Sidebar navigation"
+                onclick={(e) => e.stopPropagation()}
+                {...restProps}
+            >
+                <div class="flex items-center justify-between mb-4 md:hidden">
+                    {#if title}
+                        <h2 class="text-lg font-semibold text-headline">{title}</h2>
+                    {/if}
+                    {#if onClose}
+                        <button
+                            type="button"
+                            onclick={onClose}
+                            class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-50"
+                            aria-label="Close sidebar"
+                        >
+                            ×
+                        </button>
+                    {/if}
+                </div>
+
+                {#if header}
+                    <div class="mb-6">
+                        {@render header()}
+                    </div>
+                {:else if title && !isMobile}
+                    <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
+                {/if}
+
+                {#if hasSections}
+                    {#each sections as section}
+                        {#if section.title}
+                            <div class="mb-4">
+                                <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
+                                    {section.title}
+                                </h3>
+                            </div>
+                        {/if}
+
+                        <nav class="space-y-2 mb-8">
+                            {#each section.items as item}
+                                <button
+                                    type="button"
+                                    onclick={() => handleItemClick(item)}
+                                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                                    item.id
+                                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                                    aria-current={selectedItemId === item.id ? "page" : undefined}
+                                >
+                                    <div class="flex items-center gap-2">
+                                        {#if item.icon}
+                                            <div class="shrink-0">
+                                                <svelte:component this={item.icon} class="h-4 w-4" />
+                                            </div>
+                                        {/if}
+                                        <div class="flex-1">
+                                            <div class="font-medium">{item.label}</div>
+                                            {#if item.description}
+                                                <div class="text-xs text-description">
+                                                    {item.description}
+                                                </div>
+                                            {/if}
+                                        </div>
+                                    </div>
+                                </button>
+                            {/each}
+                        </nav>
+                    {/each}
+                {:else if hasItems}
+                    <nav class="space-y-1">
+                        {#each items as item}
+                            <button
+                                type="button"
+                                onclick={() => handleItemClick(item)}
+                                class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                                item.id
+                                    ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                                    : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                                aria-current={selectedItemId === item.id ? "page" : undefined}
+                            >
+                                <div class="flex items-center gap-2">
+                                    {#if item.icon}
+                                        <div class="shrink-0">
+                                            <svelte:component this={item.icon} class="h-4 w-4" />
+                                        </div>
+                                    {/if}
+                                    <div class="flex-1">
+                                        <div class="font-medium">{item.label}</div>
+                                        {#if item.description}
+                                            <div class="text-xs text-description">
+                                                {item.description}
+                                            </div>
+                                        {/if}
+                                    </div>
+                                </div>
+                            </button>
+                        {/each}
+                    </nav>
+                {/if}
+
+                {#if footer}
+                    <div class="mt-auto pt-6 border-t border-border">
+                        {@render footer()}
+                    </div>
+                {/if}
+            </aside>
+        </div>
+    {/if}
+{:else}
+    <!-- Desktop: Always visible sidebar -->
+    <aside
+        bind:this={sidebarElement}
+        class="w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto {className}"
+        role="complementary"
+        aria-label="Sidebar navigation"
+        {...restProps}
+    >
+    {#if header}
+        <div class="mb-6">
+            {@render header()}
+        </div>
+    {:else if title}
+        <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
+    {/if}
+
+    {#if hasSections}
+        {#each sections as section}
+            {#if section.title}
+                <div class="mb-4">
+                    <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
+                        {section.title}
+                    </h3>
+                </div>
+            {/if}
+
+            <nav class="space-y-2 mb-8">
+                {#each section.items as item}
+                    <button
+                        type="button"
+                        onclick={() => handleItemClick(item)}
+                        class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                        item.id
+                            ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                            : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                        aria-current={selectedItemId === item.id ? "page" : undefined}
+                    >
+                        <div class="flex items-center gap-2">
+                            {#if item.icon}
+                                <div class="shrink-0">
+                                    <svelte:component this={item.icon} class="h-4 w-4" />
+                                </div>
+                            {/if}
+                            <div class="flex-1">
+                                <div class="font-medium">{item.label}</div>
+                                {#if item.description}
+                                    <div class="text-xs text-description">
+                                        {item.description}
+                                    </div>
+                                {/if}
+                            </div>
+                        </div>
+                    </button>
+                {/each}
+            </nav>
+        {/each}
+    {:else if hasItems}
+        <nav class="space-y-1">
+            {#each items as item}
+                <button
+                    type="button"
+                    onclick={() => handleItemClick(item)}
+                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                    item.id
+                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                    aria-current={selectedItemId === item.id ? "page" : undefined}
+                >
+                    <div class="flex items-center gap-2">
+                        {#if item.icon}
+                            <div class="shrink-0">
+                                <svelte:component this={item.icon} class="h-4 w-4" />
+                            </div>
+                        {/if}
+                        <div class="flex-1">
+                            <div class="font-medium">{item.label}</div>
+                            {#if item.description}
+                                <div class="text-xs text-description">
+                                    {item.description}
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </button>
+            {/each}
+        </nav>
+    {/if}
+
+        {#if footer}
+            <div class="mt-auto pt-6 border-t border-border">
+                {@render footer()}
+            </div>
+        {/if}
+    </aside>
+{/if}

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

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+interface SidebarItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: any;
+    onClick?: () => void;
+}
+interface SidebarSection {
+    title?: string;
+    items: SidebarItem[];
+}
+interface Props {
+    title?: string;
+    sections?: SidebarSection[];
+    items?: SidebarItem[];
+    selectedItemId?: string;
+    selectedSectionId?: string;
+    onItemClick?: (item: SidebarItem) => void;
+    onSectionClick?: (sectionId: string) => void;
+    className?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    isOpen?: boolean;
+    onClose?: () => void;
+    mobileResponsive?: boolean;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/molecules/SlideUp.svelte

@@ -39,7 +39,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-black/50 dark:bg-black/70 z-modal"
+        class="fixed inset-0 bg-overlay z-modal"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -48,7 +48,7 @@
         tabindex="-1"
     >
         <div
-            class="fixed bottom-0 left-0 right-0 bg-base-50 rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
+            class="fixed bottom-0 left-0 right-0 bg-card rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">

package/dist/molecules/index.d.ts

@@ -5,5 +5,13 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+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 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

@@ -5,5 +5,13 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+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 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/organisms/Navigation.svelte

@@ -35,11 +35,11 @@
     const ulClasses = $derived(() => {
         return variant === "sidebar"
             ? "flex flex-col gap-1"
-            : "flex items-center justify-between gap-1";
+            : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
     });
 
     function getNavItemClasses(itemHref: string): string {
-        const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer";
+        const baseClasses = "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";
 
         return baseClasses;
     }

package/dist/zabi-components-colors.css

@@ -194,8 +194,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);

package/dist/zabi-components-theme-only.css

@@ -186,8 +186,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);

package/dist/zabi-components-theme.css

@@ -188,8 +188,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);