@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/choice/ComboBox.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { labelOf } from "./options.js";
+import { FieldButton, FieldGroup, listOptionStyles, } from "../field/aria.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { Popover } from "../overlay/Popover.js";
+import { Check, ChevronDown } from "lucide-react";
+import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, Text, useFilter, } from "react-aria-components";
+/**
+ * One of many, found by typing: the customer of an invoice, the product of a line.
+ *
+ * Context: a `Select` makes you scroll a list you already know the name in; here you type
+ * three letters of it. The filter is React Aria's `contains` in the locale of the copy table
+ * (`AriaLocale`), so «jose» finds «José» and the comparison does not depend on the browser.
+ * The value is the option's `value` string — what the backend stores — never React Aria's
+ * `Key`.
+ *
+ * It is not `Picker`: that one chooses a RECORD among thousands, with metadata rows, a cap
+ * and a "see more". This is a closed list already in memory — tens to a few hundred — where
+ * one muted line under the name (a tax id, a city) is enough to tell two apart.
+ *
+ * When nothing matches, the list simply closes: an empty floating box tells nothing the
+ * unchanged field does not, and the system has no "no results" sentence of its own here.
+ */
+/* The row every list dropped from a field shares — Select, Suggest and this one. */
+const option = listOptionStyles;
+export function ComboBox({ mode, ...props }) {
+    /* Read mode draws the LABEL: the value is the backend's key, the label is what the form
+       promised to show. */
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadValue, { value: labelOf(props.options, props.value) });
+    }
+    /* The filter reads the locale from React Aria's context, so the box that provides it has
+       to be ABOVE the component that asks for it. */
+    return (_jsx(AriaLocale, { children: _jsx(EditableComboBox, { ...props }) }));
+}
+function EditableComboBox({ value, onChange, options, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const { contains } = useFilter({ sensitivity: "base" });
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, 
+        /* `defaultItems` and not `items`: with `items` React Aria hands the filtering to the
+           consumer. These are the same options every render — only the filtering is React
+           Aria's. */
+        defaultItems: options, value: value, onChange: (next) => onChange?.(next === null ? null : String(next)), defaultFilter: contains, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), _jsx(FieldButton, { className: "mr-1", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: options, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: option, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Text, { slot: "label", className: `truncate ${isSelected ? "font-medium" : ""}`, children: item.label }), item.description === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro text-muted", children: item.description }))] }), _jsx("span", { className: "flex size-(--size-icon-md) shrink-0 items-center justify-center", children: isSelected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-md) text-primary forced-colors:text-[HighlightText]", strokeWidth: 2 })) : null })] })) })) }) })] }));
+}

package/dist/primitives/choice/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import { type ChoiceOption } from "./options.js";
+import { type FormMode } from "../field/mode.js";
+export type RadioGroupProps = {
+    /** The chosen option's `value`, or `null` while nothing is chosen. */
+    value: string | null;
+    onChange?: (next: string) => void;
+    options: readonly ChoiceOption[];
+    /** `horizontal` for a few one-word options in a wide form; descriptions read better in a
+     *  column. */
+    orientation?: "vertical" | "horizontal";
+    disabled?: boolean;
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the label. */
+    mode?: FormMode;
+};
+export declare function RadioGroup({ value, onChange, options, orientation, disabled, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, mode, }: RadioGroupProps): import("react").JSX.Element;

package/dist/primitives/choice/RadioGroup.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { labelOf } from "./options.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { RadioButton, RadioField, RadioGroup as AriaRadioGroup, Text, } from "react-aria-components";
+/**
+ * One of few, all in sight: the payment method of a sale, the kind of a contact.
+ *
+ * Context: the rule against a `Select` — when there are few and there is room, they are
+ * shown, because knowing what can be chosen is half the decision. `SegmentedControl` draws
+ * them as buttons in a row, for two or three short words; this is the list form, for when an
+ * option needs a second line that explains it, or when there are five.
+ *
+ * The mark is the system's `Checkbox` mark made round — same size, same border, same
+ * primary when on — so a form that mixes both reads as one set of controls. A dot inside,
+ * not a check: a round mark with a check is a checkbox that lost its corners.
+ */
+const mark = tv({
+    base: "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-pill border transition-colors duration-(--duration-instant) forced-color-adjust-none",
+    variants: {
+        isSelected: {
+            false: "border-line-strong bg-surface forced-colors:border-[ButtonBorder]",
+            true: "border-primary bg-primary forced-colors:border-[Highlight] forced-colors:bg-[Highlight]",
+        },
+        isInvalid: {
+            true: "border-danger forced-colors:border-[Mark]",
+        },
+        isFocusVisible: {
+            true: "outline-2 outline-offset-2 outline-primary forced-colors:outline-[Highlight]",
+        },
+    },
+});
+export function RadioGroup({ value, onChange, options, orientation = "vertical", disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, mode, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    if (useFormMode(mode) === "read")
+        return _jsx(ReadValue, { value: labelOf(options, value) });
+    return (_jsx(AriaRadioGroup, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), orientation: orientation, isInvalid: invalid, isDisabled: disabled, 
+        /* `py-2` puts the first label on the same line a text input's would sit on, so the
+           field does not look shorter than its neighbours in the same row. */
+        className: orientation === "horizontal"
+            ? "flex min-w-0 flex-wrap items-start gap-x-5 gap-y-2 py-2"
+            : "flex min-w-0 flex-col gap-2.5 py-2", children: options.map((o) => (_jsxs(RadioField, { value: o.value, isDisabled: o.disabled, className: "flex min-w-0 flex-col data-disabled:opacity-45", children: [_jsx(RadioButton, { className: "group flex min-w-0 cursor-pointer items-start gap-2.5 text-meta text-ink disabled:cursor-not-allowed", children: (state) => (_jsxs(_Fragment, { children: [_jsx("span", { className: mark(state), children: _jsx("span", { className: `size-1.5 rounded-pill bg-surface transition-transform duration-(--duration-instant) ${state.isSelected ? "scale-100" : "scale-0"}` }) }), _jsx("span", { className: "min-w-0", children: o.label })] })) }), o.description === undefined ? null : (_jsx(Text, { slot: "description", className: "ml-6.5 text-micro text-muted", children: o.description }))] }, o.value))) }));
+}

package/dist/primitives/choice/SearchField.d.ts

@@ -0,0 +1,24 @@
+export type SearchFieldProps = {
+    value: string;
+    onChange?: (next: string) => void;
+    placeholder?: string;
+    /** Enter. For a search that runs on demand instead of on every keystroke. */
+    onSubmit?: (value: string) => void;
+    disabled?: boolean;
+    id?: string;
+    describedBy?: string;
+};
+/**
+ * A plain search box: a text, a clear button, Enter to submit. To filter the rows of a panel,
+ * the options of a long settings page, the lines of a document.
+ *
+ * Context: the system's `SearchBar` (in `components/search`) is a different thing — it builds
+ * CRITERIA: facets, operators, chips, a model of the fields. That is the list's question.
+ * This is the primitive under every other search: one string, no structure. Escape clears it
+ * and the clear button says so aloud in the copy's language — both React Aria's.
+ *
+ * It does not follow the form's read mode: what is typed here is never data of the record, so
+ * there is nothing to draw as text. The browser's own clear cross is hidden; ours is the one
+ * the keyboard and the screen reader know.
+ */
+export declare function SearchField({ value, onChange, placeholder, onSubmit, disabled, id: ownId, describedBy: ownDescribedBy, }: SearchFieldProps): import("react").JSX.Element;

package/dist/primitives/choice/SearchField.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { FieldButton, FieldGroup } from "../field/aria.js";
+import { useFieldIds } from "../field/context.js";
+import { Search, X } from "lucide-react";
+import { Input, SearchField as AriaSearchField } from "react-aria-components";
+/**
+ * A plain search box: a text, a clear button, Enter to submit. To filter the rows of a panel,
+ * the options of a long settings page, the lines of a document.
+ *
+ * Context: the system's `SearchBar` (in `components/search`) is a different thing — it builds
+ * CRITERIA: facets, operators, chips, a model of the fields. That is the list's question.
+ * This is the primitive under every other search: one string, no structure. Escape clears it
+ * and the clear button says so aloud in the copy's language — both React Aria's.
+ *
+ * It does not follow the form's read mode: what is typed here is never data of the record, so
+ * there is nothing to draw as text. The browser's own clear cross is hidden; ours is the one
+ * the keyboard and the screen reader know.
+ */
+export function SearchField({ value, onChange, placeholder, onSubmit, disabled = false, id: ownId, describedBy: ownDescribedBy, }) {
+    const { id, labelledBy, describedBy } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+    });
+    return (_jsx(AriaLocale, { children: _jsx(AriaSearchField, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), onSubmit: onSubmit, isDisabled: disabled, className: "group w-full min-w-0", children: _jsxs(FieldGroup, { children: [_jsx(Search, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-md) shrink-0 text-muted forced-colors:text-[ButtonText]", strokeWidth: 2 }), _jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden" }), _jsx(FieldButton, { className: "mr-1 group-data-empty:invisible", children: _jsx(X, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }) }) }));
+}

package/dist/primitives/choice/SegmentedControl.d.ts

@@ -0,0 +1,16 @@
+import { type SegmentOption } from "./options.js";
+import { type FormMode } from "../field/mode.js";
+export type SegmentedControlProps = {
+    value: string;
+    onChange?: (next: string) => void;
+    options: readonly SegmentOption[];
+    /** `sm` in a toolbar or a list bar, next to the view switcher; `md` in a form row. */
+    size?: "sm" | "md";
+    disabled?: boolean;
+    describedBy?: string;
+    /** Forces the mode. By default it follows the form only when written inside a `Field`. */
+    mode?: FormMode;
+    /** The name of the group when it is not inside a `Field` — "Período". */
+    "aria-label"?: string;
+};
+export declare function SegmentedControl({ value, onChange, options, size, disabled, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, }: SegmentedControlProps): import("react").JSX.Element;

package/dist/primitives/choice/SegmentedControl.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { labelOf } from "./options.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+/**
+ * Switching what is looked at: the period of a report ("Día · Semana · Mes"), the grouping of
+ * a board. One of a few, always one, and the change is immediate.
+ *
+ * Context: it draws exactly what the list's view switcher (`ViewSwitcher`) draws — one
+ * bordered box split by hairlines, the chosen segment tinted with ink, the others muted — so
+ * every "which view" control of a screen reads as the same kind of thing. It adds a label
+ * next to the icon, because a period has no icon that says "Semana".
+ *
+ * It is a VIEW control first, so it ignores the form's read mode — a report in a record that
+ * is being looked at still has to switch period. Written inside a `Field` it is a form answer
+ * instead (the kind of a contact: Persona · Empresa), and then it follows the form: in read
+ * mode it draws the chosen label.
+ */
+const group = tv({
+    base: "inline-flex w-fit max-w-full min-w-0 shrink-0 items-stretch overflow-hidden rounded-control border border-line-strong bg-surface forced-colors:border-[ButtonBorder]",
+    variants: {
+        size: {
+            sm: "h-(--size-control-sm)",
+            md: "h-(--size-control-md)",
+        },
+    },
+});
+const segment = tv({
+    base: "inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 border-l border-line-strong text-meta whitespace-nowrap transition-colors duration-(--duration-instant) outline-0 first:border-l-0 forced-color-adjust-none forced-colors:border-[ButtonBorder]",
+    variants: {
+        size: {
+            sm: "px-2.5",
+            md: "px-3.5",
+        },
+        isSelected: {
+            false: "bg-surface text-muted hover:bg-ink/5 hover:text-ink pressed:bg-ink/10",
+            true: "bg-ink/8 text-ink forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+        isFocusVisible: {
+            true: "outline-2 -outline-offset-2 outline-primary forced-colors:outline-[Highlight]",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-45",
+        },
+    },
+});
+export function SegmentedControl({ value, onChange, options, size = "md", disabled = false, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, }) {
+    /* No `id`: a group of buttons is not something a `<label for>` can point at; the field
+       names it through `aria-labelledby`. */
+    const { labelledBy, describedBy } = useFieldIds({ describedBy: ownDescribedBy });
+    const formMode = useFormMode(mode);
+    const inForm = mode !== undefined || labelledBy !== undefined;
+    if (inForm && formMode === "read")
+        return _jsx(ReadValue, { value: labelOf(options, value) });
+    return (_jsx(ToggleButtonGroup, { "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, selectionMode: "single", 
+        /* Always one: a period switcher with nothing pressed shows a report of no period. */
+        disallowEmptySelection: true, selectedKeys: [value], onSelectionChange: (keys) => {
+            const [next] = keys;
+            if (next !== undefined && String(next) !== value)
+                onChange?.(String(next));
+        }, isDisabled: disabled, className: group({ size }), children: options.map((o) => {
+            const Icon = o.icon;
+            return (_jsxs(ToggleButton, { id: o.value, isDisabled: o.disabled, className: (state) => segment({ ...state, size }), children: [Icon === undefined ? null : (_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-md) shrink-0", strokeWidth: 2 })), o.label] }, o.value));
+        }) }));
+}

package/dist/primitives/choice/Slider.d.ts

@@ -0,0 +1,16 @@
+import { type FormMode } from "../field/mode.js";
+export type SliderProps = {
+    value: number;
+    onChange?: (next: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    /** How the figure is written, in the copy's locale. `{ style: "percent" }` takes 0–1. */
+    format?: Intl.NumberFormatOptions;
+    disabled?: boolean;
+    id?: string;
+    describedBy?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the figure. */
+    mode?: FormMode;
+};
+export declare function Slider({ value, onChange, min, max, step, format, disabled, id: ownId, describedBy: ownDescribedBy, mode, }: SliderProps): import("react").JSX.Element;

package/dist/primitives/choice/Slider.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { tv } from "../../foundations/variants.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { Slider as AriaSlider, SliderFill, SliderOutput, SliderThumb, SliderTrack, } from "react-aria-components";
+/**
+ * A number in a range, where the position says as much as the figure: a discount, a
+ * tolerance, a probability.
+ *
+ * Context: the figure is always written next to the track — a slider alone answers "about
+ * there", and an invoice needs "12 %". It is formatted by React Aria in the locale of the copy
+ * table (`AriaLocale`), with the consumer's `Intl.NumberFormatOptions`: `{ style: "percent" }`
+ * expects a fraction (0.12), a plain number with a unit is the consumer's `unit` style.
+ *
+ * When the exact figure matters more than the position — an amount, a quantity — the control
+ * is `NumberInput`: dragging to 1 250,00 is a game nobody wins.
+ */
+const thumb = tv({
+    base: "top-1/2 size-4 rounded-pill border-2 border-primary bg-surface shadow-raised transition-colors duration-(--duration-instant) forced-color-adjust-none forced-colors:border-[Highlight]",
+    variants: {
+        isDragging: {
+            true: "bg-primary",
+        },
+        isFocusVisible: {
+            true: "outline-2 outline-offset-2 outline-primary forced-colors:outline-[Highlight]",
+        },
+        isDisabled: {
+            true: "border-line-strong forced-colors:border-[GrayText]",
+        },
+    },
+});
+export function Slider({ value, onChange, min, max, step = 1, format, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, }) {
+    const copy = useUiCopy();
+    const { id, labelledBy, describedBy } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+    });
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadValue, { value: new Intl.NumberFormat(copy.locale, format).format(value) });
+    }
+    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: thumb })] }), _jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })] }) }));
+}

package/dist/primitives/choice/Switch.d.ts

@@ -0,0 +1,14 @@
+import { type FormMode } from "../field/mode.js";
+import { type ReactNode } from "react";
+export type SwitchProps = {
+    checked: boolean;
+    onChange?: (next: boolean) => void;
+    /** The sentence next to the track — part of the click target. */
+    children?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+    describedBy?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the answer. */
+    mode?: FormMode;
+};
+export declare function Switch({ checked, onChange, children, disabled, id: ownId, describedBy: ownDescribedBy, mode, }: SwitchProps): import("react").JSX.Element;

package/dist/primitives/choice/Switch.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { useFieldIds } from "../field/context.js";
+import { useFormMode } from "../field/mode.js";
+import { Check, Minus } from "lucide-react";
+import { useId } from "react";
+import { Switch as AriaSwitch } from "react-aria-components";
+/**
+ * On or off, and it takes effect NOW: "send the invoice by email", "show archived".
+ *
+ * Context: it is React Aria's — a real input underneath, with the press, hover and keyboard
+ * focus of the rest of this family. Its inline label is optional and can be any node: inside
+ * a `Field` the field's label already names it, and the children add the sentence that says
+ * what "on" means (both are read aloud). It replaced the hand-written `Toggle`: one switch,
+ * one component.
+ *
+ * It is not a checkbox. A check is an answer that waits for the form to be submitted; a
+ * switch promises the change already happened. The track is `primary` when on — the
+ * system's color for a chosen state — never the gold of the one main action.
+ */
+const track = tv({
+    base: "relative inline-flex h-5 w-9 shrink-0 items-center rounded-pill transition-colors duration-(--duration-quick) forced-color-adjust-none",
+    variants: {
+        isSelected: {
+            false: "bg-line-strong forced-colors:bg-[ButtonBorder]",
+            true: "bg-primary forced-colors:bg-[Highlight]",
+        },
+        isPressed: {
+            true: "brightness-95",
+        },
+        isFocusVisible: {
+            true: "outline-2 outline-offset-2 outline-primary forced-colors:outline-[Highlight]",
+        },
+    },
+});
+const thumb = tv({
+    base: "inline-block size-4 rounded-pill bg-surface shadow-raised transition-transform duration-(--duration-quick) ease-(--ease-out) forced-colors:bg-[ButtonText]",
+    variants: {
+        isSelected: {
+            false: "translate-x-0.5",
+            true: "translate-x-4.5",
+        },
+    },
+});
+export function Switch({ checked, onChange, children, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, }) {
+    const { id, labelledBy, describedBy } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+    });
+    const textId = useId();
+    /* Named by the field AND by its own sentence: «Notificaciones, enviar la factura por
+       correo» — either one alone loses half of what the switch does. */
+    const named = [labelledBy, children === undefined ? undefined : textId]
+        .filter((part) => part !== undefined)
+        .join(" ") || undefined;
+    /* In read mode an off track looks like a disabled one. The answer is drawn as a mark. */
+    if (useFormMode(mode) === "read") {
+        return (_jsxs("span", { className: "flex min-h-(--size-control-md) items-center gap-1.5 text-meta text-ink", children: [checked ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) text-good", strokeWidth: 2.5 })) : (_jsx(Minus, { "aria-hidden": true, className: "size-(--size-icon-sm) text-muted", strokeWidth: 2.5 })), children] }));
+    }
+    return (_jsx(AriaSwitch, { id: id, "aria-labelledby": named, "aria-describedby": describedBy, isSelected: checked, onChange: (next) => onChange?.(next), isDisabled: disabled, 
+        /* The height of a control, so a switch alone in a field lines up with a text input in
+           the next column. */
+        className: "group inline-flex min-h-(--size-control-md) min-w-0 cursor-pointer items-center gap-2.5 text-meta text-ink disabled:cursor-not-allowed disabled:opacity-45", children: (state) => (_jsxs(_Fragment, { children: [_jsx("span", { className: track(state), children: _jsx("span", { className: thumb(state) }) }), children === undefined ? null : (_jsx("span", { id: textId, className: "min-w-0", children: children }))] })) }));
+}

package/dist/primitives/choice/ThemeSwitcher.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Context: the app's way to let a person pick the palette — a `SegmentedControl` over
+ * `useTheme()` and nothing more. System / Light / Dark are always all three: "system" is the
+ * default and the only way back from a forced choice, so it is never left out. It writes through
+ * the nearest `ThemeProvider` (or straight to `<html>` without one); where the choice is
+ * remembered is the app's, via the provider's `onChange`.
+ */
+export declare function ThemeSwitcher({ size }: {
+    size?: "sm" | "md";
+}): import("react").JSX.Element;

package/dist/primitives/choice/ThemeSwitcher.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { isTheme, useTheme } from "../../foundations/theme.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { Monitor, Moon, Sun } from "lucide-react";
+/**
+ * Context: the app's way to let a person pick the palette — a `SegmentedControl` over
+ * `useTheme()` and nothing more. System / Light / Dark are always all three: "system" is the
+ * default and the only way back from a forced choice, so it is never left out. It writes through
+ * the nearest `ThemeProvider` (or straight to `<html>` without one); where the choice is
+ * remembered is the app's, via the provider's `onChange`.
+ */
+export function ThemeSwitcher({ size = "sm" }) {
+    const copy = useUiCopy().theme;
+    const { theme, setTheme } = useTheme();
+    return (_jsx(SegmentedControl, { "aria-label": copy.label, size: size, value: theme, onChange: (next) => {
+            if (isTheme(next))
+                setTheme(next);
+        }, options: [
+            { value: "system", label: copy.system, icon: Monitor },
+            { value: "light", label: copy.light, icon: Sun },
+            { value: "dark", label: copy.dark, icon: Moon },
+        ] }));
+}

package/dist/primitives/choice/index.d.ts

@@ -0,0 +1,8 @@
+export { ComboBox, type ComboBoxProps } from "./ComboBox.js";
+export { type ChoiceOption, type SegmentOption, } from "./options.js";
+export { RadioGroup, type RadioGroupProps, } from "./RadioGroup.js";
+export { SearchField, type SearchFieldProps, } from "./SearchField.js";
+export { SegmentedControl, type SegmentedControlProps, } from "./SegmentedControl.js";
+export { Slider, type SliderProps } from "./Slider.js";
+export { Switch, type SwitchProps } from "./Switch.js";
+export { ThemeSwitcher } from "./ThemeSwitcher.js";

package/dist/primitives/choice/index.js

@@ -0,0 +1,11 @@
+/* LAS ELECCIONES — elegir uno de muchos escribiendo (ComboBox), uno de pocos a la vista
+   (RadioGroup, SegmentedControl), prender o apagar (Switch), un valor en un rango (Slider)
+   y buscar un texto suelto (SearchField). El valor es siempre un dato plano. */
+export { ComboBox } from "./ComboBox.js";
+export {} from "./options.js";
+export { RadioGroup, } from "./RadioGroup.js";
+export { SearchField, } from "./SearchField.js";
+export { SegmentedControl, } from "./SegmentedControl.js";
+export { Slider } from "./Slider.js";
+export { Switch } from "./Switch.js";
+export { ThemeSwitcher } from "./ThemeSwitcher.js";

package/dist/primitives/choice/options.d.ts

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+/**
+ * One answer of a choice: what is stored (`value`) and what is read (`label`).
+ *
+ * Context: a plain object and not React Aria's `Key` + children, because the options of an
+ * ERP form come from data — the currencies of the company, the payment methods configured —
+ * and the value goes back to the backend as the same string it came in with.
+ */
+export interface ChoiceOption {
+    value: string;
+    label: string;
+    /** A second, muted line: what the option IS (a tax id, a city), not a second name. */
+    description?: string;
+    disabled?: boolean;
+}
+/** One segment of a `SegmentedControl`. The icon goes before the label, never instead of it. */
+export interface SegmentOption {
+    value: string;
+    label: string;
+    icon?: LucideIcon;
+    /** Shown but not choosable — a period the report does not have yet. */
+    disabled?: boolean;
+}
+/** The label of the option whose value is `value`, for read mode. */
+export declare function labelOf(options: readonly {
+    value: string;
+    label: string;
+}[], value: string | null): string | null;

package/dist/primitives/choice/options.js

@@ -0,0 +1,6 @@
+/** The label of the option whose value is `value`, for read mode. */
+export function labelOf(options, value) {
+    if (value === null)
+        return null;
+    return options.find((option) => option.value === value)?.label ?? null;
+}

package/dist/primitives/date/Calendar.d.ts

@@ -0,0 +1,31 @@
+export type CalendarProps = {
+    /** The chosen day, as an ISO date — `"2026-10-30"`. */
+    value?: string | null;
+    onChange?: (next: string) => void;
+    /** The earliest and latest day that can be chosen, as ISO dates. */
+    min?: string;
+    max?: string;
+    /** A day that cannot be chosen — a holiday, a closed day. Receives the ISO date. */
+    isUnavailable?: (date: string) => boolean;
+    "aria-label"?: string;
+};
+/** One month, to pick one day. */
+export declare function Calendar({ value, onChange, min, max, isUnavailable, ...rest }: CalendarProps): import("react").JSX.Element;
+export type RangeCalendarProps = {
+    /** The chosen span, as ISO dates. */
+    value?: {
+        start: string;
+        end: string;
+    } | null;
+    onChange?: (next: {
+        start: string;
+        end: string;
+    }) => void;
+    min?: string;
+    max?: string;
+    /** Two months side by side: what a range across a month boundary needs to be seen whole. */
+    months?: 1 | 2;
+    "aria-label"?: string;
+};
+/** One or two months, to pick a span: the first click opens it, the second closes it. */
+export declare function RangeCalendar({ months, value, onChange, min, max, ...rest }: RangeCalendarProps): import("react").JSX.Element;