zabi-components 5.0.21 → 6.0.0

package/dist/atoms/Select.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
     import Button from "./Button.svelte";
+    import Input from "./Input.svelte";
     import {
         ChevronDown,
         CheckCircle,
         AlertTriangle,
         AlertCircle,
     } from "@lucide/svelte";
-
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         value?: string | number | undefined;
@@ -33,30 +27,49 @@
         menuWidth?: string;
         /** Message shown when no options match the search. */
         noResultsText?: string;
+        /** Shows a loading state while options are being fetched. */
+        isLoading?: boolean;
+        /** Loading text shown in trigger and dropdown body. */
+        loadingText?: string;
+        /** Empty state title shown when there are no available options. */
+        emptyStateTitle?: string;
+        /** Empty state description shown when there are no available options. */
+        emptyStateDescription?: string;
+        /** Optional empty state action label. */
+        emptyStateActionLabel?: string;
         placeholder?: string;
         label?: string;
+        required?: boolean;
         disabled?: boolean;
         size?: "sm" | "md" | "lg";
         variant?: "default" | "success" | "warning" | "error";
         message?: string;
         onchange?: (event: Event) => void;
+        onEmptyStateAction?: () => void;
     }
 
     let {
-        value = undefined,
+        value = $bindable(undefined),
         options = [],
         searchable = true,
         searchPlaceholder = "Search options",
         maxMenuHeight = "60vh",
         menuWidth = "100%",
         noResultsText = "No results found",
+        isLoading = false,
+        loadingText = "Loading options...",
+        emptyStateTitle = "No options available",
+        emptyStateDescription = "Add an option to start making selections.",
+        emptyStateActionLabel = "",
         placeholder = "Select an option",
         label = "",
+        required = false,
         disabled = false,
         size = "md",
         variant = "default",
         message = "",
         onchange,
+        onEmptyStateAction,
         ...restProps
     }: Props = $props();
 
@@ -93,13 +106,13 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                : "border-input-border focus:ring-2 focus:ring-brand-500";
     });
 
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
+            "flex w-full cursor-pointer items-center justify-between rounded-lg border bg-input text-body transition-all duration-200 hover:bg-input-hover focus:bg-input-focus focus:outline-none focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-input-disabled disabled:opacity-50";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
@@ -170,7 +183,7 @@
     });
 
     function handleOptionClick(optionValue: string | number) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         value = optionValue;
         isOpen = false;
 
@@ -185,7 +198,7 @@
     }
 
     function handleTriggerClick(event: MouseEvent) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         event.stopPropagation();
         isOpen = !isOpen;
     }
@@ -238,14 +251,20 @@
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
                 <span
-                    class="text-left flex-1 truncate {isEmpty()
+                    class="text-left flex-1 truncate {isLoading
+                        ? 'text-description'
+                        : isEmpty()
                         ? 'text-description'
                         : 'text-body'}"
                 >
-                    {isEmpty()
+                    {#if isLoading}
+                        {loadingText}
+                    {:else}
+                        {isEmpty()
                         ? placeholder
                         : options.find((opt) => opt.value === value)?.label ||
                           placeholder}
+                    {/if}
                 </span>
                 <ChevronDown
                     size={20}
@@ -257,11 +276,12 @@
         {/snippet}
         {#snippet children()}
             <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
-                {#if searchable}
+                {#if searchable && !isLoading}
                     <div class="px-1 pb-2">
-                        <input
+                        <Input
                             type="text"
-                            class="w-full rounded-md bg-input hover:bg-input-hover focus:bg-input-focus text-body placeholder:text-description px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            size="sm"
+                            class="min-w-0"
                             placeholder={searchPlaceholder}
                             bind:value={searchQuery}
                             aria-label={searchPlaceholder}
@@ -273,7 +293,13 @@
                     class="overflow-y-auto px-1"
                     style:max-height={maxMenuHeight}
                 >
-                    {#if filteredOptions().length > 0}
+                    {#if isLoading}
+                        <div class="space-y-2 px-2 py-2" role="status" aria-live="polite">
+                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
+                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
+                            <p class="text-xs text-description">{loadingText}</p>
+                        </div>
+                    {:else if filteredOptions().length > 0}
                         {#each filteredOptions() as option (option.value)}
                             {@const buttonRestProps = {
                                 "data-value": String(option.value),
@@ -297,13 +323,32 @@
                         <div class="px-3 py-2 text-sm text-description">
                             {noResultsText}
                         </div>
+                    {:else}
+                        <div class="rounded-md border border-border bg-base-50 px-3 py-3 text-sm">
+                            <p class="font-medium text-headline">{emptyStateTitle}</p>
+                            <p class="mt-1 text-description">{emptyStateDescription}</p>
+                            {#if emptyStateActionLabel && onEmptyStateAction}
+                                <button
+                                    type="button"
+                                    class="mt-3 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
+                                    onclick={onEmptyStateAction}
+                                >
+                                    {emptyStateActionLabel}
+                                </button>
+                            {/if}
+                        </div>
                     {/if}
                 </div>
             </div>
         {/snippet}
     </Dropdown>
     {#if message && variant !== "default"}
-        <p id={`${selectId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${selectId}-message`}
+            class={messageClasses()}
+            role={variant === "error" ? "alert" : "status"}
+            aria-live={variant === "error" ? "assertive" : "polite"}
+        >
             {#if getIcon()}
                 {@const Icon = getIcon()}
                 <Icon size={14} class="shrink-0" />

package/dist/atoms/Select.svelte.d.ts

@@ -15,14 +15,26 @@ interface Props {
     menuWidth?: string;
     /** Message shown when no options match the search. */
     noResultsText?: string;
+    /** Shows a loading state while options are being fetched. */
+    isLoading?: boolean;
+    /** Loading text shown in trigger and dropdown body. */
+    loadingText?: string;
+    /** Empty state title shown when there are no available options. */
+    emptyStateTitle?: string;
+    /** Empty state description shown when there are no available options. */
+    emptyStateDescription?: string;
+    /** Optional empty state action label. */
+    emptyStateActionLabel?: string;
     placeholder?: string;
     label?: string;
+    required?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "success" | "warning" | "error";
     message?: string;
     onchange?: (event: Event) => void;
+    onEmptyStateAction?: () => void;
 }
-declare const Select: import("svelte").Component<Props, {}, "">;
+declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/atoms/Textarea.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
     import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
-
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         value?: string;
         name?: string;
         label?: string;
         placeholder?: string;
+        required?: boolean;
         disabled?: boolean;
         rows?: number;
         size?: SizeVariant;
@@ -28,6 +22,7 @@
         name = "",
         label = "",
         placeholder = "",
+        required = false,
         disabled = false,
         rows = 4,
         variant = "default",
@@ -45,12 +40,12 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                : "border-input-border focus:ring-2 focus:ring-brand-500";
     });
 
     const textareaClasses = $derived(() => {
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
+            "w-full border bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
 
         return `${baseClasses} ${variantClass()}`.trim();
     });
@@ -96,16 +91,23 @@
         {name}
         {value}
         {placeholder}
+        {required}
         {disabled}
         {rows}
         class={textareaClasses()}
         oninput={handleInput}
         aria-invalid={variant === "error" ? "true" : undefined}
+        aria-required={required ? "true" : undefined}
         aria-describedby={message ? `${textareaId}-message` : undefined}
         {...restProps}
     ></textarea>
     {#if message && variant !== "default"}
-        <p id={`${textareaId}-message`} class={messageClasses()} role="alert">
+        <p
+            id={`${textareaId}-message`}
+            class={messageClasses()}
+            role={variant === "error" ? "alert" : "status"}
+            aria-live={variant === "error" ? "assertive" : "polite"}
+        >
             {#if getIcon()}
                 {@const Icon = getIcon()}
                 <Icon size={14} class="shrink-0" />

package/dist/atoms/Textarea.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     name?: string;
     label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     rows?: number;
     size?: SizeVariant;

package/dist/atoms/Toast.svelte

@@ -45,7 +45,7 @@
             {#if closable}
                 <button
                     type="button"
-                    class="ml-3 text-base-400 hover:text-base-600"
+                    class="ml-3 cursor-pointer text-base-400 hover:text-base-600"
                     onclick={closeToast}
                     aria-label="Close notification"
                 >

package/dist/atoms/Toggle.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-    function generateId(prefix: string = "id"): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-        } else {
-            return `${prefix}-ssr-${Date.now()}`;
-        }
-    }
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         checked?: boolean;

package/dist/atoms/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         content?: string;
@@ -17,8 +17,8 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
-    let triggerId = `tooltip-trigger-${Math.random().toString(36).substr(2, 9)}`;
-    let tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    const triggerId = generateId("tooltip-trigger");
+    const tooltipId = generateId("tooltip");
     let isVisible = $state(false);
     let triggerElement: HTMLElement | null = $state(null);
 
@@ -56,17 +56,10 @@
     function handleMouseLeave() {
         isVisible = false;
     }
-
-    onMount(() => {
-        if (typeof window !== "undefined") {
-            window.addEventListener("keydown", handleKeydown);
-            return () => {
-                window.removeEventListener("keydown", handleKeydown);
-            };
-        }
-    });
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 <div
     class="tooltip-container relative inline-block"
     data-placement={placement}
@@ -249,8 +242,8 @@
 
     @media (prefers-contrast: high) {
         :root {
-            --tooltip-bg: #000000;
-            --tooltip-color: #ffffff;
+            --tooltip-bg: CanvasText;
+            --tooltip-color: Canvas;
             --tooltip-padding: 0.75rem 1rem;
         }
     }
@@ -276,7 +269,7 @@
     }
 
     .tooltip-container:focus-visible {
-        outline: 2px solid var(--color-focus, #8fa8ff);
+        outline: 2px solid var(--color-focus);
         outline-offset: 2px;
         border-radius: var(--tooltip-radius);
     }

package/dist/atoms/index.d.ts

@@ -10,5 +10,7 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';

package/dist/atoms/index.js

@@ -10,5 +10,7 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';

package/dist/components/atoms/index.d.ts

@@ -10,6 +10,8 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -18,7 +20,8 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEtE,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAMhD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE1E,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAA4B,CAAC;AAE9E,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}

package/dist/components/molecules/index.d.ts

@@ -12,7 +12,6 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,7 @@
+export interface NavigationMenuContextValue {
+    activeItem: string | null;
+    setActiveItem: (item: string | null) => void;
+    isMobile: boolean;
+}
+export declare const NAVIGATION_MENU_CONTEXT_KEY: unique symbol;
+//# sourceMappingURL=navigation-menu-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-context.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/navigation-menu-context.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,0BAA0B;IACvC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,2BAA2B,eAA4B,CAAC"}

package/dist/components/organisms/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
+export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -18,7 +20,8 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/index.js

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -18,15 +20,9 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
-export const createId = (prefix = 'id') => {
-    if (typeof window !== 'undefined') {
-        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    else {
-        return `${prefix}-ssr-${Date.now()}`;
-    }
-};
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
+export const createId = (prefix = 'id') => generateId(prefix);
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
 export const getFormData = (form) => {
     const formData = new FormData(form);

package/dist/lib/showcase/components-catalog.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentMetadata } from "../../types/page.types";
+export declare const componentsCatalog: Record<string, ComponentMetadata[]>;
+//# sourceMappingURL=components-catalog.d.ts.map

package/dist/lib/showcase/components-catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-catalog.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/components-catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAq1CjE,CAAC"}

package/dist/lib/showcase/components-showcase-constants.d.ts

@@ -0,0 +1,63 @@
+export declare const categories: {
+    id: string;
+    label: string;
+    description: string;
+}[];
+export declare const sampleCode = "function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet('World'));";
+export declare const selectOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const docsListItems: ({
+    id: string;
+    label: string;
+    description: string;
+    href: string;
+    disabled?: undefined;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    href?: undefined;
+    disabled?: undefined;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    href: string;
+    disabled: boolean;
+})[];
+export declare const sidebarNavItems: ({
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    badgeCount?: undefined;
+    group?: undefined;
+} | {
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    badgeCount: number;
+    group?: undefined;
+} | {
+    id: string;
+    label: string;
+    href: string;
+    icon: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+    group: "secondary";
+    badgeCount?: undefined;
+})[];
+export declare const sidebarProjectItems: ({
+    id: string;
+    label: string;
+    description: string;
+    badgeText: string;
+} | {
+    id: string;
+    label: string;
+    description: string;
+    badgeText?: undefined;
+})[];
+//# sourceMappingURL=components-showcase-constants.d.ts.map

package/dist/lib/showcase/components-showcase-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-showcase-constants.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/components-showcase-constants.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU;;;;GAiBtB,CAAC;AAEF,eAAO,MAAM,UAAU,2FAIM,CAAC;AAE9B,eAAO,MAAM,aAAa;;;GAGvB,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;IAyBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;IAmB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;IAuB/B,CAAC"}

package/dist/lib/showcase/docs-sidebar-helpers.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from "svelte";
+type SidebarNavIcon = Component<{
+    size?: number;
+    class?: string;
+}>;
+/**
+ * Icon for a documentation sidebar category row.
+ */
+export declare function getDocsCategoryIcon(categoryId: string): SidebarNavIcon;
+/**
+ * Icon for a documentation sidebar component row.
+ */
+export declare function getDocsComponentIcon(componentName: string, componentCategory: string): SidebarNavIcon;
+export {};
+//# sourceMappingURL=docs-sidebar-helpers.d.ts.map

package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-sidebar-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/docs-sidebar-helpers.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,KAAK,cAAc,GAAG,SAAS,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEnE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAKtE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAChC,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,MAAM,GAC1B,cAAc,CAgBhB"}