svelora 3.0.7 → 3.0.10

package/dist/NavigationMenu/navigation-menu.variants.js

@@ -0,0 +1,71 @@
+import { tv } from 'tailwind-variants';
+export const navigationMenuVariants = tv({
+    slots: {
+        base: 'flex',
+        group: 'flex',
+        item: [
+            'group relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+            'disabled:pointer-events-none disabled:opacity-50'
+        ],
+        icon: 'text-lg shrink-0 transition-colors',
+        chevron: 'text-base opacity-50 shrink-0 transition-transform group-data-[state=open]:rotate-180',
+        accordionGroupContent: 'flex flex-col gap-1 pl-4 mt-1',
+        accordionTrigger: [
+            'flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-md',
+            'transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-outline',
+            'text-on-surface hover:bg-surface-container-highest',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: 'flex-row items-center justify-between w-full gap-4',
+                group: 'flex-row items-center gap-1',
+                item: ''
+            },
+            vertical: {
+                base: 'flex-col w-full gap-4',
+                group: 'flex-col gap-1 w-full',
+                item: 'w-full justify-start'
+            }
+        },
+        variant: {
+            default: {
+                item: [
+                    'text-on-surface-variant hover:bg-surface-container hover:text-on-surface',
+                    'data-[state=open]:bg-surface-container data-[state=open]:text-on-surface'
+                ],
+                icon: 'text-on-surface-variant group-hover:text-on-surface group-data-[state=open]:text-on-surface'
+            },
+            ghost: {
+                item: [
+                    'text-on-surface hover:bg-primary/10 hover:text-primary',
+                    'data-[state=open]:bg-primary/10 data-[state=open]:text-primary'
+                ],
+                icon: 'text-on-surface-variant group-hover:text-primary group-data-[state=open]:text-primary'
+            }
+        },
+        active: {
+            true: {
+                item: 'bg-primary/10 text-primary font-semibold',
+                icon: 'text-primary',
+                accordionTrigger: 'bg-primary-container text-on-primary-container'
+            },
+            false: {}
+        },
+        collapsed: {
+            true: {
+                item: 'w-10 h-10 justify-center p-0 aspect-square shrink-0',
+                icon: 'text-[1.25rem] m-0'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        active: false,
+        orientation: 'horizontal'
+    }
+});

package/dist/Search/Search.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Input from "../Input/Input.svelte";
+import Button from "../Button/Button.svelte";
+import Modal from "../Modal/Modal.svelte";
+import Command from "../Command/Command.svelte";
+import Kbd from "../Kbd/Kbd.svelte";
+import { onMount } from "svelte";
+let { variant = "input", value = $bindable(""), kbd = [], groups = [], onSelect, placeholder = "Search...", class: className, ...rest } = $props();
+let open = $state(false);
+onMount(() => {
+	if (kbd.length > 0 && (variant === "modal" || variant === "button")) {
+		const handleKeydown = (e) => {
+			const isMac = navigator.userAgent.toLowerCase().includes("mac");
+			const isMeta = kbd.includes("meta") || kbd.includes("ctrl");
+			const key = kbd.find((k) => k.length === 1)?.toLowerCase();
+			if (isMeta && key) {
+				if ((isMac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === key) {
+					e.preventDefault();
+					open = true;
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKeydown);
+		return () => window.removeEventListener("keydown", handleKeydown);
+	}
+});
+</script>
+
+{#if variant === 'input'}
+    <Input
+        type="search"
+        {placeholder}
+        bind:value
+        leadingIcon="lucide:search"
+        class={className}
+        {...(rest as any)}
+    >
+        {#snippet trailingSlot()}
+            {#if kbd.length > 0}
+                <div class="pointer-events-none flex items-center gap-1">
+                    {#each kbd as key}
+                        <Kbd value={key} size="sm" />
+                    {/each}
+                </div>
+            {/if}
+        {/snippet}
+    </Input>
+{:else if variant === 'modal'}
+    <button
+        type="button"
+        class={twMerge(
+            'flex h-10 w-full items-center justify-between rounded-md border border-outline-variant bg-surface px-3 py-2 text-sm text-on-surface-variant shadow-sm transition-colors hover:bg-surface-container hover:text-on-surface focus:outline-none focus:ring-2 focus:ring-primary',
+            className
+        )}
+        onclick={() => (open = true)}
+        {...(rest as any)}
+    >
+        <span class="flex items-center gap-2">
+            <span class="iconify lucide--search text-lg"></span>
+            <span>{placeholder}</span>
+        </span>
+        {#if kbd.length > 0}
+            <span class="flex items-center gap-1">
+                {#each kbd as key}
+                    <Kbd value={key} size="sm" />
+                {/each}
+            </span>
+        {/if}
+    </button>
+{:else if variant === 'button'}
+    <Button
+        variant="ghost"
+        color="surface"
+        leadingIcon="lucide:search"
+        class={className}
+        onclick={() => (open = true)}
+        {...(rest as any)}
+    />
+{/if}
+
+{#if variant === 'modal' || variant === 'button'}
+    <Modal bind:open size="lg">
+        {#snippet content()}
+            <Command
+                {groups}
+                bind:search={value}
+                placeholder="Type a command or search..."
+                ui={{
+                    root: 'border-0 shadow-none'
+                }}
+            />
+        {/snippet}
+    </Modal>
+{/if}

package/dist/Search/Search.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SearchProps } from './search.types.js';
+declare const Search: import("svelte").Component<SearchProps, {}, "value">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/Search/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Search } from './Search.svelte';
+export type * from './search.types.js';

package/dist/Search/index.js

@@ -0,0 +1 @@
+export { default as Search } from './Search.svelte';

package/dist/Search/search.types.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CommandGroup } from '../Command/command.types.js';
+export type SearchVariant = 'input' | 'modal' | 'button';
+export interface SearchProps extends Omit<HTMLAttributes<HTMLInputElement | HTMLButtonElement>, 'class'> {
+    /**
+     * Determines the visual style and behavior of the search component.
+     * - `input`: A standard input box.
+     * - `modal`: A fake input that opens a modal containing a Command palette when clicked.
+     * - `button`: A simple icon button that opens a modal containing a Command palette.
+     * @default 'input'
+     */
+    variant?: SearchVariant;
+    /**
+     * The value of the search input (when variant is 'input' or internal modal search).
+     */
+    value?: string;
+    /**
+     * Keyboard shortcut to display (and listen to) for opening the modal.
+     * E.g. `['meta', 'K']` or `['ctrl', '/']`
+     */
+    kbd?: string[];
+    /**
+     * Data groups to display in the Command palette (used when variant is 'modal' or 'button').
+     */
+    groups?: CommandGroup[];
+    /**
+     * Callback fired when an item is selected from the Command palette.
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Placeholder text for the input or fake input.
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+}

package/dist/Search/search.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Sidebar/Sidebar.svelte

@@ -6,25 +6,25 @@ let styles = $derived(sidebarVariants({
 	collapsed,
 	position
 }));
-// Provide context to children (like Menu) so they know if sidebar is collapsed
-// Useful if we want the Menu to hide labels when collapsed
+// Provide context to children (like Menu) so they know if sidebar is collapsed or right-aligned
 setContext("sidebar-collapsed", () => collapsed);
+setContext("sidebar-position", () => position);
 </script>
 
 <aside class={twMerge(styles.base(), className)} {...restProps}>
     {#if header}
         <div class={styles.header()}>
-            {@render header()}
+            {@render header({ collapsed })}
         </div>
     {/if}
 
     <div class={styles.content()}>
-        {@render children?.()}
+        {@render children?.({ collapsed })}
     </div>
 
     {#if footer}
         <div class={styles.footer()}>
-            {@render footer()}
+            {@render footer({ collapsed })}
         </div>
     {/if}
 </aside>

package/dist/Sidebar/sidebar.types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { SidebarVariantProps } from './sidebar.variants.js';
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * Whether the sidebar is collapsed (icons only).
      * @default false
@@ -19,13 +19,19 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Snippet for the top header section (e.g. Logo).
      */
-    header?: Snippet;
+    header?: Snippet<[{
+        collapsed: boolean;
+    }]>;
     /**
      * Snippet for the main content (e.g. Navigation Menu).
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        collapsed: boolean;
+    }]>;
     /**
      * Snippet for the bottom footer section (e.g. User Profile).
      */
-    footer?: Snippet;
+    footer?: Snippet<[{
+        collapsed: boolean;
+    }]>;
 }

package/dist/Sidebar/sidebar.variants.d.ts

@@ -11,9 +11,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {
@@ -33,9 +39,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {
@@ -55,9 +67,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {

package/dist/Sidebar/sidebar.variants.js

@@ -1,10 +1,10 @@
 import { tv } from 'tailwind-variants';
 export const sidebarVariants = tv({
     slots: {
-        base: 'flex flex-col h-full bg-surface-50 dark:bg-surface-900 border-outline-variant text-surface-900 dark:text-surface-50 transition-all duration-300',
-        header: 'flex items-center px-4 h-16 shrink-0 border-b border-outline-variant',
-        content: 'flex-1 overflow-y-auto px-3 py-4',
-        footer: 'p-4 mt-auto border-t border-outline-variant shrink-0'
+        base: 'flex flex-col h-full bg-surface-container-low border-outline-variant/60 text-on-surface transition-[width] duration-300 ease-in-out',
+        header: 'flex items-center shrink-0 border-b border-outline-variant/60 transition-[padding] duration-300 h-16',
+        content: 'flex-1 overflow-y-auto py-4 transition-[padding] duration-300',
+        footer: 'mt-auto border-t border-outline-variant/60 shrink-0 transition-[padding] duration-300'
     },
     variants: {
         position: {
@@ -12,8 +12,18 @@ export const sidebarVariants = tv({
             right: { base: 'border-l' }
         },
         collapsed: {
-            true: { base: 'w-16' },
-            false: { base: 'w-64' }
+            true: {
+                base: 'w-[64px]',
+                header: 'px-3 justify-center',
+                content: 'px-3 flex flex-col items-center',
+                footer: 'p-3 flex flex-col items-center justify-center gap-4'
+            },
+            false: {
+                base: 'w-64',
+                header: 'px-4',
+                content: 'px-3',
+                footer: 'p-4'
+            }
         }
     },
     defaultVariants: {

package/dist/docs/navigation.js

@@ -146,10 +146,27 @@ export const docsComponentGroups = [
                 icon: 'lucide:layout-panel-left-right'
             },
             {
-                title: 'ScrollArea',
+                title: 'Modal',
+                href: '/docs/components/modal',
+                icon: 'lucide:layout-panel-left-right'
+            },
+            {
+                title: 'Navigation Menu',
+                href: '/docs/components/navigation-menu',
+                icon: 'lucide:compass',
+                description: 'A horizontal list of links with optional nested dropdowns.'
+            },
+            {
+                title: 'Scroll Area',
                 href: '/docs/components/scroll-area',
-                legacyHref: '/scroll-area',
-                icon: 'lucide:mouse-pointer-square-dashed'
+                icon: 'lucide:scroll-text',
+                description: 'A customizable scrollable area with custom scrollbars.'
+            },
+            {
+                title: 'Search',
+                href: '/docs/components/search',
+                icon: 'lucide:search',
+                description: 'A flexible search input or command palette modal.'
             },
             {
                 title: 'Separator',
@@ -435,12 +452,6 @@ export const docsComponentGroups = [
                 legacyHref: '/pagination',
                 icon: 'lucide:ellipsis'
             },
-            {
-                title: 'Menu',
-                href: '/docs/components/menu',
-                legacyHref: '/menu',
-                icon: 'lucide:menu-square'
-            },
             {
                 title: 'Sidebar',
                 href: '/docs/components/sidebar',

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-export { ModeWatcher, createInitialModeExpression, generateSetInitialModeExpression, mode, resetMode, setMode, setTheme, systemPrefersMode, theme, themeStorageKey, toggleMode, userPrefersMode, modeStorageKey } from 'mode-watcher';
-export type { SystemModeValue, SystemPrefersMode, UserPrefersMode } from 'mode-watcher';
 export * from './Accordion/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
@@ -40,8 +38,8 @@ export * from './Link/index.js';
 export * from './List/index.js';
 export * from './LocaleButton/index.js';
 export * from './Marquee/index.js';
-export * from './Menu/index.js';
 export * from './Modal/index.js';
+export * from './NavigationMenu/index.js';
 export * from './NumberTicker/index.js';
 export * from './Pagination/index.js';
 export * from './PasswordInput/index.js';
@@ -53,6 +51,7 @@ export * from './RadioGroup/index.js';
 export * from './Rating/index.js';
 export * from './Resizable/index.js';
 export * from './ScrollArea/index.js';
+export * from './Search/index.js';
 export * from './Select/index.js';
 export * from './SelectMenu/index.js';
 export * from './Separator/index.js';

package/dist/index.js

@@ -1,5 +1,4 @@
 // Components
-export { ModeWatcher, createInitialModeExpression, generateSetInitialModeExpression, mode, resetMode, setMode, setTheme, systemPrefersMode, theme, themeStorageKey, toggleMode, userPrefersMode, modeStorageKey } from 'mode-watcher';
 export * from './Accordion/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
@@ -41,8 +40,8 @@ export * from './Link/index.js';
 export * from './List/index.js';
 export * from './LocaleButton/index.js';
 export * from './Marquee/index.js';
-export * from './Menu/index.js';
 export * from './Modal/index.js';
+export * from './NavigationMenu/index.js';
 export * from './NumberTicker/index.js';
 export * from './Pagination/index.js';
 export * from './PasswordInput/index.js';
@@ -54,6 +53,7 @@ export * from './RadioGroup/index.js';
 export * from './Rating/index.js';
 export * from './Resizable/index.js';
 export * from './ScrollArea/index.js';
+export * from './Search/index.js';
 export * from './Select/index.js';
 export * from './SelectMenu/index.js';
 export * from './Separator/index.js';