@thomasfosterau/components 0.1.0 → 0.2.0

package/dist/fields/PinInput.svelte.d.ts

@@ -0,0 +1,66 @@
+import { PinInput } from 'bits-ui';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'size' | 'type' | 'maxlength' | 'pattern' | 'children' | 'inputmode'> {
+    /**
+     * The code typed so far. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Number of cells, and the input's `maxlength`.
+     * @defaultValue `6`
+     */
+    length?: number | undefined;
+    /**
+     * Which characters are accepted; sets `inputmode` and the input's pattern.
+     * @defaultValue `'numeric'`
+     */
+    charset?: 'numeric' | 'alphanumeric' | undefined;
+    /**
+     * Show `•` in the cells instead of the characters (a PIN rather than a code).
+     * @defaultValue `false`
+     */
+    masked?: boolean | undefined;
+    /** Called once every cell is filled, with the full code — typically to submit. */
+    onComplete?: ((code: string) => void) | undefined;
+    /** Normalise pasted text before it is applied. Defaults to stripping whitespace and hyphens. */
+    pasteTransformer?: ((text: string) => string) | undefined;
+    /**
+     * The input's `autocomplete`.
+     * @defaultValue `'one-time-code'`
+     */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    /**
+     * Size step of the cells.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /**
+     * Disables the input.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the real input's `id`, which `FormField`'s label points at. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the real input is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and the error border.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** A fixed-length code — a sign-in code, a TOTP, an invite code — typed one character per visible cell into one real input, on bits-ui's `PinInput`. */
+declare const PinInput: import("svelte").Component<Props, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/fields/RadioGroup.svelte

@@ -17,6 +17,9 @@ One choice from a short, known list, on bits-ui’s `RadioGroup`.
   question as a heading-ish `<span>` and points `aria-labelledby` at it. That
   is why this is the one field group NOT built on `Fieldset`, and the hint and
   errors hang off the radiogroup element itself through `aria-describedby`.
+  It is a whole frame (question, hint, errors), not a control a `FormField`
+  wraps, so it keeps its own `legend` rather than taking a `FieldControl`'s
+  `labelId`: inside a `FormField` it would render two labels.
 
   The marker is drawn rather than delegated to daisyUI's `.radio`, because
   that class styles an `<input type="radio">` through `:checked` and bits-ui's

package/dist/fields/RangeCalendar.svelte

@@ -0,0 +1,51 @@
+<!-- @component
+An inline, always-visible month grid for picking a start–end date range, on bits-ui's `RangeCalendar`.
+-->
+<!--
+  RangeCalendar — `Calendar`'s range sibling: the first chosen day starts
+  the range, the second ends it, and the days between are drawn as one band.
+  `minDays` / `maxDays` bound the length; `excludeDisabled` decides whether a
+  range may run across disabled days. It shares everything else — props,
+  header, grids, day styling — with `Calendar` (`calendar-props.ts`,
+  `CalendarMonths.svelte`), so the ARIA contract is the same: see
+  `Calendar`'s header. bits-ui adds `data-range-start` / `-middle` / `-end`
+  to the days, which is all the band styling reads.
+
+  The value is `{ start, end }` of `DateValue`s, either side `undefined`
+  while the reader is still choosing.
+-->
+<script lang="ts">import { RangeCalendar } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import CalendarMonths from "./CalendarMonths.svelte";
+import { calendarRoot, definedProps } from "./calendar-props.js";
+let { value = $bindable(), month = $bindable(), minDays, maxDays, excludeDisabled = false, ...props } = $props();
+const context = getComponentsContext();
+const shared = $derived(calendarRoot(props, context.locale()));
+const lengths = $derived(definedProps({
+	minDays,
+	maxDays
+}));
+</script>
+
+<RangeCalendar.Root
+  {...shared.root}
+  {...lengths}
+  {excludeDisabled}
+  bind:placeholder={
+    // Unset, bits-ui picks the value's month or today's.
+    () => month as DateValue,
+    (next: DateValue) => {
+      month = next;
+    }
+  }
+  bind:value={
+    () => value ?? { start: undefined, end: undefined },
+    (next) => {
+      value = next;
+    }
+  }
+>
+  {#snippet children({ months, weekdays })}
+    <CalendarMonths parts={RangeCalendar} {...shared.months} {months} {weekdays} />
+  {/snippet}
+</RangeCalendar.Root>

package/dist/fields/RangeCalendar.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DateValue } from '@internationalized/date';
+import { RangeCalendar } from 'bits-ui';
+import { type CalendarBaseProps } from './calendar-props.ts';
+interface Props extends CalendarBaseProps {
+    /** `{ start, end }`; either side `undefined` while choosing. Bindable. */
+    value?: {
+        start: DateValue | undefined;
+        end: DateValue | undefined;
+    } | undefined;
+    /** Shortest allowed range, in days. */
+    minDays?: number | undefined;
+    /** Longest allowed range, in days. */
+    maxDays?: number | undefined;
+    /**
+     * Refuse a range that would span a disabled day.
+     * @defaultValue `false`
+     */
+    excludeDisabled?: boolean | undefined;
+}
+/** An inline, always-visible month grid for picking a start–end date range, on bits-ui's `RangeCalendar`. */
+declare const RangeCalendar: import("svelte").Component<Props, {}, "value" | "month">;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/fields/Rating.svelte

@@ -0,0 +1,127 @@
+<!-- @component
+A score out of N as stars: an input on bits-ui's `RatingGroup` that binds a number (optionally in half steps) and posts under `name`, or, with `readonly`, a static display named "4.5 out of 5".
+-->
+<!--
+  Rating — one component, two branches.
+
+  Input (the default): bits-ui's `RatingGroup`. Its root is `role="slider"`
+  (bits-ui 2.20, `rating-group.svelte.js`) — one Tab stop, with the stars
+  `role="presentation"` — so there is no "radio button 4 of 5" with no
+  context. There is no APG rating pattern; bits-ui follows the slider one.
+  bits-ui supplies the role, `aria-valuenow` / `min` / `max`,
+  `aria-valuetext` (from `formatValue` here), `aria-readonly`,
+  `aria-disabled`, `aria-required`, the hidden input under `name`, the
+  arrow / Home / End / Page keys, digit keys (with `allowHalf`, "3" then
+  ".5" gives 3.5), and half-step pointer handling. This file adds the
+  accessible name, `aria-describedby` and `aria-invalid`.
+
+  Naming: a `<label for>` cannot name a `div`, so inside a `FormField` the
+  root takes `aria-labelledby={labelId}` (`FieldControl.labelId`, #179) and
+  `FormField` forwards a label click to it. Outside one, `label` becomes the
+  root's `aria-label`.
+
+  Clearing: bits-ui clears the value to 0 when the first star is clicked
+  while the value already equals it (pointer only; no key clears below
+  `min`, which is 0). That is left as bits-ui ships it, not hand-patched.
+
+  Read-only display (`readonly`): plain markup with no bits-ui root mounted —
+  `role="img"` with `aria-label={formatValue(value, max)}`, every star
+  `aria-hidden`, nothing focusable, nothing posted. It rounds to the nearest
+  half star whatever `allowHalf` says, because a display usually shows an
+  average ("4.5 out of 5"). The label still says the exact value.
+
+  Styling: daisyUI's `rating-*` size classes set `--size`; each star is two
+  `mask mask-star-2` halves (`mask-half-1` / `mask-half-2`, which flip in
+  RTL), filled in the tone's background or left at `bg-base-content/20`.
+  daisyUI's `rating` class itself is not used: its `.rating *` rules style
+  every descendant, which fights bits-ui's item wrappers.
+-->
+<script lang="ts">import { RatingGroup } from "bits-ui";
+import { backgroundTone } from "../ui/tones.js";
+import { ratingSize } from "./field-types.js";
+let { value = $bindable(0), max = 5, allowHalf = false, readonly = false, hoverPreview = true, formatValue = (score, outOf) => `${score} out of ${outOf}`, name, disabled = false, tone = "warning", size = "md", item, label = "Rating", id: idProp, labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+const fill = $derived(backgroundTone[tone]);
+// bits-ui types `name` as a bare optional, so it is omitted rather than passed as `undefined`.
+const nameProp = $derived(name === undefined ? {} : { name });
+/** The display's stars: the value rounded to the nearest half. */
+const displayStates = $derived.by(() => {
+	const shown = Math.round(value * 2) / 2;
+	return Array.from({ length: max }, (_, index) => {
+		if (shown >= index + 1) return "active";
+		return shown >= index + .5 ? "partial" : "inactive";
+	});
+});
+</script>
+
+{#snippet star(state: StarState)}
+  <span aria-hidden="true" class="flex">
+    {#if item}
+      {@render item({ state })}
+    {:else}
+      <span
+        class={[
+          'mask mask-star-2 mask-half-1 h-[calc(var(--size))] w-[calc(var(--size)*0.5)]',
+          state === 'inactive' ? 'bg-base-content/20' : fill,
+        ]}
+      ></span>
+      <span
+        class={[
+          'mask mask-star-2 mask-half-2 h-[calc(var(--size))] w-[calc(var(--size)*0.5)]',
+          state === 'active' ? fill : 'bg-base-content/20',
+        ]}
+      ></span>
+    {/if}
+  </span>
+{/snippet}
+
+{#if readonly}
+  <div
+    {...rest}
+    {id}
+    role="img"
+    aria-label={formatValue(value, max)}
+    class={['inline-flex align-middle', ratingSize[size], className]}
+  >
+    {#each displayStates as state, index (index)}
+      {@render star(state)}
+    {/each}
+  </div>
+{:else}
+  <RatingGroup.Root
+    {...rest}
+    bind:value
+    {id}
+    {max}
+    {allowHalf}
+    {hoverPreview}
+    {...nameProp}
+    {disabled}
+    {required}
+    aria-valuetext={formatValue}
+    aria-label={labelId === undefined ? label : undefined}
+    aria-labelledby={labelId}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    class={[
+      'inline-flex rounded-field align-middle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary data-[disabled]:opacity-50',
+      invalid && 'outline-2 outline-offset-2 outline-error',
+      ratingSize[size],
+      className,
+    ]}
+  >
+    {#snippet children({ items })}
+      {#each items as entry (entry.index)}
+        <RatingGroup.Item
+          index={entry.index}
+          class="cursor-pointer data-[disabled]:cursor-not-allowed"
+        >
+          {#snippet children({ state })}
+            {@render star(state)}
+          {/snippet}
+        </RatingGroup.Item>
+      {/each}
+    {/snippet}
+  </RatingGroup.Root>
+{/if}

package/dist/fields/Rating.svelte.d.ts

@@ -0,0 +1,86 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Size, type Tone } from '../ui/tones.ts';
+/** How much of one star is filled. */
+type StarState = 'active' | 'partial' | 'inactive';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dir'> {
+    /**
+     * The score. Bindable.
+     * @defaultValue `0`
+     */
+    value?: number | undefined;
+    /**
+     * Number of stars.
+     * @defaultValue `5`
+     */
+    max?: number | undefined;
+    /**
+     * Allow half-star values (bits-ui `allowHalf`).
+     * @defaultValue `false`
+     */
+    allowHalf?: boolean | undefined;
+    /**
+     * Render a static, unfocusable display instead of an input.
+     * @defaultValue `false`
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Preview the hovered value before it is chosen (bits-ui `hoverPreview`).
+     * @defaultValue `true`
+     */
+    hoverPreview?: boolean | undefined;
+    /**
+     * The spoken value (the input's `aria-valuetext`); also the display's accessible name.
+     * @defaultValue `(value, max) => \`${value} out of ${max}\``
+     */
+    formatValue?: ((value: number, max: number) => string) | undefined;
+    /** Posts the value under this name (input only). */
+    name?: string | undefined;
+    /**
+     * Blocks keys and clicks, and posts nothing.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Colour of the filled stars.
+     * @defaultValue `'warning'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI `rating` size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** Replace the star glyph (a heart, a leaf); receives how much of it is filled. It is rendered inside an `aria-hidden` wrapper. */
+    item?: Snippet<[{
+        state: StarState;
+    }]> | undefined;
+    /**
+     * Accessible name, for a rating outside a `FormField`; ignored when `labelId` is set.
+     * @defaultValue `'Rating'`
+     */
+    label?: string | undefined;
+    /** `FieldControl`: the root's `id`. Minted when omitted. */
+    id?: string | undefined;
+    /** `FieldControl`: the visible label's id; the root is `aria-labelledby` it. */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and an error outline.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: sets `aria-required` and the hidden input's `required`.
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+}
+/** A score out of N as stars: an input on bits-ui's `RatingGroup` that binds a number (optionally in half steps) and posts under `name`, or, with `readonly`, a static display named "4.5 out of 5". */
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/fields/SearchInput.svelte

@@ -20,6 +20,7 @@ A `type="search"` field with a leading icon, a clear button while there is text,
   uses) and `onSubmit` on Enter.
 -->
 <script lang="ts">import { Search, X } from "@lucide/svelte";
+import Spinner from "../ui/Spinner.svelte";
 import { inputSize } from "./field-types.js";
 let { label, value = $bindable(""), onInput, onSubmit, onClear, pending = false, clearLabel = "Clear search", size = "md", name = "q", placeholder = "Search", class: className, ...rest } = $props();
 const clear = () => {
@@ -47,7 +48,7 @@ const clear = () => {
     }}
   />
   {#if pending}
-    <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
+    <Spinner decorative size="xs" />
   {:else if value !== ''}
     <button type="button" class="btn btn-ghost btn-xs btn-circle" onclick={clear}>
       <X class="size-3.5" aria-hidden="true" />

package/dist/fields/SegmentGroup.svelte

@@ -0,0 +1,91 @@
+<!-- @component
+The segment group the bits-ui date and time controls share; internal, not exported.
+-->
+<!--
+  SegmentGroup — the `role="group"` of spinbutton segments inside a bits-ui
+  `DateField`, `TimeField`, `DatePicker` or `DateRangePicker` root, written
+  once for all four. `parts` is the bits-ui namespace in use; each exposes
+  `Input` and `Segment` (a range's `Input` also takes `type`).
+
+  `<label for>` cannot name a `role="group"`, so the group is
+  `aria-labelledby` the `FormField`'s label (`labelId`), and each segment is
+  labelled by its own part name ("day, ") followed by that label, so a
+  reader landing on one hears "day, Sown on". bits-ui would name them from
+  its own `Label`, which a `FormField` has no use for, so the segments are
+  rendered through their `child` snippet with our `aria-labelledby` last.
+  The literal separators ("/", ":") are `aria-hidden`: the spinbutton names
+  already say which part is which.
+
+  Two shapes. By default the group IS the field: the `input` shell, named
+  by the label, carrying `describedBy` / `invalid`, with an optional
+  `trailing` snippet (the picker's calendar button) inside it. With
+  `range`, it is one half of a `DateRangePicker`, whose root draws the
+  shell: a bare inline group named by `range.label` ("Start date"), whose
+  segments read "day, <label> Start date".
+-->
+<script lang="ts">import { inputSize } from "./field-types.js";
+let { parts, group, range, trailing } = $props();
+const { class: className, ...attributes } = $derived(group.attributes);
+// SAFETY: the namespaces' `Segment`s differ only in the `part` union they
+// accept, and every `part` rendered here comes from the same root's own
+// `segments`, so a TimeField segment is only ever handed a time part.
+const Segment = $derived(parts.Segment);
+// SAFETY: every `Input` takes `id`, `name` and `child`; only the range's
+// also takes `type`, which is passed only when `range` is set, and a range
+// is only ever rendered with `DateRangePicker`'s parts.
+const Input = $derived(parts.Input);
+const inputProps = $derived({
+	...group.id === undefined || range !== undefined ? {} : { id: group.id },
+	name: (range === undefined ? group.name : range.name) ?? "",
+	...range === undefined ? {} : { type: range.type }
+});
+</script>
+
+{#snippet segmentList(segments: readonly { part: string; value: string }[], names: string | undefined)}
+  {#each segments as { part, value }, index (index)}
+    <Segment part={part as 'literal'}>
+      {#snippet child({ props: segmentProps })}
+        {#if part === 'literal'}
+          <span {...segmentProps} aria-hidden="true" class="text-base-content/60 px-px">{value}</span>
+        {:else}
+          <span
+            {...segmentProps}
+            aria-labelledby={names === undefined ? undefined : `${String(segmentProps['id'])} ${names}`}
+            class="focus:bg-primary focus:text-primary-content rounded-sm px-0.5 outline-none aria-[valuetext=Empty]:text-base-content/50"
+            >{value}</span
+          >
+        {/if}
+      {/snippet}
+    </Segment>
+  {/each}
+{/snippet}
+
+<Input {...inputProps}>
+  {#snippet child({ props, segments })}
+    {#if range !== undefined}
+      {@const ownId = String(props['id'])}
+      <div {...props} role="group" aria-label={range.label} class="inline-flex items-center">
+        {@render segmentList(segments, [group.labelId, ownId].filter(Boolean).join(' '))}
+      </div>
+    {:else}
+      <div
+        {...attributes}
+        {...props}
+        aria-labelledby={group.labelId}
+        aria-describedby={group.describedBy === '' ? undefined : group.describedBy}
+        aria-invalid={group.invalid ? 'true' : undefined}
+        class={[
+          'input inline-flex w-auto items-center gap-0 tabular-nums',
+          inputSize[group.size],
+          group.invalid && 'input-error',
+          'data-invalid:input-error',
+          group.disabled && 'opacity-50',
+          className,
+        ]}
+      >
+        {@render segmentList(segments, group.labelId)}
+        {@render trailing?.()}
+      </div>
+    {/if}
+  {/snippet}
+</Input>

package/dist/fields/SegmentGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { DateField, DatePicker, DateRangePicker, TimeField } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { SegmentGroupOptions } from './segmented-field.ts';
+interface Props {
+    /** The bits-ui namespace whose parts to render. */
+    parts: typeof DateField | typeof TimeField | typeof DatePicker | typeof DateRangePicker;
+    group: SegmentGroupOptions;
+    /** One half of a range: which half, its name, and its posted field name. */
+    range?: {
+        readonly type: 'start' | 'end';
+        readonly label: string;
+        readonly name?: string | undefined;
+    } | undefined;
+    /** Rendered inside the shell after the segments (a picker's trigger). */
+    trailing?: Snippet<[]> | undefined;
+}
+/** The segment group the bits-ui date and time controls share; internal, not exported. */
+declare const SegmentGroup: import("svelte").Component<Props, {}, "">;
+type SegmentGroup = ReturnType<typeof SegmentGroup>;
+export default SegmentGroup;

package/dist/fields/Select.svelte

@@ -16,7 +16,7 @@ A native `<select>` in daisyUI styling over a list of options, with an optional
   attributes added.
 -->
 <script lang="ts">import { selectSize, toFieldOptions } from "./field-types.js";
-let { options, value = $bindable(""), placeholder, size = "md", invalid = false, describedBy = "", class: className, ...rest } = $props();
+let { options, value = $bindable(""), placeholder, size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
 const entries = $derived(toFieldOptions(options));
 </script>
 

package/dist/fields/Select.svelte.d.ts

@@ -22,6 +22,12 @@ interface Props extends Omit<HTMLSelectAttributes, 'value' | 'size'> {
      * @defaultValue `''`
      */
     describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — this control is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
 }
 /** A native `<select>` in daisyUI styling over a list of options, with an optional placeholder and `FieldControl` wiring. */
 declare const Select: import("svelte").Component<Props, {}, "value">;