sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/Spotlight/spotlight.variants.js

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+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'
-    }
+        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

@@ -9,30 +9,30 @@ const slots = $derived(tableBulkActionBarVariants());
 </script>
 
 <div
-    class={slots.root({ class: [ui?.root, className] })}
-    transition:fly={{ y: 20, duration: 250 }}
-    {...restProps}
+	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>
+	<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}
+	{#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 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

@@ -1,4 +1,4 @@
-import type { TableBulkActionBarProps } from './table-bulk-action-bar.types.js';
+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>;

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

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

package/dist/components/TableBulkActionBar/index.js

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

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

@@ -1,6 +1,6 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { TableBulkActionBarSlots } from './table-bulk-action-bar.variants.js';
+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.

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const tableBulkActionBarVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {

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

@@ -1,10 +1,10 @@
-import { tv } from 'tailwind-variants';
+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: ''
-    }
+        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

@@ -27,69 +27,69 @@ function handleRowClick(e, 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>
+	<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)}
 
-                    <!-- Icon -->
-                    {#if item.icon}
-                        <Icon name={item.icon} class={styles.icon()} />
-                    {/if}
+			<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>
 
-                    <!-- Label -->
-                    <div class={styles.label()}>
-                        {#if labelSnippet}
-                            {@render labelSnippet(item)}
-                        {:else}
-                            {item.label}
-                        {/if}
-                    </div>
-                </div>
+					<!-- Icon -->
+					{#if item.icon}
+						<Icon name={item.icon} class={styles.icon()} />
+					{/if}
 
-                <!-- Children -->
-                {#if hasChildren && isExpanded}
-                    <div class={styles.childrenWrapper()}>
-                        {@render renderTree(item.children!)}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
+					<!-- 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)}
+	{@render renderTree(items)}
 </div>

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

@@ -1,4 +1,4 @@
-import type { TreeViewProps } from './tree-view.types.js';
+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

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

package/dist/components/TreeView/index.js

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

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

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { TreeViewVariantProps } from './tree-view.variants.js';
-import type { Snippet } from 'svelte';
+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.
@@ -43,7 +43,7 @@ export interface TreeViewProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Component size.
      */
-    size?: TreeViewVariantProps['size'];
+    size?: TreeViewVariantProps["size"];
     /**
      * Whether clicking the row expands the item, or only clicking the chevron expands it.
      * @default true

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const treeViewVariants: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {

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

@@ -1,30 +1,30 @@
-import { tv } from 'tailwind-variants';
+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'
+        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'
+                itemRow: "py-1 text-xs",
+                chevron: "w-3 h-3",
+                icon: "w-3 h-3",
             },
             md: {
-                itemRow: 'py-1.5 text-sm'
-            }
-        }
+                itemRow: "py-1.5 text-sm",
+            },
+        },
     },
     defaultVariants: {
-        size: 'md'
-    }
+        size: "md",
+    },
 });

package/dist/config.d.ts

@@ -1,4 +1,4 @@
-import type { FontsConfig } from './components/Fonts/fonts.types.js';
+import type { FontsConfig } from "./components/Fonts/fonts.types.js";
 /**
  * SV5UI Plus Global Configuration
  *

package/dist/config.js

@@ -32,32 +32,32 @@
  * Default icons used across components
  */
 export const iconsDefaults = {
-    loading: 'lucide:loader-circle',
-    chevronDown: 'lucide:chevron-down',
-    chevronLeft: 'lucide:chevron-left',
-    chevronRight: 'lucide:chevron-right',
-    chevronsLeft: 'lucide:chevrons-left',
-    chevronsRight: 'lucide:chevrons-right',
-    ellipsis: 'lucide:ellipsis',
-    close: 'lucide:x',
-    menu: 'lucide:menu',
-    external: 'lucide:arrow-up-right',
-    check: 'lucide:check',
-    light: 'lucide:sun',
-    dark: 'lucide:moon',
-    upload: 'lucide:upload',
-    file: 'lucide:file',
-    zoomIn: 'lucide:zoom-in',
-    trash: 'lucide:trash-2',
-    search: 'lucide:search',
-    star: 'lucide:star',
-    folder: 'lucide:folder',
-    folderOpen: 'lucide:folder-open',
-    sortAsc: 'lucide:chevron-up',
-    sortDesc: 'lucide:chevron-down',
-    sortDefault: 'lucide:chevrons-up-down',
-    panelLeft: 'lucide:panel-left',
-    dragHandle: 'lucide:grip-vertical'
+    loading: "lucide:loader-circle",
+    chevronDown: "lucide:chevron-down",
+    chevronLeft: "lucide:chevron-left",
+    chevronRight: "lucide:chevron-right",
+    chevronsLeft: "lucide:chevrons-left",
+    chevronsRight: "lucide:chevrons-right",
+    ellipsis: "lucide:ellipsis",
+    close: "lucide:x",
+    menu: "lucide:menu",
+    external: "lucide:arrow-up-right",
+    check: "lucide:check",
+    light: "lucide:sun",
+    dark: "lucide:moon",
+    upload: "lucide:upload",
+    file: "lucide:file",
+    zoomIn: "lucide:zoom-in",
+    trash: "lucide:trash-2",
+    search: "lucide:search",
+    star: "lucide:star",
+    folder: "lucide:folder",
+    folderOpen: "lucide:folder-open",
+    sortAsc: "lucide:chevron-up",
+    sortDesc: "lucide:chevron-down",
+    sortDefault: "lucide:chevrons-up-down",
+    panelLeft: "lucide:panel-left",
+    dragHandle: "lucide:grip-vertical",
 };
 // ==================== GLOBAL STATE ====================
 let globalConfig = {};
@@ -93,10 +93,10 @@ function deepMerge(target, source) {
         const sourceValue = source[key];
         const targetValue = target[key];
         if (sourceValue !== undefined &&
-            typeof sourceValue === 'object' &&
+            typeof sourceValue === "object" &&
             sourceValue !== null &&
             !Array.isArray(sourceValue) &&
-            typeof targetValue === 'object' &&
+            typeof targetValue === "object" &&
             targetValue !== null &&
             !Array.isArray(targetValue)) {
             result[key] = deepMerge(targetValue, sourceValue);

package/dist/editor.d.ts

@@ -1,2 +1,2 @@
 /** Compatibility proxy for the SV5UI editor subpath. */
-export * from 'sv5ui/editor';
+export * from "sv5ui/editor";

package/dist/editor.js

@@ -1,2 +1,2 @@
 /** Compatibility proxy for the SV5UI editor subpath. */
-export * from 'sv5ui/editor';
+export * from "sv5ui/editor";

package/dist/form/resolve-form-field-name.js

@@ -7,5 +7,5 @@ export function resolveFormFieldName(name, multiple) {
         return undefined;
     if (!multiple)
         return name;
-    return name.endsWith('[]') ? name : `${name}[]`;
+    return name.endsWith("[]") ? name : `${name}[]`;
 }

package/dist/hooks/internal/DragDropProviderScope.svelte

@@ -25,5 +25,5 @@ function handleDragEnd(event) {
 </script>
 
 <DragDropProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-    {@render children?.()}
+	{@render children?.()}
 </DragDropProvider>

package/dist/hooks/internal/DragDropProviderScope.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Snippet } from 'svelte';
+import { type Snippet } from "svelte";
 interface Props {
     children?: Snippet;
 }

package/dist/hooks/internal/SortableProvider.svelte

@@ -53,16 +53,21 @@ function handleDragEnd(event) {
 </script>
 
 {#if isGrouped}
-    {@render children?.()}
+	{@render children?.()}
 {:else}
-    <DragDropProvider {modifiers} onDragStart={handleDragStart} onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
-        {@render children?.()}
-        {#if overlay}
-            <DragOverlay>
-                {#snippet children(draggable)}
-                    {@render overlay({ item: draggable.data as T })}
-                {/snippet}
-            </DragOverlay>
-        {/if}
-    </DragDropProvider>
+	<DragDropProvider
+		{modifiers}
+		onDragStart={handleDragStart}
+		onDragOver={handleDragOver}
+		onDragEnd={handleDragEnd}
+	>
+		{@render children?.()}
+		{#if overlay}
+			<DragOverlay>
+				{#snippet children(draggable)}
+					{@render overlay({ item: draggable.data as T })}
+				{/snippet}
+			</DragOverlay>
+		{/if}
+	</DragDropProvider>
 {/if}

package/dist/hooks/internal/SortableProvider.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Snippet } from 'svelte';
+import { type Snippet } from "svelte";
 declare function $$render<T>(): {
     props: {
         children?: Snippet;

package/dist/hooks/internal/drag-drop-context.d.ts

@@ -1,4 +1,4 @@
-import type { DragPayload, UseDroppableOptions } from '../useDragDrop/useDragDrop.svelte.js';
+import type { DragPayload, UseDroppableOptions } from "../useDragDrop/useDragDrop.svelte.js";
 export declare const DRAG_DROP_CONTEXT_KEY: unique symbol;
 export interface DragDropContextValue {
     registerDroppable: <T>(id: string, options: UseDroppableOptions<T>) => void;

package/dist/hooks/internal/drag-drop-context.js

@@ -1 +1 @@
-export const DRAG_DROP_CONTEXT_KEY = Symbol('sv5ui-plus-drag-drop');
+export const DRAG_DROP_CONTEXT_KEY = Symbol("sv5ui-plus-drag-drop");

package/dist/hooks/internal/sortable-context.d.ts

@@ -1,5 +1,5 @@
-import type { UseSortableOptions } from '../useSortable/useSortable.svelte.js';
-import type { Snippet } from 'svelte';
+import type { UseSortableOptions } from "../useSortable/useSortable.svelte.js";
+import type { Snippet } from "svelte";
 export declare const SORTABLE_CONTEXT_KEY: unique symbol;
 export declare const SORTABLE_GROUP_CONTEXT_KEY: unique symbol;
 export interface SortableGroupContextValue {
@@ -15,11 +15,11 @@ export interface SortableGroupContextValue {
 }
 export interface SortableContextValue<T> {
     groupId: string;
-    getItems: UseSortableOptions<T>['getItems'];
-    getId: UseSortableOptions<T>['getId'];
-    onReorder: UseSortableOptions<T>['onReorder'];
+    getItems: UseSortableOptions<T>["getItems"];
+    getId: UseSortableOptions<T>["getId"];
+    onReorder: UseSortableOptions<T>["onReorder"];
     isDisabled: () => boolean;
-    getAxis: () => 'vertical' | 'horizontal' | 'grid';
+    getAxis: () => "vertical" | "horizontal" | "grid";
     getHandle: () => string | undefined;
     setDraggingId: (id: string | number | null) => void;
     getDraggingId: () => string | number | null;

package/dist/hooks/internal/sortable-context.js

@@ -1,2 +1,2 @@
-export const SORTABLE_CONTEXT_KEY = Symbol('sv5ui-plus-sortable');
-export const SORTABLE_GROUP_CONTEXT_KEY = Symbol('sv5ui-plus-sortable-group');
+export const SORTABLE_CONTEXT_KEY = Symbol("sv5ui-plus-sortable");
+export const SORTABLE_GROUP_CONTEXT_KEY = Symbol("sv5ui-plus-sortable-group");

package/dist/hooks/useDragDrop/index.d.ts

@@ -1 +1 @@
-export * from './useDragDrop.svelte.js';
+export * from "./useDragDrop.svelte.js";

package/dist/hooks/useDragDrop/index.js

@@ -1 +1 @@
-export * from './useDragDrop.svelte.js';
+export * from "./useDragDrop.svelte.js";

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

@@ -1,6 +1,6 @@
-import type { Action } from 'svelte/action';
-import type { Component } from 'svelte';
-import { type Snippet } from 'svelte';
+import type { Action } from "svelte/action";
+import type { Component } from "svelte";
+import { type Snippet } from "svelte";
 export interface DragPayload<T = unknown> {
     id: string;
     data?: T;