svelora 3.0.7 → 3.0.8

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/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';