@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/feedback/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * feedback — dialogs, toasts, progress and the chrome around a pending read.
+ *
+ * What these have in common is that they speak to the reader about something
+ * that just happened, or is happening now: a confirmation to give, a result
+ * to notice, a number to compare, a wait to explain. That makes the live
+ * regions and the announcement order the contract — see each component's
+ * header comment — rather than the markup.
+ *
+ * As in `ui/`, every optional prop is declared `T | undefined`: the workspace
+ * compiles with `exactOptionalPropertyTypes`, under which `prop?: T` rejects
+ * an explicitly passed `undefined`, and these components are composed by
+ * callers forwarding their own optional props straight through.
+ *
+ * @module
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as LoadingBoundary } from './LoadingBoundary.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as SegmentBar } from './SegmentBar.svelte';
+export { default as StatTile } from './StatTile.svelte';
+export { default as Stats } from './Stats.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export type { ConfirmForm } from './ConfirmDialog.svelte';
+export type { BarSegment } from './SegmentBar.svelte';
+export type { StatDelta } from './StatTile.svelte';
+export type { StepItem, StepState } from './Steps.svelte';
+export type { TimelineDate, TimelineEntry } from './Timeline.svelte';
+export * from './sizes.ts';
+export * from './toaster.ts';

package/dist/feedback/index.js

@@ -0,0 +1,29 @@
+/**
+ * feedback — dialogs, toasts, progress and the chrome around a pending read.
+ *
+ * What these have in common is that they speak to the reader about something
+ * that just happened, or is happening now: a confirmation to give, a result
+ * to notice, a number to compare, a wait to explain. That makes the live
+ * regions and the announcement order the contract — see each component's
+ * header comment — rather than the markup.
+ *
+ * As in `ui/`, every optional prop is declared `T | undefined`: the workspace
+ * compiles with `exactOptionalPropertyTypes`, under which `prop?: T` rejects
+ * an explicitly passed `undefined`, and these components are composed by
+ * callers forwarding their own optional props straight through.
+ *
+ * @module
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as LoadingBoundary } from './LoadingBoundary.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as SegmentBar } from './SegmentBar.svelte';
+export { default as StatTile } from './StatTile.svelte';
+export { default as Stats } from './Stats.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export * from "./sizes.js";
+export * from "./toaster.js";

package/dist/feedback/sizes.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The literal class tables this family looks its variants up in.
+ *
+ * Tailwind only generates classes it can see verbatim in source, so a
+ * template string (`max-w-${size}`, `toast-${position}`) emits nothing at
+ * build time. Every step is spelled out once here as a `Record<K, string>`
+ * and looked up — the same discipline as `ui/tones.ts`, kept local because
+ * these steps are this family's, not the whole library's.
+ *
+ * @module
+ */
+/** Width steps of a `Dialog`'s `modal-box`. */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+/** Literal `max-w-*` class per `DialogSize`; a lookup table so Tailwind's scanner sees every class. */
+export declare const dialogSize: Record<DialogSize, string>;
+/** Where a `Toaster` stacks its notifications. */
+export type ToastPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+/** Literal daisyUI class per `ToastPosition` for `Toaster`; a lookup table so Tailwind's scanner sees every class. */
+export declare const toastPosition: Record<ToastPosition, string>;
+/** Height steps of a `SegmentBar`. */
+export type BarSize = 'sm' | 'md' | 'lg';
+/** Literal height class per `BarSize`; a lookup table so Tailwind's scanner sees every class. */
+export declare const barSize: Record<BarSize, string>;
+/** How a `Stats` row lays its tiles out. */
+export type StatsOrientation = 'horizontal' | 'vertical' | 'responsive';
+/** Literal daisyUI class per `StatsOrientation` for `Stats`; a lookup table so Tailwind's scanner sees every class. */
+export declare const statsOrientation: Record<StatsOrientation, string>;
+/** How a `Steps` list lays its steps out. */
+export type StepsOrientation = 'horizontal' | 'vertical' | 'responsive';
+/** Literal daisyUI class per `StepsOrientation` for `Steps`; a lookup table so Tailwind's scanner sees every class. */
+export declare const stepsOrientation: Record<StepsOrientation, string>;
+/** The edge a `Drawer` enters from; `start` / `end` follow the writing direction. */
+export type DrawerSide = 'start' | 'end' | 'top' | 'bottom';
+/** Literal placement classes per `DrawerSide`; a lookup table so Tailwind's scanner sees every class. */
+export declare const drawerSide: Record<DrawerSide, string>;
+/** Size steps of a `Drawer`: its width at `start` / `end`, its height at `top` / `bottom`. */
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/** Literal width class per `DrawerSize` for a `start` / `end` drawer. */
+export declare const drawerWidth: Record<DrawerSize, string>;
+/** Literal height class per `DrawerSize` for a `top` / `bottom` drawer. */
+export declare const drawerHeight: Record<DrawerSize, string>;

package/dist/feedback/sizes.js

@@ -0,0 +1,69 @@
+/**
+ * The literal class tables this family looks its variants up in.
+ *
+ * Tailwind only generates classes it can see verbatim in source, so a
+ * template string (`max-w-${size}`, `toast-${position}`) emits nothing at
+ * build time. Every step is spelled out once here as a `Record<K, string>`
+ * and looked up — the same discipline as `ui/tones.ts`, kept local because
+ * these steps are this family's, not the whole library's.
+ *
+ * @module
+ */
+/** Literal `max-w-*` class per `DialogSize`; a lookup table so Tailwind's scanner sees every class. */
+export const dialogSize = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+/** Literal daisyUI class per `ToastPosition` for `Toaster`; a lookup table so Tailwind's scanner sees every class. */
+export const toastPosition = {
+    'top-start': 'toast-top toast-start',
+    'top-center': 'toast-top toast-center',
+    'top-end': 'toast-top toast-end',
+    'bottom-start': 'toast-bottom toast-start',
+    'bottom-center': 'toast-bottom toast-center',
+    'bottom-end': 'toast-bottom toast-end',
+};
+/** Literal height class per `BarSize`; a lookup table so Tailwind's scanner sees every class. */
+export const barSize = {
+    sm: 'h-2',
+    md: 'h-4',
+    lg: 'h-6',
+};
+/** Literal daisyUI class per `StatsOrientation` for `Stats`; a lookup table so Tailwind's scanner sees every class. */
+export const statsOrientation = {
+    horizontal: 'stats-horizontal',
+    vertical: 'stats-vertical',
+    // Stacked on a phone, in a row from `sm` up — the shape every app's
+    // dashboard reached for by hand.
+    responsive: 'stats-vertical sm:stats-horizontal',
+};
+/** Literal daisyUI class per `StepsOrientation` for `Steps`; a lookup table so Tailwind's scanner sees every class. */
+export const stepsOrientation = {
+    horizontal: 'steps-horizontal',
+    vertical: 'steps-vertical',
+    // A column on a phone, a row from `sm` up, as `statsOrientation` does.
+    responsive: 'steps-vertical sm:steps-horizontal',
+};
+/** Literal placement classes per `DrawerSide`; a lookup table so Tailwind's scanner sees every class. */
+export const drawerSide = {
+    start: 'inset-y-0 start-0 h-full max-w-[calc(100vw-2rem)]',
+    end: 'inset-y-0 end-0 h-full max-w-[calc(100vw-2rem)]',
+    top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-box',
+    bottom: 'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-box',
+};
+/** Literal width class per `DrawerSize` for a `start` / `end` drawer. */
+export const drawerWidth = {
+    sm: 'w-72',
+    md: 'w-96',
+    lg: 'w-[32rem]',
+    full: 'w-screen max-w-none',
+};
+/** Literal height class per `DrawerSize` for a `top` / `bottom` drawer. */
+export const drawerHeight = {
+    sm: 'h-[33dvh]',
+    md: 'h-[50dvh]',
+    lg: 'h-[75dvh]',
+    full: 'h-dvh max-h-none rounded-none',
+};

package/dist/feedback/toaster.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The toaster seam: what a toast is, and how anything below a `<Toaster>`
+ * reaches the one region on the page.
+ *
+ * Kept out of `Toaster.svelte` so a module that only wants to *push* a toast
+ * — a store, a form helper, another component — imports a `.ts` file rather
+ * than pulling a component (and its icons) onto its own path.
+ *
+ * @module
+ */
+import type { StatusTone } from '../ui/tones.ts';
+/** The colour a toast is drawn in; the same four states an `Alert` has. */
+export type ToastTone = StatusTone;
+/** One notification as the `Toaster` holds it, after it has been given an id. */
+export interface Toast {
+    /** Assigned by the toaster; unique for the life of the page. */
+    readonly id: number;
+    /** The line that carries the message. */
+    readonly title: string;
+    /** Optional second line. */
+    readonly description?: string | undefined;
+    readonly tone: ToastTone;
+}
+/** What a toast looks like before the toaster has given it an id. */
+export type NewToast = Omit<Toast, 'id' | 'tone'> & {
+    readonly tone?: ToastTone | undefined;
+};
+/** What `getToaster()` returns: push a toast or dismiss one. */
+export interface ToasterApi {
+    /**
+     * Push a toast and return its id. It dismisses itself after `durationMs`
+     * (the `<Toaster>`'s own default when omitted); `0` makes it sticky, for a
+     * message the reader must act on.
+     */
+    add(toast: NewToast, durationMs?: number): number;
+    /** Remove a toast early — the dismiss button, or the app itself. */
+    dismiss(id: number): void;
+}
+/** Publish the region's API to its descendants. Called by `Toaster`. */
+export declare function setToaster(api: ToasterApi): void;
+/**
+ * The nearest `<Toaster>`'s API.
+ *
+ * Throws when there is no provider: a silently dropped notification is worse
+ * than a loud failure in development, and every call site is inside the app's
+ * own layout where the provider is mounted once.
+ */
+export declare function getToaster(): ToasterApi;

package/dist/feedback/toaster.js

@@ -0,0 +1,29 @@
+/**
+ * The toaster seam: what a toast is, and how anything below a `<Toaster>`
+ * reaches the one region on the page.
+ *
+ * Kept out of `Toaster.svelte` so a module that only wants to *push* a toast
+ * — a store, a form helper, another component — imports a `.ts` file rather
+ * than pulling a component (and its icons) onto its own path.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const TOASTER_KEY = Symbol('@thomasfosterau/components:toaster');
+/** Publish the region's API to its descendants. Called by `Toaster`. */
+export function setToaster(api) {
+    setContext(TOASTER_KEY, api);
+}
+/**
+ * The nearest `<Toaster>`'s API.
+ *
+ * Throws when there is no provider: a silently dropped notification is worse
+ * than a loud failure in development, and every call site is inside the app's
+ * own layout where the provider is mounted once.
+ */
+export function getToaster() {
+    const api = getContext(TOASTER_KEY);
+    if (api === undefined)
+        throw new Error('getToaster() was called outside a <Toaster>');
+    return api;
+}

package/dist/fields/Calendar.svelte

@@ -0,0 +1,60 @@
+<!-- @component
+An inline, always-visible month grid for picking a date, on bits-ui's `Calendar`.
+-->
+<!--
+  Calendar — a month (or several side by side) to choose one date from,
+  inline rather than in a popover: a booking sidebar, a "sown on" planner, an
+  availability view. The popover pickers compose it. `DateInput` (the native
+  control) stays the default for a single date on a form; this is for when
+  the reader benefits from seeing the month.
+
+  The value is a `DateValue` from `@internationalized/date`, bits-ui's own
+  type: lossless, and it carries its calendar system. Convert at the edge with
+  `parseDate('2026-10-23')` and `value.toString()`, both re-exported from the
+  `./dates` entry.
+
+  ARIA contract (APG date-picker grid), from bits-ui: a `role="application"`
+  wrapper named by `calendarLabel` and the visible month, one `role="grid"`
+  per month, `gridcell`s with `aria-selected` / `aria-disabled`, a roving
+  tabindex, and the keys — arrows by day and week, Home / End to the week's
+  ends, Page Up / Page Down by month, Enter / Space to select. This file
+  adds the labelled previous / next buttons (`previousLabel` / `nextLabel`),
+  each grid's name ("October 2026"), a struck-through
+  unavailable day, and the `FieldControl` wiring: inside a `FormField` the
+  root is `aria-labelledby` the label (`labelId`) and `aria-describedby` the
+  hint and errors. `invalid` draws the error border; the `application` role
+  does not take `aria-invalid`, so the error text reaches it through
+  `describedBy`.
+-->
+<script lang="ts">import { Calendar } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import CalendarMonths from "./CalendarMonths.svelte";
+import { calendarRoot } from "./calendar-props.js";
+let { value = $bindable(), month = $bindable(), ...props } = $props();
+const context = getComponentsContext();
+const shared = $derived(calendarRoot(props, context.locale()));
+</script>
+
+<Calendar.Root
+  {...shared.root}
+  type="single"
+  bind:placeholder={
+    // Unset, bits-ui picks the value's month or today's.
+    () => month as DateValue,
+    (next: DateValue) => {
+      month = next;
+    }
+  }
+  bind:value={
+    // bits-ui declares `value?: DateValue` (no `| undefined`) but reads an
+    // unset value as `undefined` at runtime; the binding passes it through.
+    () => value as DateValue,
+    (next: DateValue | undefined) => {
+      value = next;
+    }
+  }
+>
+  {#snippet children({ months, weekdays })}
+    <CalendarMonths parts={Calendar} {...shared.months} {months} {weekdays} />
+  {/snippet}
+</Calendar.Root>

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

@@ -0,0 +1,11 @@
+import type { DateValue } from '@internationalized/date';
+import { Calendar } from 'bits-ui';
+import { type CalendarBaseProps } from './calendar-props.ts';
+interface Props extends CalendarBaseProps {
+    /** The selected date; `undefined` when none. Bindable. */
+    value?: DateValue | undefined;
+}
+/** An inline, always-visible month grid for picking a date, on bits-ui's `Calendar`. */
+declare const Calendar: import("svelte").Component<Props, {}, "value" | "month">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/fields/CalendarMonths.svelte

@@ -0,0 +1,86 @@
+<!-- @component
+The header, month grids and day cells `Calendar` and `RangeCalendar` share; internal, not exported.
+-->
+<!--
+  CalendarMonths — the body of a bits-ui calendar, written once for both
+  roots. `parts` is the bits-ui namespace in use (`Calendar` or
+  `RangeCalendar`); both expose the same sub-components with the same props,
+  so one template serves both, and the day styling — the part a reader sees
+  — cannot drift between the single-date and the range calendar.
+
+  Each month `<table role="grid">` is named by its own month and year
+  ("October 2026"), so a two-month calendar's grids are told apart. The
+  visible heading is bits-ui's, `aria-hidden` because the month is already
+  in the `application`'s name, which bits-ui updates as the reader pages. An unavailable day is struck through as well as
+  `aria-disabled`: colour is never the only signal.
+-->
+<script lang="ts">import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
+import { ChevronLeft, ChevronRight } from "@lucide/svelte";
+let { parts, months, weekdays, locale, previousLabel, nextLabel, day } = $props();
+const P = $derived(parts);
+const monthName = $derived(new DateFormatter(locale, {
+	month: "long",
+	year: "numeric"
+}));
+const nameOf = (month) => monthName.format(month.value.toDate(getLocalTimeZone()));
+// One literal class list (Tailwind scans it as written). Range-middle wins
+// over selected, so a range reads as one band with two solid ends.
+const dayClass = [
+	"btn btn-ghost btn-sm btn-square font-normal",
+	"data-today:ring-1 data-today:ring-primary data-today:ring-inset",
+	"[&[data-selected]:not([data-range-middle])]:bg-primary [&[data-selected]:not([data-range-middle])]:text-primary-content",
+	"data-range-middle:bg-primary/15 data-range-middle:rounded-none",
+	"data-outside-month:text-base-content/40",
+	"data-unavailable:text-base-content/40 data-unavailable:line-through",
+	"data-disabled:text-base-content/30 data-disabled:pointer-events-none"
+];
+</script>
+
+<P.Header class="flex items-center justify-between gap-2 pb-2">
+  <!-- bits-ui writes its own English aria-label after the caller's props, so
+       the button is rendered through `child` to put `previousLabel` last. -->
+  <P.PrevButton>
+    {#snippet child({ props })}
+      <button {...props} class="btn btn-ghost btn-sm btn-square" aria-label={previousLabel}>
+        <ChevronLeft class="size-4" aria-hidden="true" />
+      </button>
+    {/snippet}
+  </P.PrevButton>
+  <P.Heading class="text-sm font-medium" />
+  <P.NextButton>
+    {#snippet child({ props })}
+      <button {...props} class="btn btn-ghost btn-sm btn-square" aria-label={nextLabel}>
+        <ChevronRight class="size-4" aria-hidden="true" />
+      </button>
+    {/snippet}
+  </P.NextButton>
+</P.Header>
+<div class="flex flex-col gap-4 sm:flex-row">
+  {#each months as month (month.value.toString())}
+    <P.Grid class="w-full border-collapse select-none" aria-label={nameOf(month)}>
+      <P.GridHead>
+        <P.GridRow class="flex">
+          {#each weekdays as weekday, index (index)}
+            <P.HeadCell class="text-base-content/60 w-8 text-xs font-normal">{weekday}</P.HeadCell>
+          {/each}
+        </P.GridRow>
+      </P.GridHead>
+      <P.GridBody>
+        {#each month.weeks as week, index (index)}
+          <P.GridRow class="flex">
+            {#each week as date (date.toString())}
+              <P.Cell {date} month={month.value} class="p-0">
+                {#snippet children({ selected, unavailable })}
+                  <P.Day class={dayClass}>
+                    {date.day}
+                    {#if day}{@render day({ date, selected, unavailable })}{/if}
+                  </P.Day>
+                {/snippet}
+              </P.Cell>
+            {/each}
+          </P.GridRow>
+        {/each}
+      </P.GridBody>
+    </P.Grid>
+  {/each}
+</div>

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

@@ -0,0 +1,30 @@
+import { type DateValue } from '@internationalized/date';
+import type { Calendar, DatePicker, DateRangePicker, RangeCalendar } from 'bits-ui';
+import type { Snippet } from 'svelte';
+/** One month of the calendar, as bits-ui's root snippet hands it over. */
+interface Month {
+    readonly value: DateValue;
+    readonly weeks: readonly (readonly DateValue[])[];
+}
+/** What the `day` snippet receives for one cell. */
+interface DayState {
+    readonly date: DateValue;
+    readonly selected: boolean;
+    readonly unavailable: boolean;
+}
+interface Props {
+    /** The bits-ui namespace whose parts to render. */
+    parts: typeof Calendar | typeof RangeCalendar | typeof DatePicker | typeof DateRangePicker;
+    months: readonly Month[];
+    weekdays: readonly string[];
+    /** The resolved single locale. */
+    locale: string;
+    previousLabel: string;
+    nextLabel: string;
+    /** Extra decoration inside a day cell. */
+    day?: Snippet<[DayState]> | undefined;
+}
+/** The header, month grids and day cells `Calendar` and `RangeCalendar` share; internal, not exported. */
+declare const CalendarMonths: import("svelte").Component<Props, {}, "">;
+type CalendarMonths = ReturnType<typeof CalendarMonths>;
+export default CalendarMonths;

package/dist/fields/Checkbox.svelte

@@ -0,0 +1,33 @@
+<!-- @component
+A daisyUI `checkbox` with its label in the same `<label>`, so the whole row is the hit target.
+-->
+<!--
+  Checkbox — daisyUI `checkbox` with its label in the same `<label>`, so the
+  whole row is the hit target and the input is named without an `id`/`for`
+  pair at all.
+
+  Unlike the text fields this one carries its OWN label: a checkbox's label
+  sits beside it rather than above it, and a `FormField` wrapped around a
+  single checkbox would put the question in two places. Use `CheckboxGroup`
+  (or `Fieldset`) when several checkboxes answer one question.
+
+  ARIA contract: a native `<input type="checkbox">` wrapped in its `<label>`,
+  so `checked` is the state assistive technology reads and Space toggles it
+  with no script. `describedBy` and `invalid` tie it to an enclosing group's
+  hint and errors when there is one.
+-->
+<script lang="ts">import { checkboxSize } from "./field-types.js";
+let { label, checked = $bindable(false), size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
+</script>
+
+<label class={['label cursor-pointer justify-start gap-3', className]}>
+  <input
+    {...rest}
+    type="checkbox"
+    bind:checked
+    aria-invalid={invalid ? 'true' : undefined}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    class={['checkbox', checkboxSize[size], invalid && 'checkbox-error']}
+  />
+  <span>{label}</span>
+</label>

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

@@ -0,0 +1,30 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | 'size'> {
+    /** Text beside the box; becomes the input's accessible name. */
+    label: string;
+    /** Whether the box is ticked. Bindable. */
+    checked?: boolean | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @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 daisyUI `checkbox` with its label in the same `<label>`, so the whole row is the hit target. */
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/fields/CheckboxGroup.svelte

@@ -0,0 +1,41 @@
+<!-- @component
+Several checkboxes answering one question, inside one `Fieldset`.
+-->
+<!--
+  CheckboxGroup — several checkboxes answering one question, inside one
+  `Fieldset`.
+
+  ARIA contract: the `<legend>` names the group and is repeated as focus moves
+  between the boxes; each box is named by its own inline label; the group's
+  hint and errors are on the `<fieldset>`, so they are read once for the group
+  rather than once per box.
+
+  `values` is the list of TICKED values, bindable. It is a plain array rather
+  than a `Set` because that is what a form's decoded body and a JSON payload
+  both look like, and because Svelte's deep reactivity tracks it.
+-->
+<script lang="ts">import Checkbox from "./Checkbox.svelte";
+import Fieldset from "./Fieldset.svelte";
+import { toFieldOptions } from "./field-types.js";
+let { legend, options, values = $bindable([]), name, hint, errors = [], required = false, requiredLabel = "(required)", disabled = false, size = "md", ...rest } = $props();
+const entries = $derived(toFieldOptions(options));
+const invalid = $derived(errors.length > 0);
+const toggle = (value, ticked) => {
+	values = ticked ? [...values, value] : values.filter((entry) => entry !== value);
+};
+</script>
+
+<Fieldset {...rest} {legend} {hint} {errors} {required} {requiredLabel}>
+  {#each entries as option (option.value)}
+    <Checkbox
+      label={option.label}
+      {name}
+      {size}
+      {invalid}
+      value={option.value}
+      disabled={disabled || option.disabled === true}
+      checked={values.includes(option.value)}
+      onchange={(event) => toggle(option.value, event.currentTarget.checked)}
+    />
+  {/each}
+</Fieldset>

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

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FieldOptionInput, type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'children'> {
+    /** The question the boxes answer. */
+    legend: string;
+    /** Full options, or bare strings when value and label are the same. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The ticked values.
+     * @defaultValue `[]`
+     */
+    values?: string[] | undefined;
+    /** Posted field name; every box shares it, as a multi-value field. */
+    name?: string | undefined;
+    /** Guidance rendered under the legend. */
+    hint?: string | undefined;
+    /**
+     * Validation messages; any at all marks the group invalid.
+     * @defaultValue `[]`
+     */
+    errors?: readonly string[] | undefined;
+    /** Marks the group required and reads `requiredLabel` after the legend. */
+    required?: boolean | undefined;
+    /**
+     * Read out after the legend when `required`.
+     * @defaultValue `'(required)'`
+     */
+    requiredLabel?: string | undefined;
+    /** Disables every option. */
+    disabled?: boolean | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+}
+/** Several checkboxes answering one question, inside one `Fieldset`. */
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;