sv5ui 2.1.0 → 2.2.0

package/dist/components/Link/Link.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>function parseUrl(url, baseUrl) {
+  try {
+    const parsed = new URL(url, baseUrl.origin);
+    return {
+      pathname: parsed.pathname,
+      query: parsed.searchParams,
+      hash: parsed.hash
+    };
+  } catch {
+    return {
+      pathname: url,
+      query: new URLSearchParams(),
+      hash: ""
+    };
+  }
+}
+function isQueryMatch(linkQuery, currentQuery, mode) {
+  if (mode === false) return true;
+  if (mode === "partial") {
+    for (const [key, value] of linkQuery) {
+      if (!currentQuery.getAll(key).includes(value)) return false;
+    }
+    return true;
+  }
+  if (linkQuery.size !== currentQuery.size) return false;
+  const sorted = (p) => new URLSearchParams([...p].sort()).toString();
+  return sorted(linkQuery) === sorted(currentQuery);
+}
+function isPathnameMatch(linkPath, currentPath, exactMatch) {
+  if (exactMatch) return linkPath === currentPath;
+  const link = linkPath.replace(/\/$/, "") || "/";
+  const current = currentPath.replace(/\/$/, "") || "/";
+  return link === "/" ? current === "/" : current === link || current.startsWith(link + "/");
+}
+</script>
+
+<script lang="ts">import { page } from "$app/state";
+import { twMerge } from "tailwind-merge";
+import { linkVariants, linkDefaults } from "./link.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("link", linkDefaults);
+let {
+  ref = $bindable(null),
+  href,
+  type,
+  active,
+  exact = false,
+  exactQuery = false,
+  exactHash = false,
+  activeClass,
+  inactiveClass,
+  disabled = false,
+  raw = false,
+  external,
+  children,
+  class: className,
+  ui,
+  target,
+  rel,
+  onclick,
+  ...restProps
+} = $props();
+const isLink = $derived(!!href);
+const isExternal = $derived(
+  isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")))
+);
+const resolvedTarget = $derived(
+  isLink ? target ?? (isExternal ? "_blank" : void 0) : void 0
+);
+const resolvedRel = $derived(
+  isLink ? rel ?? (isExternal || resolvedTarget === "_blank" ? "noopener noreferrer" : void 0) : void 0
+);
+const isActive = $derived.by(() => {
+  if (active !== void 0) return active;
+  if (!isLink || !page.url || isExternal) return false;
+  const link = parseUrl(href, page.url);
+  if (exactHash && link.hash !== page.url.hash) return false;
+  if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false;
+  return isPathnameMatch(link.pathname, page.url.pathname, exact);
+});
+const baseClass = $derived.by(() => {
+  const stateClass = isActive ? activeClass : inactiveClass;
+  if (raw) return twMerge(stateClass, className);
+  const slots = linkVariants({ active: isActive, disabled, raw });
+  return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] });
+});
+const ariaCurrent = $derived(isActive && exact ? "page" : void 0);
+function handleClick(e) {
+  if (disabled) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+  if (typeof onclick === "function") {
+    ;
+    onclick(e);
+  }
+}
+</script>
+
+{#if isLink}
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+        bind:this={ref}
+        {...restProps}
+        href={disabled ? undefined : href}
+        class={baseClass}
+        target={resolvedTarget}
+        rel={resolvedRel}
+        role={disabled ? 'link' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={ariaCurrent}
+        tabindex={disabled ? -1 : undefined}
+        onclick={handleClick}
+    >
+        <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+        bind:this={ref}
+        {...restProps}
+        type={type ?? 'button'}
+        class={baseClass}
+        {disabled}
+        aria-current={ariaCurrent}
+        onclick={handleClick}
+    >
+        {@render children?.()}
+    </button>
+{/if}

package/dist/{Modal → components/Modal}/Modal.svelte

@@ -1,111 +1,97 @@
-<script lang="ts" module>
-    import type { ModalProps } from './modal.types.js'
-
-    export type Props = ModalProps
-</script>
-
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import { modalVariants, modalDefaults } from './modal.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('modal', modalDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? 'scale',
-        size = config.defaultVariants.size ?? 'md',
-        fullscreen = false,
-        portal = true,
-        close: closeProp = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        header: headerSlot,
-        titleSlot,
-        descriptionSlot,
-        actions: actionsSlot,
-        body: bodySlot,
-        footer: footerSlot,
-        closeSlot
-    }: Props = $props()
-
-    const resolvedSize = $derived(fullscreen ? 'full' : size)
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'scale' : transition
-    )
-
-    const showClose = $derived(!!closeProp)
-    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
-
-    const hasTitle = $derived(!!title || !!titleSlot)
-    const hasDescription = $derived(!!description || !!descriptionSlot)
-    const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(
-        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
-    )
-
-    const variantSlots = $derived(
-        modalVariants({
-            transition: resolvedTransition,
-            size: resolvedSize,
-            overlay: showOverlay,
-            scrollable
-        })
-    )
-
-    const classes = $derived({
-        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
-        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
-    })
-
-    const contentProps = $derived.by(() => {
-        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
-        return {
-            trapFocus,
-            preventScroll,
-            escapeKeydownBehavior: behavior,
-            interactOutsideBehavior: behavior,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onEscapeKeydown,
-            onInteractOutside,
-            forceMount,
-            restoreScrollDelay
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import { modalVariants, modalDefaults } from "./modal.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("modal", modalDefaults);
+let {
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  trapFocus = true,
+  preventScroll = true,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeydown,
+  onInteractOutside,
+  forceMount,
+  restoreScrollDelay,
+  title,
+  description,
+  overlay: showOverlay = config.defaultVariants.overlay ?? true,
+  scrollable = config.defaultVariants.scrollable ?? false,
+  transition = config.defaultVariants.transition ?? "scale",
+  size = config.defaultVariants.size ?? "md",
+  fullscreen = false,
+  portal = true,
+  close: closeProp = true,
+  dismissible = true,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  header: headerSlot,
+  titleSlot,
+  descriptionSlot,
+  actions: actionsSlot,
+  body: bodySlot,
+  footer: footerSlot,
+  closeSlot
+} = $props();
+const resolvedSize = $derived(fullscreen ? "full" : size);
+const resolvedTransition = $derived(
+  transition === false ? "none" : transition === true ? "scale" : transition
+);
+const showClose = $derived(!!closeProp);
+const closeProps = $derived(typeof closeProp === "object" ? closeProp : {});
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(
+  !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+);
+const variantSlots = $derived(
+  modalVariants({
+    transition: resolvedTransition,
+    size: resolvedSize,
+    overlay: showOverlay,
+    scrollable
+  })
+);
+const classes = $derived({
+  overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+  wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+  title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+  description: variantSlots.description({
+    class: [config.slots.description, ui?.description]
+  }),
+  actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+  body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+  footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+  close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+});
+const contentProps = $derived.by(() => {
+  const behavior = dismissible ? "close" : "ignore";
+  return {
+    trapFocus,
+    preventScroll,
+    escapeKeydownBehavior: behavior,
+    interactOutsideBehavior: behavior,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeydown,
+    onInteractOutside,
+    forceMount,
+    restoreScrollDelay
+  };
+});
+function handleOpenChange(value) {
+  open = value;
+  onOpenChange?.(value);
+}
 </script>
 
 {#snippet titleEl()}

package/dist/{Modal → components/Modal}/ModalTriggerTestWrapper.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">
-    import Modal from './Modal.svelte'
+<script lang="ts">import Modal from "./Modal.svelte";
 </script>
 
 <Modal title="Trigger test" description="D">

package/dist/{Pagination → components/Pagination}/Pagination.svelte

@@ -1,97 +1,83 @@
-<script lang="ts" module>
-    import type { PaginationProps } from './pagination.types.js'
+<script lang="ts" module></script>
 
-    export type Props = PaginationProps
-</script>
-
-<script lang="ts">
-    import { Pagination } from 'bits-ui'
-    import { untrack } from 'svelte'
-    import {
-        paginationVariants,
-        paginationDefaults,
-        activeVariantColorClasses
-    } from './pagination.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import ButtonComponent from '../Button/Button.svelte'
-
-    const config = getComponentConfig('pagination', paginationDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        page = $bindable(),
-        defaultPage = 1,
-        total = 0,
-        itemsPerPage = 10,
-        siblingCount = 1,
-        showEdges = false,
-        showControls = true,
-        disabled = false,
-        onPageChange,
-        size = config.defaultVariants.size ?? 'md',
-        variant = config.defaultVariants.variant ?? 'ghost',
-        color = config.defaultVariants.color ?? 'surface',
-        activeColor = config.defaultVariants.activeColor ?? 'primary',
-        activeVariant = config.defaultVariants.activeVariant ?? 'solid',
-        firstIcon = icons.chevronsLeft,
-        prevIcon = icons.chevronLeft,
-        nextIcon = icons.chevronRight,
-        lastIcon = icons.chevronsRight,
-        ellipsisIcon = icons.ellipsis,
-        ui,
-        class: className,
-        firstSlot,
-        prevSlot,
-        nextSlot,
-        lastSlot,
-        ellipsisSlot,
-        itemSlot,
-        ...restProps
-    }: Props = $props()
-
-    if (page === undefined) {
-        page = untrack(() => defaultPage)
-    }
-
-    const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)))
-    const isFirstPage = $derived(page === 1)
-    const isLastPage = $derived(page === totalPages)
-    const prevDisabled = $derived(disabled || isFirstPage)
-    const nextDisabled = $derived(disabled || isLastPage)
-
-    const variantSlots = $derived(paginationVariants({ size, disabled }))
-    const activeCls = $derived(
-        activeVariantColorClasses[activeVariant]?.[activeColor] ??
-            activeVariantColorClasses.solid.primary
-    )
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className] }),
-        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-        item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
-        ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
-        ellipsisIcon: variantSlots.ellipsisIcon({
-            class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
-        }),
-        first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
-        prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
-        next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
-        last: variantSlots.last({ class: [config.slots.last, ui?.last] })
-    })
-
-    function handlePageChange(newPage: number) {
-        page = newPage
-        onPageChange?.(newPage)
-    }
-
-    function goToFirst() {
-        if (!isFirstPage) handlePageChange(1)
-    }
-
-    function goToLast() {
-        if (!isLastPage) handlePageChange(totalPages)
-    }
+<script lang="ts">import { Pagination } from "bits-ui";
+import { untrack } from "svelte";
+import {
+  paginationVariants,
+  paginationDefaults,
+  activeVariantColorClasses
+} from "./pagination.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import ButtonComponent from "../Button/Button.svelte";
+const config = getComponentConfig("pagination", paginationDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  page = $bindable(),
+  defaultPage = 1,
+  total = 0,
+  itemsPerPage = 10,
+  siblingCount = 1,
+  showEdges = false,
+  showControls = true,
+  disabled = false,
+  onPageChange,
+  size = config.defaultVariants.size ?? "md",
+  variant = config.defaultVariants.variant ?? "ghost",
+  color = config.defaultVariants.color ?? "surface",
+  activeColor = config.defaultVariants.activeColor ?? "primary",
+  activeVariant = config.defaultVariants.activeVariant ?? "solid",
+  firstIcon = icons.chevronsLeft,
+  prevIcon = icons.chevronLeft,
+  nextIcon = icons.chevronRight,
+  lastIcon = icons.chevronsRight,
+  ellipsisIcon = icons.ellipsis,
+  ui,
+  class: className,
+  firstSlot,
+  prevSlot,
+  nextSlot,
+  lastSlot,
+  ellipsisSlot,
+  itemSlot,
+  ...restProps
+} = $props();
+if (page === void 0) {
+  page = untrack(() => defaultPage);
+}
+const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)));
+const isFirstPage = $derived(page === 1);
+const isLastPage = $derived(page === totalPages);
+const prevDisabled = $derived(disabled || isFirstPage);
+const nextDisabled = $derived(disabled || isLastPage);
+const variantSlots = $derived(paginationVariants({ size, disabled }));
+const activeCls = $derived(
+  activeVariantColorClasses[activeVariant]?.[activeColor] ?? activeVariantColorClasses.solid.primary
+);
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className] }),
+  list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+  item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
+  ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
+  ellipsisIcon: variantSlots.ellipsisIcon({
+    class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
+  }),
+  first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
+  prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
+  next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
+  last: variantSlots.last({ class: [config.slots.last, ui?.last] })
+});
+function handlePageChange(newPage) {
+  page = newPage;
+  onPageChange?.(newPage);
+}
+function goToFirst() {
+  if (!isFirstPage) handlePageChange(1);
+}
+function goToLast() {
+  if (!isLastPage) handlePageChange(totalPages);
+}
 </script>
 
 <Pagination.Root

package/dist/components/PinInput/PinInput.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { PinInput, useId } from "bits-ui";
+import { pinInputVariants, pinInputDefaults } from "./pin-input.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+import { useTimeout } from "../../hooks/useTimers/index.js";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("pinInput", pinInputDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  defaultValue = "",
+  value = $bindable(defaultValue),
+  onValueChange,
+  onComplete,
+  length = 5,
+  type = "text",
+  mask = false,
+  otp = false,
+  disabled = false,
+  required,
+  textalign,
+  pasteTransformer,
+  pushPasswordManagerStrategy,
+  inputId,
+  name,
+  placeholder = "\u25CB",
+  autofocus = false,
+  autofocusDelay = 0,
+  highlight = false,
+  loading = false,
+  loadingIcon = icons.loading,
+  fixed = false,
+  color = config.defaultVariants.color,
+  size,
+  variant = config.defaultVariants.variant,
+  class: className,
+  ui,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const isDisabled = $derived(disabled || loading);
+const autoInputId = useId();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedInputId = $derived(inputId ?? formFieldContext?.ariaId ?? autoInputId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedHighlight = $derived(hasError || highlight);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const resolvedPasteTransformer = $derived(
+  pasteTransformer ?? (type === "number" ? (text) => text.replace(/\D/g, "") : void 0)
+);
+function handleValueChange(v) {
+  const filtered = type === "number" ? v.replace(/\D/g, "") : v;
+  value = filtered;
+  emit.onInput();
+  onValueChange?.(filtered);
+}
+function handleComplete(v) {
+  emit.onChange();
+  onComplete?.(v);
+}
+const slots = $derived(
+  pinInputVariants({
+    variant,
+    color: resolvedColor,
+    size: resolvedSize,
+    highlight: resolvedHighlight,
+    fixed,
+    disabled: isDisabled
+  })
+);
+const classes = $derived.by(() => {
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [config.slots.root, className, u.root] }),
+    base: slots.base({ class: [config.slots.base, u.base] })
+  };
+});
+useTimeout(
+  () => {
+    const input = ref?.querySelector("[data-pin-input-input]");
+    input?.focus();
+  },
+  () => autofocus ? autofocusDelay : null
+);
+</script>
+
+<div class="relative inline-flex" {...restProps}>
+    {#if resolvedName}
+        <input type="hidden" name={resolvedName} {value} />
+    {/if}
+    {#if loading}
+        <span
+            class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-surface/60"
+            aria-hidden="true"
+        >
+            <Icon name={loadingIcon} class="size-5 animate-spin text-on-surface-variant" />
+        </span>
+    {/if}
+    <PinInput.Root
+        bind:ref
+        {value}
+        maxlength={length}
+        disabled={isDisabled}
+        {textalign}
+        onComplete={handleComplete}
+        pasteTransformer={resolvedPasteTransformer}
+        {pushPasswordManagerStrategy}
+        inputId={resolvedInputId}
+        autocomplete={otp ? 'one-time-code' : undefined}
+        inputmode={type === 'number' ? 'numeric' : 'text'}
+        {required}
+        aria-describedby={ariaDescribedBy}
+        onValueChange={handleValueChange}
+        class={classes.root}
+    >
+        {#snippet children({ cells })}
+            {#each cells as cell, i (i)}
+                <PinInput.Cell {cell} class={classes.base}>
+                    {#if mask && cell.char}
+                        <span class="block size-2 rounded-full bg-current"></span>
+                    {:else if cell.char}
+                        {cell.char}
+                    {:else if cell.hasFakeCaret}
+                        <span class="pointer-events-none absolute animate-pulse select-none">|</span
+                        >
+                    {:else}
+                        <span class="text-on-surface/30">{placeholder}</span>
+                    {/if}
+                </PinInput.Cell>
+            {/each}
+        {/snippet}
+    </PinInput.Root>
+</div>