zabi-components 5.0.21 → 5.0.22

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

@@ -0,0 +1,35 @@
+import type { Component } from "svelte";
+export interface ListItemData {
+    /** Unique identifier for stable rendering and active-state tracking. */
+    id: string;
+    /** Primary item label. */
+    label: string;
+    /** Optional secondary text shown under the label. */
+    description?: string;
+    /** Optional URL; when set, the item renders as an anchor. */
+    href?: string;
+    /** Optional leading icon rendered before text. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** Link target, only used when href is provided. */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    /** Link rel attribute, only used when href is provided. */
+    rel?: string;
+    /** Disabled state for the item. */
+    disabled?: boolean;
+}
+interface Props {
+    /** Item data to render. */
+    item: ListItemData;
+    /** Active-state styling flag. */
+    selected?: boolean;
+    /** Whether to show the right-arrow icon. */
+    showArrow?: boolean;
+    /** Item click callback. */
+    onclick?: (item: ListItemData, event: MouseEvent) => void;
+}
+declare const ListItem: Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/atoms/Progress.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { generateId } from "../../routes/lib/ssr-safe.js";
+
     interface Props {
         value?: number;
         max?: number;
@@ -14,11 +16,7 @@
         ...restProps
     }: Props = $props();
 
-    let progressId = $state(
-        typeof window !== "undefined"
-            ? `progress-${Math.random().toString(36).substr(2, 9)}`
-            : `progress-ssr-${Date.now()}`,
-    );
+    const progressId = generateId("progress");
 
     let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
 

package/dist/atoms/Select.svelte

@@ -7,14 +7,7 @@
         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 +26,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();
 
@@ -170,7 +182,7 @@
     });
 
     function handleOptionClick(optionValue: string | number) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         value = optionValue;
         isOpen = false;
 
@@ -185,7 +197,7 @@
     }
 
     function handleTriggerClick(event: MouseEvent) {
-        if (disabled) return;
+        if (disabled || isLoading) return;
         event.stopPropagation();
         isOpen = !isOpen;
     }
@@ -238,14 +250,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,7 +275,7 @@
         {/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
                             type="text"
@@ -273,7 +291,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 +321,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 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",
@@ -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/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';
@@ -19,6 +21,8 @@ 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 SidebarProjectPanel } from './organisms/SidebarProjectPanel.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":"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"}

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,5 @@
 export { default as Navbar } from './Navbar.svelte';
 export { default as Navigation } from './Navigation.svelte';
+export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarProjectPanel } from './SidebarProjectPanel.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,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,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';
@@ -19,6 +21,8 @@ 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 SidebarProjectPanel } from './organisms/SidebarProjectPanel.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';
@@ -19,14 +21,9 @@ 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 SidebarProjectPanel } from './organisms/SidebarProjectPanel.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/molecules/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ExtendedSemanticVariant } from "../../types/variants.js";
+    type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
         variant?: ExtendedSemanticVariant;
@@ -27,6 +28,10 @@
         }
     }
 
+    const visualVariant = $derived<AlertVisualVariant>(
+        variant === "default" ? "info" : variant,
+    );
+
     let alertClasses = $derived({
         info: "text-info border border-info",
         success: "text-success border border-success",
@@ -64,10 +69,10 @@
 
 <div
     class="relative rounded-md p-4 border {alertClasses[
-        variant
+        visualVariant
     ]} transition-all duration-200 motion-reduce:transition-none {className}"
     role={alertRole}
-    aria-live={variant === "success" || variant === "info"
+    aria-live={visualVariant === "success" || visualVariant === "info"
         ? "polite"
         : "assertive"}
     aria-atomic="true"
@@ -98,7 +103,7 @@
 
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
         <div class="shrink-0 mt-0.5">
-            {@html iconSvg[variant]}
+            {@html iconSvg[visualVariant]}
         </div>
 
         <div class="flex-1 min-w-0">