svelora 3.0.6 → 3.0.8

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

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,35 @@ export const docsComponentGroups = [
                 legacyHref: '/container',
                 icon: 'lucide:box'
             },
+            {
+                title: 'Resizable',
+                href: '/docs/components/resizable',
+                legacyHref: '/resizable',
+                icon: 'lucide:layout-panel-left-right'
+            },
+            {
+                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',
+                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',
                 href: '/docs/components/separator',
@@ -150,6 +185,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 +221,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 +268,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 +286,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 +346,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 +364,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 +405,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 +428,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 +452,12 @@ export const docsComponentGroups = [
                 legacyHref: '/pagination',
                 icon: 'lucide:ellipsis'
             },
+            {
+                title: 'Sidebar',
+                href: '/docs/components/sidebar',
+                legacyHref: '/sidebar',
+                icon: 'lucide:layout-sidebar'
+            },
             {
                 title: 'Stepper',
                 href: '/docs/components/stepper',
@@ -432,6 +545,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'
             }
         ]
     }

package/dist/index.d.ts

@@ -1,16 +1,16 @@
-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';
 export * from './AvatarGroup/index.js';
 export * from './Badge/index.js';
 export * from './Banner/index.js';
+export * from './BentoGrid/index.js';
 export * from './Breadcrumb/index.js';
 export * from './Button/index.js';
 export * from './Calendar/index.js';
 export * from './Card/index.js';
 export * from './Carousel/index.js';
+export * from './Chat/index.js';
 export * from './Checkbox/index.js';
 export * from './CheckboxGroup/index.js';
 export * from './Chip/index.js';
@@ -21,6 +21,7 @@ export * from './Container/index.js';
 export * from './ContextMenu/index.js';
 export type { UIConfig } from './config.js';
 export { defineConfig } from './config.js';
+export * from './DateRangePicker/index.js';
 export * from './Drawer/index.js';
 export * from './DropdownMenu/index.js';
 export * from './Empty/index.js';
@@ -34,26 +35,42 @@ export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Kbd/index.js';
 export * from './Link/index.js';
+export * from './List/index.js';
 export * from './LocaleButton/index.js';
+export * from './Marquee/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';
 export * from './PinInput/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './Prose/index.js';
 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';
+export * from './Sidebar/index.js';
 export * from './Skeleton/index.js';
 export * from './Slideover/index.js';
 export * from './Slider/index.js';
+export * from './Spotlight/index.js';
 export * from './Stepper/index.js';
 export * from './Switch/index.js';
 export * from './Table/index.js';
 export * from './Tabs/index.js';
+export * from './TagsInput/index.js';
 export * from './Textarea/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Timeline/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';
+export * from './TreeView/index.js';
 export * from './User/index.js';
+export * from './Chart/index.js';
+export * from './ColorPicker/index.js';

package/dist/index.js

@@ -1,16 +1,17 @@
 // 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';
 export * from './AvatarGroup/index.js';
 export * from './Badge/index.js';
 export * from './Banner/index.js';
+export * from './BentoGrid/index.js';
 export * from './Breadcrumb/index.js';
 export * from './Button/index.js';
 export * from './Calendar/index.js';
 export * from './Card/index.js';
 export * from './Carousel/index.js';
+export * from './Chat/index.js';
 export * from './Checkbox/index.js';
 export * from './CheckboxGroup/index.js';
 export * from './Chip/index.js';
@@ -21,6 +22,7 @@ export * from './Container/index.js';
 export * from './ContextMenu/index.js';
 // Configuration
 export { defineConfig } from './config.js';
+export * from './DateRangePicker/index.js';
 export * from './Drawer/index.js';
 export * from './DropdownMenu/index.js';
 export * from './Empty/index.js';
@@ -35,26 +37,42 @@ export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Kbd/index.js';
 export * from './Link/index.js';
+export * from './List/index.js';
 export * from './LocaleButton/index.js';
+export * from './Marquee/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';
 export * from './PinInput/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './Prose/index.js';
 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';
+export * from './Sidebar/index.js';
 export * from './Skeleton/index.js';
 export * from './Slideover/index.js';
 export * from './Slider/index.js';
+export * from './Spotlight/index.js';
 export * from './Stepper/index.js';
 export * from './Switch/index.js';
 export * from './Table/index.js';
 export * from './Tabs/index.js';
+export * from './TagsInput/index.js';
 export * from './Textarea/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Timeline/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';
+export * from './TreeView/index.js';
 export * from './User/index.js';
+export * from './Chart/index.js';
+export * from './ColorPicker/index.js';