sv5ui 2.1.0 → 2.3.0

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>

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Popover } from "bits-ui";
+import { popoverVariants, popoverDefaults } from "./popover.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("popover", popoverDefaults);
+let {
+  ref = $bindable(null),
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  side = "bottom",
+  sideOffset = 8,
+  align = "center",
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionBoundary,
+  collisionPadding = 8,
+  sticky = "partial",
+  hideWhenDetached = false,
+  trapFocus = true,
+  preventScroll = false,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeydown,
+  onInteractOutside,
+  forceMount,
+  arrow = false,
+  transition = config.defaultVariants.transition ?? true,
+  portal = true,
+  dismissible = true,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  ...restProps
+} = $props();
+const variantSlots = $derived(popoverVariants({ transition }));
+const classes = $derived({
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
+});
+const arrowProps = $derived.by(() => {
+  if (typeof arrow === "object") {
+    return { width: 12, height: 6, ...arrow };
+  }
+  return { width: 12, height: 6 };
+});
+const dismissBehavior = $derived(dismissible ? "close" : "ignore");
+function close() {
+  open = false;
+}
+</script>
+
+{#snippet popoverContentEl()}
+    <Popover.Content
+        bind:ref
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {sticky}
+        {hideWhenDetached}
+        {trapFocus}
+        {preventScroll}
+        escapeKeydownBehavior={dismissBehavior}
+        interactOutsideBehavior={dismissBehavior}
+        {onOpenAutoFocus}
+        {onCloseAutoFocus}
+        {onEscapeKeydown}
+        {onInteractOutside}
+        {forceMount}
+        class={[classes.content, !children ? className : undefined]}
+        {...restProps}
+    >
+        {#if contentSlot}
+            {@render contentSlot({ open, close })}
+        {/if}
+
+        {#if arrow}
+            <Popover.Arrow
+                width={arrowProps.width}
+                height={arrowProps.height}
+                class={classes.arrow}
+            />
+        {/if}
+    </Popover.Content>
+{/snippet}
+
+<Popover.Root bind:open {onOpenChange} {onOpenChangeComplete}>
+    {#if children}
+        <Popover.Trigger>
+            {#snippet child({ props })}
+                <span {...props} class={[className]}>
+                    {@render children({ open })}
+                </span>
+            {/snippet}
+        </Popover.Trigger>
+    {/if}
+
+    {#if portal}
+        <Popover.Portal>
+            {@render popoverContentEl()}
+        </Popover.Portal>
+    {:else}
+        {@render popoverContentEl()}
+    {/if}
+</Popover.Root>

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Progress } from "bits-ui";
+import { progressVariants, progressDefaults } from "./progress.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("progress", progressDefaults);
+let {
+  ref = $bindable(null),
+  value = null,
+  max = 100,
+  status = false,
+  color = config.defaultVariants.color,
+  size = config.defaultVariants.size,
+  orientation = config.defaultVariants.orientation,
+  inverted = false,
+  animation = config.defaultVariants.animation,
+  ui,
+  class: className,
+  statusSlot,
+  stepSlot,
+  ...restProps
+} = $props();
+const isIndeterminate = $derived(value === null);
+const hasSteps = $derived(Array.isArray(max));
+const realMax = $derived.by(() => {
+  if (isIndeterminate || !max) return void 0;
+  if (Array.isArray(max)) return max.length - 1;
+  return Number(max);
+});
+const percent = $derived.by(() => {
+  if (isIndeterminate) return void 0;
+  if (value < 0) return 0;
+  if (value > (realMax ?? 100)) return 100;
+  return Math.round(value / (realMax ?? 100) * 100);
+});
+const indicatorStyle = $derived.by(() => {
+  if (percent === void 0) return "";
+  const offset = 100 - percent;
+  if (orientation === "vertical") {
+    return `transform: translateY(${inverted ? "" : "-"}${offset}%);`;
+  }
+  return `transform: translateX(${inverted ? "" : "-"}${offset}%);`;
+});
+const statusStyle = $derived.by(() => {
+  const val = `${Math.max(percent ?? 0, 0)}%`;
+  return orientation === "vertical" ? `height: ${val};` : `width: ${val};`;
+});
+function stepVariant(index) {
+  const isActive = index === Number(value);
+  const isFirst = index === 0;
+  const isLast = index === realMax;
+  if (isActive && !isFirst) return "active";
+  if (isFirst && isActive) return "first";
+  if (isLast && isActive) return "last";
+  return "other";
+}
+const classes = $derived.by(() => {
+  const slots = progressVariants({ animation, color, size, orientation, inverted });
+  return {
+    root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+    base: slots.base({ class: [config.slots.base, ui?.base] }),
+    indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+    status: slots.status({ class: [config.slots.status, ui?.status] }),
+    steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
+  };
+});
+const stepClasses = $derived.by(() => {
+  const make = (step) => progressVariants({ size, orientation, inverted, step }).step({
+    class: [config.slots.step, ui?.step]
+  });
+  return {
+    active: make("active"),
+    first: make("first"),
+    last: make("last"),
+    other: make("other")
+  };
+});
+const state = $derived(isIndeterminate ? "indeterminate" : "determinate");
+</script>
+
+<Progress.Root
+    bind:ref
+    value={value ?? undefined}
+    max={realMax}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#if !isIndeterminate && status}
+        <div class={classes.status} style={statusStyle}>
+            {#if statusSlot}
+                {@render statusSlot({ percent: percent ?? 0 })}
+            {:else}
+                {percent}%
+            {/if}
+        </div>
+    {/if}
+
+    <div class={classes.base}>
+        <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
+    </div>
+
+    {#if hasSteps && Array.isArray(max)}
+        <div class={classes.steps}>
+            {#each max as step, index (index)}
+                {@const stepClass = stepClasses[stepVariant(index)]}
+                <div class={stepClass}>
+                    {#if stepSlot}
+                        {@render stepSlot({ step, index })}
+                    {:else}
+                        {step}
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    {/if}
+</Progress.Root>