zabi-components 5.0.18 → 5.0.20

package/dist/molecules/NavigationMenu.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext, setContext } from "svelte";
+    import { onMount } from "svelte";
+    import NavigationMenuList from "./NavigationMenuList.svelte";
+    import NavigationMenuItem from "./NavigationMenuItem.svelte";
+    import NavigationMenuTrigger from "./NavigationMenuTrigger.svelte";
+    import NavigationMenuContent from "./NavigationMenuContent.svelte";
+    import NavigationMenuLink from "./NavigationMenuLink.svelte";
+
+    interface NavigationMenuContext {
+        activeItem: string | null;
+        setActiveItem: (item: string | null) => void;
+        isMobile: boolean;
+    }
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    export interface NavigationMenuItemData {
+        value: string;
+        label: string;
+        href?: string;
+        content?: NavigationMenuLinkData[];
+        children?: Snippet;
+    }
+
+    export interface NavigationMenuLinkData {
+        href: string;
+        label?: string;
+        description?: string;
+        children?: Snippet;
+        asChild?: boolean;
+    }
+
+    interface Props {
+        viewport?: boolean | "mobile";
+        className?: string;
+        items?: NavigationMenuItemData[];
+        children?: Snippet;
+        listClassName?: string;
+    }
+
+    let {
+        viewport = true,
+        className = "",
+        items = [],
+        children,
+        listClassName = "",
+        ...restProps
+    }: Props = $props();
+
+    let activeItem = $state<string | null>(null);
+    let isMobile = $state(false);
+    let containerElement = $state<HTMLElement | null>(null);
+
+    function setActiveItem(item: string | null) {
+        activeItem = item;
+    }
+
+    function checkMobile() {
+        if (viewport === "mobile") {
+            isMobile = true;
+        } else if (viewport === true) {
+            isMobile = window.innerWidth < 768;
+        } else {
+            isMobile = false;
+        }
+    }
+
+    onMount(() => {
+        checkMobile();
+        if (viewport !== false) {
+            const handleResize = () => checkMobile();
+            window.addEventListener("resize", handleResize);
+            return () => window.removeEventListener("resize", handleResize);
+        }
+    });
+
+    const context: NavigationMenuContext = {
+        get activeItem() {
+            return activeItem;
+        },
+        setActiveItem,
+        get isMobile() {
+            return isMobile;
+        },
+    };
+
+    setContext(NAVIGATION_MENU_CONTEXT, context);
+</script>
+
+<nav
+    bind:this={containerElement}
+    class="relative {className}"
+    aria-label="Main navigation"
+    {...restProps}
+>
+    {#if items.length > 0}
+        <NavigationMenuList className={listClassName}>
+            {#each items as item}
+                <NavigationMenuItem value={item.value}>
+                    {#if item.content && item.content.length > 0}
+                        <NavigationMenuTrigger value={item.value}>
+                            {item.label}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent value={item.value}>
+                            {#if item.children}
+                                {@render item.children()}
+                            {:else}
+                                <ul class="grid gap-2">
+                                    {#each item.content as link}
+                                        <li>
+                                            <NavigationMenuLink
+                                                href={link.href}
+                                                asChild={link.asChild}
+                                            >
+                                                {#if link.children}
+                                                    {@render link.children()}
+                                                {:else if link.label}
+                                                    <div
+                                                        class="text-sm font-medium leading-none"
+                                                    >
+                                                        {link.label}
+                                                    </div>
+                                                    {#if link.description}
+                                                        <p
+                                                            class="line-clamp-2 text-sm leading-snug text-description"
+                                                        >
+                                                            {link.description}
+                                                        </p>
+                                                    {/if}
+                                                {/if}
+                                            </NavigationMenuLink>
+                                        </li>
+                                    {/each}
+                                </ul>
+                            {/if}
+                        </NavigationMenuContent>
+                    {:else if item.href}
+                        <NavigationMenuLink href={item.href}>
+                            {item.label}
+                        </NavigationMenuLink>
+                    {:else if item.children}
+                        {@render item.children()}
+                    {/if}
+                </NavigationMenuItem>
+            {/each}
+        </NavigationMenuList>
+    {:else if children}
+        {@render children()}
+    {/if}
+</nav>
+
+<style>
+    :global([data-navigation-menu]) {
+        position: relative;
+    }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+export interface NavigationMenuLinkData {
+    href: string;
+    label?: string;
+    description?: string;
+    children?: Snippet;
+    asChild?: boolean;
+}
+export interface NavigationMenuItemData {
+    value: string;
+    label: string;
+    href?: string;
+    content?: NavigationMenuLinkData[];
+    children?: Snippet;
+}
+interface Props {
+    viewport?: boolean | "mobile";
+    className?: string;
+    items?: NavigationMenuItemData[];
+    children?: Snippet;
+    listClassName?: string;
+}
+declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/molecules/NavigationMenuContent.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext } from "svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    interface Props {
+        value?: string;
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        value = "",
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    let contentElement = $state<HTMLElement | null>(null);
+    let parentItem = $state<HTMLElement | null>(null);
+
+    const context = getContext<{
+        activeItem: string | null;
+        setActiveItem: (item: string | null) => void;
+        isMobile: boolean;
+    }>(NAVIGATION_MENU_CONTEXT);
+
+    const isActive = $derived(context?.activeItem === value);
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            context?.setActiveItem(null);
+            const trigger = parentItem?.querySelector('[data-navigation-menu-trigger]') as HTMLElement;
+            trigger?.focus();
+        }
+    }
+
+    function handleClickOutside(event: MouseEvent) {
+        if (
+            contentElement &&
+            !contentElement.contains(event.target as Node) &&
+            parentItem &&
+            !parentItem.contains(event.target as Node)
+        ) {
+            context?.setActiveItem(null);
+        }
+    }
+
+    onMount(() => {
+        if (contentElement) {
+            parentItem = contentElement.closest('[data-navigation-menu-item]') as HTMLElement;
+        }
+        if (isActive) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+    });
+
+    $effect(() => {
+        if (isActive) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    });
+</script>
+
+{#if isActive}
+    <div
+        bind:this={contentElement}
+        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
+        role="menu"
+        onkeydown={handleKeydown}
+        data-navigation-menu-content
+        tabindex="-1"
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: string;
+    className?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuContent: import("svelte").Component<Props, {}, "">;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;

package/dist/molecules/NavigationMenuItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext } from "svelte";
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    interface Props {
+        value?: string;
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        value = "",
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const context = getContext<{
+        activeItem: string | null;
+        setActiveItem: (item: string | null) => void;
+    }>(NAVIGATION_MENU_CONTEXT);
+
+    const isActive = $derived(context?.activeItem === value);
+</script>
+
+<li
+    class="relative {className}"
+    role="none"
+    data-navigation-menu-item
+    data-active={isActive}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: string;
+    className?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuItem: import("svelte").Component<Props, {}, "">;
+type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
+export default NavigationMenuItem;

package/dist/molecules/NavigationMenuLink.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext } from "svelte";
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    interface Props {
+        href?: string;
+        asChild?: boolean;
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        href = "#",
+        asChild = false,
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const context = getContext<{
+        setActiveItem: (item: string | null) => void;
+    }>(NAVIGATION_MENU_CONTEXT);
+
+    function handleClick() {
+        context?.setActiveItem(null);
+    }
+
+    const linkClasses =
+        "block px-4 py-2 text-sm text-headline hover:bg-base-100 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 no-underline {className}";
+</script>
+
+{#if asChild}
+    <div
+        class={linkClasses}
+        onclick={handleClick}
+        data-navigation-menu-link
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{:else}
+    <a
+        {href}
+        class={linkClasses}
+        onclick={handleClick}
+        data-navigation-menu-link
+        {...restProps}
+    >
+        {@render children?.()}
+    </a>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    href?: string;
+    asChild?: boolean;
+    className?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuLink: import("svelte").Component<Props, {}, "">;
+type NavigationMenuLink = ReturnType<typeof NavigationMenuLink>;
+export default NavigationMenuLink;

package/dist/molecules/NavigationMenuList.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext } from "svelte";
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    interface Props {
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const context = getContext<{
+        isMobile: boolean;
+    }>(NAVIGATION_MENU_CONTEXT);
+</script>
+
+<ul
+    class="flex flex-row items-center gap-1 list-none m-0 p-0 {className}"
+    role="menubar"
+    aria-orientation="horizontal"
+    data-navigation-menu-list
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    className?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuList: import("svelte").Component<Props, {}, "">;
+type NavigationMenuList = ReturnType<typeof NavigationMenuList>;
+export default NavigationMenuList;

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { getContext } from "svelte";
+
+    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+
+    interface Props {
+        value?: string;
+        className?: string;
+        children?: Snippet;
+    }
+
+    let {
+        value = "",
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    let triggerElement = $state<HTMLElement | null>(null);
+
+    const context = getContext<{
+        activeItem: string | null;
+        setActiveItem: (item: string | null) => void;
+        isMobile: boolean;
+    }>(NAVIGATION_MENU_CONTEXT);
+
+    const isActive = $derived(context?.activeItem === value);
+
+    function handleClick() {
+        if (context) {
+            if (isActive) {
+                context.setActiveItem(null);
+            } else {
+                context.setActiveItem(value);
+            }
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleClick();
+        } else if (event.key === "Escape" && isActive) {
+            event.preventDefault();
+            context?.setActiveItem(null);
+        } else if (event.key === "ArrowDown" && !isActive) {
+            event.preventDefault();
+            handleClick();
+        }
+    }
+</script>
+
+<button
+    bind:this={triggerElement}
+    type="button"
+    class="inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-headline bg-transparent hover:bg-base-100 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 {className}"
+    aria-expanded={isActive ? 'true' : 'false'}
+    aria-haspopup="true"
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    data-navigation-menu-trigger
+    data-active={isActive}
+    {...restProps}
+>
+    {@render children?.()}
+    <svg
+        class="ml-1 h-4 w-4 transition-transform {isActive ? 'rotate-180' : ''}"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+        />
+    </svg>
+</button>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    value?: string;
+    className?: string;
+    children?: Snippet;
+}
+declare const NavigationMenuTrigger: import("svelte").Component<Props, {}, "">;
+type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;
+export default NavigationMenuTrigger;