@sincpro/web-ui 1.2.0 → 1.3.0

package/dist/foundations/copy.d.ts

@@ -1,18 +1,20 @@
-import { type ReactNode } from "react";
+import { type CopyOverride, fillCopy } from "./catalog.js";
+import type { ReactNode } from "react";
 /**
  * Chrome copy for the design system.
  *
  * The handbook rule: code is English; language is chosen at render. This
  * package must not bake product Spanish into buttons. English is the default
- * so a story still reads; the app overlays the session locale via
- * `UiCopyProvider`.
+ * so a story still reads; the app installs the session's language once
+ * (`installCopy(SPANISH_COPY)`), and `UiCopyProvider` changes a branch.
  *
  * Domain sentences (empty catalog, upload hint) stay out — those are the
  * product's catalogs, passed as props.
  *
- * `locale` is also a module store so `formatCount` — called from modules that
- * are not components — tracks the same BCP-47 the provider just set. A React
- * context cannot be read from `shared/format.ts`.
+ * The installed words are also what is not a component reads (`currentCopy`,
+ * `currentCopyLocale`): a sentence built in a function, a month named by the
+ * calendar. A provider does not change those — it is for a branch, not for the
+ * session (see `catalog.tsx`).
  */
 export type UiCopy = {
     /** BCP-47 for `toLocaleString` and `Intl`. */
@@ -226,6 +228,8 @@ export type UiCopy = {
         min: string;
         max: string;
         distinct: string;
+        /** Under a pile that holds its first page and counts them all: ask for the rest. */
+        pileMore: string;
     };
     menu: {
         empty: string;
@@ -365,6 +369,8 @@ export type UiCopy = {
         weekOfYear: string;
         quarter: string;
         quarterOfYear: string;
+        /** The calendar's «go to today» button: its word and its name are the same. */
+        today: string;
     };
     /**
      * CÓMO SE LLAMA UN OPERADOR para quien lo lee.
@@ -503,6 +509,9 @@ export type UiCopy = {
         pilePageNote: string;
         limitPiles: string;
         /** El árbol de condiciones. */
+        /** The names of a rule's two choices — the field it asks about, and how it compares. */
+        ruleField: string;
+        ruleOperator: string;
         noValue: string;
         from: string;
         to: string;
@@ -741,63 +750,21 @@ export type UiCopy = {
     };
 };
 export declare const ENGLISH_COPY: UiCopy;
-/** The merged catalog the formatters read when they are not a component. */
-export declare function currentCopy(): UiCopy;
+/** What changes of web-ui's words, at any depth: `{ search: { joins: { any: "o" } } }`. */
+export type UiCopyOverride = CopyOverride<UiCopy>;
+/** The installed words: for formatters and sentences that are not a component. */
+export declare const currentCopy: () => UiCopy;
 /** BCP-47 the formatters read when they are not a component. */
 export declare function currentCopyLocale(): string;
-export type UiCopyOverride = {
-    locale?: string;
-    present?: Partial<UiCopy["present"]>;
-    frame?: Partial<UiCopy["frame"]>;
-    selection?: Partial<UiCopy["selection"]>;
-    pager?: Partial<UiCopy["pager"]>;
-    record?: Partial<UiCopy["record"]>;
-    shell?: Partial<UiCopy["shell"]>;
-    field?: Partial<UiCopy["field"]>;
-    choice?: Partial<UiCopy["choice"]>;
-    search?: Partial<UiCopy["search"]>;
-    failed?: Partial<UiCopy["failed"]>;
-    table?: Partial<UiCopy["table"]>;
-    menu?: Partial<UiCopy["menu"]>;
-    list?: Partial<UiCopy["list"]>;
-    grouping?: Partial<UiCopy["grouping"]>;
-    dates?: Partial<UiCopy["dates"]>;
-    calendar?: Partial<UiCopy["calendar"]>;
-    ops?: Record<string, string>;
-    sorting?: Partial<UiCopy["sorting"]>;
-    copyable?: Partial<UiCopy["copyable"]>;
-    activity?: Partial<UiCopy["activity"]>;
-    editable?: Partial<UiCopy["editable"]>;
-    picker?: Partial<UiCopy["picker"]>;
-    cell?: Partial<UiCopy["cell"]>;
-    time?: Partial<UiCopy["time"]>;
-    dialog?: Partial<UiCopy["dialog"]>;
-    report?: Partial<UiCopy["report"]>;
-    builder?: Partial<UiCopy["builder"]>;
-    pivot?: Partial<UiCopy["pivot"]>;
-    person?: Partial<UiCopy["person"]>;
-    lines?: Partial<UiCopy["lines"]>;
-    lineItems?: Partial<UiCopy["lineItems"]>;
-    priority?: Partial<UiCopy["priority"]>;
-    board?: Partial<UiCopy["board"]>;
-    kanbanState?: Partial<UiCopy["kanbanState"]>;
-    timeline?: Partial<UiCopy["timeline"]>;
-    activityState?: Partial<UiCopy["activityState"]>;
-    relation?: Partial<UiCopy["relation"]>;
-    relationCard?: Partial<UiCopy["relationCard"]>;
-    totals?: Partial<UiCopy["totals"]>;
-    inlineEdit?: Partial<UiCopy["inlineEdit"]>;
-    theme?: Partial<UiCopy["theme"]>;
-    tree?: Partial<UiCopy["tree"]>;
-    assist?: Partial<UiCopy["assist"]>;
-};
-export declare function mergeCopy(over?: UiCopyOverride): UiCopy;
-/** For tests and non-React callers that need a locale before a provider mounts. */
-export declare function installCopy(over?: UiCopyOverride): UiCopy;
-export declare function UiCopyProvider({ copy, children, }: {
+/** English with `over` on top, without installing it. */
+export declare const mergeCopy: (over?: UiCopyOverride) => UiCopy;
+/** Sets the session's words: once, before the first draw — and the one global there is. */
+export declare const installCopy: (over?: UiCopyOverride) => UiCopy;
+/** Changes the words for its branch, on top of what encloses it. It never writes the
+ *  global: a corner in another language does not change the rest of the screen. */
+export declare const UiCopyProvider: (props: {
     copy?: UiCopyOverride;
     children: ReactNode;
-}): import("react").JSX.Element;
-export declare function useUiCopy(): UiCopy;
-/** `{name}` → value. A missing key stays visible in the template. */
-export declare function fillCopy(template: string, params: Record<string, string | number>): string;
+}) => ReactNode;
+export declare const useUiCopy: () => UiCopy;
+export { fillCopy };

package/dist/foundations/copy.es.js

@@ -199,6 +199,7 @@ export const SPANISH_COPY = {
         min: "mín {value}",
         max: "máx {value}",
         distinct: "{value} distintos",
+        pileMore: "Ver {count} más",
     },
     menu: { empty: "Nada coincide." },
     list: {
@@ -264,6 +265,7 @@ export const SPANISH_COPY = {
         weekOfYear: "Semana {n} de {year}",
         quarter: "T{n}",
         quarterOfYear: "T{n} de {year}",
+        today: "Hoy",
     },
     grouping: {
         label: "Agrupar por",
@@ -346,6 +348,8 @@ export const SPANISH_COPY = {
         pilesNote: "Sobre lo que plegaron —los totales de arriba, y «count»— no sobre las filas: eso es el filtro de más arriba.",
         pilePageNote: "Sólo el primer nivel: pedida una página, los niveles más profundos sólo contestan por los montones que sobrevivieron.",
         limitPiles: "Limitar cuántos montones vuelven",
+        ruleField: "Campo",
+        ruleOperator: "Comparación",
         noValue: "sin valor",
         from: "desde…",
         to: "hasta…",

package/dist/foundations/copy.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createCopy, fillCopy } from "./catalog.js";
 export const ENGLISH_COPY = {
     locale: "en-US",
     present: {
@@ -146,6 +145,7 @@ export const ENGLISH_COPY = {
         min: "min {value}",
         max: "max {value}",
         distinct: "{value} distinct",
+        pileMore: "Show {count} more",
     },
     menu: {
         empty: "Nothing matches.",
@@ -242,6 +242,7 @@ export const ENGLISH_COPY = {
         weekOfYear: "Week {n}, {year}",
         quarter: "Q{n}",
         quarterOfYear: "Q{n} {year}",
+        today: "Today",
     },
     grouping: {
         label: "Group by",
@@ -337,6 +338,8 @@ export const ENGLISH_COPY = {
         pilesNote: "Over what they folded — the totals above, and «count» — not over the rows: that is the filter above.",
         pilePageNote: "Only the first level: once a page is asked for, the deeper levels answer only for the piles that survived.",
         limitPiles: "Limit how many piles come back",
+        ruleField: "Field",
+        ruleOperator: "Comparison",
         noValue: "no value",
         from: "from…",
         to: "to…",
@@ -502,97 +505,20 @@ export const ENGLISH_COPY = {
         empty: "empty",
     },
 };
-let activeCopy = ENGLISH_COPY;
-/** The merged catalog the formatters read when they are not a component. */
-export function currentCopy() {
-    return activeCopy;
-}
+/* The mechanism is `catalog.tsx`, the same one an application uses for its own words. */
+const ui = createCopy(ENGLISH_COPY);
+/** The installed words: for formatters and sentences that are not a component. */
+export const currentCopy = ui.current;
 /** BCP-47 the formatters read when they are not a component. */
 export function currentCopyLocale() {
-    return activeCopy.locale;
-}
-function rememberCopy(copy) {
-    activeCopy = copy;
-}
-/**
- * La copia del árbol, cuando alguien la puso.
- *
- * Arranca en `null` y NO en el inglés de fábrica: un contexto se queda con el
- * valor que tenía cuando se creó, así que con el inglés adentro un componente
- * sin provider ignoraba `installCopy` y seguía diciendo «grouped by» aunque la
- * aplicación entera estuviera en castellano. Dos verdades sobre la misma cosa.
- *
- * Con `null`, sin provider se lee la instalada, que es la única.
- */
-const CopyContext = createContext(null);
-export function mergeCopy(over) {
-    if (over === undefined)
-        return ENGLISH_COPY;
-    return {
-        locale: over.locale ?? ENGLISH_COPY.locale,
-        present: { ...ENGLISH_COPY.present, ...over.present },
-        frame: { ...ENGLISH_COPY.frame, ...over.frame },
-        selection: { ...ENGLISH_COPY.selection, ...over.selection },
-        pager: { ...ENGLISH_COPY.pager, ...over.pager },
-        record: { ...ENGLISH_COPY.record, ...over.record },
-        shell: { ...ENGLISH_COPY.shell, ...over.shell },
-        field: { ...ENGLISH_COPY.field, ...over.field },
-        choice: { ...ENGLISH_COPY.choice, ...over.choice },
-        search: { ...ENGLISH_COPY.search, ...over.search },
-        failed: { ...ENGLISH_COPY.failed, ...over.failed },
-        table: { ...ENGLISH_COPY.table, ...over.table },
-        menu: { ...ENGLISH_COPY.menu, ...over.menu },
-        list: { ...ENGLISH_COPY.list, ...over.list },
-        grouping: { ...ENGLISH_COPY.grouping, ...over.grouping },
-        dates: { ...ENGLISH_COPY.dates, ...over.dates },
-        calendar: { ...ENGLISH_COPY.calendar, ...over.calendar },
-        ops: { ...ENGLISH_COPY.ops, ...over.ops },
-        sorting: { ...ENGLISH_COPY.sorting, ...over.sorting },
-        copyable: { ...ENGLISH_COPY.copyable, ...over.copyable },
-        activity: { ...ENGLISH_COPY.activity, ...over.activity },
-        editable: { ...ENGLISH_COPY.editable, ...over.editable },
-        picker: { ...ENGLISH_COPY.picker, ...over.picker },
-        cell: { ...ENGLISH_COPY.cell, ...over.cell },
-        time: { ...ENGLISH_COPY.time, ...over.time },
-        dialog: { ...ENGLISH_COPY.dialog, ...over.dialog },
-        report: { ...ENGLISH_COPY.report, ...over.report },
-        builder: { ...ENGLISH_COPY.builder, ...over.builder },
-        pivot: { ...ENGLISH_COPY.pivot, ...over.pivot },
-        person: { ...ENGLISH_COPY.person, ...over.person },
-        lines: { ...ENGLISH_COPY.lines, ...over.lines },
-        lineItems: { ...ENGLISH_COPY.lineItems, ...over.lineItems },
-        priority: { ...ENGLISH_COPY.priority, ...over.priority },
-        board: { ...ENGLISH_COPY.board, ...over.board },
-        kanbanState: { ...ENGLISH_COPY.kanbanState, ...over.kanbanState },
-        timeline: { ...ENGLISH_COPY.timeline, ...over.timeline },
-        activityState: { ...ENGLISH_COPY.activityState, ...over.activityState },
-        relation: { ...ENGLISH_COPY.relation, ...over.relation },
-        relationCard: { ...ENGLISH_COPY.relationCard, ...over.relationCard },
-        totals: { ...ENGLISH_COPY.totals, ...over.totals },
-        inlineEdit: { ...ENGLISH_COPY.inlineEdit, ...over.inlineEdit },
-        theme: { ...ENGLISH_COPY.theme, ...over.theme },
-        tree: { ...ENGLISH_COPY.tree, ...over.tree },
-        assist: { ...ENGLISH_COPY.assist, ...over.assist },
-    };
-}
-/** For tests and non-React callers that need a locale before a provider mounts. */
-export function installCopy(over) {
-    const merged = mergeCopy(over);
-    rememberCopy(merged);
-    return merged;
-}
-export function UiCopyProvider({ copy, children, }) {
-    const merged = mergeCopy(copy);
-    rememberCopy(merged);
-    return _jsx(CopyContext.Provider, { value: merged, children: children });
-}
-export function useUiCopy() {
-    return useContext(CopyContext) ?? currentCopy();
-}
-/** `{name}` → value. A missing key stays visible in the template. */
-export function fillCopy(template, params) {
-    return template.replace(/\{(\w+)\}/g, (whole, name) => {
-        const value = params[name];
-        return value === undefined ? whole : String(value);
-    });
+    return ui.current().locale;
 }
+/** English with `over` on top, without installing it. */
+export const mergeCopy = ui.merge;
+/** Sets the session's words: once, before the first draw — and the one global there is. */
+export const installCopy = ui.install;
+/** Changes the words for its branch, on top of what encloses it. It never writes the
+ *  global: a corner in another language does not change the rest of the screen. */
+export const UiCopyProvider = ui.Provider;
+export const useUiCopy = ui.useCopy;
+export { fillCopy };

package/dist/{primitives/field/context.d.ts → foundations/form.d.ts}

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 /**
  * What a `Field` hands to the control inside it: the id its label points at, the ids that
  * describe it (hint, error), and whether it is in error.
@@ -28,3 +29,11 @@ export declare function useFieldIds(own: {
     describedBy: string | undefined;
     invalid: boolean;
 };
+export type FormMode = "edit" | "read";
+export declare function FormModeProvider({ value, children, }: {
+    value: FormMode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The mode of this field. The prop beats the context — a computed field stays
+ *  in read mode inside a form that is being edited. */
+export declare function useFormMode(explicit?: FormMode): FormMode;

package/dist/{primitives/field/mode.js → foundations/form.js}

@@ -1,6 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+export const FieldIdsContext = createContext(null);
+/** The ids of the enclosing `Field`, resolved against the control's own props. */
+export function useFieldIds(own) {
+    const field = useContext(FieldIdsContext);
+    return {
+        id: own.id ?? field?.id,
+        labelledBy: field?.labelId,
+        describedBy: own.describedBy ?? field?.describedBy,
+        invalid: own.invalid ?? field?.invalid ?? false,
+    };
+}
 const Ctx = createContext("edit");
 export function FormModeProvider({ value, children, }) {
     return _jsx(Ctx.Provider, { value: value, children: children });

package/dist/foundations/grouping.d.ts

@@ -1,3 +1,4 @@
+import { type GroupGrain } from "./calendar.js";
 /**
  * LA AGRUPACIÓN, en N niveles.
  *
@@ -43,9 +44,7 @@
  * identifica y se lee igual— y por eso el rótulo sólo se pone aparte donde hace
  * falta: en las fechas, que las nombra `system/calendar.ts`.
  */
-/** El grano de un nivel de fecha. Sin grano, un campo de fecha parte por
- *  instante y cada fila termina en su propio montón, que es no agrupar. */
-export type GroupGrain = "day" | "week" | "month" | "quarter" | "year";
+export type { GroupGrain } from "./calendar.js";
 /**
  * De GRUESO a fino. Es el orden en que se anidan los granos de un mismo campo, y
  * no es una preferencia: agrupar por día y después por mes daría montones de un
@@ -196,6 +195,13 @@ export type Grouping<T> = {
     /** Qué montones están plegados, por `pathKey(pile.path)`. */
     collapsed?: readonly string[];
     onToggle?: (key: string) => void;
+    /**
+     * Un montón contado afuera trae su PRIMERA página y su conteo entero: esto pide las
+     * siguientes. Con esto, cada presentación ofrece «Ver N más» debajo del montón que
+     * tiene menos filas de las que cuenta; quien guarda los datos agrega las que lleguen a
+     * `pile.items`.
+     */
+    onMore?: (pile: Pile<T>) => void;
 };
 /**
  * El árbol que hay que dibujar, o `null` si no se agrupa.

package/dist/foundations/index.d.ts

@@ -1,5 +1,7 @@
+export { type CopyCatalog, type CopyOverride, createCopy, mergeCopyOver, } from "./catalog.js";
 export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, mergeCopy, type UiCopy, type UiCopyOverride, UiCopyProvider, useUiCopy, } from "./copy.js";
 export { byDensity, type Density, DensityProvider, useDensity, } from "./density.js";
+export { type FieldIds, type FormMode, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";
 export { applyTheme, isTheme, type ResolvedTheme, resolveTheme, type Theme, THEME_ATTRIBUTE, ThemeProvider, type ThemeProviderProps, THEMES, useTheme, } from "./theme.js";
 export type { OpenTarget, Size, Surface, Tone } from "./types.js";

package/dist/foundations/index.js

@@ -1,6 +1,11 @@
 /* What is shared by more than one family and belongs to none of them. */
+/* THE MECHANISM of a copy catalog — web-ui's words are one; an application's own are another. */
+export { createCopy, mergeCopyOver, } from "./catalog.js";
 export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, mergeCopy, UiCopyProvider, useUiCopy, } from "./copy.js";
 export { byDensity, DensityProvider, useDensity, } from "./density.js";
+/* EL CONTRATO DE UN CONTROL — los ids que le da su `Field` y si se mira o se escribe. Lo
+   hablan los controles del paquete y los de la aplicación por igual. */
+export { FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 /* EL TEMA — claro, oscuro o el del sistema operativo. Las paletas viven en `tokens.css`; esto
    sólo escribe `data-theme`. */
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";

package/dist/foundations/sticky.d.ts

@@ -35,6 +35,10 @@ export declare function useScrollBox<T extends HTMLElement>(options: {
     ref: RefObject<T | null>;
     className: string;
     style: CSSProperties;
+    /** `0` when the box scrolls: someone without a pointer has to be able to reach it to
+     *  scroll it (WCAG 2.1.1) — a twelve-column report is unreadable past its third column
+     *  otherwise. `undefined` when it grows with its content. */
+    tabIndex: 0 | undefined;
 };
 /**
  * Mide el alto de un elemento y devuelve el estilo que empuja la pila para sus

package/dist/foundations/sticky.js

@@ -94,6 +94,7 @@ export function useScrollBox(options) {
     return {
         ref,
         className: suelta ? "overflow-clip" : "overflow-auto",
+        tabIndex: suelta ? undefined : 0,
         style: suelta
             ? {}
             : {

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

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 import { type ChoiceOption } from "./options.js";
-import { type FormMode } from "../field/mode.js";
 export type ComboBoxProps = {
     /** The chosen option's `value`, or `null` when nothing is chosen. */
     value: string | null;

package/dist/primitives/choice/ComboBox.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.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";
+import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, useFilter, } from "react-aria-components";
 /**
  * One of a closed list, found by typing: a country, a currency, a tax regime, a unit.
  *
@@ -52,5 +52,5 @@ function EditableComboBox({ value, onChange, options, placeholder, disabled = fa
         /* `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 })] })) })) }) })] }));
+        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("span", { className: `truncate ${isSelected ? "font-medium" : ""}`, children: item.label }), item.description === undefined ? null : (_jsx("span", { 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

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 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;

package/dist/primitives/choice/RadioGroup.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 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.
@@ -46,5 +46,5 @@ export function RadioGroup({ value, onChange, options, orientation = "vertical",
            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))) }));
+            : "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", children: [_jsx(RadioButton, { className: "group flex min-w-0 cursor-pointer items-start gap-2.5 text-meta text-ink disabled:cursor-not-allowed data-disabled:opacity-45", 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.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.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";
 /** The trailing «…» of a placeholder is a visual cue that typing is expected, not part of

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

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 import { type SegmentOption } from "./options.js";
-import { type FormMode } from "../field/mode.js";
 export type SegmentedControlProps = {
     value: string;
     onChange?: (next: string) => void;

package/dist/primitives/choice/SegmentedControl.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 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

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

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 export type SliderProps = {
     value: number;
     onChange?: (next: number) => void;

package/dist/primitives/choice/Slider.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.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

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

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 import { type ReactNode } from "react";
 export type SwitchProps = {
     checked: boolean;

package/dist/primitives/choice/Switch.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 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";

package/dist/primitives/date/Calendar.js

@@ -44,7 +44,7 @@ const YEARS_LISTED = 100;
 function Header({ jump }) {
     const { direction } = useLocale();
     const [Prev, Next] = direction === "rtl" ? [ChevronRight, ChevronLeft] : [ChevronLeft, ChevronRight];
-    return (_jsxs("header", { className: "mb-2 flex items-center gap-1", children: [_jsx(AriaButton, { slot: "previous", className: navButton, children: _jsx(Prev, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) }), jump ? (_jsxs("div", { className: "flex flex-1 items-center justify-center", children: [_jsx(CalendarMonthPicker, { format: "long", children: (aria) => _jsx(Jump, { ...aria }) }), _jsx(CalendarYearPicker, { visibleYears: YEARS_LISTED, children: (aria) => _jsx(Jump, { ...aria }) })] })) : (_jsx(CalendarHeading, { className: "flex-1 text-center text-body font-semibold text-ink first-letter:uppercase" })), _jsx(AriaButton, { slot: "next", className: navButton, children: _jsx(Next, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
+    return (_jsxs("div", { className: "mb-2 flex items-center gap-1", children: [_jsx(AriaButton, { slot: "previous", className: navButton, children: _jsx(Prev, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) }), jump ? (_jsxs("div", { className: "flex flex-1 items-center justify-center", children: [_jsx(CalendarMonthPicker, { format: "long", children: (aria) => _jsx(Jump, { ...aria }) }), _jsx(CalendarYearPicker, { visibleYears: YEARS_LISTED, children: (aria) => _jsx(Jump, { ...aria }) })] })) : (_jsx(CalendarHeading, { className: "flex-1 text-center text-body font-semibold text-ink first-letter:uppercase" })), _jsx(AriaButton, { slot: "next", className: navButton, children: _jsx(Next, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
 }
 function WeekDays() {
     return (_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-micro font-medium text-muted", children: day })) }));

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

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 /** The typed segments inside the field box — shared with `TimeField` and `DateTimePicker`
  *  (internal: not in the family barrel). */
 export declare function Segments({ slot }: {

package/dist/primitives/date/DatePicker.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDate } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { Calendar, RangeCalendar } from "./Calendar.js";
 import { FieldButton, FieldGroup } 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 { CalendarDays } from "lucide-react";
 import { DateField as AriaDateField, DateInput, DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, DateSegment, Dialog, } from "react-aria-components";

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

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 type HourCycle = 12 | 24;
 type Shared = {
     id?: string;

package/dist/primitives/date/DateTime.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDateTime, parseTime, toCalendarDate, } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { Calendar } from "./Calendar.js";
 import { Segments } from "./DatePicker.js";
 import { FieldButton, FieldGroup } 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 { CalendarDays } from "lucide-react";
 import { DatePicker as AriaDatePicker, Dialog, TimeField as AriaTimeField, } from "react-aria-components";

package/dist/primitives/field/Checks.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "./mode.js";
+import { type FormMode } from "../../foundations/form.js";
 export interface CheckItem {
     value: string;
     label: string;