@thomasfosterau/components 0.1.0 → 0.2.0

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

@@ -17,7 +17,7 @@ A daisyUI `checkbox` with its label in the same `<label>`, so the whole row is t
   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 = "", class: className, ...rest } = $props();
+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]}>

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

@@ -17,6 +17,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | '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 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">;

package/dist/fields/Combobox.svelte

@@ -12,7 +12,8 @@ A single-select typeahead over a static list or an asynchronous search, on bits-
   bits-ui's here. What is NOT bits-ui's, and is what this file is actually
   about, is the SEARCH LIFECYCLE.
 
-  The search lifecycle, in the order the problems bite:
+  The search lifecycle (`latest-search.svelte.ts`, shared with `TagsInput`),
+  in the order the problems bite:
 
     debounce         a keystroke does not start a request; `debounceMs` of
                      quiet does.
@@ -49,21 +50,34 @@ A single-select typeahead over a static list or an asynchronous search, on bits-
   COMMITS. The fall-through happens where it matters — a query that matched
   nothing, or a panel the reader never opened — which is exactly the case a
   no-JS search form depends on.
+
+  `postedValue="query"` turns the widget into a search box, and changes two
+  things. The `name` moves onto the visible `<input>`, so the form posts the
+  typed text, and it does so with JavaScript off because the server-rendered
+  input is the posted control. And Enter submits the form unless the reader
+  MOVED to an option with the keyboard (`navigated`): bits-ui's
+  auto-highlight of the first candidate does not count, so typing a query and
+  pressing Enter searches for that query instead of opening the first
+  suggestion. Clicking an option still commits it.
 -->
 <script lang="ts" generics="T">import { Combobox } from "bits-ui";
 import { inputSize } from "./field-types.js";
-let { value = $bindable(), items, onSearch, debounceMs = 150, getId, getLabel, getBadge, label, placeholder, name, emptyLabel = "No matches", pendingLabel = "Searching…", errorMessage, id: idProp, describedBy = "", invalid = false, required = false, disabled = false, size = "md", class: className, item, footer, empty } = $props();
+import { LatestSearch } from "./latest-search.svelte.js";
+let { value = $bindable(), items, onSearch, debounceMs = 150, getId, getLabel, getBadge, label, placeholder, name, postedValue = "id", initialQuery, onQueryChange, onSelect, emptyLabel = "No matches", pendingLabel = "Searching…", errorMessage, id: idProp, describedBy = "", labelId: _labelId, invalid = false, required = false, disabled = false, size = "md", class: className, inputClass, hideLabel = false, portal = true, item, footer, empty, ...rest } = $props();
 const uid = $props.id();
 const inputId = $derived(idProp ?? uid);
-let query = $state("");
+// Only the initial value seeds the text; later changes come from typing.
+// svelte-ignore state_referenced_locally
+let query = $state(initialQuery ?? "");
 let open = $state(false);
-let results = $state([]);
-let pending = $state(false);
-let searchError = $state();
+const searcher = new LatestSearch(() => onSearch, () => debounceMs);
+const results = $derived(searcher.results);
+const pending = $derived(searcher.pending);
+const searchError = $derived(searcher.error);
 /** The id of the row bits-ui currently has under the cursor, if any. */
 let highlighted = $state();
-let timer;
-let inFlight;
+/** The reader moved the cursor with the keyboard since they last typed. */
+let navigated = false;
 /** Static mode filters locally; async mode shows whatever last settled. */
 const visible = $derived.by(() => {
 	if (onSearch !== undefined) return results;
@@ -77,57 +91,45 @@ const selectedLabel = $derived.by(() => {
 	const match = items.find((entry) => getId(entry) === value);
 	return match === undefined ? undefined : getLabel(match);
 });
+/** Seeds bits-ui's input text once, at mount. */
+const initialText = $derived(selectedLabel ?? initialQuery);
+const postsQuery = $derived(postedValue === "query");
 const visibleError = $derived(errorMessage ?? searchError);
-const search = (text) => {
-	if (onSearch === undefined) return;
-	inFlight?.abort();
-	const own = new AbortController();
-	inFlight = own;
-	pending = true;
-	searchError = undefined;
-	void onSearch(text, own.signal).then((next) => {
-		// A superseded request must not write: `inFlight` is the identity
-		// check, `signal.aborted` catches the caller aborting its own work.
-		if (own.signal.aborted || inFlight !== own) return;
-		results = next;
-		pending = false;
-	}).catch((error) => {
-		if (own.signal.aborted || inFlight !== own) return;
-		pending = false;
-		searchError = error instanceof Error ? error.message : String(error);
-	});
-};
-const schedule = (text) => {
-	if (timer !== undefined) clearTimeout(timer);
-	timer = setTimeout(() => {
-		timer = undefined;
-		search(text);
-	}, debounceMs);
-};
-$effect(() => () => {
-	if (timer !== undefined) clearTimeout(timer);
-	inFlight?.abort();
-});
+$effect(() => () => searcher.dispose());
 const typed = (event) => {
 	query = event.currentTarget.value;
+	navigated = false;
+	onQueryChange?.(query);
 	if (onSearch === undefined) {
 		open = true;
 		return;
 	}
 	if (query.trim() === "") {
-		if (timer !== undefined) clearTimeout(timer);
-		inFlight?.abort();
-		inFlight = undefined;
-		pending = false;
-		results = [];
+		searcher.clear();
 		open = false;
 		return;
 	}
 	open = true;
-	schedule(query);
+	searcher.schedule(query);
 };
+const navigationKeys = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End",
+	"PageDown",
+	"PageUp"
+]);
 const keydown = (event) => {
-	if (event.key !== "Enter" || highlighted !== undefined) return;
+	if (navigationKeys.has(event.key)) {
+		navigated = true;
+		return;
+	}
+	if (event.key !== "Enter") return;
+	// In query mode a highlight the reader did not move to is bits-ui's
+	// auto-highlight, not a choice: treat it as nothing highlighted.
+	const committing = highlighted !== undefined && (!postsQuery || navigated);
+	if (committing) return;
 	// Nothing to commit. Close first so bits-ui's own Enter branch takes the
 	// closed path, which returns without `preventDefault` — that is what lets
 	// a wrapping form submit.
@@ -135,8 +137,8 @@ const keydown = (event) => {
 };
 </script>
 
-<div class={['fieldset w-full', className]}>
-  <label class="label" for={inputId}>{label}</label>
+<div {...rest} class={['fieldset w-full', className]}>
+  <label class={['label', hideLabel && 'sr-only']} for={inputId}>{label}</label>
 
   <Combobox.Root
     type="single"
@@ -144,23 +146,27 @@ const keydown = (event) => {
     value={value ?? ''}
     onValueChange={(next) => {
       value = next === '' ? undefined : next;
+      if (next === '' || onSelect === undefined) return;
+      const chosen = visible.find((entry) => getId(entry) === next);
+      if (chosen !== undefined) onSelect(chosen);
     }}
     {disabled}
     {required}
   >
     <Combobox.Input
       id={inputId}
-      {...selectedLabel === undefined ? {} : { defaultValue: selectedLabel }}
+      {...initialText === undefined ? {} : { defaultValue: initialText }}
+      {...postsQuery && name !== undefined ? { name } : {}}
       {placeholder}
       autocomplete="off"
       aria-describedby={describedBy === '' ? undefined : describedBy}
       aria-invalid={invalid ? 'true' : undefined}
       oninput={typed}
       onkeydown={keydown}
-      class={['input w-full', inputSize[size], invalid && 'input-error']}
+      class={['input w-full', inputSize[size], invalid && 'input-error', inputClass]}
     />
 
-    <Combobox.Portal>
+    <Combobox.Portal disabled={!portal}>
       <Combobox.Content
         sideOffset={4}
         class="menu bg-base-100 rounded-box border-base-300 z-50 max-h-72 min-w-64 overflow-auto border p-2 shadow-md"
@@ -208,11 +214,12 @@ const keydown = (event) => {
   </Combobox.Root>
 
   <!--
-    The posted value is the id, not the typed text: bits-ui's own hidden input
-    is not used, because `name` here means "post the selection" and nothing
-    else about the widget should depend on it.
+    In id mode the posted value is the id, not the typed text: bits-ui's own
+    hidden input is not used, because `name` here means "post the selection"
+    and nothing else about the widget should depend on it. In query mode the
+    visible input above carries `name` instead.
   -->
-  {#if name !== undefined}
+  {#if name !== undefined && !postsQuery}
     <input type="hidden" {name} value={value ?? ''} />
   {/if}
 

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

@@ -1,8 +1,9 @@
 import { Combobox } from 'bits-ui';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type FieldSize } from './field-types.ts';
 declare function $$render<T>(): {
-    props: {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "class" | "id" | "children"> & {
         /** The selected item's id. */
         value?: string | undefined;
         /** A static list, filtered here by label. Ignored when `onSearch` is set. */
@@ -27,8 +28,26 @@ declare function $$render<T>(): {
         label: string;
         /** Placeholder in the input. */
         placeholder?: string | undefined;
-        /** Posted field name. Set it to render a hidden input carrying the id. */
+        /**
+         * Posted field name. With `postedValue="id"` it renders a hidden input
+         * carrying the selected id; with `postedValue="query"` it goes on the
+         * visible input, which posts the typed text.
+         */
         name?: string | undefined;
+        /**
+         * What the field under `name` posts: the selected item's id, or the typed
+         * query text. `'query'` makes the input itself the posted control (so a
+         * plain GET search form works with JavaScript off) and makes Enter submit
+         * the form unless the reader arrowed to an option.
+         * @defaultValue `'id'`
+         */
+        postedValue?: "id" | "query" | undefined;
+        /** Text in the input at mount, such as the current search. A selected item's label wins. */
+        initialQuery?: string | undefined;
+        /** Called with the raw input text on every keystroke. */
+        onQueryChange?: ((query: string) => void) | undefined;
+        /** Called with the item the reader committed (click, or Enter on a highlighted row). */
+        onSelect?: ((item: T) => void) | undefined;
         /**
          * Shown when a settled search returned nothing.
          * @defaultValue `'No matches'`
@@ -48,6 +67,12 @@ declare function $$render<T>(): {
          * @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;
         /** `FieldControl`: the field is in error. */
         invalid?: boolean | undefined;
         /** `FieldControl`: the field must be filled. */
@@ -59,8 +84,18 @@ declare function $$render<T>(): {
          * @defaultValue `'md'`
          */
         size?: FieldSize | undefined;
-        /** Extra classes, merged last. */
+        /** Extra classes on the root, merged last. */
         class?: string | undefined;
+        /** Extra classes on the `<input>`, merged last (e.g. daisyUI `join-item`). */
+        inputClass?: string | undefined;
+        /** Keep the label as the input's accessible name but hide it visually. */
+        hideLabel?: boolean | undefined;
+        /**
+         * Portal the listbox to `<body>`. `false` renders it inside this
+         * component's root instead; it still floats over the layout.
+         * @defaultValue `true`
+         */
+        portal?: boolean | undefined;
         /** Replace a row's contents. */
         item?: Snippet<[T]> | undefined;
         /** Rendered after the rows — a "create this" row, a "see all" link. */

package/dist/fields/DateField.svelte

@@ -0,0 +1,37 @@
+<!-- @component
+Segmented day / month / year entry on bits-ui `DateField`, in the locale's order.
+-->
+<!--
+  DateField — a date typed into segments (day, month, year; optionally hour
+  and minute), each a `role="spinbutton"`: digits to type, ↑ / ↓ to step,
+  ← / → and auto-advance between segments, Backspace to clear. The order
+  and separators follow the locale (en-AU day/month/year, en-US
+  month/day/year).
+
+  `DateInput` (the native `<input type="date">`) stays the default for a
+  single date on a form. Reach for this when a design needs the same
+  control on every browser, or a time as well as a date.
+
+  ARIA contract: see `SegmentGroup` — a `role="group"` named by the
+  `FormField` label through `labelId`, `aria-describedby` its hint and
+  errors, `aria-invalid` when in error. With `name`, bits-ui posts the ISO
+  value (`2026-10-14`) through a hidden input.
+-->
+<script lang="ts">import { DateField } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { definedProps } from "./calendar-props.js";
+import SegmentGroup from "./SegmentGroup.svelte";
+import { segmentedField } from "./segmented-field.js";
+let { value = $bindable(), minValue, maxValue, granularity = "day", ...shared } = $props();
+const context = getComponentsContext();
+const field = $derived(segmentedField(shared, context.locale()));
+</script>
+
+<DateField.Root
+  bind:value={() => value as DateValue, (next) => (value = next)}
+  {...field.root}
+  {...definedProps({ minValue, maxValue })}
+  {granularity}
+>
+  <SegmentGroup parts={DateField} group={field.group} />
+</DateField.Root>

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

@@ -0,0 +1,20 @@
+import type { DateValue } from '@internationalized/date';
+import { DateField } from 'bits-ui';
+import { type SegmentedFieldProps } from './segmented-field.ts';
+interface Props extends SegmentedFieldProps {
+    /** The date; `undefined` while empty or incomplete. Bindable. */
+    value?: DateValue | undefined;
+    /** Earliest valid date. */
+    minValue?: DateValue | undefined;
+    /** Latest valid date. */
+    maxValue?: DateValue | undefined;
+    /**
+     * The smallest segment shown.
+     * @defaultValue `'day'`
+     */
+    granularity?: 'day' | 'hour' | 'minute' | 'second' | undefined;
+}
+/** Segmented day / month / year entry on bits-ui `DateField`, in the locale's order. */
+declare const DateField: import("svelte").Component<Props, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/fields/DateInput.svelte

@@ -16,7 +16,7 @@ A native `<input type="date">` in daisyUI `input` styling, with `FieldControl` w
   picker that people already know.
 -->
 <script lang="ts">import { inputSize } from "./field-types.js";
-let { value = $bindable(""), min, max, size = "md", invalid = false, describedBy = "", class: className, ...rest } = $props();
+let { value = $bindable(""), min, max, size = "md", invalid = false, describedBy = "", labelId: _labelId, class: className, ...rest } = $props();
 </script>
 
 <input

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

@@ -22,6 +22,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size' | 'm
      * @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 `<input type="date">` in daisyUI `input` styling, with `FieldControl` wiring. */
 declare const DateInput: import("svelte").Component<Props, {}, "value">;

package/dist/fields/DatePicker.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+A segmented date field with a button that opens a calendar popover, on bits-ui `DatePicker`.
+-->
+<!--
+  DatePicker — `DateField`'s segments plus a calendar button: type the date,
+  or open the month and pick it. Selecting a day closes the popover
+  (`closeOnDateSelect`) and returns focus to the button.
+
+  Reach for it when the reader benefits from seeing the month (which day
+  of the week, what is unavailable); for a plain date on a form the
+  native `DateInput` remains the default.
+
+  ARIA contract: the segment group as `DateField` (named by the
+  `FormField` label through `labelId`); the trigger and dialog as
+  `PickerPopover`; the grid as `Calendar`.
+-->
+<script lang="ts">import { DatePicker } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { definedProps } from "./calendar-props.js";
+import PickerPopover from "./PickerPopover.svelte";
+import SegmentGroup from "./SegmentGroup.svelte";
+import { pickerField } from "./segmented-field.js";
+let { value = $bindable(), open = $bindable(false), minValue, maxValue, granularity = "day", closeOnDateSelect = true, ...shared } = $props();
+const context = getComponentsContext();
+const picker = $derived(pickerField(shared, context.locale()));
+</script>
+
+<DatePicker.Root
+  bind:value={() => value as DateValue, (next) => (value = next)}
+  bind:open
+  {...picker.root}
+  {...definedProps({ minValue, maxValue })}
+  {granularity}
+  {closeOnDateSelect}
+>
+  <SegmentGroup parts={DatePicker} group={picker.group}>
+    {#snippet trailing()}
+      <PickerPopover
+        parts={DatePicker}
+        triggerLabel={picker.triggerLabel}
+        calendarLabel={picker.calendarLabel}
+        months={picker.months}
+        disabled={picker.group.disabled}
+      />
+    {/snippet}
+  </SegmentGroup>
+</DatePicker.Root>

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

@@ -0,0 +1,25 @@
+import type { DateValue } from '@internationalized/date';
+import { DatePicker } from 'bits-ui';
+import { type PickerProps, type SegmentedFieldProps } from './segmented-field.ts';
+interface Props extends SegmentedFieldProps, PickerProps {
+    /** The date; `undefined` while empty or incomplete. Bindable. */
+    value?: DateValue | undefined;
+    /** Earliest valid date. */
+    minValue?: DateValue | undefined;
+    /** Latest valid date. */
+    maxValue?: DateValue | undefined;
+    /**
+     * The smallest segment shown.
+     * @defaultValue `'day'`
+     */
+    granularity?: 'day' | 'hour' | 'minute' | 'second' | undefined;
+    /**
+     * Close the popover when a day is picked.
+     * @defaultValue `true`
+     */
+    closeOnDateSelect?: boolean | undefined;
+}
+/** A segmented date field with a button that opens a calendar popover, on bits-ui `DatePicker`. */
+declare const DatePicker: import("svelte").Component<Props, {}, "value" | "open">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/fields/DateRangePicker.svelte

@@ -0,0 +1,70 @@
+<!-- @component
+Two segmented date fields, a start and an end, with a range-calendar popover, on bits-ui `DateRangePicker`.
+-->
+<!--
+  DateRangePicker — a start and an end date typed into segments, or picked
+  as a span on a `RangeCalendar` in a popover. `minDays` / `maxDays`
+  constrain the span while it is chosen.
+
+  ARIA contract: the whole control is one `role="group"` named by the
+  `FormField` label (`labelId`) and described by its hint and errors, so
+  the error text reaches it (a written-out `group` does not take
+  `aria-invalid`; `invalid` draws the error border). Inside it, the two halves are groups named
+  `startLabel` / `endLabel`, so a segment reads "day, <label> Start date".
+  The dash between them is `aria-hidden`. The trigger and dialog are
+  `PickerPopover`'s.
+-->
+<script lang="ts">import { DateRangePicker } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { definedProps } from "./calendar-props.js";
+import { inputSize } from "./field-types.js";
+import PickerPopover from "./PickerPopover.svelte";
+import SegmentGroup from "./SegmentGroup.svelte";
+import { pickerField } from "./segmented-field.js";
+let { value = $bindable(), open = $bindable(false), minValue, maxValue, minDays, maxDays, closeOnRangeSelect = true, startName, endName, startLabel = "Start date", endLabel = "End date", ...shared } = $props();
+const context = getComponentsContext();
+const picker = $derived(pickerField(shared, context.locale()));
+const group = $derived(picker.group);
+const { class: className, ...attributes } = $derived(group.attributes);
+</script>
+
+<DateRangePicker.Root
+  bind:value={
+    () => value ?? { start: undefined, end: undefined },
+    (next) => (value = { start: next.start, end: next.end })
+  }
+  bind:open
+  {...picker.root}
+  {...definedProps({ minValue, maxValue, minDays, maxDays })}
+  {closeOnRangeSelect}
+>
+  {#snippet child({ props })}
+    <div
+      {...attributes}
+      {...props}
+      {...group.id === undefined ? {} : { id: group.id }}
+      role="group"
+      aria-labelledby={group.labelId}
+      aria-describedby={group.describedBy === '' ? undefined : group.describedBy}
+      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,
+      ]}
+    >
+      <SegmentGroup parts={DateRangePicker} {group} range={{ type: 'start', label: startLabel, name: startName }} />
+      <span aria-hidden="true" class="text-base-content/60 px-1.5">–</span>
+      <SegmentGroup parts={DateRangePicker} {group} range={{ type: 'end', label: endLabel, name: endName }} />
+      <PickerPopover
+        parts={DateRangePicker}
+        triggerLabel={picker.triggerLabel}
+        calendarLabel={picker.calendarLabel}
+        months={picker.months}
+        disabled={group.disabled}
+      />
+    </div>
+  {/snippet}
+</DateRangePicker.Root>