zabi-components 5.0.19 → 5.0.21

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

@@ -2,6 +2,13 @@ interface Props {
     isOpen?: boolean;
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
     ariaLabel?: string;
+    selectedValue?: string | number | null;
+    options?: Array<{
+        value: string | number;
+        label: string;
+        disabled?: boolean;
+    }>;
+    onOptionClick?: (value: string | number) => void;
 }
 type $$ComponentProps = Props & {
     children?: any;

package/dist/molecules/ImageUpload.svelte

@@ -57,10 +57,10 @@
             <img
                 src={value}
                 alt=""
-                class="w-full h-32 object-cover rounded-lg border-0"
+                class="w-full h-32 min-w-64 object-cover rounded-2xl border-0"
             />
             <div
-                class="absolute inset-0 bg-black/50 dark:bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
+                class="absolute inset-0 bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button
@@ -84,7 +84,7 @@
         </div>
     {:else}
         <div
-            class="border-2 border-dashed border-base-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
+            class="border-2 border-dashed border-input rounded-2xl min-w-64 p-6 text-center hover:border-brand-500 transition-colors {disabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
             onclick={triggerFileSelect}
@@ -96,7 +96,7 @@
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-base-100 rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-action-secondary rounded-lg flex items-center justify-center"
                 >
                     <Image size={24} class="text-description" />
                 </div>

package/dist/molecules/Modal.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-    import { onMount } from "svelte";
     import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../routes/lib/focus-utils.js";
+    import Card from "../atoms/Card.svelte";
+    import CardHeader from "../atoms/CardHeader.svelte";
+    import CardContent from "../atoms/CardContent.svelte";
+    import CardFooter from "../atoms/CardFooter.svelte";
 
     type Size = "sm" | "md" | "lg";
 
     interface Props {
         isOpen?: boolean;
         title?: string;
+        description?: string;
         size?: Size;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
@@ -15,6 +19,7 @@
     let {
         isOpen = false,
         title = "",
+        description = "",
         size = "md",
         onclick,
         onkeydown,
@@ -88,38 +93,49 @@
         aria-labelledby={title ? "modal-title" : undefined}
         tabindex="-1"
     >
-        <div
+        <Card
             bind:this={modalContainer}
-            class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col"
+            variant="default"
+            fullWidth={false}
+            class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col p-0"
         >
-            {#if title}
-                <div class="flex items-center justify-between px-6 pt-6 pb-4">
-                    <h2
-                        id="modal-title"
-                        class="text-2xl font-normal leading-8 text-headline tracking-normal"
-                    >
-                        {title}
-                    </h2>
-                    <button
-                        type="button"
-                        onclick={closeModal}
-                        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-100"
-                        aria-label="Close"
-                    >
-                        ×
-                    </button>
-                </div>
+            {#if title || description}
+                <CardHeader
+                    {description}
+                    className="px-6 pt-6 pb-4"
+                >
+                    {#if title}
+                        <div class="flex items-center justify-between">
+                            <h2
+                                id="modal-title"
+                                class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                            >
+                                {title}
+                            </h2>
+                            <button
+                                type="button"
+                                onclick={closeModal}
+                                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-100"
+                                aria-label="Close"
+                            >
+                                ×
+                            </button>
+                        </div>
+                    {/if}
+                </CardHeader>
             {/if}
 
-            <div class="px-6 pb-6 flex-1">
-                {@render children?.()}
-            </div>
+            {#if children}
+                <CardContent className="flex-1">
+                    {@render children?.()}
+                </CardContent>
+            {/if}
 
             {#if footer}
-                <div class="flex justify-end gap-3 px-6 pb-6 pt-4">
+                <CardFooter className="flex justify-end gap-3 pt-4">
                     {@render footer?.()}
-                </div>
+                </CardFooter>
             {/if}
-        </div>
+        </Card>
     </div>
 {/if}

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

@@ -2,6 +2,7 @@ type Size = "sm" | "md" | "lg";
 interface Props {
     isOpen?: boolean;
     title?: string;
+    description?: string;
     size?: Size;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;

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;