svelora 3.0.6 → 3.0.7

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

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

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+export const tagsInputVariants = tv({
+    slots: {
+        base: 'flex flex-wrap items-center gap-2 p-2 w-full rounded-md border border-outline-variant bg-surface-50 dark:bg-surface-900 focus-within:ring-2 focus-within:ring-primary focus-within:border-primary transition-colors cursor-text',
+        tag: 'flex items-center gap-1 px-2.5 py-1 text-sm rounded-full bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-50',
+        tagText: 'truncate max-w-[150px]',
+        removeButton: 'flex items-center justify-center w-4 h-4 rounded-full hover:bg-surface-300 dark:hover:bg-surface-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary',
+        input: 'flex-1 min-w-[120px] bg-transparent border-0 outline-none focus:ring-0 text-sm text-surface-900 dark:text-surface-50 placeholder:text-surface-500 dark:placeholder:text-surface-400 p-1'
+    },
+    variants: {
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed',
+                input: 'cursor-not-allowed',
+                removeButton: 'pointer-events-none'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});

package/dist/TreeView/TreeView.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { treeViewVariants } from "./tree-view.variants.js";
+let { items = [], selectedIds = [], expandedIds = $bindable([]), size = "md", expandOnRowClick = true, class: className, onItemClick, onItemExpand, labelSnippet, ...restProps } = $props();
+let styles = $derived(treeViewVariants({ size }));
+// Internal state tracking for faster lookup
+let expandedSet = $derived(new Set(expandedIds));
+let selectedSet = $derived(new Set(selectedIds));
+function toggleExpand(e, item) {
+	e.stopPropagation();
+	if (item.disabled || !item.children?.length) return;
+	const isExpanded = expandedSet.has(item.id);
+	if (isExpanded) {
+		expandedIds = expandedIds.filter((id) => id !== item.id);
+	} else {
+		expandedIds = [...expandedIds, item.id];
+	}
+	onItemExpand?.(item, !isExpanded);
+}
+function handleRowClick(e, item) {
+	if (item.disabled) return;
+	if (expandOnRowClick && item.children?.length) {
+		toggleExpand(e, item);
+	}
+	onItemClick?.(item);
+}
+</script>
+
+{#snippet renderTree(treeItems: TreeItem[])}
+    <div class={styles.root()}>
+        {#each treeItems as item}
+            {@const hasChildren = item.children && item.children.length > 0}
+            {@const isExpanded = expandedSet.has(item.id)}
+            {@const isSelected = selectedSet.has(item.id)}
+            
+            <div class={styles.item()}>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div 
+                    class={twMerge(
+                        styles.itemRow(), 
+                        isSelected && styles.itemRowActive(),
+                        item.disabled && styles.itemRowDisabled()
+                    )}
+                    onclick={(e) => handleRowClick(e, item)}
+                >
+                    <!-- Chevron / Spacer -->
+                    <div class={styles.chevronWrapper()}>
+                        {#if hasChildren}
+                            <button 
+                                type="button" 
+                                class="w-full h-full flex items-center justify-center outline-none"
+                                onclick={(e) => {
+                                    if (!expandOnRowClick) toggleExpand(e, item)
+                                }}
+                                tabindex="-1"
+                                disabled={item.disabled}
+                            >
+                                <Icon 
+                                    name="lucide:chevron-right" 
+                                    class={twMerge(styles.chevron(), isExpanded && 'rotate-90')} 
+                                />
+                            </button>
+                        {/if}
+                    </div>
+
+                    <!-- Icon -->
+                    {#if item.icon}
+                        <Icon name={item.icon} class={styles.icon()} />
+                    {/if}
+
+                    <!-- Label -->
+                    <div class={styles.label()}>
+                        {#if labelSnippet}
+                            {@render labelSnippet(item)}
+                        {:else}
+                            {item.label}
+                        {/if}
+                    </div>
+                </div>
+
+                <!-- Children -->
+                {#if hasChildren && isExpanded}
+                    <div class={styles.childrenWrapper()}>
+                        {@render renderTree(item.children!)}
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/snippet}
+
+<div class={className} {...restProps}>
+    {@render renderTree(items)}
+</div>

package/dist/TreeView/TreeView.svelte.d.ts

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

package/dist/TreeView/index.d.ts

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

package/dist/TreeView/index.js

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

package/dist/TreeView/tree-view.types.d.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TreeViewVariantProps } from './tree-view.variants.js';
+import type { Snippet } from 'svelte';
+export interface TreeItem {
+    /**
+     * Unique identifier for the item.
+     */
+    id: string | number;
+    /**
+     * Text label to display.
+     */
+    label: string;
+    /**
+     * Optional icon name.
+     */
+    icon?: string;
+    /**
+     * Whether the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Child items (for nested trees).
+     */
+    children?: TreeItem[];
+    /**
+     * Any other custom data you want to attach.
+     */
+    [key: string]: any;
+}
+export interface TreeViewProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of tree items to display.
+     */
+    items: TreeItem[];
+    /**
+     * Currently selected item IDs.
+     */
+    selectedIds?: (string | number)[];
+    /**
+     * Currently expanded item IDs.
+     */
+    expandedIds?: (string | number)[];
+    /**
+     * Component size.
+     */
+    size?: TreeViewVariantProps['size'];
+    /**
+     * Whether clicking the row expands the item, or only clicking the chevron expands it.
+     * @default true
+     */
+    expandOnRowClick?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Event fired when an item is clicked.
+     */
+    onItemClick?: (item: TreeItem) => void;
+    /**
+     * Event fired when an item's expanded state changes.
+     */
+    onItemExpand?: (item: TreeItem, isExpanded: boolean) => void;
+    /**
+     * Custom snippet for rendering the label part of the item.
+     */
+    labelSnippet?: Snippet<[TreeItem]>;
+}

package/dist/TreeView/tree-view.types.js

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

package/dist/TreeView/tree-view.variants.d.ts

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const treeViewVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            itemRow: string;
+            chevron: string;
+            icon: string;
+        };
+        md: {
+            itemRow: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    itemRow: string;
+    itemRowActive: string;
+    itemRowDisabled: string;
+    chevronWrapper: string;
+    chevron: string;
+    icon: string;
+    label: string;
+    childrenWrapper: string;
+}, undefined, {
+    size: {
+        sm: {
+            itemRow: string;
+            chevron: string;
+            icon: string;
+        };
+        md: {
+            itemRow: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    itemRow: string;
+    itemRowActive: string;
+    itemRowDisabled: string;
+    chevronWrapper: string;
+    chevron: string;
+    icon: string;
+    label: string;
+    childrenWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            itemRow: string;
+            chevron: string;
+            icon: string;
+        };
+        md: {
+            itemRow: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    itemRow: string;
+    itemRowActive: string;
+    itemRowDisabled: string;
+    chevronWrapper: string;
+    chevron: string;
+    icon: string;
+    label: string;
+    childrenWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TreeViewVariantProps = VariantProps<typeof treeViewVariants>;

package/dist/TreeView/tree-view.variants.js

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+export const treeViewVariants = tv({
+    slots: {
+        root: 'flex flex-col text-sm',
+        item: 'flex flex-col',
+        itemRow: 'flex items-center gap-1.5 py-1.5 px-2 rounded-md hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer select-none transition-colors text-surface-900 dark:text-surface-50',
+        itemRowActive: 'bg-primary-50 dark:bg-primary-900/30 text-primary-900 dark:text-primary-100',
+        itemRowDisabled: 'opacity-50 cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent',
+        chevronWrapper: 'flex items-center justify-center w-5 h-5 shrink-0 rounded hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors',
+        chevron: 'w-4 h-4 transition-transform duration-200',
+        icon: 'w-4 h-4 shrink-0 text-surface-500 dark:text-surface-400',
+        label: 'truncate flex-1',
+        childrenWrapper: 'flex flex-col pl-4 ml-2.5 border-l border-outline-variant/50 mt-1'
+    },
+    variants: {
+        size: {
+            sm: {
+                itemRow: 'py-1 text-xs',
+                chevron: 'w-3 h-3',
+                icon: 'w-3 h-3'
+            },
+            md: {
+                itemRow: 'py-1.5 text-sm'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});