svelora 3.0.5 → 3.0.7

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

package/dist/docs/navigation.js

@@ -121,6 +121,12 @@ export const docsComponentGroups = [
     {
         title: 'Layout',
         items: [
+            {
+                title: 'BentoGrid',
+                href: '/docs/components/bento-grid',
+                legacyHref: '/bento-grid',
+                icon: 'lucide:layout-dashboard'
+            },
             {
                 title: 'Card',
                 href: '/docs/components/card',
@@ -133,6 +139,18 @@ export const docsComponentGroups = [
                 legacyHref: '/container',
                 icon: 'lucide:box'
             },
+            {
+                title: 'Resizable',
+                href: '/docs/components/resizable',
+                legacyHref: '/resizable',
+                icon: 'lucide:layout-panel-left-right'
+            },
+            {
+                title: 'ScrollArea',
+                href: '/docs/components/scroll-area',
+                legacyHref: '/scroll-area',
+                icon: 'lucide:mouse-pointer-square-dashed'
+            },
             {
                 title: 'Separator',
                 href: '/docs/components/separator',
@@ -150,6 +168,12 @@ export const docsComponentGroups = [
                 legacyHref: '/accordion',
                 icon: 'lucide:chevrons-down-up'
             },
+            {
+                title: 'Chart',
+                href: '/docs/components/chart',
+                legacyHref: '/chart',
+                icon: 'lucide:bar-chart-2'
+            },
             {
                 title: 'Avatar',
                 href: '/docs/components/avatar',
@@ -180,6 +204,24 @@ export const docsComponentGroups = [
                 legacyHref: '/chip',
                 icon: 'lucide:circle-dot'
             },
+            {
+                title: 'List',
+                href: '/docs/components/list',
+                legacyHref: '/list',
+                icon: 'lucide:list'
+            },
+            {
+                title: 'NumberTicker',
+                href: '/docs/components/number-ticker',
+                legacyHref: '/number-ticker',
+                icon: 'lucide:clock-10'
+            },
+            {
+                title: 'Prose',
+                href: '/docs/components/prose',
+                legacyHref: '/prose',
+                icon: 'lucide:type'
+            },
             {
                 title: 'Empty',
                 href: '/docs/components/empty',
@@ -209,6 +251,12 @@ export const docsComponentGroups = [
                 href: '/docs/components/table',
                 legacyHref: '/table',
                 icon: 'lucide:table'
+            },
+            {
+                title: 'TreeView',
+                href: '/docs/components/tree-view',
+                legacyHref: '/tree-view',
+                icon: 'lucide:folder-tree'
             }
         ]
     },
@@ -221,6 +269,12 @@ export const docsComponentGroups = [
                 legacyHref: '/checkbox',
                 icon: 'lucide:square-check'
             },
+            {
+                title: 'ColorPicker',
+                href: '/docs/components/color-picker',
+                legacyHref: '/color-picker',
+                icon: 'lucide:pipette'
+            },
             {
                 title: 'CheckboxGroup',
                 href: '/docs/components/checkbox-group',
@@ -275,6 +329,12 @@ export const docsComponentGroups = [
                 legacyHref: '/textarea',
                 icon: 'lucide:text'
             },
+            {
+                title: 'PasswordInput',
+                href: '/docs/components/password-input',
+                legacyHref: '/password-input',
+                icon: 'lucide:key'
+            },
             {
                 title: 'FileUpload',
                 href: '/docs/components/file-upload',
@@ -287,6 +347,18 @@ export const docsComponentGroups = [
                 legacyHref: '/pin-input',
                 icon: 'lucide:square-asterisk'
             },
+            {
+                title: 'Rating',
+                href: '/docs/components/rating',
+                legacyHref: '/rating',
+                icon: 'lucide:star'
+            },
+            {
+                title: 'TagsInput',
+                href: '/docs/components/tags-input',
+                legacyHref: '/tags-input',
+                icon: 'lucide:tags'
+            },
             {
                 title: 'FormField',
                 href: '/docs/components/form-field',
@@ -316,6 +388,18 @@ export const docsComponentGroups = [
                 legacyHref: '/banner',
                 icon: 'lucide:megaphone'
             },
+            {
+                title: 'Chat',
+                href: '/docs/components/chat',
+                legacyHref: '/chat',
+                icon: 'lucide:message-circle'
+            },
+            {
+                title: 'Marquee',
+                href: '/docs/components/marquee',
+                legacyHref: '/marquee',
+                icon: 'lucide:move-right'
+            },
             {
                 title: 'Progress',
                 href: '/docs/components/progress',
@@ -327,6 +411,12 @@ export const docsComponentGroups = [
                 href: '/docs/components/toast',
                 legacyHref: '/toast',
                 icon: 'lucide:message-square-warning'
+            },
+            {
+                title: 'Spotlight',
+                href: '/docs/components/spotlight',
+                legacyHref: '/spotlight',
+                icon: 'lucide:flashlight'
             }
         ]
     },
@@ -345,6 +435,18 @@ 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',
+                legacyHref: '/sidebar',
+                icon: 'lucide:layout-sidebar'
+            },
             {
                 title: 'Stepper',
                 href: '/docs/components/stepper',
@@ -432,6 +534,12 @@ export const docsComponentGroups = [
                 href: '/docs/components/range-calendar',
                 legacyHref: '/range-calendar',
                 icon: 'lucide:calendar-range'
+            },
+            {
+                title: 'DateRangePicker',
+                href: '/docs/components/date-range-picker',
+                legacyHref: '/date-range-picker',
+                icon: 'lucide:calendar-days'
             }
         ]
     }
@@ -478,6 +586,60 @@ export const docsHookItems = [
         href: '/docs/hooks/use-debounce',
         legacyHref: '/use-debounce',
         icon: 'lucide:timer'
+    },
+    {
+        title: 'useDebouncedState',
+        href: '/docs/hooks/use-debounced-state',
+        legacyHref: '/use-debounced-state',
+        icon: 'lucide:clock-3'
+    },
+    {
+        title: 'useEventListener',
+        href: '/docs/hooks/use-event-listener',
+        legacyHref: '/use-event-listener',
+        icon: 'lucide:radio'
+    },
+    {
+        title: 'useResizeObserver / useElementSize',
+        href: '/docs/hooks/use-resize-observer',
+        legacyHref: '/use-resize-observer',
+        icon: 'lucide:scaling'
+    },
+    {
+        title: 'useIntersectionObserver',
+        href: '/docs/hooks/use-intersection-observer',
+        legacyHref: '/use-intersection-observer',
+        icon: 'lucide:scan-search'
+    },
+    {
+        title: 'useScrollLock',
+        href: '/docs/hooks/use-scroll-lock',
+        legacyHref: '/use-scroll-lock',
+        icon: 'lucide:lock'
+    },
+    {
+        title: 'useFocusTrap',
+        href: '/docs/hooks/use-focus-trap',
+        legacyHref: '/use-focus-trap',
+        icon: 'lucide:focus'
+    },
+    {
+        title: 'useLocalStorage',
+        href: '/docs/hooks/use-local-storage',
+        legacyHref: '/use-local-storage',
+        icon: 'lucide:hard-drive'
+    },
+    {
+        title: 'useThrottle',
+        href: '/docs/hooks/use-throttle',
+        legacyHref: '/use-throttle',
+        icon: 'lucide:gauge'
+    },
+    {
+        title: 'useTimeout / useInterval',
+        href: '/docs/hooks/use-timers',
+        legacyHref: '/use-timers',
+        icon: 'lucide:timer-reset'
     }
 ];
 export const docsTopNav = [

package/dist/hooks/index.d.ts

@@ -4,11 +4,25 @@ export type { UseClipboardOptions } from './useClipboard.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export type { UseDebounceOptions } from './useDebounce.svelte.js';
 export { useDebounce } from './useDebounce.svelte.js';
+export { useDebouncedState } from './useDebouncedState.svelte.js';
 export type { UseEscapeKeydownOptions } from './useEscapeKeydown.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export { useEventListener } from './useEventListener.svelte.js';
+export type { UseFocusTrapOptions } from './useFocusTrap.svelte.js';
+export { useFocusTrap } from './useFocusTrap.svelte.js';
 export type { FormFieldContext } from './useFormField.svelte.js';
 export { FORM_FIELD_CONTEXT_KEY, useFormField, useFormFieldEmit } from './useFormField.svelte.js';
 export type { UseInfiniteScrollOptions } from './useInfiniteScroll.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export type { UseIntersectionObserverOptions } from './useIntersectionObserver.svelte.js';
+export { useIntersectionObserver } from './useIntersectionObserver.svelte.js';
+export type { UseLocalStorageOptions, UseLocalStorageReturn, UseLocalStorageSerializer } from './useLocalStorage.svelte.js';
+export { useLocalStorage } from './useLocalStorage.svelte.js';
 export type { UseMediaQueryOptions } from './useMediaQuery.svelte.js';
 export { useMediaQuery } from './useMediaQuery.svelte.js';
+export { useElementSize, useResizeObserver } from './useResizeObserver.svelte.js';
+export { useScrollLock } from './useScrollLock.svelte.js';
+export type { UseThrottleOptions } from './useThrottle.svelte.js';
+export { useThrottle } from './useThrottle.svelte.js';
+export type { UseIntervalOptions } from './useTimers.svelte.js';
+export { useInterval, useTimeout } from './useTimers.svelte.js';

package/dist/hooks/index.js

@@ -1,7 +1,16 @@
 export { useClickOutside } from './useClickOutside.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export { useDebounce } from './useDebounce.svelte.js';
+export { useDebouncedState } from './useDebouncedState.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export { useEventListener } from './useEventListener.svelte.js';
+export { useFocusTrap } from './useFocusTrap.svelte.js';
 export { FORM_FIELD_CONTEXT_KEY, useFormField, useFormFieldEmit } from './useFormField.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export { useIntersectionObserver } from './useIntersectionObserver.svelte.js';
+export { useLocalStorage } from './useLocalStorage.svelte.js';
 export { useMediaQuery } from './useMediaQuery.svelte.js';
+export { useElementSize, useResizeObserver } from './useResizeObserver.svelte.js';
+export { useScrollLock } from './useScrollLock.svelte.js';
+export { useThrottle } from './useThrottle.svelte.js';
+export { useInterval, useTimeout } from './useTimers.svelte.js';

package/dist/hooks/useDebouncedState.svelte.d.ts

@@ -0,0 +1,30 @@
+interface UseDebouncedStateReturn<T> {
+    /** The immediate value — read it or write it (bindable). */
+    current: T;
+    /** The debounced value — settles `delay` ms after the last write. */
+    readonly debounced: T;
+    /** Set both `current` and `debounced` now, cancelling any pending update. */
+    setImmediate(value: T): void;
+}
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'svelora'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export declare function useDebouncedState<T>(initial: T, delay?: number): UseDebouncedStateReturn<T>;
+export {};

package/dist/hooks/useDebouncedState.svelte.js

@@ -0,0 +1,45 @@
+import { useDebounce } from './useDebounce.svelte.js';
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'svelora'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export function useDebouncedState(initial, delay = 300) {
+    let current = $state(initial);
+    let debounced = $state(initial);
+    const debounce = useDebounce({ delay });
+    return {
+        get current() {
+            return current;
+        },
+        set current(value) {
+            current = value;
+            debounce.run(() => {
+                debounced = value;
+            });
+        },
+        get debounced() {
+            return debounced;
+        },
+        setImmediate(value) {
+            debounce.cancel();
+            current = value;
+            debounced = value;
+        }
+    };
+}