svelora 3.0.15 → 3.0.16

package/dist/components/Toast/toast.types.d.ts

@@ -1,14 +1,10 @@
-import type { ToasterProps as SonnerToasterProps } from 'svelte-sonner';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { Snippet } from 'svelte';
+import type { DefaultToastOptions, ToastPosition } from './internal/french-toast/core/types.js';
 import type { ToastVariant } from './toast.variants.js';
-export type ToasterProps = Omit<SonnerToasterProps, 'class' | 'toastOptions' | 'richColors'> & {
+export type ToasterProps = {
     /**
      * The visual style variant.
-     * - `outline`: Border with surface background, semantic border accent per type (default)
-     * - `soft`: Light tinted background per type
-     * - `subtle`: Light tinted background + semantic border per type
-     * - `solid`: Full semantic color background per type
-     * - `accent`: Left color stripe with surface background
      * @default 'outline'
      */
     variant?: ToastVariant;
@@ -16,4 +12,21 @@ export type ToasterProps = Omit<SonnerToasterProps, 'class' | 'toastOptions' | '
      * Additional CSS classes for the toaster container.
      */
     class?: ClassNameValue;
+    position?: ToastPosition;
+    duration?: number;
+    closeButton?: boolean;
+    /** @deprecated French-toast does not support expand stacking. Kept for API compatibility. */
+    expand?: boolean;
+    /** @deprecated French-toast manages visible toasts internally. Kept for API compatibility. */
+    visibleToasts?: number;
+    gap?: number;
+    theme?: 'light' | 'dark' | 'system';
+    reverseOrder?: boolean;
+    toastOptions?: DefaultToastOptions;
+    successIcon?: Snippet;
+    errorIcon?: Snippet;
+    warningIcon?: Snippet;
+    infoIcon?: Snippet;
+    loadingIcon?: Snippet;
+    closeIcon?: Snippet;
 };

package/dist/hooks/index.d.ts

@@ -14,3 +14,5 @@ export * from './useIntersectionObserver/index.js';
 export * from './useScrollLock/index.js';
 export * from './useFocusTrap/index.js';
 export * from './useLocalStorage/index.js';
+export * from './useSortable/index.js';
+export * from './useDragDrop/index.js';

package/dist/hooks/index.js

@@ -14,3 +14,5 @@ export * from './useIntersectionObserver/index.js';
 export * from './useScrollLock/index.js';
 export * from './useFocusTrap/index.js';
 export * from './useLocalStorage/index.js';
+export * from './useSortable/index.js';
+export * from './useDragDrop/index.js';

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,30 @@
+<script lang="ts">import { DragDropProvider } 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 } from "./sortable-context.js";
+let { children } = $props();
+const ctx = getContext(SORTABLE_CONTEXT_KEY);
+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);
+}
+function handleDragEnd(event) {
+	ctx.setDraggingId(null);
+	if (ctx.isDisabled() || !isSortableOperation(event.operation)) return;
+	const { source, target } = event.operation;
+	if (!source || !target || source.index === target.index) return;
+	const items = ctx.getItems();
+	ctx.onReorder(moveArrayItem(items, source.index, target.index));
+}
+</script>
+
+<DragDropProvider {modifiers} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+    {@render children?.()}
+</DragDropProvider>

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

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const SortableProvider: import("svelte").Component<Props, {}, "">;
+type SortableProvider = ReturnType<typeof SortableProvider>;
+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('svelora-drag-drop');

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

@@ -0,0 +1,12 @@
+import type { UseSortableOptions } from '../useSortable/useSortable.svelte.js';
+export declare const SORTABLE_CONTEXT_KEY: unique symbol;
+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;
+}

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

@@ -0,0 +1 @@
+export const SORTABLE_CONTEXT_KEY = Symbol('svelora-sortable');

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,52 @@
+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);
+}
+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;
+    }>;
+    /** 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>;

package/dist/hooks/useSortable/useSortable.svelte.js

@@ -0,0 +1,120 @@
+import { setContext } from 'svelte';
+import { createSortable } from '@dnd-kit/svelte/sortable';
+import SortableProvider from '../internal/SortableProvider.svelte';
+import { SORTABLE_CONTEXT_KEY } from '../internal/sortable-context.js';
+let sortableGroupCounter = 0;
+/**
+ * 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 function useSortable(options) {
+    const { getItems, getId, onReorder } = options;
+    const groupId = `svelora-sortable-${++sortableGroupCounter}`;
+    let draggingId = $state(null);
+    let listNode = $state(null);
+    function getAxis() {
+        const axis = options.axis;
+        return typeof axis === 'function' ? axis() : (axis ?? 'vertical');
+    }
+    function getHandle() {
+        const handle = options.handle;
+        return typeof handle === 'function' ? handle() : handle;
+    }
+    function isDisabled() {
+        return typeof options.disabled === 'function'
+            ? options.disabled()
+            : (options.disabled ?? false);
+    }
+    const context = {
+        groupId,
+        getItems,
+        getId,
+        onReorder,
+        isDisabled,
+        getAxis,
+        getHandle,
+        setDraggingId(id) {
+            draggingId = id;
+        }
+    };
+    setContext(SORTABLE_CONTEXT_KEY, context);
+    $effect(() => {
+        const node = listNode;
+        if (!node)
+            return;
+        if (draggingId != null) {
+            node.setAttribute('data-sortable-active', 'true');
+        }
+        else {
+            node.removeAttribute('data-sortable-active');
+        }
+    });
+    const container = (node) => {
+        listNode = node;
+        return {
+            destroy() {
+                if (listNode === node) {
+                    listNode = null;
+                }
+                node.removeAttribute('data-sortable-active');
+            }
+        };
+    };
+    const item = (node, params) => {
+        let current = params;
+        const sortable = createSortable({
+            id: String(getId(current.item)),
+            index: current.index,
+            group: groupId,
+            data: current.item,
+            disabled: isDisabled()
+        });
+        const detach = sortable.attach(node);
+        let detachHandle;
+        function bindHandle() {
+            detachHandle?.();
+            const selector = getHandle();
+            if (!selector) {
+                sortable.sortable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            const handle = node.querySelector(selector);
+            if (!handle) {
+                sortable.sortable.handle = undefined;
+                detachHandle = undefined;
+                return;
+            }
+            detachHandle = sortable.attachHandle(handle);
+        }
+        bindHandle();
+        node.setAttribute('data-sortable-item', '');
+        node.dataset.sortableId = String(getId(current.item));
+        return {
+            update(nextParams) {
+                current = nextParams;
+                sortable.sortable.id = String(getId(nextParams.item));
+                sortable.sortable.index = nextParams.index;
+                sortable.sortable.data = nextParams.item;
+                sortable.sortable.disabled = isDisabled();
+                node.dataset.sortableId = String(getId(nextParams.item));
+                bindHandle();
+            },
+            destroy() {
+                detach();
+                detachHandle?.();
+                node.removeAttribute('data-sortable-item');
+                delete node.dataset.sortableId;
+            }
+        };
+    };
+    return {
+        Provider: SortableProvider,
+        container,
+        item,
+        get draggingId() {
+            return draggingId;
+        }
+    };
+}

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from './components/CodeBlock/index.js';
 export * from './components/Collapsible/index.js';
 export * from './components/ColorPicker/index.js';
 export * from './components/Command/index.js';
+export * from './components/ConfirmDialog/index.js';
 export * from './components/Container/index.js';
 export * from './components/ContextMenu/index.js';
 export * from './components/DateRangePicker/index.js';
@@ -58,6 +59,7 @@ export * from './components/Sidebar/index.js';
 export * from './components/Skeleton/index.js';
 export * from './components/Slideover/index.js';
 export * from './components/Slider/index.js';
+export * from './components/SortableList/index.js';
 export * from './components/Spotlight/index.js';
 export * from './components/Stepper/index.js';
 export * from './components/Switch/index.js';

package/dist/index.js

@@ -20,6 +20,7 @@ export * from './components/CodeBlock/index.js';
 export * from './components/Collapsible/index.js';
 export * from './components/ColorPicker/index.js';
 export * from './components/Command/index.js';
+export * from './components/ConfirmDialog/index.js';
 export * from './components/Container/index.js';
 export * from './components/ContextMenu/index.js';
 export * from './components/DateRangePicker/index.js';
@@ -59,6 +60,7 @@ export * from './components/Sidebar/index.js';
 export * from './components/Skeleton/index.js';
 export * from './components/Slideover/index.js';
 export * from './components/Slider/index.js';
+export * from './components/SortableList/index.js';
 export * from './components/Spotlight/index.js';
 export * from './components/Stepper/index.js';
 export * from './components/Switch/index.js';