sv5ui 2.1.0 → 2.3.0

package/dist/components/Tour/tour.variants.js

@@ -0,0 +1,56 @@
+import { tv } from 'tailwind-variants';
+export const tourVariants = tv({
+    slots: {
+        overlay: 'fixed inset-0 z-[var(--sv5ui-tour-overlay-z,100)]',
+        spotlight: [
+            'fixed top-0 left-0 z-[var(--sv5ui-tour-overlay-z,100)] pointer-events-none',
+            'shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]'
+        ],
+        panel: [
+            'z-[var(--sv5ui-tour-panel-z,101)] flex flex-col',
+            'bg-surface-container-lowest text-on-surface ring ring-surface-container-highest',
+            'rounded-xl shadow-xl focus:outline-none',
+            'w-[var(--sv5ui-tour-w)] max-w-[calc(100vw-2rem)]'
+        ],
+        arrow: 'bg-surface-container-lowest border-surface-container-highest',
+        header: 'relative flex items-start justify-between gap-2 p-4 pb-0',
+        title: 'font-semibold text-sm leading-snug',
+        description: 'text-sm text-on-surface-variant',
+        body: 'px-4 py-3 text-sm text-on-surface-variant',
+        footer: 'flex items-center justify-between gap-3 p-4 pt-0',
+        progress: 'flex items-center gap-1.5',
+        progressDot: 'size-1.5 rounded-full bg-on-surface-variant/30 transition-colors',
+        nav: 'flex items-center gap-2 ml-auto',
+        prevButton: '',
+        nextButton: '',
+        skipButton: 'text-on-surface-variant',
+        closeButton: 'shrink-0 -mt-1 -mr-1'
+    },
+    variants: {
+        size: {
+            sm: { panel: '[--sv5ui-tour-w:280px]' },
+            md: { panel: '[--sv5ui-tour-w:340px]' },
+            lg: { panel: '[--sv5ui-tour-w:420px]' }
+        },
+        transition: {
+            true: {
+                panel: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'
+                ],
+                spotlight: 'transition-transform duration-300 ease-out'
+            }
+        },
+        active: {
+            true: { progressDot: 'bg-primary' }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        transition: true
+    }
+});
+export const tourDefaults = {
+    defaultVariants: tourVariants.defaultVariants,
+    slots: {}
+};

package/dist/components/User/User.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { userVariants, userDefaults } from "./user.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Avatar from "../Avatar/Avatar.svelte";
+import Chip from "../Chip/Chip.svelte";
+import Link from "../Link/Link.svelte";
+const config = getComponentConfig("user", userDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  ui,
+  name,
+  description,
+  avatar,
+  chip,
+  size = config.defaultVariants.size,
+  orientation = config.defaultVariants.orientation,
+  href,
+  class: className,
+  avatarSlot,
+  nameSlot,
+  descriptionSlot,
+  ...restProps
+} = $props();
+const isClickable = $derived(!!href || !!restProps.onclick);
+const classes = $derived.by(() => {
+  const slots = userVariants({ size, orientation, clickable: isClickable });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+    name: slots.name({ class: [config.slots.name, ui?.name] }),
+    description: slots.description({ class: [config.slots.description, ui?.description] }),
+    avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] })
+  };
+});
+const mergedAvatarProps = $derived(
+  avatar ? { alt: name, size, ...avatar } : void 0
+);
+const chipProps = $derived(chip && avatar ? chip === true ? {} : chip : null);
+</script>
+
+{#snippet userContent()}
+    {#if avatarSlot}
+        {@render avatarSlot()}
+    {:else if mergedAvatarProps}
+        {#if chipProps}
+            <Chip {size} inset {...chipProps}>
+                <Avatar {...mergedAvatarProps} class={classes.avatar} />
+            </Chip>
+        {:else}
+            <Avatar {...mergedAvatarProps} class={classes.avatar} />
+        {/if}
+    {/if}
+
+    {#if name || description || nameSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if nameSlot}
+                {@render nameSlot()}
+            {:else if name}
+                <p class={classes.name}>{name}</p>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+{#if href}
+    <Link bind:ref {href} raw class={classes.root} data-orientation={orientation} {...restProps}>
+        {@render userContent()}
+    </Link>
+{:else}
+    <svelte:element
+        this={as}
+        bind:this={ref}
+        class={classes.root}
+        data-orientation={orientation}
+        {...restProps}
+    >
+        {@render userContent()}
+    </svelte:element>
+{/if}

package/dist/components/User/user.types.js

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

package/dist/config.d.ts

@@ -30,6 +30,8 @@ export declare const iconsDefaults: {
     chevronsRight: string;
     ellipsis: string;
     close: string;
+    menu: string;
+    external: string;
     check: string;
     light: string;
     dark: string;

package/dist/config.js

@@ -31,6 +31,8 @@ export const iconsDefaults = {
     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',

package/dist/hooks/index.d.ts

@@ -1,14 +1,17 @@
-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, useFormFieldEmit, FORM_FIELD_CONTEXT_KEY } 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';
+export * from './useMediaQuery/index.js';
+export * from './useClipboard/index.js';
+export * from './useFormField/index.js';
+export * from './useClickOutside/index.js';
+export * from './useInfiniteScroll/index.js';
+export * from './useEscapeKeydown/index.js';
+export * from './useDebounce/index.js';
+export * from './useThrottle/index.js';
+export * from './useTimers/index.js';
+export * from './useDebouncedState/index.js';
+export * from './useEventListener/index.js';
+export * from './useResizeObserver/index.js';
+export * from './useIntersectionObserver/index.js';
+export * from './useScrollLock/index.js';
+export * from './useFocusTrap/index.js';
+export * from './useLocalStorage/index.js';
+export * from './useTour/index.js';

package/dist/hooks/index.js

@@ -1,7 +1,17 @@
-export { useMediaQuery } from './useMediaQuery.svelte.js';
-export { useClipboard } from './useClipboard.svelte.js';
-export { useFormField, useFormFieldEmit, FORM_FIELD_CONTEXT_KEY } 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';
+export * from './useMediaQuery/index.js';
+export * from './useClipboard/index.js';
+export * from './useFormField/index.js';
+export * from './useClickOutside/index.js';
+export * from './useInfiniteScroll/index.js';
+export * from './useEscapeKeydown/index.js';
+export * from './useDebounce/index.js';
+export * from './useThrottle/index.js';
+export * from './useTimers/index.js';
+export * from './useDebouncedState/index.js';
+export * from './useEventListener/index.js';
+export * from './useResizeObserver/index.js';
+export * from './useIntersectionObserver/index.js';
+export * from './useScrollLock/index.js';
+export * from './useFocusTrap/index.js';
+export * from './useLocalStorage/index.js';
+export * from './useTour/index.js';

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

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

package/dist/hooks/useClickOutside/index.js

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

package/dist/hooks/{useClickOutside.svelte.js → useClickOutside/useClickOutside.svelte.js}

@@ -1,3 +1,4 @@
+import { useEventListener } from '../useEventListener/index.js';
 /**
  * Svelte action that detects clicks outside an element.
  *
@@ -18,20 +19,16 @@
  */
 export const useClickOutside = (node, initialOptions) => {
     let currentOptions = initialOptions;
-    function handlePointerDown(event) {
+    useEventListener(() => document, 'pointerdown', (event) => {
         if (currentOptions.enabled === false)
             return;
         if (!node.contains(event.target)) {
             currentOptions.handler(event);
         }
-    }
-    document.addEventListener('pointerdown', handlePointerDown, true);
+    }, true);
     return {
         update(newOptions) {
             currentOptions = newOptions;
-        },
-        destroy() {
-            document.removeEventListener('pointerdown', handlePointerDown, true);
         }
     };
 };

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

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

package/dist/hooks/useClipboard/index.js

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

package/dist/hooks/{useClipboard.svelte.d.ts → useClipboard/useClipboard.svelte.d.ts}

@@ -5,7 +5,7 @@ export interface UseClipboardOptions {
      */
     timeout?: number;
 }
-export interface UseClipboardReturn {
+interface UseClipboardReturn {
     /** Whether text was recently copied (resets after timeout) */
     readonly copied: boolean;
     /** Copy text to clipboard */
@@ -28,3 +28,4 @@ export interface UseClipboardReturn {
  * ```
  */
 export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
+export {};

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

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

package/dist/hooks/useDebounce/index.js

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

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

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

package/dist/hooks/useDebouncedState/index.js

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

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

@@ -0,0 +1,30 @@
+interface UseDebouncedStateReturn<T> {
+    /** The immediate value — read it or write it (bindable). */
+    current: T;
+    /** The debounced value — settles `delay` ms after the last write. */
+    readonly debounced: T;
+    /** Set both `current` and `debounced` now, cancelling any pending update. */
+    setImmediate(value: T): void;
+}
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'sv5ui'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export declare function useDebouncedState<T>(initial: T, delay?: number): UseDebouncedStateReturn<T>;
+export {};

package/dist/hooks/useDebouncedState/useDebouncedState.svelte.js

@@ -0,0 +1,45 @@
+import { useDebounce } from '../useDebounce/index.js';
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'sv5ui'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export function useDebouncedState(initial, delay = 300) {
+    let current = $state(initial);
+    let debounced = $state(initial);
+    const debounce = useDebounce({ delay });
+    return {
+        get current() {
+            return current;
+        },
+        set current(value) {
+            current = value;
+            debounce.run(() => {
+                debounced = value;
+            });
+        },
+        get debounced() {
+            return debounced;
+        },
+        setImmediate(value) {
+            debounce.cancel();
+            current = value;
+            debounced = value;
+        }
+    };
+}

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

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

package/dist/hooks/useEscapeKeydown/index.js

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

package/dist/hooks/{useEscapeKeydown.svelte.js → useEscapeKeydown/useEscapeKeydown.svelte.js}

@@ -1,3 +1,4 @@
+import { useEventListener } from '../useEventListener/index.js';
 /**
  * Svelte action that listens for Escape keydown on an element or the document.
  *
@@ -18,20 +19,16 @@
  */
 export const useEscapeKeydown = (_node, initialOptions) => {
     let currentOptions = initialOptions;
-    function handleKeydown(event) {
+    useEventListener(() => document, 'keydown', (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/useEventListener/index.d.ts

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

package/dist/hooks/useEventListener/index.js

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

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

@@ -0,0 +1,30 @@
+type MaybeGetter<T> = T | (() => T);
+/**
+ * Attach event listener(s) to a target with automatic cleanup.
+ *
+ * Binds inside an `$effect` and removes the listener(s) on teardown. The target
+ * may be a value or a getter; when it is a getter that reads reactive state, the
+ * listener re-binds as the target changes. SSR-safe: a nullish target is a no-op.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useEventListener } from 'sv5ui'
+ *
+ *   let el = $state<HTMLElement>()
+ *
+ *   // Window target (static)
+ *   useEventListener(window, 'resize', () => console.log('resized'))
+ *
+ *   // Element target (reactive getter) + multiple event types
+ *   useEventListener(() => el, ['pointerenter', 'focus'], () => console.log('active'))
+ * </script>
+ *
+ * <div bind:this={el}>hover or focus me</div>
+ * ```
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(target: MaybeGetter<Window | null | undefined>, type: K | K[], handler: (this: Window, event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(target: MaybeGetter<Document | null | undefined>, type: K | K[], handler: (this: Document, event: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap>(target: MaybeGetter<HTMLElement | null | undefined>, type: K | K[], handler: (this: HTMLElement, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener(target: MaybeGetter<EventTarget | null | undefined>, type: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+export {};

package/dist/hooks/useEventListener/useEventListener.svelte.js

@@ -0,0 +1,16 @@
+import { toGetter } from '../utils.js';
+export function useEventListener(target, type, handler, options) {
+    const resolveTarget = toGetter(target);
+    const types = Array.isArray(type) ? type : [type];
+    $effect(() => {
+        const el = resolveTarget();
+        if (!el)
+            return;
+        for (const t of types)
+            el.addEventListener(t, handler, options);
+        return () => {
+            for (const t of types)
+                el.removeEventListener(t, handler, options);
+        };
+    });
+}

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

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

package/dist/hooks/useFocusTrap/index.js

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

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

@@ -0,0 +1,42 @@
+type ElementTarget = HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
+export interface UseFocusTrapOptions {
+    /**
+     * Whether the trap is active. Accepts a value or a reactive getter.
+     * @default true
+     */
+    active?: boolean | (() => boolean);
+    /**
+     * Element to focus when the trap activates. A getter is resolved on activate.
+     * Pass `false` to skip auto-focus. Defaults to the first focusable element.
+     */
+    initialFocus?: HTMLElement | (() => HTMLElement | null) | false;
+    /**
+     * Restore focus to the previously focused element when the trap deactivates.
+     * @default true
+     */
+    restoreFocus?: boolean;
+}
+/**
+ * Trap keyboard focus within an element while active, and restore focus on exit.
+ *
+ * Cycles Tab / Shift+Tab among the focusable descendants of `target`, focuses an
+ * initial element on activation, and (by default) returns focus to the previously
+ * focused element when it deactivates or unmounts. The target and `active` may be
+ * values or reactive getters. SSR-safe: a nullish/inactive target is a no-op.
+ *
+ * Intended for custom focus-scoped UI. Components built on bits-ui primitives
+ * (Modal, Slideover, Drawer, Popover) already trap focus — do not double-wrap them.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFocusTrap } from 'sv5ui'
+ *
+ *   let open = $state(false)
+ *   let panel = $state<HTMLElement>()
+ *   useFocusTrap(() => panel, { active: () => open })
+ * </script>
+ * ```
+ */
+export declare function useFocusTrap(target: ElementTarget, options?: UseFocusTrapOptions): void;
+export {};

package/dist/hooks/useFocusTrap/useFocusTrap.svelte.js

@@ -0,0 +1,87 @@
+import { toGetter } from '../utils.js';
+import { useEventListener } from '../useEventListener/index.js';
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    'details > summary:first-of-type'
+].join(',');
+function getFocusable(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+/**
+ * Trap keyboard focus within an element while active, and restore focus on exit.
+ *
+ * Cycles Tab / Shift+Tab among the focusable descendants of `target`, focuses an
+ * initial element on activation, and (by default) returns focus to the previously
+ * focused element when it deactivates or unmounts. The target and `active` may be
+ * values or reactive getters. SSR-safe: a nullish/inactive target is a no-op.
+ *
+ * Intended for custom focus-scoped UI. Components built on bits-ui primitives
+ * (Modal, Slideover, Drawer, Popover) already trap focus — do not double-wrap them.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFocusTrap } from 'sv5ui'
+ *
+ *   let open = $state(false)
+ *   let panel = $state<HTMLElement>()
+ *   useFocusTrap(() => panel, { active: () => open })
+ * </script>
+ * ```
+ */
+export function useFocusTrap(target, options = {}) {
+    const resolveTarget = toGetter(target);
+    const resolveActive = toGetter(options.active ?? true);
+    const { initialFocus, restoreFocus = true } = options;
+    $effect(() => {
+        if (!resolveActive())
+            return;
+        const resolved = resolveTarget();
+        if (!resolved)
+            return;
+        const el = resolved;
+        const previouslyFocused = document.activeElement;
+        if (initialFocus !== false) {
+            const initial = typeof initialFocus === 'function' ? initialFocus() : initialFocus;
+            (initial ?? getFocusable(el)[0] ?? el).focus();
+        }
+        return () => {
+            if (restoreFocus && previouslyFocused && document.contains(previouslyFocused)) {
+                previouslyFocused.focus();
+            }
+        };
+    });
+    useEventListener(() => (resolveActive() && resolveTarget() ? document : null), 'keydown', (event) => {
+        if (event.key !== 'Tab')
+            return;
+        const el = resolveTarget();
+        if (!el)
+            return;
+        const focusable = getFocusable(el);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey) {
+            if (active === first || !el.contains(active)) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+        else if (active === last || !el.contains(active)) {
+            event.preventDefault();
+            first.focus();
+        }
+    }, true);
+}

package/dist/hooks/useFormField/HookContextProbe.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import { useFormField } from "./useFormField.svelte.js";
+const ctx = useFormField();
+</script>
+
+<div data-name={ctx?.name ?? 'none'} data-has={String(!!ctx)}>probe</div>

package/dist/hooks/useFormField/HookContextProvider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import { setContext } from "svelte";
+import { FORM_FIELD_CONTEXT_KEY } from "./useFormField.svelte.js";
+import HookContextProbe from "./HookContextProbe.svelte";
+setContext(FORM_FIELD_CONTEXT_KEY, { name: "email", size: "md", ariaId: "ff" });
+</script>
+
+<HookContextProbe />

package/dist/hooks/useFormField/HookEmitProbe.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { useFormFieldEmit } from "./useFormField.svelte.js";
+const emit = useFormFieldEmit();
+function fireAll() {
+  emit.onBlur();
+  emit.onFocus();
+  emit.onChange();
+  emit.onInput();
+}
+</script>
+
+<button data-testid="fire" onclick={fireAll}>fire</button>

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

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

package/dist/hooks/useFormField/index.js

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

package/dist/hooks/{useFormField.svelte.d.ts → useFormField/useFormField.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { FormFieldProps } from '../FormField/form-field.types.js';
+import type { FormFieldProps } from '../../components/FormField/form-field.types.js';
 /**
  * Symbol key for the FormField context. Using a Symbol instead of a string
  * prevents collisions with unrelated `getContext('formField')` calls from

package/dist/hooks/{useFormField.svelte.js → useFormField/useFormField.svelte.js}

@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import { getFormContext } from '../Form/form.context.svelte.js';
+import { getFormContext } from '../../components/Form/form.context.svelte.js';
 /**
  * Symbol key for the FormField context. Using a Symbol instead of a string
  * prevents collisions with unrelated `getContext('formField')` calls from