sv5ui 1.3.0 → 1.5.0

package/dist/Toast/toast.js

@@ -0,0 +1,73 @@
+import { toast as sonnerToast } from 'svelte-sonner';
+import { mount, unmount } from 'svelte';
+import Icon from '../Icon/Icon.svelte';
+import Avatar from '../Avatar/Avatar.svelte';
+function createIconComponent(name) {
+    function SvelteSonnerIcon(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Icon, {
+            target: anchor.parentNode,
+            anchor,
+            props: { name, size: '18' }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerIcon;
+}
+function createAvatarComponent(props) {
+    function SvelteSonnerAvatar(anchor) {
+        if (!anchor.parentNode)
+            return { destroy() { } };
+        const instance = mount(Avatar, {
+            target: anchor.parentNode,
+            anchor,
+            props: { size: 'sm', ...props }
+        });
+        return {
+            destroy() {
+                unmount(instance);
+            }
+        };
+    }
+    return SvelteSonnerAvatar;
+}
+function resolveOptions(data) {
+    if (!data)
+        return data;
+    const { color, icon, avatar, ...rest } = data;
+    const resolved = { ...rest };
+    // Color -> class
+    if (color) {
+        const existing = resolved.class ?? '';
+        resolved.class = `${existing} sv5ui-color-${color}`.trim();
+    }
+    // Avatar takes priority over icon
+    if (avatar) {
+        resolved.icon = createAvatarComponent(avatar);
+    }
+    else if (typeof icon === 'string') {
+        resolved.icon = createIconComponent(icon);
+    }
+    else if (icon !== undefined) {
+        resolved.icon = icon;
+    }
+    return resolved;
+}
+function toastFn(message, data) {
+    return sonnerToast(message, resolveOptions(data));
+}
+toastFn.success = (message, data) => sonnerToast.success(message, resolveOptions(data));
+toastFn.error = (message, data) => sonnerToast.error(message, resolveOptions(data));
+toastFn.warning = (message, data) => sonnerToast.warning(message, resolveOptions(data));
+toastFn.info = (message, data) => sonnerToast.info(message, resolveOptions(data));
+toastFn.loading = (message, data) => sonnerToast.loading(message, resolveOptions(data));
+toastFn.promise = sonnerToast.promise;
+toastFn.dismiss = sonnerToast.dismiss;
+toastFn.custom = sonnerToast.custom;
+toastFn.message = sonnerToast.message;
+export { toastFn as toast };

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

@@ -0,0 +1,19 @@
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ToasterProps as SonnerToasterProps } from 'svelte-sonner';
+import type { ToastVariant } from './toast.variants.js';
+export type ToasterProps = Omit<SonnerToasterProps, 'class' | 'toastOptions' | 'richColors'> & {
+    /**
+     * 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;
+    /**
+     * Additional CSS classes for the toaster container.
+     */
+    class?: ClassNameValue;
+};

package/dist/Toast/toast.types.js

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

package/dist/Toast/toast.variants.d.ts

@@ -0,0 +1,7 @@
+export type ToastVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'accent';
+export type ToastColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
+export declare const toastDefaults: {
+    defaultVariants: {
+        variant: ToastVariant;
+    };
+};

package/dist/Toast/toast.variants.js

@@ -0,0 +1,5 @@
+export const toastDefaults = {
+    defaultVariants: {
+        variant: 'outline'
+    }
+};

package/dist/config.d.ts

@@ -37,6 +37,10 @@ export declare const iconsDefaults: {
     file: string;
     zoomIn: string;
     trash: string;
+    search: string;
+    sortAsc: string;
+    sortDesc: string;
+    sortDefault: string;
 };
 /** Deep partial type for config objects */
 type DeepPartial<T> = {

package/dist/config.js

@@ -37,7 +37,11 @@ export const iconsDefaults = {
     upload: 'lucide:upload',
     file: 'lucide:file',
     zoomIn: 'lucide:zoom-in',
-    trash: 'lucide:trash-2'
+    trash: 'lucide:trash-2',
+    search: 'lucide:search',
+    sortAsc: 'lucide:chevron-up',
+    sortDesc: 'lucide:chevron-down',
+    sortDefault: 'lucide:chevrons-up-down'
 };
 // ==================== GLOBAL STATE ====================
 let globalConfig = {};

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export { useMediaQuery } from './useMediaQuery.svelte.js';
+export type { UseMediaQueryOptions } from './useMediaQuery.svelte.js';
+export { useClipboard } from './useClipboard.svelte.js';
+export type { UseClipboardOptions } from './useClipboard.svelte.js';
+export { useFormField } from './useFormField.svelte.js';
+export type { FormFieldContext } from './useFormField.svelte.js';
+export { useClickOutside } from './useClickOutside.svelte.js';
+export type { UseClickOutsideOptions } from './useClickOutside.svelte.js';
+export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export type { UseInfiniteScrollOptions } from './useInfiniteScroll.svelte.js';
+export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export type { UseEscapeKeydownOptions } from './useEscapeKeydown.svelte.js';
+export { useDebounce } from './useDebounce.svelte.js';
+export type { UseDebounceOptions } from './useDebounce.svelte.js';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+export { useMediaQuery } from './useMediaQuery.svelte.js';
+export { useClipboard } from './useClipboard.svelte.js';
+export { useFormField } from './useFormField.svelte.js';
+export { useClickOutside } from './useClickOutside.svelte.js';
+export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export { useDebounce } from './useDebounce.svelte.js';

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

@@ -0,0 +1,31 @@
+import type { Action } from 'svelte/action';
+export interface UseClickOutsideOptions {
+    /**
+     * Callback fired when a click occurs outside the element.
+     */
+    handler: (event: PointerEvent) => void;
+    /**
+     * Whether the listener is active.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Svelte action that detects clicks outside an element.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useClickOutside } from 'sv5ui'
+ *
+ *   let open = $state(false)
+ * </script>
+ *
+ * {#if open}
+ *   <div use:useClickOutside={{ handler: () => (open = false) }}>
+ *     Dropdown content
+ *   </div>
+ * {/if}
+ * ```
+ */
+export declare const useClickOutside: Action<HTMLElement, UseClickOutsideOptions>;

package/dist/hooks/useClickOutside.svelte.js

@@ -0,0 +1,37 @@
+/**
+ * Svelte action that detects clicks outside an element.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useClickOutside } from 'sv5ui'
+ *
+ *   let open = $state(false)
+ * </script>
+ *
+ * {#if open}
+ *   <div use:useClickOutside={{ handler: () => (open = false) }}>
+ *     Dropdown content
+ *   </div>
+ * {/if}
+ * ```
+ */
+export const useClickOutside = (node, initialOptions) => {
+    let currentOptions = initialOptions;
+    function handlePointerDown(event) {
+        if (currentOptions.enabled === false)
+            return;
+        if (!node.contains(event.target)) {
+            currentOptions.handler(event);
+        }
+    }
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions;
+        },
+        destroy() {
+            document.removeEventListener('pointerdown', handlePointerDown, true);
+        }
+    };
+};

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

@@ -0,0 +1,30 @@
+export interface UseClipboardOptions {
+    /**
+     * Duration in milliseconds before `copied` resets to `false`.
+     * @default 2000
+     */
+    timeout?: number;
+}
+export interface UseClipboardReturn {
+    /** Whether text was recently copied (resets after timeout) */
+    readonly copied: boolean;
+    /** Copy text to clipboard */
+    copy: (text: string) => Promise<void>;
+}
+/**
+ * Reactive clipboard hook. Copies text and tracks copied state.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useClipboard } from 'sv5ui'
+ *
+ *   const clipboard = useClipboard()
+ * </script>
+ *
+ * <Button onclick={() => clipboard.copy('Hello!')}>
+ *   {clipboard.copied ? 'Copied!' : 'Copy'}
+ * </Button>
+ * ```
+ */
+export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;

package/dist/hooks/useClipboard.svelte.js

@@ -0,0 +1,45 @@
+/**
+ * Reactive clipboard hook. Copies text and tracks copied state.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useClipboard } from 'sv5ui'
+ *
+ *   const clipboard = useClipboard()
+ * </script>
+ *
+ * <Button onclick={() => clipboard.copy('Hello!')}>
+ *   {clipboard.copied ? 'Copied!' : 'Copy'}
+ * </Button>
+ * ```
+ */
+export function useClipboard(options = {}) {
+    const { timeout = 2000 } = options;
+    let copied = $state(false);
+    let timeoutId;
+    async function copy(text) {
+        if (typeof navigator === 'undefined' || !navigator.clipboard)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+            copied = true;
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                copied = false;
+            }, timeout);
+        }
+        catch {
+            copied = false;
+        }
+    }
+    $effect(() => {
+        return () => clearTimeout(timeoutId);
+    });
+    return {
+        get copied() {
+            return copied;
+        },
+        copy
+    };
+}

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

@@ -0,0 +1,36 @@
+export interface UseDebounceOptions {
+    /**
+     * Delay in milliseconds before the callback is executed.
+     * @default 300
+     */
+    delay?: number;
+}
+/**
+ * Reactive debounce hook. Delays execution until a pause in calls.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebounce } from 'sv5ui'
+ *
+ *   const debounce = useDebounce({ delay: 500 })
+ *   let query = $state('')
+ *
+ *   function handleInput(e: Event) {
+ *     query = e.currentTarget.value
+ *     debounce.run(() => fetchResults(query))
+ *   }
+ * </script>
+ *
+ * <input oninput={handleInput} />
+ * {#if debounce.pending}
+ *   <Spinner />
+ * {/if}
+ * ```
+ */
+export declare function useDebounce(options?: UseDebounceOptions): {
+    readonly pending: boolean;
+    run: (callback: () => void) => void;
+    cancel: () => void;
+    flush: (callback: () => void) => void;
+};

package/dist/hooks/useDebounce.svelte.js

@@ -0,0 +1,56 @@
+/**
+ * Reactive debounce hook. Delays execution until a pause in calls.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebounce } from 'sv5ui'
+ *
+ *   const debounce = useDebounce({ delay: 500 })
+ *   let query = $state('')
+ *
+ *   function handleInput(e: Event) {
+ *     query = e.currentTarget.value
+ *     debounce.run(() => fetchResults(query))
+ *   }
+ * </script>
+ *
+ * <input oninput={handleInput} />
+ * {#if debounce.pending}
+ *   <Spinner />
+ * {/if}
+ * ```
+ */
+export function useDebounce(options = {}) {
+    const { delay = 300 } = options;
+    let pending = $state(false);
+    let timeoutId;
+    function run(callback) {
+        pending = true;
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            pending = false;
+            callback();
+        }, delay);
+    }
+    function cancel() {
+        clearTimeout(timeoutId);
+        pending = false;
+    }
+    function flush(callback) {
+        clearTimeout(timeoutId);
+        pending = false;
+        callback();
+    }
+    $effect(() => {
+        return () => clearTimeout(timeoutId);
+    });
+    return {
+        get pending() {
+            return pending;
+        },
+        run,
+        cancel,
+        flush
+    };
+}

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

@@ -0,0 +1,31 @@
+import type { Action } from 'svelte/action';
+export interface UseEscapeKeydownOptions {
+    /**
+     * Callback fired when Escape is pressed.
+     */
+    handler: (event: KeyboardEvent) => void;
+    /**
+     * Whether the listener is active.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Svelte action that listens for Escape keydown on an element or the document.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useEscapeKeydown } from 'sv5ui'
+ *
+ *   let open = $state(true)
+ * </script>
+ *
+ * {#if open}
+ *   <div use:useEscapeKeydown={{ handler: () => (open = false) }}>
+ *     Press Escape to close
+ *   </div>
+ * {/if}
+ * ```
+ */
+export declare const useEscapeKeydown: Action<HTMLElement, UseEscapeKeydownOptions>;

package/dist/hooks/useEscapeKeydown.svelte.js

@@ -0,0 +1,37 @@
+/**
+ * Svelte action that listens for Escape keydown on an element or the document.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useEscapeKeydown } from 'sv5ui'
+ *
+ *   let open = $state(true)
+ * </script>
+ *
+ * {#if open}
+ *   <div use:useEscapeKeydown={{ handler: () => (open = false) }}>
+ *     Press Escape to close
+ *   </div>
+ * {/if}
+ * ```
+ */
+export const useEscapeKeydown = (_node, initialOptions) => {
+    let currentOptions = initialOptions;
+    function handleKeydown(event) {
+        if (currentOptions.enabled === false)
+            return;
+        if (event.key === 'Escape') {
+            currentOptions.handler(event);
+        }
+    }
+    document.addEventListener('keydown', handleKeydown);
+    return {
+        update(newOptions) {
+            currentOptions = newOptions;
+        },
+        destroy() {
+            document.removeEventListener('keydown', handleKeydown);
+        }
+    };
+};

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

@@ -0,0 +1,21 @@
+import type { FormFieldProps } from '../FormField/form-field.types.js';
+export interface FormFieldContext {
+    name?: string;
+    size: NonNullable<FormFieldProps['size']>;
+    error?: string | boolean;
+    ariaId: string;
+}
+/**
+ * Access the nearest FormField context. Returns `undefined` when used outside a FormField.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFormField } from 'sv5ui'
+ *
+ *   const formField = useFormField()
+ *   const hasError = $derived(formField?.error !== undefined && formField?.error !== false)
+ * </script>
+ * ```
+ */
+export declare function useFormField(): FormFieldContext | undefined;

package/dist/hooks/useFormField.svelte.js

@@ -0,0 +1,17 @@
+import { getContext } from 'svelte';
+/**
+ * Access the nearest FormField context. Returns `undefined` when used outside a FormField.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFormField } from 'sv5ui'
+ *
+ *   const formField = useFormField()
+ *   const hasError = $derived(formField?.error !== undefined && formField?.error !== false)
+ * </script>
+ * ```
+ */
+export function useFormField() {
+    return getContext('formField');
+}

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

@@ -0,0 +1,57 @@
+import type { Action } from 'svelte/action';
+export interface UseInfiniteScrollOptions {
+    /**
+     * Callback fired when the user scrolls near the bottom.
+     * Return a promise to automatically manage the loading state.
+     */
+    onLoad: () => void | Promise<void>;
+    /**
+     * Distance in pixels from the bottom to trigger loading.
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * Whether the hook is active. Set to `false` when all data is loaded.
+     * Supports getter function for reactive control.
+     * @default true
+     */
+    enabled?: boolean | (() => boolean);
+}
+export interface UseInfiniteScrollReturn {
+    /** Whether an async onLoad is currently in progress */
+    readonly loading: boolean;
+}
+/**
+ * Reactive infinite scroll hook with Svelte action.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useInfiniteScroll } from 'sv5ui'
+ *
+ *   let items = $state([...])
+ *   let hasMore = $state(true)
+ *
+ *   const scroll = useInfiniteScroll({
+ *     onLoad: async () => {
+ *       const next = await fetchMore()
+ *       items.push(...next)
+ *       if (next.length === 0) hasMore = false
+ *     },
+ *     enabled: () => hasMore
+ *   })
+ * </script>
+ *
+ * <div use:scroll.action>
+ *   {#each items as item (item.id)}
+ *     <div>{item.name}</div>
+ *   {/each}
+ *   {#if scroll.loading}
+ *     <Spinner />
+ *   {/if}
+ * </div>
+ * ```
+ */
+export declare function useInfiniteScroll(options: UseInfiniteScrollOptions): UseInfiniteScrollReturn & {
+    action: Action<HTMLElement>;
+};

package/dist/hooks/useInfiniteScroll.svelte.js

@@ -0,0 +1,69 @@
+/**
+ * Reactive infinite scroll hook with Svelte action.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useInfiniteScroll } from 'sv5ui'
+ *
+ *   let items = $state([...])
+ *   let hasMore = $state(true)
+ *
+ *   const scroll = useInfiniteScroll({
+ *     onLoad: async () => {
+ *       const next = await fetchMore()
+ *       items.push(...next)
+ *       if (next.length === 0) hasMore = false
+ *     },
+ *     enabled: () => hasMore
+ *   })
+ * </script>
+ *
+ * <div use:scroll.action>
+ *   {#each items as item (item.id)}
+ *     <div>{item.name}</div>
+ *   {/each}
+ *   {#if scroll.loading}
+ *     <Spinner />
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function useInfiniteScroll(options) {
+    const { onLoad, threshold = 100 } = options;
+    let loading = $state(false);
+    function getEnabled() {
+        return typeof options.enabled === 'function' ? options.enabled() : (options.enabled ?? true);
+    }
+    async function check(el) {
+        if (loading || !getEnabled())
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        if (scrollHeight - scrollTop - clientHeight > threshold)
+            return;
+        loading = true;
+        try {
+            await onLoad();
+        }
+        finally {
+            loading = false;
+        }
+    }
+    const action = (node) => {
+        function handleScroll() {
+            check(node);
+        }
+        node.addEventListener('scroll', handleScroll, { passive: true });
+        return {
+            destroy() {
+                node.removeEventListener('scroll', handleScroll);
+            }
+        };
+    };
+    return {
+        get loading() {
+            return loading;
+        },
+        action
+    };
+}

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

@@ -0,0 +1,31 @@
+export interface UseMediaQueryOptions {
+    /**
+     * Initial value before the media query is evaluated (SSR-safe).
+     * @default false
+     */
+    initialValue?: boolean;
+}
+export interface UseMediaQueryReturn {
+    /** Whether the media query currently matches */
+    readonly matches: boolean;
+}
+/**
+ * Reactive media query hook. Tracks whether a CSS media query matches.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useMediaQuery } from 'sv5ui'
+ *
+ *   const isMobile = useMediaQuery('(max-width: 640px)')
+ *   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
+ * </script>
+ *
+ * {#if isMobile.matches}
+ *   <MobileLayout />
+ * {:else}
+ *   <DesktopLayout />
+ * {/if}
+ * ```
+ */
+export declare function useMediaQuery(query: string | (() => string), options?: UseMediaQueryOptions): UseMediaQueryReturn;