svelora 3.0.15 → 3.0.16

package/dist/components/ConfirmDialog/ConfirmDialog.svelte

@@ -0,0 +1,167 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import Button from "../Button/Button.svelte";
+import Input from "../Input/Input.svelte";
+import Textarea from "../Textarea/Textarea.svelte";
+import AnimatedIcon from "../Toast/internal/AnimatedIcon.svelte";
+import { modalVariants } from "../Modal/modal.variants.js";
+let { confirmText: defaultConfirmText = "Confirm", cancelText: defaultCancelText = "Cancel" } = $props();
+let open = $state(false);
+let pending = $state(null);
+let currentInputValue = $state("");
+const classes = $derived(modalVariants({
+	transition: "scale",
+	size: "sm",
+	overlay: true,
+	scrollable: false
+}));
+const dismissible = $derived(pending?.options.dismissible !== false);
+const showCancel = $derived(pending?.options.showCancel !== false);
+export function show(options = {}) {
+	return new Promise((resolve) => {
+		currentInputValue = options.inputValue ?? "";
+		pending = {
+			options,
+			resolve
+		};
+		open = true;
+	});
+}
+function settle(result) {
+	const current = pending;
+	pending = null;
+	open = false;
+	current?.resolve(result);
+}
+function handleConfirm() {
+	pending?.options.onConfirm?.(currentInputValue);
+	settle(true);
+}
+function handleCancel() {
+	pending?.options.onCancel?.();
+	settle(false);
+}
+function handleOpenChange(value) {
+	if (!value && pending) {
+		handleCancel();
+		return;
+	}
+	open = value;
+}
+const contentProps = $derived.by(() => {
+	const behavior = dismissible ? "close" : "ignore";
+	return {
+		trapFocus: true,
+		preventScroll: true,
+		escapeKeydownBehavior: behavior,
+		interactOutsideBehavior: behavior
+	};
+});
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+    <Dialog.Portal>
+        <Dialog.Overlay class={classes.overlay()} />
+        {#if pending}
+            <Dialog.Content
+                {...contentProps}
+                class={[classes.content(), 'p-6 text-center']}
+            >
+                {#if pending.options.title}
+                    <Dialog.Title class="sr-only">{pending.options.title}</Dialog.Title>
+                {/if}
+                {#if pending.options.message}
+                    <Dialog.Description class="sr-only"
+                        >{pending.options.message}</Dialog.Description
+                    >
+                {/if}
+
+                {#if pending.options.icon}
+                    {#key pending.options.icon}
+                        <div class="mb-4 flex min-h-20 justify-center">
+                            <AnimatedIcon
+                                type={pending.options.icon}
+                                size={80}
+                                forceMotion
+                                idle={false}
+                            />
+                        </div>
+                    {/key}
+                {/if}
+
+                {#if pending.options.title}
+                    <h3 class="mb-2 text-lg font-semibold text-on-surface">
+                        {pending.options.title}
+                    </h3>
+                {/if}
+
+                {#if pending.options.message}
+                    <p class="mb-6 text-sm text-on-surface-variant">
+                        {pending.options.message}
+                    </p>
+                {:else if !pending.options.inputPlaceholder}
+                    <div class="mb-6"></div>
+                {/if}
+
+                {#if pending.options.inputPlaceholder}
+                    {#if pending.options.inputChoices && pending.options.inputChoices.length > 0}
+                        <div class="mb-3 flex flex-wrap justify-center gap-1">
+                            {#each pending.options.inputChoices as choice (choice)}
+                                <Button
+                                    label={choice}
+                                    size="xs"
+                                    variant={currentInputValue === choice ? 'solid' : 'outline'}
+                                    color={currentInputValue === choice ? 'primary' : 'surface'}
+                                    onclick={() => (currentInputValue = choice)}
+                                />
+                            {/each}
+                        </div>
+                    {/if}
+
+                    <div class="mb-6 text-left">
+                        {#if pending.options.inputType === 'textarea'}
+                            <Textarea
+                                bind:value={currentInputValue}
+                                placeholder={pending.options.inputPlaceholder}
+                                class="w-full"
+                            />
+                        {:else}
+                            <Input
+                                type={pending.options.inputType ?? 'text'}
+                                bind:value={currentInputValue}
+                                placeholder={pending.options.inputPlaceholder}
+                                class="w-full"
+                                onkeydown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        handleConfirm()
+                                    }
+                                }}
+                            />
+                        {/if}
+                    </div>
+                {/if}
+
+                <div class="flex justify-center gap-2">
+                    {#if showCancel}
+                        <Button
+                            label={pending.options.cancelText ?? defaultCancelText}
+                            variant="outline"
+                            class="flex-1"
+                            onclick={handleCancel}
+                        />
+                    {/if}
+                    <Button
+                        label={pending.options.confirmText ?? defaultConfirmText}
+                        variant="solid"
+                        color={pending.options.confirmColor ?? 'primary'}
+                        class={showCancel ? 'flex-1' : 'w-full'}
+                        onclick={handleConfirm}
+                    />
+                </div>
+            </Dialog.Content>
+        {/if}
+    </Dialog.Portal>
+</Dialog.Root>

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

@@ -0,0 +1,10 @@
+export type Props = {
+    confirmText?: string;
+    cancelText?: string;
+};
+import type { ConfirmOptions } from './confirm.types.js';
+declare const ConfirmDialog: import("svelte").Component<Props, {
+    show: (options?: ConfirmOptions) => Promise<boolean>;
+}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/ConfirmDialog/confirm.d.ts

@@ -0,0 +1,9 @@
+import type { ConfirmOptions } from './confirm.types.js';
+type ShowFn = (options?: ConfirmOptions) => Promise<boolean>;
+export declare function registerConfirmDialog(fn: ShowFn | null): void;
+export declare const confirmDialog: {
+    show(options?: ConfirmOptions): Promise<boolean>;
+    delete(options?: ConfirmOptions): Promise<boolean>;
+};
+export type ConfirmDialogUtility = typeof confirmDialog;
+export {};

package/dist/components/ConfirmDialog/confirm.js

@@ -0,0 +1,24 @@
+let showFn = null;
+export function registerConfirmDialog(fn) {
+    showFn = fn;
+}
+export const confirmDialog = {
+    show(options = {}) {
+        if (!showFn) {
+            console.warn('[confirmDialog] ConfirmDialog is not registered — add <ConfirmDialog /> to your root layout.');
+            return Promise.resolve(false);
+        }
+        return showFn(options);
+    },
+    delete(options = {}) {
+        return this.show({
+            title: 'Delete this item?',
+            message: 'This action is permanent and cannot be undone.',
+            confirmText: 'Delete',
+            cancelText: 'Cancel',
+            icon: 'warning',
+            confirmColor: 'error',
+            ...options
+        });
+    }
+};

package/dist/components/ConfirmDialog/confirm.types.d.ts

@@ -0,0 +1,22 @@
+import type { ButtonVariantProps } from '../Button/button.variants.js';
+import type { AnimatedIconType } from '../Toast/internal/animated-icon.types.js';
+export type ConfirmIcon = Extract<AnimatedIconType, 'warning' | 'error' | 'question' | 'info' | 'success'>;
+export type ConfirmColor = NonNullable<ButtonVariantProps['color']>;
+export interface ConfirmOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    icon?: ConfirmIcon;
+    confirmColor?: ConfirmColor;
+    /** When false, only the confirm button is shown (alert-style). @default true */
+    showCancel?: boolean;
+    /** When false, backdrop click and Escape do not dismiss. @default true */
+    dismissible?: boolean;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputType?: 'text' | 'password' | 'email' | 'number' | 'textarea';
+    inputChoices?: string[];
+    onConfirm?: (value?: string) => void;
+    onCancel?: () => void;
+}

package/dist/components/ConfirmDialog/confirm.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { confirmDialog, registerConfirmDialog } from './confirm.js';
+export type { ConfirmOptions, ConfirmIcon, ConfirmColor } from './confirm.types.js';
+export type { ConfirmDialogUtility } from './confirm.js';

package/dist/components/ConfirmDialog/index.js

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { confirmDialog, registerConfirmDialog } from './confirm.js';

package/dist/components/SortableList/SortableList.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { useSortable } from "../../hooks/useSortable/index.js";
+let { items = $bindable(), getKey, onReorder, axis = "vertical", handle = true, disabled = false, class: className, itemClass, children } = $props();
+const sortable = useSortable({
+	getItems: () => items,
+	getId: (item) => getKey(item),
+	axis: () => axis,
+	handle: () => handle ? "[data-sortable-handle]" : undefined,
+	disabled: () => disabled,
+	onReorder(nextItems) {
+		items = nextItems;
+		onReorder?.(nextItems);
+	}
+});
+const listClass = $derived(twMerge(axis === "vertical" ? "flex flex-col gap-2" : axis === "horizontal" ? "flex flex-row flex-wrap gap-2" : "gap-3", className));
+const itemClasses = $derived(twMerge("relative flex items-center gap-3 rounded-lg border border-outline-variant/60 bg-surface-container-low px-3 py-2 transition-shadow select-none", itemClass));
+</script>
+
+<sortable.Provider>
+    <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(itemClasses, dragging && 'z-10 opacity-95 shadow-md')}
+                aria-grabbed={dragging}
+            >
+                {#if handle}
+                    <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>
+        {/each}
+    </div>
+</sortable.Provider>
+
+<style>
+    :global([data-sortable-active='true']) {
+        user-select: none;
+    }
+</style>

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

@@ -0,0 +1,26 @@
+export type { SortableListProps } from './sortable-list.types.js';
+import type { SortableListProps } from './sortable-list.types.js';
+declare function $$render<T>(): {
+    props: SortableListProps<T>;
+    exports: {};
+    bindings: "items";
+    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(): "items";
+    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 SortableList: $$IsomorphicComponent;
+type SortableList<T> = InstanceType<typeof SortableList<T>>;
+export default SortableList;

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

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

package/dist/components/SortableList/index.js

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

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

@@ -0,0 +1,17 @@
+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';
+    handle?: boolean;
+    disabled?: boolean;
+    class?: ClassNameValue;
+    itemClass?: ClassNameValue;
+    children: Snippet<[{
+        item: T;
+        index: number;
+        dragging: boolean;
+    }]>;
+}

package/dist/components/SortableList/sortable-list.types.js

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