sv5ui 2.1.0 → 2.2.0

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>

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

@@ -1,104 +1,85 @@
-<script lang="ts" module>
-    import type { RadioGroupProps } from './radio-group.types.js'
-
-    export type Props = RadioGroupProps
-</script>
-
-<script lang="ts">
-    import { RadioGroup, Label, useId } from 'bits-ui'
-    import { radioGroupVariants, radioGroupDefaults } from './radio-group.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import type { RadioGroupItem } from './radio-group.types.js'
-
-    const config = getComponentConfig('radioGroup', radioGroupDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(''),
-        onValueChange,
-        items = [],
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        indicator = config.defaultVariants.indicator,
-        orientation = config.defaultVariants.orientation,
-        disabled = false,
-        required = false,
-        readonly = false,
-        loop = true,
-        loading = false,
-        loadingIcon = icons.loading,
-        legend,
-        legendSlot,
-        labelSlot,
-        descriptionSlot,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const autoId = useId()
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const isDisabled = $derived(disabled || loading)
-    const legendId = $derived(`${resolvedId}-legend`)
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const slots = $derived(
-        radioGroupVariants({
-            color: resolvedColor,
-            size: resolvedSize,
-            variant,
-            indicator,
-            orientation,
-            loading,
-            required,
-            disabled: isDisabled ? true : undefined
-        })
-    )
-
-    const layoutClasses = $derived.by(() => ({
-        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-        fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
-        legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
-        item: slots.item({ class: [config.slots.item, ui?.item] }),
-        container: slots.container({ class: [config.slots.container, ui?.container] }),
-        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
-    }))
-
-    const elementClasses = $derived.by(() => ({
-        base: slots.base({ class: [config.slots.base, ui?.base] }),
-        indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-        loadingIcon: slots.loadingIcon({ class: [config.slots.loadingIcon, ui?.loadingIcon] }),
-        label: slots.label({ class: [config.slots.label, ui?.label] }),
-        description: slots.description({ class: [config.slots.description, ui?.description] })
-    }))
-
-    function handleCardItemClick(e: MouseEvent, btnId: string, itemDisabled: boolean) {
-        if (itemDisabled) return
-        if ((e.target as Element).closest('button')) return
-        document.getElementById(btnId)?.click()
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { RadioGroup, Label, useId } from "bits-ui";
+import { radioGroupVariants, radioGroupDefaults } from "./radio-group.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("radioGroup", radioGroupDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable(""),
+  onValueChange,
+  items = [],
+  ui,
+  id,
+  name,
+  color = config.defaultVariants.color,
+  size,
+  variant = config.defaultVariants.variant,
+  indicator = config.defaultVariants.indicator,
+  orientation = config.defaultVariants.orientation,
+  disabled = false,
+  required = false,
+  readonly = false,
+  loop = true,
+  loading = false,
+  loadingIcon = icons.loading,
+  legend,
+  legendSlot,
+  labelSlot,
+  descriptionSlot,
+  class: className,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const autoId = useId();
+const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const isDisabled = $derived(disabled || loading);
+const legendId = $derived(`${resolvedId}-legend`);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const slots = $derived(
+  radioGroupVariants({
+    color: resolvedColor,
+    size: resolvedSize,
+    variant,
+    indicator,
+    orientation,
+    loading,
+    required,
+    disabled: isDisabled ? true : void 0
+  })
+);
+const layoutClasses = $derived.by(() => ({
+  root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+  fieldset: slots.fieldset({ class: [config.slots.fieldset, ui?.fieldset] }),
+  legend: slots.legend({ class: [config.slots.legend, ui?.legend] }),
+  item: slots.item({ class: [config.slots.item, ui?.item] }),
+  container: slots.container({ class: [config.slots.container, ui?.container] }),
+  wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] })
+}));
+const elementClasses = $derived.by(() => ({
+  base: slots.base({ class: [config.slots.base, ui?.base] }),
+  indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+  loadingIcon: slots.loadingIcon({ class: [config.slots.loadingIcon, ui?.loadingIcon] }),
+  label: slots.label({ class: [config.slots.label, ui?.label] }),
+  description: slots.description({ class: [config.slots.description, ui?.description] })
+}));
+function handleCardItemClick(e, btnId, itemDisabled) {
+  if (itemDisabled) return;
+  if (e.target.closest("button")) return;
+  document.getElementById(btnId)?.click();
+}
 </script>
 
 {#snippet itemContent(radioItem: RadioGroupItem)}