sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/SafeTable/SafeTable.svelte

@@ -25,78 +25,78 @@ function isPlainObject(value) {
 </script>
 
 <Table
-    bind:ref
-    bind:sorting={
-        () => (Array.isArray(sorting) ? sorting : localSorting),
-        (value) => {
-            const next = Array.isArray(value) ? value : []
-            sorting = next
-        }
-    }
-    bind:selectedRows={
-        () => (Array.isArray(selectedRows) ? selectedRows : localSelectedRows),
-        (value) => {
-            const next = (Array.isArray(value) ? value : []) as T[]
-            selectedRows = next
-        }
-    }
-    bind:pinnedRows={
-        () => (Array.isArray(pinnedRows) ? pinnedRows : localPinnedRows),
-        (value) => {
-            const next = Array.isArray(value) ? value : []
-            pinnedRows = next
-        }
-    }
-    bind:expandedRows={
-        () => (Array.isArray(expandedRows) ? expandedRows : localExpandedRows),
-        (value) => {
-            const next = Array.isArray(value) ? value : []
-            expandedRows = next
-        }
-    }
-    bind:columnFilters={
-        () => (isPlainObject(columnFilters) ? columnFilters : localColumnFilters),
-        (value) => {
-            columnFilters = isPlainObject(value)
-                ? (value as Record<string, string>)
-                : ({} as Record<string, string>)
-        }
-    }
-    bind:columnSizing={
-        () => (isPlainObject(columnSizing) ? columnSizing : localColumnSizing),
-        (value) => {
-            columnSizing = isPlainObject(value)
-                ? (value as Record<string, number>)
-                : ({} as Record<string, number>)
-        }
-    }
-    bind:globalFilter={
-        () => (typeof globalFilter === 'string' ? globalFilter : localGlobalFilter),
-        (value) => {
-            globalFilter = typeof value === 'string' ? value : ''
-        }
-    }
-    bind:page={
-        () => (typeof page === 'number' && Number.isFinite(page) ? page : localPage),
-        (value) => {
-            page = typeof value === 'number' && Number.isFinite(value) ? value : 0
-        }
-    }
-    bind:columnVisibility={
-        () => (isPlainObject(columnVisibility) ? columnVisibility : localColumnVisibility),
-        (value) => {
-            columnVisibility = isPlainObject(value)
-                ? (value as Record<string, boolean>)
-                : ({} as Record<string, boolean>)
-        }
-    }
-    bind:columnPinning={
-        () => (isPlainObject(columnPinning) ? columnPinning : localColumnPinning),
-        (value) => {
-            columnPinning = isPlainObject(value)
-                ? (value as { left?: string[]; right?: string[] })
-                : ({} as { left?: string[]; right?: string[] })
-        }
-    }
-    {...rest}
+	bind:ref
+	bind:sorting={
+		() => (Array.isArray(sorting) ? sorting : localSorting),
+		(value) => {
+			const next = Array.isArray(value) ? value : [];
+			sorting = next;
+		}
+	}
+	bind:selectedRows={
+		() => (Array.isArray(selectedRows) ? selectedRows : localSelectedRows),
+		(value) => {
+			const next = (Array.isArray(value) ? value : []) as T[];
+			selectedRows = next;
+		}
+	}
+	bind:pinnedRows={
+		() => (Array.isArray(pinnedRows) ? pinnedRows : localPinnedRows),
+		(value) => {
+			const next = Array.isArray(value) ? value : [];
+			pinnedRows = next;
+		}
+	}
+	bind:expandedRows={
+		() => (Array.isArray(expandedRows) ? expandedRows : localExpandedRows),
+		(value) => {
+			const next = Array.isArray(value) ? value : [];
+			expandedRows = next;
+		}
+	}
+	bind:columnFilters={
+		() => (isPlainObject(columnFilters) ? columnFilters : localColumnFilters),
+		(value) => {
+			columnFilters = isPlainObject(value)
+				? (value as Record<string, string>)
+				: ({} as Record<string, string>);
+		}
+	}
+	bind:columnSizing={
+		() => (isPlainObject(columnSizing) ? columnSizing : localColumnSizing),
+		(value) => {
+			columnSizing = isPlainObject(value)
+				? (value as Record<string, number>)
+				: ({} as Record<string, number>);
+		}
+	}
+	bind:globalFilter={
+		() => (typeof globalFilter === "string" ? globalFilter : localGlobalFilter),
+		(value) => {
+			globalFilter = typeof value === "string" ? value : "";
+		}
+	}
+	bind:page={
+		() => (typeof page === "number" && Number.isFinite(page) ? page : localPage),
+		(value) => {
+			page = typeof value === "number" && Number.isFinite(value) ? value : 0;
+		}
+	}
+	bind:columnVisibility={
+		() => (isPlainObject(columnVisibility) ? columnVisibility : localColumnVisibility),
+		(value) => {
+			columnVisibility = isPlainObject(value)
+				? (value as Record<string, boolean>)
+				: ({} as Record<string, boolean>);
+		}
+	}
+	bind:columnPinning={
+		() => (isPlainObject(columnPinning) ? columnPinning : localColumnPinning),
+		(value) => {
+			columnPinning = isPlainObject(value)
+				? (value as { left?: string[]; right?: string[] })
+				: ({} as { left?: string[]; right?: string[] });
+		}
+	}
+	{...rest}
 />

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

@@ -1,5 +1,5 @@
-export type { SafeTableProps as Props } from './safe-table.types.js';
-import type { SafeTableProps } from './safe-table.types.js';
+export type { SafeTableProps as Props } from "./safe-table.types.js";
+import type { SafeTableProps } from "./safe-table.types.js";
 declare function $$render<T extends Record<string, any>>(): {
     props: SafeTableProps<T>;
     exports: {};

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

@@ -1,2 +1,2 @@
-export { default as SafeTable } from './SafeTable.svelte';
-export type { SafeTableProps } from './safe-table.types.js';
+export { default as SafeTable } from "./SafeTable.svelte";
+export type { SafeTableProps } from "./safe-table.types.js";

package/dist/components/SafeTable/index.js

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

package/dist/components/SafeTable/safe-table.types.d.ts

@@ -1,3 +1,3 @@
-import type { TableProps } from 'sv5ui';
+import type { TableProps } from "sv5ui";
 /** Same surface as `sv5ui` Table — wrapper only hardens bindable array defaults. */
 export type SafeTableProps<T extends Record<string, any> = Record<string, any>> = TableProps<T>;

package/dist/components/Search/Search.svelte

@@ -26,69 +26,69 @@ onMount(() => {
 });
 </script>
 
-{#if variant === 'input'}
-    <Input
-        type="search"
-        {placeholder}
-        bind:value
-        leadingIcon="lucide:search"
-        class={className}
-        {...(rest as any)}
-    >
-        {#snippet trailingSlot()}
-            {#if kbd.length > 0}
-                <div class="pointer-events-none flex items-center gap-1">
-                    {#each kbd as key}
-                        <Kbd value={key} size="sm" />
-                    {/each}
-                </div>
-            {/if}
-        {/snippet}
-    </Input>
-{:else if variant === 'modal'}
-    <button
-        type="button"
-        class={twMerge(
-            'flex h-10 w-full items-center justify-between rounded-md border border-outline-variant bg-surface px-3 py-2 text-sm text-on-surface-variant shadow-sm transition-colors hover:bg-surface-container hover:text-on-surface focus:outline-none focus:ring-2 focus:ring-primary',
-            className
-        )}
-        onclick={() => (open = true)}
-        {...(rest as any)}
-    >
-        <span class="flex items-center gap-2">
-            <span class="iconify lucide--search text-lg"></span>
-            <span>{placeholder}</span>
-        </span>
-        {#if kbd.length > 0}
-            <span class="flex items-center gap-1">
-                {#each kbd as key}
-                    <Kbd value={key} size="sm" />
-                {/each}
-            </span>
-        {/if}
-    </button>
-{:else if variant === 'button'}
-    <Button
-        variant="ghost"
-        color="surface"
-        leadingIcon="lucide:search"
-        class={className}
-        onclick={() => (open = true)}
-        {...(rest as any)}
-    />
+{#if variant === "input"}
+	<Input
+		type="search"
+		{placeholder}
+		bind:value
+		leadingIcon="lucide:search"
+		class={className}
+		{...rest as any}
+	>
+		{#snippet trailingSlot()}
+			{#if kbd.length > 0}
+				<div class="pointer-events-none flex items-center gap-1">
+					{#each kbd as key}
+						<Kbd value={key} size="sm" />
+					{/each}
+				</div>
+			{/if}
+		{/snippet}
+	</Input>
+{:else if variant === "modal"}
+	<button
+		type="button"
+		class={twMerge(
+			"flex h-10 w-full items-center justify-between rounded-md border border-outline-variant bg-surface px-3 py-2 text-sm text-on-surface-variant shadow-sm transition-colors hover:bg-surface-container hover:text-on-surface focus:outline-none focus:ring-2 focus:ring-primary",
+			className,
+		)}
+		onclick={() => (open = true)}
+		{...rest as any}
+	>
+		<span class="flex items-center gap-2">
+			<span class="iconify lucide--search text-lg"></span>
+			<span>{placeholder}</span>
+		</span>
+		{#if kbd.length > 0}
+			<span class="flex items-center gap-1">
+				{#each kbd as key}
+					<Kbd value={key} size="sm" />
+				{/each}
+			</span>
+		{/if}
+	</button>
+{:else if variant === "button"}
+	<Button
+		variant="ghost"
+		color="surface"
+		leadingIcon="lucide:search"
+		class={className}
+		onclick={() => (open = true)}
+		{...rest as any}
+	/>
 {/if}
 
-{#if variant === 'modal' || variant === 'button'}
-    <Modal bind:open size="lg">
-        {#snippet content()}
-            <Command
-                {groups}
-                bind:search={value}
-                placeholder="Type a command or search..."
-                ui={{
-                    root: 'border-0 shadow-none'
-                }}
-            />
-        {/snippet}
-    </Modal>
+{#if variant === "modal" || variant === "button"}
+	<Modal bind:open size="lg">
+		{#snippet content()}
+			<Command
+				{groups}
+				bind:search={value}
+				placeholder="Type a command or search..."
+				ui={{
+					root: "border-0 shadow-none",
+				}}
+			/>
+		{/snippet}
+	</Modal>
 {/if}

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

@@ -1,4 +1,4 @@
-import type { SearchProps } from './search.types.js';
+import type { SearchProps } from "./search.types.js";
 declare const Search: import("svelte").Component<SearchProps, {}, "value">;
 type Search = ReturnType<typeof Search>;
 export default Search;

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

@@ -1,2 +1,2 @@
-export { default as Search } from './Search.svelte';
-export type * from './search.types.js';
+export { default as Search } from "./Search.svelte";
+export type * from "./search.types.js";

package/dist/components/Search/index.js

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

package/dist/components/Search/search.types.d.ts

@@ -1,8 +1,8 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { CommandGroup } from 'sv5ui';
-export type SearchVariant = 'input' | 'modal' | 'button';
-export interface SearchProps extends Omit<HTMLAttributes<HTMLInputElement | HTMLButtonElement>, 'class'> {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ClassNameValue } from "tailwind-merge";
+import type { CommandGroup } from "sv5ui";
+export type SearchVariant = "input" | "modal" | "button";
+export interface SearchProps extends Omit<HTMLAttributes<HTMLInputElement | HTMLButtonElement>, "class"> {
     /**
      * Determines the visual style and behavior of the search component.
      * - `input`: A standard input box.

package/dist/components/SortableGroup/SortableGroup.svelte

@@ -40,14 +40,20 @@ function handleDragEnd(event, manager) {
 }
 </script>
 
-<DragDropProvider {...rest} onDragStart={handleDragStart} onDragEnd={handleDragEnd} {onDragMove} {onDragOver}>
-    {@render children?.()}
-    <DragOverlay>
-        {#snippet children(draggable)}
-            {@const snippet = ctx.getOverlay(draggingGroupId ?? '')}
-            {#if snippet}
-                {@render snippet({ item: draggable.data })}
-            {/if}
-        {/snippet}
-    </DragOverlay>
+<DragDropProvider
+	{...rest}
+	onDragStart={handleDragStart}
+	onDragEnd={handleDragEnd}
+	{onDragMove}
+	{onDragOver}
+>
+	{@render children?.()}
+	<DragOverlay>
+		{#snippet children(draggable)}
+			{@const snippet = ctx.getOverlay(draggingGroupId ?? "")}
+			{#if snippet}
+				{@render snippet({ item: draggable.data })}
+			{/if}
+		{/snippet}
+	</DragOverlay>
 </DragDropProvider>

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

@@ -1,6 +1,6 @@
-import { type Snippet } from 'svelte';
-import type { DragStartEvent, DragEndEvent, DragOverEvent, DragMoveEvent, DragDropManagerInput } from '@dnd-kit/dom';
-import type { DragDropManager } from '@dnd-kit/dom';
+import { type Snippet } from "svelte";
+import type { DragStartEvent, DragEndEvent, DragOverEvent, DragMoveEvent, DragDropManagerInput } from "@dnd-kit/dom";
+import type { DragDropManager } from "@dnd-kit/dom";
 interface Props extends DragDropManagerInput {
     children?: Snippet;
     onDragStart?: (event: DragStartEvent, manager: DragDropManager) => void;

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

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

package/dist/components/SortableGroup/index.js

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

package/dist/components/SortableList/SortableList.svelte

@@ -22,60 +22,63 @@ const itemClasses = $derived(twMerge("relative flex items-center gap-3 rounded-l
 </script>
 
 <sortable.Provider {overlay}>
-    <div use:sortable.container class={listClass} role="list">
-        {#each items as item, index (getKey(item))}
-            {@const id = getKey(item)}
-            {@const dragging = sortable.draggingId === String(id)}
-            <div
-                use:sortable.item={{ index, item }}
-                role="listitem"
-                class={twMerge(
-                    'relative sortable-item',
-                    itemClasses,
-                    dragging && (overlay ? 'bg-transparent border-transparent' : 'z-10 opacity-95 shadow-md')
-                )}
-                aria-grabbed={dragging}
-            >
-                {#if overlay && dragging}
-                    <div class="absolute inset-0 z-10 rounded-[inherit] border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none"></div>
-                {/if}
-                <div class={['flex w-full items-center gap-3', overlay && dragging && 'invisible']}>
-                    {#if handle === true}
-                        <button
-                            type="button"
-                            data-sortable-handle
-                            class="inline-flex shrink-0 cursor-grab rounded-md p-1 text-on-surface-variant hover:bg-surface-container-high active:cursor-grabbing"
-                            aria-label="Drag to reorder"
-                        >
-                            <Icon name="lucide:grip-vertical" size="16" />
-                        </button>
-                    {/if}
-                    {@render children({ item, index, dragging })}
-                </div>
-            </div>
-        {/each}
-    </div>
+	<div use:sortable.container class={listClass} role="list">
+		{#each items as item, index (getKey(item))}
+			{@const id = getKey(item)}
+			{@const dragging = sortable.draggingId === String(id)}
+			<div
+				use:sortable.item={{ index, item }}
+				role="listitem"
+				class={twMerge(
+					"relative sortable-item",
+					itemClasses,
+					dragging && (overlay ? "bg-transparent border-transparent" : "z-10 opacity-95 shadow-md"),
+				)}
+				aria-grabbed={dragging}
+			>
+				{#if overlay && dragging}
+					<div
+						class="absolute inset-0 z-10 rounded-[inherit] border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none"
+					></div>
+				{/if}
+				<div class={["flex w-full items-center gap-3", overlay && dragging && "invisible"]}>
+					{#if handle === true}
+						<button
+							type="button"
+							data-sortable-handle
+							class="inline-flex shrink-0 cursor-grab rounded-md p-1 text-on-surface-variant hover:bg-surface-container-high active:cursor-grabbing"
+							aria-label="Drag to reorder"
+						>
+							<Icon name="lucide:grip-vertical" size="16" />
+						</button>
+					{/if}
+					{@render children({ item, index, dragging })}
+				</div>
+			</div>
+		{/each}
+	</div>
 </sortable.Provider>
 
 <style>
-    :global([data-sortable-active='true']) {
-        user-select: none;
-    }
+	:global([data-sortable-active="true"]) {
+		user-select: none;
+	}
 
-    /*
+	/*
      * dnd-kit animates items via Web Animations API using the CSS `translate` property.
      * Using will-change:translate tells the browser to promote these elements to their own
      * GPU layer so the WAAPI animation (smooth push/shift) runs without layout thrashing.
      * Do NOT add CSS transition:transform here — it conflicts with WAAPI and causes jank.
      */
-    :global(.sortable-item) {
-        will-change: translate;
-    }
+	:global(.sortable-item) {
+		will-change: translate;
+	}
 
-    /* Smooth color/opacity transitions for the dragging state indicator */
-    :global(.sortable-item:not([aria-grabbed='true'])) {
-        transition: background-color 150ms ease,
-                    border-color 150ms ease,
-                    opacity 150ms ease;
-    }
+	/* Smooth color/opacity transitions for the dragging state indicator */
+	:global(.sortable-item:not([aria-grabbed="true"])) {
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			opacity 150ms ease;
+	}
 </style>

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

@@ -1,5 +1,5 @@
-export type { SortableListProps } from './sortable-list.types.js';
-import type { SortableListProps } from './sortable-list.types.js';
+export type { SortableListProps } from "./sortable-list.types.js";
+import type { SortableListProps } from "./sortable-list.types.js";
 declare function $$render<T>(): {
     props: SortableListProps<T>;
     exports: {};

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

@@ -1,2 +1,2 @@
-export { default as SortableList } from './SortableList.svelte';
-export type { SortableListProps } from './sortable-list.types.js';
+export { default as SortableList } from "./SortableList.svelte";
+export type { SortableListProps } from "./sortable-list.types.js";

package/dist/components/SortableList/index.js

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

package/dist/components/SortableList/sortable-list.types.d.ts

@@ -1,10 +1,10 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import type { Snippet } from "svelte";
+import type { ClassNameValue } from "tailwind-merge";
 export interface SortableListProps<T> {
     items: T[];
     getKey: (item: T) => string | number;
     onReorder?: (items: T[]) => void;
-    axis?: 'vertical' | 'horizontal' | 'grid';
+    axis?: "vertical" | "horizontal" | "grid";
     handle?: boolean | string;
     disabled?: boolean;
     class?: ClassNameValue;

package/dist/components/Spotlight/Spotlight.svelte

@@ -13,19 +13,19 @@ function handleMouseMove(e) {
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div 
-    class={twMerge(styles.root() as string, className)}
-    onmousemove={handleMouseMove}
-    {...restProps}
+<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>
+	<!-- 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>
+	<!-- Content -->
+	<div class={styles.content() as string}>
+		{@render children?.()}
+	</div>
 </div>

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

@@ -1,4 +1,4 @@
-import type { SpotlightProps } from './spotlight.types.js';
+import type { SpotlightProps } from "./spotlight.types.js";
 declare const Spotlight: import("svelte").Component<SpotlightProps, {}, "">;
 type Spotlight = ReturnType<typeof Spotlight>;
 export default Spotlight;

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

@@ -1,4 +1,4 @@
-import Spotlight from './Spotlight.svelte';
+import Spotlight from "./Spotlight.svelte";
 export { Spotlight };
-export * from './spotlight.types.js';
-export * from './spotlight.variants.js';
+export * from "./spotlight.types.js";
+export * from "./spotlight.variants.js";

package/dist/components/Spotlight/index.js

@@ -1,4 +1,4 @@
-import Spotlight from './Spotlight.svelte';
+import Spotlight from "./Spotlight.svelte";
 export { Spotlight };
-export * from './spotlight.types.js';
-export * from './spotlight.variants.js';
+export * from "./spotlight.types.js";
+export * from "./spotlight.variants.js";

package/dist/components/Spotlight/spotlight.types.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the spotlight in pixels.

package/dist/components/Spotlight/spotlight.variants.d.ts

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