sv5ui-plus 4.0.0

package/dist/components/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/components/Spotlight/spotlight.types.js

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

package/dist/components/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-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            spotlight?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            spotlight?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    spotlight: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            spotlight?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    spotlight: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    spotlight: string;
+    content: string;
+}>>;
+export type SpotlightVariantProps = VariantProps<typeof spotlightVariants>;

package/dist/components/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/components/TableBulkActionBar/TableBulkActionBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { fly } from "svelte/transition";
+import { tableBulkActionBarVariants } from "./table-bulk-action-bar.variants.js";
+import { Button } from "sv5ui";
+let { count, onClear, text = "items selected", class: className, ui, children, ...restProps } = $props();
+const slots = $derived(tableBulkActionBarVariants());
+</script>
+
+<div
+    class={slots.root({ class: [ui?.root, className] })}
+    transition:fly={{ y: 20, duration: 250 }}
+    {...restProps}
+>
+    <div class={slots.content({ class: ui?.content })}>
+        <span class={slots.countBadge({ class: ui?.countBadge })}>{count}</span>
+        <span class="opacity-90">{text}</span>
+    </div>
+
+    {#if children}
+        <div class={slots.actions({ class: ui?.actions })}>
+            {@render children()}
+        </div>
+    {/if}
+
+    <div class={slots.clearButton({ class: ui?.clearButton })}>
+        <Button 
+            variant="ghost" 
+            color="surface" 
+            size="sm" 
+            icon="lucide:x" 
+            onclick={onClear} 
+            class="h-8 w-8 !p-0 rounded-full"
+            aria-label="Clear selection"
+        />
+    </div>
+</div>

package/dist/components/TableBulkActionBar/TableBulkActionBar.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TableBulkActionBarProps } from './table-bulk-action-bar.types.js';
+export type Props = TableBulkActionBarProps;
+declare const TableBulkActionBar: import("svelte").Component<TableBulkActionBarProps, {}, "">;
+type TableBulkActionBar = ReturnType<typeof TableBulkActionBar>;
+export default TableBulkActionBar;

package/dist/components/TableBulkActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableBulkActionBar } from './TableBulkActionBar.svelte';
+export type { TableBulkActionBarProps } from './table-bulk-action-bar.types.js';

package/dist/components/TableBulkActionBar/index.js

@@ -0,0 +1 @@
+export { default as TableBulkActionBar } from './TableBulkActionBar.svelte';

package/dist/components/TableBulkActionBar/table-bulk-action-bar.types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { TableBulkActionBarSlots } from './table-bulk-action-bar.variants.js';
+export type TableBulkActionBarProps = {
+    /**
+     * The number of selected items to display.
+     */
+    count: number;
+    /**
+     * Callback when the clear/close button is clicked.
+     * This is usually where you clear the selection state (`selectedRows = []`).
+     */
+    onClear?: () => void;
+    /**
+     * Text to display next to the count.
+     * @default 'items selected'
+     */
+    text?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override specific slot classes.
+     */
+    ui?: Partial<Record<TableBulkActionBarSlots, ClassNameValue>>;
+    /**
+     * The action buttons to display.
+     */
+    children?: Snippet;
+};

package/dist/components/TableBulkActionBar/table-bulk-action-bar.types.js

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

package/dist/components/TableBulkActionBar/table-bulk-action-bar.variants.d.ts

@@ -0,0 +1,52 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tableBulkActionBarVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            countBadge?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            countBadge?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            countBadge?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}>>;
+export type TableBulkActionBarVariantProps = VariantProps<typeof tableBulkActionBarVariants>;
+export type TableBulkActionBarSlots = keyof ReturnType<typeof tableBulkActionBarVariants>;

package/dist/components/TableBulkActionBar/table-bulk-action-bar.variants.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const tableBulkActionBarVariants = tv({
+    slots: {
+        root: 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center justify-between gap-6 rounded-2xl border border-outline-variant/50 bg-surface/95 px-4 py-3 shadow-xl shadow-surface-container-highest/20 backdrop-blur-md',
+        content: 'flex items-center gap-3 text-sm text-on-surface whitespace-nowrap',
+        countBadge: 'font-semibold bg-primary text-on-primary px-2 py-0.5 rounded-full text-xs flex items-center justify-center min-w-[20px]',
+        actions: 'flex items-center gap-2 border-l border-outline-variant/50 pl-4',
+        clearButton: ''
+    }
+});

package/dist/components/TreeView/TreeView.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Icon } from "sv5ui";
+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/components/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/components/TreeView/index.d.ts

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

package/dist/components/TreeView/index.js

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

package/dist/components/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/components/TreeView/tree-view.types.js

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

package/dist/components/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").TVReturnTypeLike<{
+    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;
+}>>;
+export type TreeViewVariantProps = VariantProps<typeof treeViewVariants>;

package/dist/components/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/config.d.ts

@@ -0,0 +1,91 @@
+import type { FontsConfig } from './components/Fonts/fonts.types.js';
+/**
+ * SV5UI Plus Global Configuration
+ *
+ * @example
+ * ```ts
+ * import { defineSV5UIPlusConfig } from 'sv5ui-plus'
+ *
+ * defineSV5UIPlusConfig({
+ *     fonts: {
+ *         families: [
+ *             {
+ *                 name: 'Inter',
+ *                 variable: '--font-sans-family',
+ *                 weights: [400, 500, 600, 700]
+ *             }
+ *         ]
+ *     },
+ *     button: {
+ *         defaultVariants: { variant: 'outline', color: 'secondary' },
+ *         slots: { base: 'shadow-md', label: 'font-bold' }
+ *     },
+ *     avatar: {
+ *         defaultVariants: { size: 'lg' },
+ *         slots: { root: 'ring-2 ring-primary' }
+ *     },
+ *     icons: { loading: 'svg-spinners:ring-resize' }
+ * })
+ * ```
+ */
+/**
+ * Default icons used across components
+ */
+export declare const iconsDefaults: {
+    loading: string;
+    chevronDown: string;
+    chevronLeft: string;
+    chevronRight: string;
+    chevronsLeft: string;
+    chevronsRight: string;
+    ellipsis: string;
+    close: string;
+    menu: string;
+    external: string;
+    check: string;
+    light: string;
+    dark: string;
+    upload: string;
+    file: string;
+    zoomIn: string;
+    trash: string;
+    search: string;
+    star: string;
+    folder: string;
+    folderOpen: string;
+    sortAsc: string;
+    sortDesc: string;
+    sortDefault: string;
+    panelLeft: string;
+    dragHandle: string;
+};
+/** Deep partial type for config objects */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/** Generic component config shape */
+export type UIConfig = {
+    [key: string]: DeepPartial<Record<string, unknown>> | FontsConfig | undefined;
+    icons?: DeepPartial<typeof iconsDefaults>;
+    fonts?: FontsConfig;
+};
+/**
+ * Define global configuration for SV5UI Plus components
+ */
+export declare function defineConfig(config: UIConfig): void;
+/**
+ * Get the current global configuration
+ */
+export declare function getConfig(): UIConfig;
+/**
+ * Reset configuration to defaults
+ */
+export declare function resetConfig(): void;
+/**
+ * Get merged config for a component (memoized).
+ * Each component passes its own defaults, so config.ts doesn't import any variant files.
+ * This enables proper tree-shaking: unused components are excluded from the bundle.
+ * @internal
+ */
+export declare function getComponentConfig<T extends Record<string, unknown>>(component: string, defaults: T): T;
+export {};