@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/src/RadialProgress.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { formatPercent, isDeterminate, normalizeRange } from "./progress.behavior";
+  import {
+    radialProgress,
+    type RadialProgressSize,
+  } from "./radial-progress.variants";
+  import type { Tone } from "./tone";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Omit the value for an indeterminate radial indicator. */
+    value?: number | null;
+    /** Lower bound of the scale, exposed as `aria-valuemin`; defaults to `0`. */
+    min?: number;
+    /**
+     * Upper bound of the scale, exposed as `aria-valuemax`; defaults to `100`. A `max` not above
+     * `min` is widened to one unit.
+     */
+    max?: number;
+    /** Accessible name of the progress indicator; defaults to `Progress`. */
+    label?: string;
+    /**
+     * Diameter of the ring, following the Density control heights: `sm`, `md` or `lg`. Defaults
+     * to `md`.
+     */
+    size?: RadialProgressSize;
+    /**
+     * Formats the clamped value for the centered text and `aria-valuetext`; defaults to a rounded
+     * percentage.
+     */
+    formatValue?: (value: number) => string;
+    /** What the progress means: the shared tone vocabulary (ADR 0026). Defaults to `neutral` (ink). */
+    tone?: Tone;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    value,
+    min = 0,
+    max = 100,
+    label = "Progress",
+    size = "md",
+    formatValue,
+    tone = "neutral",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const determinate = $derived(isDeterminate(value));
+  const range = $derived(normalizeRange(isDeterminate(value) ? value : min, min, max));
+  const valueText = $derived(
+    determinate ? (formatValue?.(range.value) ?? formatPercent(range)) : "In progress",
+  );
+  const slots = $derived(radialProgress({ size, tone, indeterminate: !determinate }));
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-radial-progress
+  data-state={determinate ? "determinate" : "indeterminate"}
+  class={slots.root({ class: className })}
+  role="progressbar"
+  aria-label={label}
+  aria-valuemin={range.min}
+  aria-valuemax={range.max}
+  aria-valuenow={determinate ? range.value : undefined}
+  aria-valuetext={valueText}
+>
+  <svg class={slots.svg()} viewBox="0 0 36 36" aria-hidden="true">
+    <circle class={slots.track()} cx="18" cy="18" r="15.5" stroke-width="3" />
+    <circle
+      class={slots.indicator()}
+      cx="18"
+      cy="18"
+      r="15.5"
+      pathLength="100"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-dasharray={determinate ? 100 : 25}
+      stroke-dashoffset={determinate ? 100 - range.percent : 0}
+    />
+  </svg>
+  <span class={slots.value()}>{valueText}</span>
+</div>

package/vendor/ds/kits/base/src/RadioGroup.svelte

@@ -0,0 +1,117 @@
+<!-- One native radio group composed from the canonical Fieldset and Label. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { afterFormReset } from "./core/native-controls";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import Fieldset from "./Fieldset.svelte";
+  import Label from "./Label.svelte";
+  import { radioGroup, type RadioGroupOption } from "./radio-group.variants";
+
+  interface Props extends Omit<HTMLFieldsetAttributes, "children" | "class" | "name"> {
+    /** The required visible accessible name rendered as the native legend. */
+    legend: string;
+    /** One native form name shared by every radio in the group. */
+    name: string;
+    /** Caller-owned choices; the group owns their native relationship. */
+    options: readonly RadioGroupOption[];
+    /** Native radio rows (list, the default) or rich bordered choices (cards). */
+    variant?: "list" | "cards";
+    /** Noninteractive media or metadata before the option label. The label and description remain canonical. */
+    optionMedia?: Snippet<[RadioGroupOption]>;
+    /** The selected native value, bindable by controlled consumers. */
+    value?: string;
+    /** Initial uncontrolled value, restored by native form reset. */
+    defaultValue?: string;
+    /** The native fieldset for imperative access. */
+    ref?: HTMLFieldSetElement;
+    /** Called with the newly chosen value (ADR 0026's value dialect). */
+    onvaluechange?: (value: string) => void;
+    /** Applies native required validation to the group. */
+    required?: boolean;
+    /** Supporting text announced with every radio. */
+    help?: string;
+    /** Current validation error, announced and associated with every radio. */
+    error?: string;
+    /** Prefix for option ids; otherwise Svelte supplies a stable generated one. */
+    id?: string;
+    /** Extra classes merged onto the native fieldset. */
+    class?: string;
+    /** Extra classes merged onto each visible option label. */
+    optionClass?: string;
+    /** Extra classes merged onto each native radio. */
+    controlClass?: string;
+  }
+
+  const generatedId = $props.id();
+  let {
+    legend,
+    name,
+    options,
+    variant = "list",
+    optionMedia,
+    value = $bindable(),
+    defaultValue,
+    ref = $bindable(),
+    onvaluechange,
+    required = false,
+    help,
+    error,
+    id,
+    class: className,
+    optionClass,
+    controlClass,
+    ...rest
+  }: Props = $props();
+  const initial = untrack(() => value ?? defaultValue);
+  let local = $state(initial);
+  const selected = $derived(value ?? local);
+  let element = $state<HTMLFieldSetElement>();
+  $effect(() => { if (ref !== element) ref = element; });
+  $effect(() => {
+    rest.form;
+    return afterFormReset(element?.form, () => {
+      value = initial; local = initial;
+      element?.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(input => { input.checked = input.value === initial; });
+    });
+  });
+  const styles = $derived(radioGroup({ variant }));
+  const idPrefix = $derived(id ?? `${generatedId}-option`);
+</script>
+
+<Fieldset {...rest} bind:ref={element} {legend} {help} {error} class={styles.root({ class: className })}>
+  {#snippet children(control)}
+    <div class={styles.list()} data-radio-list data-variant={variant}>
+      {#each options as option, index (option.value)}
+        {@const optionId = `${idPrefix}-${index}`}
+        <Label class={styles.option({ class: optionClass })} for={optionId}>
+          <span class={styles.choice()} data-choice-control>
+            <input
+              {...control}
+              aria-labelledby={`${optionId}-label`}
+              aria-describedby={[control["aria-describedby"], option.description ? `${optionId}-description` : undefined].filter(Boolean).join(" ") || undefined}
+              id={optionId}
+              type="radio"
+              {name}
+              value={option.value}
+              defaultChecked={initial === option.value}
+              checked={selected === option.value}
+              form={rest.form}
+              onchange={(event) => { local = event.currentTarget.value; value = local; onvaluechange?.(local); }}
+              {required}
+              disabled={option.disabled}
+              class={styles.control({ class: controlClass })}
+            />
+            <span class={styles.box()} aria-hidden="true" data-choice-box></span>
+            <span class={styles.dot()} aria-hidden="true" data-choice-mark></span>
+          </span>
+          <span class={styles.content()}>
+            {@render optionMedia?.(option)}
+            <span id={`${optionId}-label`} class={styles.label()}>{option.label}</span>
+            {#if option.description}<span id={`${optionId}-description`} class={styles.description()}>{option.description}</span>{/if}
+          </span>
+        </Label>
+      {/each}
+    </div>
+  {/snippet}
+</Fieldset>

package/vendor/ds/kits/base/src/RangeCalendar.svelte

@@ -0,0 +1,171 @@
+<!-- A date-range calendar sharing Calendar appearance while Bits UI owns range behavior. -->
+<script lang="ts">
+  import { calendarDirection, calendarKeyTarget, calendarLocale, type CalendarContract } from "./core/calendar";
+  import { tick } from "svelte";
+  import type { DateValue } from "@internationalized/date";
+  import { RangeCalendar as Bits } from "bits-ui";
+  import Button from "./Button.svelte";
+  import { calendar } from "./calendar.variants";
+  import { quietControl } from "./quiet-control.variants";
+
+  import type { CalendarRange as DateRange } from "./core/calendar";
+  type Props = CalendarContract & Omit<
+    Bits.RootProps,
+    | "calendarLabel"
+    | "child"
+    | "children"
+    | "class"
+    | "onEndValueChange"
+    | "onPlaceholderChange"
+    | "onStartValueChange"
+    | "onValueChange"
+    | "placeholder"
+    | "value"
+  > & {
+    /** Fewest calendar days in a complete inclusive range. */
+    minDays?: number;
+    /** Most calendar days in a complete inclusive range. */
+    maxDays?: number;
+    /** Restart a selection that would contain disabled dates. */
+    excludeDisabled?: boolean;
+    /** Base accessible name; the visible month and year are appended by the calendar. */
+    label: string;
+    /** The selected date range, with `start` and `end` dates; bindable. */
+    value?: DateRange;
+    /** The date that decides which month is shown while no range is selected; bindable. */
+    placeholder?: DateValue;
+    /** Called with the new date range after the selection changes. */
+    onvaluechange?: (value: DateRange) => void;
+    /** Called with the new placeholder date after the visible month changes. */
+    onplaceholderchange?: (value: DateValue) => void;
+    /**
+     * Called with the new start date, or `undefined` when it is cleared, after the start of the
+     * range changes.
+     */
+    onstartvaluechange?: (value: DateValue | undefined) => void;
+    /**
+     * Called with the new end date, or `undefined` when it is cleared, after the end of the range
+     * changes.
+     */
+    onendvaluechange?: (value: DateValue | undefined) => void;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+    /** Extra classes merged onto both the previous-month and next-month buttons. */
+    navigationClass?: string;
+    /** Extra classes merged onto every day button, over its own. */
+    dayClass?: string;
+  };
+
+  let {
+    label,
+    value = $bindable(),
+    placeholder = $bindable(),
+    weekdayFormat = "short",
+    fixedWeeks = true,
+    excludeDisabled = false,
+    onvaluechange,
+    onplaceholderchange,
+    onstartvaluechange,
+    onendvaluechange,
+    class: className,
+    navigationClass,
+    dayClass,
+    ...rest
+  }: Props = $props();
+
+  const styles = calendar();
+  function weekEdge(event: KeyboardEvent, date: DateValue): void {
+    if (event.key !== "Home" && event.key !== "End") return;
+    const next = calendarKeyTarget(date, event.key, { label, ...rest });
+    if (!next) return;
+    event.preventDefault();
+    const root = (event.currentTarget as HTMLElement).closest("[data-calendar], [data-range-calendar]");
+    const focus = () => root?.querySelector<HTMLElement>(`[data-bits-day][data-value="${next.toString()}"]`)?.focus();
+    if (root?.querySelector(`[data-bits-day][data-value="${next.toString()}"]`)) focus();
+    else { placeholder = next; void tick().then(focus); }
+  }
+</script>
+
+<Bits.Root
+  {...rest}
+  dir={rest.dir ?? calendarDirection(rest.locale ?? "en")}
+  locale={calendarLocale(rest.locale ?? "en", placeholder ?? value?.start)}
+  calendarLabel={label}
+  {weekdayFormat}
+  {fixedWeeks}
+  {excludeDisabled}
+  bind:value
+  bind:placeholder
+  onValueChange={onvaluechange}
+  onPlaceholderChange={onplaceholderchange}
+  onStartValueChange={onstartvaluechange}
+  onEndValueChange={onendvaluechange}
+  data-range-calendar
+  class={styles.root({ class: className })}
+>
+  {#snippet children({ months, weekdays })}
+    <!--
+      A <div>, not the <header> Bits renders by default: a header outside
+      any sectioning element is a banner landmark, and a Calendar inside a
+      DatePicker popover became a second banner on the page (wave 5A).
+    -->
+    <Bits.Header class={styles.header()}>
+      {#snippet child({ props })}
+        <div {...props}>
+          <Bits.PrevButton>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="sm"
+                aria-label="Previous month"
+                class={styles.navigation({ class: navigationClass })}
+              >
+                <span aria-hidden="true">←</span>
+              </Button>
+            {/snippet}
+          </Bits.PrevButton>
+          <Bits.Heading class={styles.heading()} />
+          <Bits.NextButton>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="sm"
+                aria-label="Next month"
+                class={styles.navigation({ class: navigationClass })}
+              >
+                <span aria-hidden="true">→</span>
+              </Button>
+            {/snippet}
+          </Bits.NextButton>
+        </div>
+      {/snippet}
+    </Bits.Header>
+
+    <div class={styles.months()}>
+      {#each months as month}
+        <Bits.Grid class={styles.grid()}>
+          <Bits.GridHead class={styles.gridHead()}>
+            <Bits.GridRow class={styles.gridRow()}>
+              {#each weekdays as weekday, index (index)}
+                <Bits.HeadCell class={styles.headCell()}>{weekday}</Bits.HeadCell>
+              {/each}
+            </Bits.GridRow>
+          </Bits.GridHead>
+          <Bits.GridBody>
+            {#each month.weeks as weekDates, weekIndex (weekIndex)}
+              <Bits.GridRow class={styles.gridRow()}>
+                {#each weekDates as date (date.toString())}
+                  <Bits.Cell {date} month={month.value} class={styles.cell()}>
+                    <Bits.Day onkeydown={(event) => weekEdge(event, date)} class={quietControl({ ink: "inherit", class: styles.day({ class: dayClass }) })} />
+                  </Bits.Cell>
+                {/each}
+              </Bits.GridRow>
+            {/each}
+          </Bits.GridBody>
+        </Bits.Grid>
+      {/each}
+    </div>
+  {/snippet}
+</Bits.Root>

package/vendor/ds/kits/base/src/Rating.svelte

@@ -0,0 +1,126 @@
+<!-- One native radio value composed from the canonical Fieldset and Label. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { afterFormReset, ratingStops } from "./core/native-controls";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import Fieldset from "./Fieldset.svelte";
+  import Label from "./Label.svelte";
+  import { rating } from "./rating.variants";
+
+  interface Props extends Omit<HTMLFieldsetAttributes, "children" | "class" | "name"> {
+    /** Required visible group name rendered as a native legend. */
+    legend: string;
+    /** One native name shared by every rating radio. */
+    name: string;
+    /** Current rating; zero means no option is selected. */
+    value?: number;
+    /** Initial uncontrolled rating, restored by native form reset. */
+    defaultValue?: number;
+    /** The native fieldset for imperative focus or inspection. */
+    ref?: HTMLFieldSetElement;
+    /** Called with the newly chosen value (ADR 0026's value dialect). */
+    onvaluechange?: (value: number) => void;
+    /** Number of stops, floored to at least one; non-finite values use five. */
+    max?: number;
+    /**
+     * Marks every rating radio as required, so the native form refuses a submit while none is
+     * chosen.
+     */
+    required?: boolean;
+    /** Supporting text announced with every rating stop. */
+    help?: string;
+    /** Current validation error, announced and associated with every rating stop. */
+    error?: string;
+    /**
+     * Prefix for the ids of the rating radios, joined with each stop's number; generated when
+     * omitted.
+     */
+    id?: string;
+    /** Extra classes, merged onto the fieldset root. */
+    class?: string;
+    /** Extra classes merged onto each stop's label, over its own. */
+    optionClass?: string;
+    /** Extra classes merged onto each visually hidden radio input. */
+    controlClass?: string;
+    /** Extra classes merged onto each star mark, over its own. */
+    markClass?: string;
+    /** Extra classes merged onto the live "n of max" readout under the stops. */
+    outputClass?: string;
+  }
+
+  const generatedId = $props.id();
+  let {
+    legend,
+    name,
+    value = $bindable(),
+    defaultValue = 0,
+    ref = $bindable(),
+    onvaluechange,
+    max = 5,
+    required = false,
+    help,
+    error,
+    id,
+    class: className,
+    optionClass,
+    controlClass,
+    markClass,
+    outputClass,
+    ...rest
+  }: Props = $props();
+  const styles = rating();
+  let element = $state<HTMLFieldSetElement>();
+  let readout = $state<HTMLOutputElement>();
+  const initial = untrack(() => value ?? defaultValue);
+  let local = $state(initial);
+  const selected = $derived(value ?? local);
+  const stops = $derived(ratingStops(max));
+  const idPrefix = $derived(id ?? `${generatedId}-rating`);
+  $effect(() => { if (ref !== element) ref = element; });
+  // Native output reset replaces its text nodes. Keep its live DOM value in sync.
+  $effect(() => { if (readout) readout.value = `${selected} of ${stops.length}`; });
+
+  $effect(() => {
+    // Changing the native form target must move the reset listener too.
+    rest.form;
+    return afterFormReset(element?.form, () => {
+      local = initial;
+      value = initial;
+      element?.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(input => {
+        input.checked = Number(input.value) === initial;
+      });
+    });
+  });
+</script>
+
+<Fieldset {...rest} bind:ref={element} {legend} {help} {error} class={styles.root({ class: className })} data-rating>
+  {#snippet children(control)}
+    <div class={styles.list()} data-rating-list>
+      {#each stops as stop}
+        {@const optionId = `${idPrefix}-${stop}`}
+        <Label class={styles.option({ class: optionClass })} for={optionId}>
+          <input
+            {...control}
+            id={optionId}
+            type="radio"
+            {name}
+            value={stop}
+            defaultChecked={initial === stop}
+            checked={selected === stop}
+            form={rest.form}
+            onchange={(event) => { local = Number(event.currentTarget.value); value = local; onvaluechange?.(value); }}
+            {required}
+            class={styles.control({ class: controlClass })}
+          />
+          <span class={styles.mark({ class: markClass })} data-rating-mark aria-hidden="true">
+            {stop <= selected ? "★" : "☆"}
+          </span>
+          <span class="sr-only">{stop} of {stops.length}</span>
+        </Label>
+      {/each}
+    </div>
+    <output bind:this={readout} class={styles.output({ class: outputClass })} aria-live="polite">
+      {untrack(() => `${selected} of ${stops.length}`)}
+    </output>
+  {/snippet}
+</Fieldset>

package/vendor/ds/kits/base/src/Reveal.svelte

@@ -0,0 +1,36 @@
+<!-- Native entry motion; server-rendered content remains visible without JavaScript. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { reveal } from "./reveal.variants";
+  import { initialRevealState, mountReveal, revealDelay, type RevealDirection } from "./core/reveal";
+  export type { RevealDirection } from "./core/reveal";
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** The edge content enters from. */
+    direction?: RevealDirection;
+    /** Milliseconds to wait before entering. */
+    delay?: number;
+    /** Show the entry range while tuning a composition. */
+    debug?: boolean;
+    /** Extra classes merged onto the primitive. */
+    class?: string;
+    /** Content that enters the viewport with the reveal. */
+    children?: Snippet;
+  }
+  const { direction = "up", delay = 0, debug = false, class: className, children, ...rest }: Props = $props();
+  let element = $state<HTMLDivElement>();
+  let motionState = $state(initialRevealState());
+  const wait = $derived(revealDelay(delay));
+  $effect(() => {
+    if (element) return mountReveal(element, direction, wait, next => { motionState = next; });
+  });
+</script>
+<div bind:this={element} {...rest}
+  class={reveal({ direction, path: motionState.path, entered: motionState.entered, debug, class: className })}
+  style:--reveal-delay={`${wait}ms`}
+  style:--reveal-x={motionState.reducedMotion ? "0px" : undefined}
+  style:--reveal-y={motionState.reducedMotion ? "0px" : undefined}
+  data-reveal data-reveal-path={motionState.path} data-reveal-motion={motionState.reducedMotion ? "fade" : "position-and-fade"}
+  data-reveal-direction={direction} data-reveal-delay={wait} data-reveal-debug={debug ? "" : undefined} data-reveal-entered={motionState.entered ? "" : undefined}>
+  {@render children?.()}
+</div>

package/vendor/ds/kits/base/src/ScrollArea.svelte

@@ -0,0 +1,40 @@
+<!-- A named native overflow region that can always receive keyboard focus. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { scrollArea, type ScrollAreaOrientation } from "./scroll-area.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "aria-label" | "children" | "class" | "role" | "tabindex"> {
+    /** Accessible region name, required because this is a keyboard stop. */
+    label: string;
+    /** Which native overflow directions this boundary contains. */
+    orientation?: ScrollAreaOrientation;
+    /** Surface treatment: `outline` keeps the standalone frame and Density inset; `plain` embeds native scrolling in an existing panel. Defaults to `outline`. */
+    variant?: "outline" | "plain";
+    /** Extra classes, including the consumer-owned size constraint. */
+    class?: string;
+    /** Content that scrolls inside the region. */
+    children?: Snippet;
+  }
+
+  const {
+    label,
+    orientation = "vertical",
+    variant = "outline",
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (a named overflow region must be keyboard-scrollable) -->
+<div
+  {...rest}
+  data-scroll-area
+  role="region"
+  aria-label={label}
+  tabindex="0"
+  class={scrollArea({ orientation, variant, class: className })}
+>
+  {@render children?.()}
+</div>