sv5ui-plus 4.0.0

package/dist/config.js

@@ -0,0 +1,124 @@
+/**
+ * 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' }
+ * })
+ * ```
+ */
+// ==================== ICONS DEFAULTS ====================
+/**
+ * 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'
+};
+// ==================== GLOBAL STATE ====================
+let globalConfig = {};
+let cachedConfigs = {};
+// ==================== PUBLIC API ====================
+/**
+ * Define global configuration for SV5UI Plus components
+ */
+export function defineConfig(config) {
+    globalConfig = config;
+    cachedConfigs = {};
+}
+/**
+ * Get the current global configuration
+ */
+export function getConfig() {
+    return globalConfig;
+}
+/**
+ * Reset configuration to defaults
+ */
+export function resetConfig() {
+    globalConfig = {};
+    cachedConfigs = {};
+}
+// ==================== COMPONENT CONFIG GETTER ====================
+/**
+ * Deep merge utility for config objects
+ */
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key in source) {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (sourceValue !== undefined &&
+            typeof sourceValue === 'object' &&
+            sourceValue !== null &&
+            !Array.isArray(sourceValue) &&
+            typeof targetValue === 'object' &&
+            targetValue !== null &&
+            !Array.isArray(targetValue)) {
+            result[key] = deepMerge(targetValue, sourceValue);
+        }
+        else if (sourceValue !== undefined) {
+            result[key] = sourceValue;
+        }
+    }
+    return result;
+}
+/**
+ * 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 function getComponentConfig(component, defaults) {
+    if (!(component in cachedConfigs)) {
+        const userConfig = globalConfig[component];
+        cachedConfigs[component] = userConfig
+            ? deepMerge(defaults, userConfig)
+            : defaults;
+    }
+    return cachedConfigs[component];
+}

package/dist/editor.d.ts

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

package/dist/editor.js

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

package/dist/form/resolve-form-field-name.d.ts

@@ -0,0 +1,5 @@
+/**
+ * ชื่อฟิลด์สำหรับ form submission — ใส่ suffix `[]` เมื่อส่งหลายค่า
+ * เพื่อให้เข้ากับ SvelteKit `convert_formdata` และ HTML FormData
+ */
+export declare function resolveFormFieldName(name: string | undefined, multiple: boolean): string | undefined;

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

@@ -0,0 +1,11 @@
+/**
+ * ชื่อฟิลด์สำหรับ form submission — ใส่ suffix `[]` เมื่อส่งหลายค่า
+ * เพื่อให้เข้ากับ SvelteKit `convert_formdata` และ HTML FormData
+ */
+export function resolveFormFieldName(name, multiple) {
+    if (!name)
+        return undefined;
+    if (!multiple)
+        return name;
+    return name.endsWith('[]') ? name : `${name}[]`;
+}

package/dist/hooks/internal/DragDropProviderScope.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { DragDropProvider } from "@dnd-kit/svelte";
+import { getContext } from "svelte";
+import { DRAG_DROP_CONTEXT_KEY } from "./drag-drop-context.js";
+let { children } = $props();
+const ctx = getContext(DRAG_DROP_CONTEXT_KEY);
+function handleDragStart(event) {
+	const source = event.operation.source;
+	if (!source) return;
+	ctx.setDraggingId(String(source.id));
+}
+function handleDragEnd(event) {
+	const source = event.operation.source;
+	const target = event.operation.target;
+	ctx.setDraggingId(null);
+	if (!source || !target) return;
+	const zone = ctx.getDroppable(String(target.id));
+	if (!zone) return;
+	const payload = ctx.toPayload({
+		id: source.id,
+		data: source.data
+	});
+	if (zone.accept && !zone.accept(payload)) return;
+	zone.onDrop(payload);
+}
+</script>
+
+<DragDropProvider onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+    {@render children?.()}
+</DragDropProvider>

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

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const DragDropProviderScope: import("svelte").Component<Props, {}, "">;
+type DragDropProviderScope = ReturnType<typeof DragDropProviderScope>;
+export default DragDropProviderScope;

package/dist/hooks/internal/SortableProvider.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" generics="T">import { DragDropProvider, DragOverlay } from "@dnd-kit/svelte";
+import { RestrictToHorizontalAxis, RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { isSortableOperation } from "@dnd-kit/dom/sortable";
+import { getContext } from "svelte";
+import { moveArrayItem } from "../useSortable/sortable-utils.js";
+import { SORTABLE_CONTEXT_KEY, SORTABLE_GROUP_CONTEXT_KEY } from "./sortable-context.js";
+let { children, overlay } = $props();
+const ctx = getContext(SORTABLE_CONTEXT_KEY);
+const groupCtx = getContext(SORTABLE_GROUP_CONTEXT_KEY);
+const isGrouped = !!groupCtx;
+// Register/unregister overlay snippet with the parent SortableGroup
+$effect(() => {
+	if (groupCtx && overlay) {
+		groupCtx.registerOverlay(ctx.groupId, overlay);
+		return () => {
+			groupCtx.unregisterOverlay(ctx.groupId);
+		};
+	}
+});
+const modifiers = $derived(ctx.getAxis() === "horizontal" ? [RestrictToHorizontalAxis] : ctx.getAxis() === "vertical" ? [RestrictToVerticalAxis] : []);
+function handleDragStart(event) {
+	const source = event.operation.source;
+	if (!source) return;
+	const items = ctx.getItems();
+	const ownsItem = items.some((entry) => String(ctx.getId(entry)) === String(source.id));
+	if (!ownsItem) return;
+	ctx.setDraggingId(source.id);
+	groupCtx?.setDraggingGroupId(ctx.groupId);
+}
+function handleDragOver(event) {
+	// During drag, reorder items optimistically so Svelte re-renders them
+	// in the new order — dnd-kit then animates the transition via WAAPI.
+	// Without this, items only reorder on drop and there is no push animation.
+	if (ctx.isDisabled() || !isSortableOperation(event.operation)) return;
+	const { source, target } = event.operation;
+	if (!source || !target || source.index === target.index) return;
+	// Only handle items that belong to this list
+	const items = ctx.getItems();
+	const sourceInList = items.some((entry) => String(ctx.getId(entry)) === String(source.id));
+	if (!sourceInList) return;
+	ctx.onReorder(moveArrayItem(items, source.index, target.index));
+}
+function handleDragEnd(event) {
+	const { source } = event.operation;
+	// Let the drop animation play (250ms default) before clearing draggingId
+	// Items are already in correct order from handleDragOver — nothing to reorder here.
+	setTimeout(() => {
+		if (ctx.getDraggingId() === source?.id) {
+			ctx.setDraggingId(null);
+		}
+	}, 250);
+}
+</script>
+
+{#if isGrouped}
+    {@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>
+{/if}

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

@@ -0,0 +1,30 @@
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        children?: Snippet;
+        overlay?: Snippet<[{
+            item: T;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableProvider: $$IsomorphicComponent;
+type SortableProvider<T> = InstanceType<typeof SortableProvider<T>>;
+export default SortableProvider;

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

@@ -0,0 +1,12 @@
+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;
+    unregisterDroppable: (id: string) => void;
+    setDraggingId: (id: string | null) => void;
+    getDroppable: <T>(id: string) => UseDroppableOptions<T> | undefined;
+    toPayload: (source: {
+        id: string | number;
+        data?: unknown;
+    }) => DragPayload;
+}

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

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

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

@@ -0,0 +1,26 @@
+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 {
+    draggingId: string | number | null;
+    registerOverlay: (groupId: string, snippet: Snippet<[{
+        item: unknown;
+    }]>) => void;
+    unregisterOverlay: (groupId: string) => void;
+    getOverlay: (groupId: string) => Snippet<[{
+        item: unknown;
+    }]> | undefined;
+    setDraggingGroupId: (groupId: string | null) => void;
+}
+export interface SortableContextValue<T> {
+    groupId: string;
+    getItems: UseSortableOptions<T>['getItems'];
+    getId: UseSortableOptions<T>['getId'];
+    onReorder: UseSortableOptions<T>['onReorder'];
+    isDisabled: () => boolean;
+    getAxis: () => 'vertical' | 'horizontal' | 'grid';
+    getHandle: () => string | undefined;
+    setDraggingId: (id: string | number | null) => void;
+    getDraggingId: () => string | number | null;
+}

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

@@ -0,0 +1,2 @@
+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

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

package/dist/hooks/useDragDrop/index.js

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

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

@@ -0,0 +1,40 @@
+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;
+}
+export interface UseDraggableOptions<T = unknown> {
+    /** Unique id for the draggable element. */
+    id: string;
+    /** Source drop zone id — used as the draggable type for cross-container matching. */
+    container: string;
+    data?: T;
+    disabled?: boolean | (() => boolean);
+    handle?: string;
+}
+export interface UseDroppableOptions<T = unknown> {
+    id: string;
+    onDrop: (payload: DragPayload<T>) => void;
+    accept?: (payload: DragPayload<T>) => boolean;
+    disabled?: boolean | (() => boolean);
+}
+export interface UseDragDropReturn {
+    /**
+     * Wrap drag-and-drop markup with this provider.
+     * Required — [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte) needs a DragDropProvider ancestor.
+     */
+    readonly Provider: Component<{
+        children?: Snippet;
+    }>;
+    readonly draggingId: string | null;
+    readonly draggable: Action<HTMLElement, UseDraggableOptions>;
+    readonly droppable: Action<HTMLElement, UseDroppableOptions>;
+}
+/**
+ * Cross-container drag and drop powered by [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte).
+ *
+ * Wrap markup in `dragDrop.Provider`, then attach `draggable` and `droppable` actions.
+ */
+export declare function useDragDrop(): UseDragDropReturn;

package/dist/hooks/useDragDrop/useDragDrop.svelte.js

@@ -0,0 +1,128 @@
+import { setContext } from 'svelte';
+import { createDraggable, createDroppable } from '@dnd-kit/svelte';
+import DragDropProviderScope from '../internal/DragDropProviderScope.svelte';
+import { DRAG_DROP_CONTEXT_KEY } from '../internal/drag-drop-context.js';
+/**
+ * Cross-container drag and drop powered by [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte).
+ *
+ * Wrap markup in `dragDrop.Provider`, then attach `draggable` and `droppable` actions.
+ */
+export function useDragDrop() {
+    let draggingId = $state(null);
+    const droppables = new Map();
+    const context = {
+        registerDroppable(id, options) {
+            droppables.set(id, options);
+        },
+        unregisterDroppable(id) {
+            droppables.delete(id);
+        },
+        setDraggingId(id) {
+            draggingId = id;
+        },
+        getDroppable(id) {
+            return droppables.get(id);
+        },
+        toPayload(source) {
+            return {
+                id: String(source.id),
+                data: source.data
+            };
+        }
+    };
+    setContext(DRAG_DROP_CONTEXT_KEY, context);
+    const draggableAction = (node, initialOptions) => {
+        let currentOptions = initialOptions;
+        function isDisabled() {
+            return typeof currentOptions.disabled === 'function'
+                ? currentOptions.disabled()
+                : (currentOptions.disabled ?? false);
+        }
+        const drag = createDraggable({
+            id: currentOptions.id,
+            type: currentOptions.container,
+            data: (currentOptions.data ?? {}),
+            disabled: isDisabled()
+        });
+        const detach = drag.attach(node);
+        let detachHandle;
+        function bindHandle() {
+            detachHandle?.();
+            const selector = currentOptions.handle;
+            if (!selector) {
+                drag.draggable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            const handle = node.querySelector(selector);
+            if (!handle) {
+                drag.draggable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            detachHandle = drag.attachHandle(handle);
+        }
+        bindHandle();
+        return {
+            update(newOptions) {
+                currentOptions = newOptions;
+                drag.draggable.id = newOptions.id;
+                drag.draggable.type = newOptions.container;
+                drag.draggable.data = (newOptions.data ?? {});
+                drag.draggable.disabled = isDisabled();
+                bindHandle();
+            },
+            destroy() {
+                detach();
+                detachHandle?.();
+                node.removeAttribute('data-dragging');
+                if (draggingId === currentOptions.id) {
+                    draggingId = null;
+                }
+            }
+        };
+    };
+    const droppableAction = (node, initialOptions) => {
+        let currentOptions = initialOptions;
+        function isDisabled() {
+            return typeof currentOptions.disabled === 'function'
+                ? currentOptions.disabled()
+                : (currentOptions.disabled ?? false);
+        }
+        context.registerDroppable(currentOptions.id, currentOptions);
+        const drop = createDroppable({
+            id: currentOptions.id,
+            disabled: isDisabled(),
+            accept(source) {
+                const payload = context.toPayload({ id: source.id, data: source.data });
+                if (currentOptions.accept) {
+                    return currentOptions.accept(payload);
+                }
+                return true;
+            }
+        });
+        const detach = drop.attach(node);
+        return {
+            update(newOptions) {
+                context.unregisterDroppable(currentOptions.id);
+                currentOptions = newOptions;
+                context.registerDroppable(currentOptions.id, currentOptions);
+                drop.droppable.id = newOptions.id;
+                drop.droppable.disabled = isDisabled();
+            },
+            destroy() {
+                detach();
+                context.unregisterDroppable(currentOptions.id);
+                node.removeAttribute('data-droppable-active');
+            }
+        };
+    };
+    return {
+        get draggingId() {
+            return draggingId;
+        },
+        Provider: DragDropProviderScope,
+        draggable: draggableAction,
+        droppable: droppableAction
+    };
+}

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

@@ -0,0 +1,2 @@
+export * from './useSortable.svelte.js';
+export { moveArrayItem } from './sortable-utils.js';

package/dist/hooks/useSortable/index.js

@@ -0,0 +1,2 @@
+export * from './useSortable.svelte.js';
+export { moveArrayItem } from './sortable-utils.js';

package/dist/hooks/useSortable/sortable-utils.d.ts

@@ -0,0 +1 @@
+export declare function moveArrayItem<T>(items: T[], fromIndex: number, toIndex: number): T[];

package/dist/hooks/useSortable/sortable-utils.js

@@ -0,0 +1,13 @@
+export function moveArrayItem(items, fromIndex, toIndex) {
+    if (fromIndex === toIndex ||
+        fromIndex < 0 ||
+        toIndex < 0 ||
+        fromIndex >= items.length ||
+        toIndex >= items.length) {
+        return items;
+    }
+    const next = [...items];
+    const [removed] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, removed);
+    return next;
+}

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

@@ -0,0 +1,60 @@
+import type { Action } from 'svelte/action';
+import type { Component } from 'svelte';
+import { type Snippet } from 'svelte';
+export interface UseSortableItemParams<T> {
+    index: number;
+    item: T;
+}
+export interface UseSortableOptions<T> {
+    /** Reactive getter for the current item array. */
+    getItems: () => T[];
+    /** Stable id for each item — used for keys and reorder tracking. */
+    getId: (item: T) => string | number;
+    /** Called with the reordered array after a successful drop. */
+    onReorder: (items: T[]) => void;
+    /**
+     * Drag axis.
+     * @default 'vertical'
+     */
+    axis?: 'vertical' | 'horizontal' | 'grid' | (() => 'vertical' | 'horizontal' | 'grid');
+    /**
+     * CSS selector for the drag handle, relative to each item.
+     * When omitted, the whole item is draggable.
+     * @example '[data-sortable-handle]'
+     */
+    handle?: string | (() => string | undefined);
+    /**
+     * Disable sorting.
+     * @default false
+     */
+    disabled?: boolean | (() => boolean);
+    /**
+     * Group ID for the sortable list. Used for cross-list drag and drop.
+     * If not provided, a unique ID is generated.
+     */
+    group?: string | (() => string | undefined);
+}
+export interface UseSortableReturn<T> {
+    /**
+     * Wrap sortable markup with this provider.
+     * Required — [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte) needs a DragDropProvider ancestor.
+     */
+    readonly Provider: Component<{
+        children?: Snippet;
+        overlay?: Snippet<[{
+            item: T;
+        }]>;
+    }>;
+    /** Attach to the list container element (optional wrapper). */
+    readonly container: Action<HTMLElement>;
+    /** Attach to each sortable row with the current index and item. */
+    readonly item: Action<HTMLElement, UseSortableItemParams<T>>;
+    /** Id of the item currently being dragged, or null. */
+    readonly draggingId: string | number | null;
+}
+/**
+ * Sortable list hook powered by [@dnd-kit/svelte](https://clauderic-dnd-kit.mintlify.app/frameworks/svelte).
+ *
+ * Wrap markup in `sortable.Provider`, then attach `use:sortable.item` to each row.
+ */
+export declare function useSortable<T>(options: UseSortableOptions<T>): UseSortableReturn<T>;