svelora 3.0.5 → 3.0.7

package/dist/SelectMenu/SelectMenu.svelte

@@ -42,13 +42,33 @@ const selectedItems = $derived(selectedValues.map((v) => itemsMap.get(v)).filter
 const hasSelection = $derived(selectedValues.length > 0);
 const singleSelectedItem = $derived(multiple ? undefined : selectedItems[0]);
 const displayLabel = $derived(multiple ? selectedItems.map((i) => i.label ?? i.value).join(separator) : singleSelectedItem?.label ?? singleSelectedItem?.value ?? "");
+let isAlive = true;
+$effect(() => {
+	return () => {
+		isAlive = false;
+	};
+});
+function getSelectedValues() {
+	if (!multiple) {
+		return typeof value === "string" && value !== "" ? [value] : [];
+	}
+	return Array.isArray(value) ? value : [];
+}
+function getCombinedItems() {
+	const itemList = items;
+	const propValues = new Set(itemList.filter((i) => !("type" in i)).map((i) => i.value));
+	const extras = createdItems.filter((c) => !propValues.has(c.value));
+	return [...itemList, ...extras];
+}
 function removeValue(val) {
 	if (!multiple) return;
-	value = selectedValues.filter((v) => v !== val);
+	if (!isAlive) return;
+	value = getSelectedValues().filter((v) => v !== val);
 	emit.onChange();
 }
 function clearSelection() {
 	if (!multiple) return;
+	if (!isAlive) return;
 	value = [];
 	emit.onChange();
 }
@@ -97,29 +117,41 @@ const showCreateItem = $derived.by(() => {
 	return !exactMatchExists;
 });
 const resolvedCreateLabel = $derived(typeof createItemLabel === "function" ? createItemLabel(trimmedSearch) : createItemLabel);
-function findItemByCaseInsensitive(query) {
+function hasExactMatch(query, combined) {
 	const q = query.toLowerCase();
-	for (const it of itemsMap.values()) {
-		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
-			return it;
-		}
+	for (const it of combined) {
+		if ("type" in it) continue;
+		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) return true;
+	}
+	return false;
+}
+function findItemByCaseInsensitive(query, combined) {
+	const q = query.toLowerCase();
+	for (const it of combined) {
+		if ("type" in it) continue;
+		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) return it;
 	}
 	return undefined;
 }
 function selectValue(val) {
+	if (!isAlive) return;
+	const current = getSelectedValues();
 	if (multiple) {
-		if (!selectedValues.includes(val)) {
-			value = [...selectedValues, val];
-		}
-	} else {
-		value = val;
+		if (!current.includes(val)) value = [...current, val];
+		return;
 	}
+	value = val;
 }
 function handleCreate() {
-	if (!showCreateItem) return;
-	const newValue = trimmedSearch;
+	if (!isAlive) return;
+	if (!createItem) return;
+	const newValue = searchTerm.trim();
 	if (!newValue) return;
-	const existing = findItemByCaseInsensitive(newValue);
+	const combined = getCombinedItems();
+	const mode = createItem === true ? "lazy" : createItem;
+	const shouldShow = mode === "always" ? true : !hasExactMatch(newValue, combined);
+	if (!shouldShow) return;
+	const existing = findItemByCaseInsensitive(newValue, combined);
 	if (existing) {
 		selectValue(existing.value);
 	} else {

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/Stepper/Stepper.svelte

@@ -55,28 +55,31 @@ function handleKeydown(e, index) {
 }
 const apiInstance = {
 	next() {
-		if (activeIndex >= items.length - 1) return;
-		const target = items[activeIndex + 1];
+		const current = untrack(() => activeIndex);
+		if (current >= items.length - 1) return;
+		const target = items[current + 1];
 		if (!target) return;
-		setValue(getItemValue(target, activeIndex + 1));
+		setValue(getItemValue(target, current + 1));
 	},
 	prev() {
-		if (activeIndex <= 0) return;
-		const target = items[activeIndex - 1];
+		const current = untrack(() => activeIndex);
+		if (current <= 0) return;
+		const target = items[current - 1];
 		if (!target) return;
-		setValue(getItemValue(target, activeIndex - 1));
+		setValue(getItemValue(target, current - 1));
 	},
 	goTo(next) {
 		setValue(next);
 	},
 	get hasNext() {
-		return activeIndex >= 0 && activeIndex < items.length - 1;
+		const current = untrack(() => activeIndex);
+		return current >= 0 && current < items.length - 1;
 	},
 	get hasPrev() {
-		return activeIndex > 0;
+		return untrack(() => activeIndex) > 0;
 	},
 	get activeIndex() {
-		return activeIndex;
+		return untrack(() => activeIndex);
 	}
 };
 api = apiInstance;

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
+    }
+});