svelora 3.0.6 → 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/Sidebar/Sidebar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { sidebarVariants } from "./sidebar.variants.js";
+let { collapsed = false, position = "left", class: className, header, footer, children, ...restProps } = $props();
+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
+setContext("sidebar-collapsed", () => collapsed);
+</script>
+
+<aside class={twMerge(styles.base(), className)} {...restProps}>
+    {#if header}
+        <div class={styles.header()}>
+            {@render header()}
+        </div>
+    {/if}
+
+    <div class={styles.content()}>
+        {@render children?.()}
+    </div>
+
+    {#if footer}
+        <div class={styles.footer()}>
+            {@render footer()}
+        </div>
+    {/if}
+</aside>

package/dist/Sidebar/Sidebar.svelte.d.ts

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

package/dist/Sidebar/index.d.ts

@@ -0,0 +1,4 @@
+import Sidebar from './Sidebar.svelte';
+export { Sidebar };
+export * from './sidebar.types.js';
+export * from './sidebar.variants.js';

package/dist/Sidebar/index.js

@@ -0,0 +1,4 @@
+import Sidebar from './Sidebar.svelte';
+export { Sidebar };
+export * from './sidebar.types.js';
+export * from './sidebar.variants.js';

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

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

package/dist/Sidebar/sidebar.types.js

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

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

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, undefined, {
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SidebarVariantProps = VariantProps<typeof sidebarVariants>;

package/dist/Sidebar/sidebar.variants.js

@@ -0,0 +1,23 @@
+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'
+    },
+    variants: {
+        position: {
+            left: { base: 'border-r' },
+            right: { base: 'border-l' }
+        },
+        collapsed: {
+            true: { base: 'w-16' },
+            false: { base: 'w-64' }
+        }
+    },
+    defaultVariants: {
+        position: 'left',
+        collapsed: false
+    }
+});

package/dist/Spotlight/Spotlight.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { spotlightVariants } from "./spotlight.variants.js";
+let { size = 400, color = "rgba(255, 255, 255, 0.1)", class: className, children, ...restProps } = $props();
+let styles = $derived(spotlightVariants());
+let mouseX = $state(0);
+let mouseY = $state(0);
+function handleMouseMove(e) {
+	const target = e.currentTarget;
+	const rect = target.getBoundingClientRect();
+	mouseX = e.clientX - rect.left;
+	mouseY = e.clientY - rect.top;
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div 
+    class={twMerge(styles.root() as string, className)}
+    onmousemove={handleMouseMove}
+    {...restProps}
+>
+    <!-- Spotlight Effect Background -->
+    <div 
+        class={styles.spotlight() as string}
+        style:background={`radial-gradient(${size}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 80%)`}
+    ></div>
+
+    <!-- Content -->
+    <div class={styles.content() as string}>
+        {@render children?.()}
+    </div>
+</div>

package/dist/Spotlight/Spotlight.svelte.d.ts

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

package/dist/Spotlight/index.d.ts

@@ -0,0 +1,4 @@
+import Spotlight from './Spotlight.svelte';
+export { Spotlight };
+export * from './spotlight.types.js';
+export * from './spotlight.variants.js';

package/dist/Spotlight/index.js

@@ -0,0 +1,4 @@
+import Spotlight from './Spotlight.svelte';
+export { Spotlight };
+export * from './spotlight.types.js';
+export * from './spotlight.variants.js';

package/dist/Spotlight/spotlight.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spotlight in pixels.
+     * @default 400
+     */
+    size?: number;
+    /**
+     * Color of the spotlight in rgba, hex, or CSS variable.
+     * @default 'rgba(255, 255, 255, 0.1)'
+     */
+    color?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content to render inside the spotlight container.
+     */
+    children?: Snippet;
+}

package/dist/Spotlight/spotlight.types.js

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

package/dist/Spotlight/spotlight.variants.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const spotlightVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            spotlight?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            spotlight?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    spotlight: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            spotlight?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    spotlight: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    spotlight: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SpotlightVariantProps = VariantProps<typeof spotlightVariants>;

package/dist/Spotlight/spotlight.variants.js

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+export const spotlightVariants = tv({
+    slots: {
+        root: 'relative overflow-hidden group',
+        spotlight: 'pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100',
+        content: 'relative z-10 h-full w-full'
+    }
+});

package/dist/TagsInput/TagsInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { tagsInputVariants } from "./tags-input.variants.js";
+let { value = $bindable([]), placeholder = "Add a tag...", disabled = false, maxTags, separators = [",", "Enter"], class: className, onchange, ...restProps } = $props();
+let styles = $derived(tagsInputVariants({ disabled }));
+let inputValue = $state("");
+let inputRef = $state(null);
+function addTag(tag) {
+	const t = tag.trim();
+	if (!t) return;
+	if (maxTags && value.length >= maxTags) return;
+	if (value.includes(t)) return;
+	value = [...value, t];
+	inputValue = "";
+	onchange?.(value);
+}
+function removeTag(index) {
+	if (disabled) return;
+	value = value.filter((_, i) => i !== index);
+	onchange?.(value);
+}
+function handleKeyDown(e) {
+	if (disabled) return;
+	// Backspace to remove last tag if input is empty
+	if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+		removeTag(value.length - 1);
+		return;
+	}
+	// Add tag on separator
+	if (separators.includes(e.key)) {
+		e.preventDefault();
+		addTag(inputValue);
+	}
+}
+// Also handle pasting comma-separated values
+function handlePaste(e) {
+	if (disabled) return;
+	const pasteData = e.clipboardData?.getData("text");
+	if (pasteData) {
+		e.preventDefault();
+		const tags = pasteData.split(separators.includes(",") ? "," : "\n").map((t) => t.trim()).filter(Boolean);
+		let newTags = [...value];
+		for (const t of tags) {
+			if (maxTags && newTags.length >= maxTags) break;
+			if (!newTags.includes(t)) {
+				newTags.push(t);
+			}
+		}
+		if (newTags.length !== value.length) {
+			value = newTags;
+			onchange?.(value);
+		}
+	}
+}
+function handleContainerClick() {
+	if (!disabled && inputRef) {
+		inputRef.focus();
+	}
+}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div 
+    class={twMerge(styles.base() as any, className)} 
+    onclick={handleContainerClick}
+    {...restProps}
+>
+    {#each value as tag, i}
+        <span class={styles.tag() as any}>
+            <span class={styles.tagText() as any}>{tag}</span>
+            <button
+                type="button"
+                class={styles.removeButton() as any}
+                onclick={(e) => {
+                    e.stopPropagation()
+                    removeTag(i)
+                }}
+                {disabled}
+                aria-label={`Remove tag ${tag}`}
+            >
+                <Icon name="lucide:x" class="w-3 h-3" />
+            </button>
+        </span>
+    {/each}
+
+    {#if !maxTags || value.length < maxTags}
+        <input
+            bind:this={inputRef}
+            bind:value={inputValue}
+            type="text"
+            {placeholder}
+            {disabled}
+            class={styles.input() as any}
+            onkeydown={handleKeyDown}
+            onpaste={handlePaste}
+            onblur={() => addTag(inputValue)}
+        />
+    {/if}
+</div>

package/dist/TagsInput/TagsInput.svelte.d.ts

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

package/dist/TagsInput/index.d.ts

@@ -0,0 +1,4 @@
+import TagsInput from './TagsInput.svelte';
+export { TagsInput };
+export * from './tags-input.types.js';
+export * from './tags-input.variants.js';

package/dist/TagsInput/index.js

@@ -0,0 +1,4 @@
+import TagsInput from './TagsInput.svelte';
+export { TagsInput };
+export * from './tags-input.types.js';
+export * from './tags-input.variants.js';

package/dist/TagsInput/tags-input.types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TagsInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    /**
+     * Array of tag strings.
+     */
+    value?: string[];
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Maximum number of tags allowed.
+     */
+    maxTags?: number;
+    /**
+     * Array of characters that trigger tag creation.
+     * @default [',', 'Enter']
+     */
+    separators?: string[];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Event fired when tags change.
+     */
+    onchange?: (tags: string[]) => void;
+}

package/dist/TagsInput/tags-input.types.js

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

package/dist/TagsInput/tags-input.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tagsInputVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+            input: string;
+            removeButton: string;
+        };
+    };
+}, {
+    base: string;
+    tag: string;
+    tagText: string;
+    removeButton: string;
+    input: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+            input: string;
+            removeButton: string;
+        };
+    };
+}, {
+    base: string;
+    tag: string;
+    tagText: string;
+    removeButton: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+            input: string;
+            removeButton: string;
+        };
+    };
+}, {
+    base: string;
+    tag: string;
+    tagText: string;
+    removeButton: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagsInputVariantProps = VariantProps<typeof tagsInputVariants>;