sv5ui 2.0.0 → 2.2.0

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Tooltip } from "bits-ui";
+import { tooltipVariants, tooltipDefaults } from "./tooltip.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Kbd from "../Kbd/Kbd.svelte";
+const config = getComponentConfig("tooltip", tooltipDefaults);
+let {
+  ref = $bindable(null),
+  open = $bindable(false),
+  onOpenChange,
+  delayDuration,
+  disableHoverableContent,
+  disableCloseOnTriggerClick,
+  ignoreNonKeyboardFocus,
+  disabled = false,
+  side = "bottom",
+  sideOffset = 8,
+  align = "center",
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionBoundary,
+  collisionPadding = 8,
+  sticky = "partial",
+  hideWhenDetached = false,
+  onEscapeKeydown,
+  forceMount,
+  text,
+  kbds,
+  arrow = false,
+  transition = config.defaultVariants.transition ?? true,
+  portal = true,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  ...restProps
+} = $props();
+const hasText = $derived(!!text);
+const hasKbds = $derived(!!kbds?.length);
+const hasContent = $derived(hasText || hasKbds || !!contentSlot);
+const variantSlots = $derived(tooltipVariants({ transition }));
+const kbdsSize = config.slots.kbdsSize ?? "sm";
+const classes = $derived({
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+  text: variantSlots.text({ class: [config.slots.text, ui?.text] }),
+  kbds: variantSlots.kbds({ class: [config.slots.kbds, ui?.kbds] })
+});
+const arrowProps = $derived.by(() => {
+  if (typeof arrow === "object") {
+    return { width: 12, height: 6, ...arrow };
+  }
+  return { width: 12, height: 6 };
+});
+</script>
+
+{#snippet tooltipContent()}
+    {#if contentSlot}
+        {@render contentSlot()}
+    {:else}
+        {#if hasText}
+            <span class={classes.text}>{text}</span>
+        {/if}
+
+        {#if hasKbds}
+            <span class={classes.kbds}>
+                {#each kbds as kbd, index (index)}
+                    {#if index > 0}
+                        <span class="mx-0.5 text-inverse-on-surface/60">·</span>
+                    {/if}
+                    {#if typeof kbd === 'string'}
+                        <Kbd value={kbd} size={kbdsSize} variant="soft" color="surface" />
+                    {:else}
+                        <Kbd size={kbdsSize} variant="soft" color="surface" {...kbd} />
+                    {/if}
+                {/each}
+            </span>
+        {/if}
+    {/if}
+{/snippet}
+
+{#snippet tooltipContentEl()}
+    <Tooltip.Content
+        bind:ref
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {sticky}
+        {hideWhenDetached}
+        {onEscapeKeydown}
+        {forceMount}
+        class={classes.content}
+        {...restProps}
+    >
+        {@render tooltipContent()}
+
+        {#if arrow}
+            <Tooltip.Arrow
+                width={arrowProps.width}
+                height={arrowProps.height}
+                class={classes.arrow}
+            />
+        {/if}
+    </Tooltip.Content>
+{/snippet}
+
+<Tooltip.Provider {delayDuration} {disableHoverableContent}>
+    <Tooltip.Root
+        bind:open
+        {onOpenChange}
+        {disableCloseOnTriggerClick}
+        {ignoreNonKeyboardFocus}
+        disabled={disabled || !hasContent}
+    >
+        {#if children}
+            <Tooltip.Trigger>
+                {#snippet child({ props })}
+                    <span {...props} class={[className]}>
+                        {@render children({ open })}
+                    </span>
+                {/snippet}
+            </Tooltip.Trigger>
+        {/if}
+
+        {#if portal}
+            <Tooltip.Portal>
+                {@render tooltipContentEl()}
+            </Tooltip.Portal>
+        {:else}
+            {@render tooltipContentEl()}
+        {/if}
+    </Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/Tooltip/TooltipTestWrapper.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import Tooltip from "./Tooltip.svelte";
+let props = $props();
+</script>
+
+<Tooltip {...props} />

package/dist/{Tooltip → components/Tooltip}/tooltip.types.d.ts

@@ -8,6 +8,8 @@ type ProviderProps = Pick<TooltipProviderPropsWithoutHTML, 'delayDuration' | 'di
 type RootProps = Pick<TooltipRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'disableCloseOnTriggerClick' | 'ignoreNonKeyboardFocus' | 'disabled'>;
 type ContentProps = Pick<TooltipContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'forceMount'>;
 export interface TooltipProps extends ProviderProps, RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the content DOM element.
      */

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/hooks/index.d.ts

@@ -1,14 +1,16 @@
-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';

package/dist/hooks/index.js

@@ -1,7 +1,16 @@
-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';

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 {};