sv5ui 1.4.0 → 1.5.1

package/dist/Table/table.variants.js

@@ -0,0 +1,126 @@
+import { tv } from 'tailwind-variants';
+export const tableVariants = tv({
+    slots: {
+        root: 'relative w-full overflow-x-auto scrollbar-thin rounded-xl border border-outline-variant/50 bg-surface [contain:inline-size]',
+        base: 'min-w-full',
+        caption: 'sr-only',
+        thead: 'relative bg-surface-container-low',
+        tbody: [
+            '[&>tr]:transition-colors [&>tr]:duration-150',
+            '[&>tr]:border-b [&>tr]:border-outline-variant/30',
+            '[&>tr:last-child]:border-b-0'
+        ],
+        tfoot: 'relative bg-surface-container-low border-t border-outline-variant/50',
+        tr: 'data-[selected=true]:bg-primary-container/20 data-[pinned-row=true]:bg-surface-container-lowest',
+        th: [
+            'relative px-4 py-3 text-xs font-semibold uppercase tracking-wider',
+            'text-on-surface-variant text-left rtl:text-right',
+            '[&:has([role=checkbox])]:pe-0 [&:has([role=checkbox])]:w-12'
+        ],
+        td: [
+            'px-4 py-3.5 text-sm text-on-surface',
+            'whitespace-nowrap max-sm:whitespace-normal max-sm:break-words',
+            '[&:has([role=checkbox])]:pe-0 [&:has([role=checkbox])]:w-12'
+        ],
+        separator: 'h-px bg-outline-variant/50',
+        empty: 'py-10 text-center text-sm text-on-surface-variant/70',
+        loading: 'py-10 text-center'
+    },
+    variants: {
+        pinned: {
+            true: {
+                th: 'sticky bg-surface-container-low/95 backdrop-blur-sm z-1',
+                td: 'sticky bg-surface/95 backdrop-blur-sm z-1'
+            }
+        },
+        hoverable: {
+            true: {
+                tbody: '[&>tr]:data-[selectable=true]:cursor-pointer [&>tr]:data-[selectable=true]:hover:bg-surface-container/60 [&>tr]:data-[selectable=true]:focus-visible:outline-2 [&>tr]:data-[selectable=true]:focus-visible:outline-primary [&>tr]:data-[selectable=true]:focus-visible:outline-offset-[-2px]'
+            }
+        },
+        sticky: {
+            true: {
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl',
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
+            },
+            header: {
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl'
+            },
+            footer: {
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
+            }
+        },
+        striped: {
+            true: {
+                tbody: '[&>tr:nth-child(even)]:bg-surface-container-lowest/60'
+            }
+        },
+        loading: {
+            true: {
+                thead: 'after:absolute after:top-0 after:left-0 after:z-20 after:h-0.5 after:rounded-full'
+            }
+        },
+        loadingColor: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        loadingAnimation: {
+            carousel: '',
+            'carousel-inverse': '',
+            swing: '',
+            elastic: ''
+        }
+    },
+    compoundVariants: [
+        // ========== LOADING COLOR ==========
+        { loading: true, loadingColor: 'primary', class: { thead: 'after:bg-primary' } },
+        { loading: true, loadingColor: 'secondary', class: { thead: 'after:bg-secondary' } },
+        { loading: true, loadingColor: 'tertiary', class: { thead: 'after:bg-tertiary' } },
+        { loading: true, loadingColor: 'success', class: { thead: 'after:bg-success' } },
+        { loading: true, loadingColor: 'warning', class: { thead: 'after:bg-warning' } },
+        { loading: true, loadingColor: 'error', class: { thead: 'after:bg-error' } },
+        { loading: true, loadingColor: 'info', class: { thead: 'after:bg-info' } },
+        { loading: true, loadingColor: 'surface', class: { thead: 'after:bg-on-surface' } },
+        // ========== LOADING ANIMATION ==========
+        {
+            loading: true,
+            loadingAnimation: 'carousel',
+            class: { thead: 'after:animate-[carousel_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'carousel-inverse',
+            class: { thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'swing',
+            class: { thead: 'after:animate-[swing_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'elastic',
+            class: { thead: 'after:animate-[elastic_2s_ease-in-out_infinite]' }
+        }
+    ],
+    defaultVariants: {
+        hoverable: true,
+        loadingColor: 'primary',
+        loadingAnimation: 'carousel'
+    }
+});
+export const tableDefaults = {
+    defaultVariants: {
+        ...tableVariants.defaultVariants,
+        hoverable: true,
+        loadingColor: 'primary',
+        loadingAnimation: 'carousel'
+    },
+    slots: {}
+};

package/dist/Textarea/Textarea.svelte

@@ -13,7 +13,7 @@
         type FieldGroupVariantProps
     } from '../FieldGroup/field-group.variants.js'
     import Icon from '../Icon/Icon.svelte'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('textarea', textareaDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -44,15 +44,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const fieldGroupContext = getContext<
         | {

package/dist/config.d.ts

@@ -38,6 +38,9 @@ export declare const iconsDefaults: {
     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

@@ -38,7 +38,10 @@ export const iconsDefaults = {
     file: 'lucide:file',
     zoomIn: 'lucide:zoom-in',
     trash: 'lucide:trash-2',
-    search: 'lucide:search'
+    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
+    };
+}