@sincpro/web-ui 1.2.0 → 1.4.0

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: {
@@ -49,8 +48,11 @@ export const ENGLISH_COPY = {
         status: "Status",
         faces: "Record faces",
         unsaved: "unsaved",
+        unsavedOne: "1 change unsaved",
+        unsavedMany: "{count} changes unsaved",
         save: "Save",
         saving: "Saving…",
+        saved: "Saved",
         discard: "Discard",
         failed: "failed",
         notices: "Notices about this record",
@@ -83,6 +85,7 @@ export const ENGLISH_COPY = {
         help: "Help",
         unset: "not set",
         none: "None",
+        changed: "changed",
     },
     choice: {
         noResults: "No results",
@@ -90,6 +93,7 @@ export const ENGLISH_COPY = {
     },
     search: {
         tools: "Filter, group and favorites",
+        suggestions: "Suggestions",
         toolsSetOne: "{label}, {count} applied",
         toolsSetMany: "{label}, {count} applied",
         editChip: "Click to edit",
@@ -146,6 +150,7 @@ export const ENGLISH_COPY = {
         min: "min {value}",
         max: "max {value}",
         distinct: "{value} distinct",
+        pileMore: "Show {count} more",
     },
     menu: {
         empty: "Nothing matches.",
@@ -157,6 +162,7 @@ export const ENGLISH_COPY = {
         count: "{count} records",
         peek: "Quick look",
         open: "Open",
+        refreshing: "Updating the list…",
     },
     activity: {
         bySystem: "the system",
@@ -242,6 +248,7 @@ export const ENGLISH_COPY = {
         weekOfYear: "Week {n}, {year}",
         quarter: "Q{n}",
         quarterOfYear: "Q{n} {year}",
+        today: "Today",
     },
     grouping: {
         label: "Group by",
@@ -337,6 +344,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 +511,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/button/Button.d.ts

@@ -1,5 +1,5 @@
 import type { Surface } from "../../foundations/types.js";
-import type { LucideIcon } from "lucide-react";
+import { type LucideIcon } from "lucide-react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 export type ButtonRole = "primary" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -53,8 +53,18 @@ export type ButtonProps = NativeProps<"button", "type" | "disabled" | "title" |
     expanded?: boolean;
     /** What it opens, written to `aria-haspopup`. `menu` when absent. */
     haspopup?: ButtonPopup;
+    /**
+     * What it started is running — saving, publishing, registering a payment.
+     *
+     * Context: the buttons said it by turning `disabled`, and a disabled button drops the focus
+     * to the page: whoever pressed Save with the keyboard was left nowhere, and a press while
+     * it ran was silently lost or — worse — sent twice. Busy, the button KEEPS the focus and
+     * its width (the label stays), says so (`aria-busy`, a turning mark where its icon was) and
+     * ignores presses until it is done.
+     */
+    busy?: boolean;
 };
-export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, ref, ...native }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, busy, ref, onClick, ...native }: ButtonProps): import("react").JSX.Element;
 export type ButtonLinkProps = NativeProps<"a", "href" | "download" | "title"> & {
     children: ReactNode;
     href: string;

package/dist/primitives/button/Button.js

@@ -60,6 +60,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ==================================================================== */
 import { useSurface } from "../../foundations/surface.js";
 import { Tooltip, TooltipTrigger, useInTooltipTrigger, } from "../overlay/Tooltip.js";
+import { LoaderCircle } from "lucide-react";
 /** The height comes from `--size-control-*`; the padding and the type follow.
  *
  *      sm  a row, the header of a block
@@ -146,10 +147,19 @@ function popupAttrs(expanded, haspopup) {
         ...(expanded === undefined ? {} : { "aria-expanded": expanded }),
     };
 }
-export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, ref, ...native }) {
+export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, busy = false, ref, onClick, ...native }) {
     const surface = useSurface(surfaceProp);
     const ic = ICON[size];
-    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: buttonClasses(role, size, surface), children: [Icon === undefined ? null : (_jsx(Icon, { className: `${ic.size} shrink-0`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
+    const Mark = busy ? LoaderCircle : Icon;
+    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...(busy ? { "aria-busy": true, "aria-disabled": true } : {}), onClick: (event) => {
+            if (busy) {
+                event.preventDefault();
+                return;
+            }
+            onClick?.(event);
+        }, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: busy
+            ? `${buttonClasses(role, size, surface)} cursor-progress`
+            : buttonClasses(role, size, surface), children: [Mark === undefined ? null : (_jsx(Mark, { className: `${ic.size} shrink-0 ${busy ? "motion-safe:animate-spin" : ""}`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
 }
 /**
  * The same button, but it is a real link.

package/dist/primitives/cell/CellStack.js

@@ -32,5 +32,5 @@ export function Thumb({ src, alt, icon: Icon, size = "md", }) {
 export function CellStack({ primary, secondary, media, avatar, wrap = false, }) {
     return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [avatar !== undefined ? (
             /* The name is written beside it: the photo's `alt` would say it twice. */
-            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-meta font-medium break-all text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "line-clamp-1 break-all"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
 }

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;

package/dist/primitives/field/Checks.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "./context.js";
-import { useFormMode } from "./mode.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { Check, Minus } from "lucide-react";
 import { useId } from "react";
-import { Checkbox as AriaCheckbox, ListBox, ListBoxItem, Text, } from "react-aria-components";
+import { Checkbox as AriaCheckbox, ListBox, ListBoxItem, } from "react-aria-components";
 function Mark({ on, mixed, focus = false, invalid = false, }) {
     return (_jsx("span", { "aria-hidden": true, className: `inline-flex size-4 shrink-0 items-center justify-center rounded-mark border transition-colors duration-(--duration-instant) forced-color-adjust-none ${on
             ? "border-primary bg-primary text-surface forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
@@ -68,5 +68,5 @@ export function CheckList({ label, items, value, onChange, mono = false, emptyLa
     }
     return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("p", { id: labelId, className: "text-micro text-muted", children: label }), _jsx(ListBox, { "aria-labelledby": labelId, "aria-describedby": describedBy, items: items, selectionMode: "multiple", selectedKeys: value, onSelectionChange: (keys) => onChange?.(valuesOf(keys, items)), disabledKeys: items.filter((item) => item.disabled).map((item) => item.value), shouldFocusWrap: true, className: "flex flex-col overflow-hidden rounded-box border border-line bg-surface outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: ({ isSelected, isFocusVisible, isDisabled }) => `flex min-w-0 cursor-pointer items-center gap-2.5 border-b border-line px-3 py-2 text-left outline-0 last:border-b-0 ${isFocusVisible
                         ? "outline-2 -outline-offset-2 outline-primary forced-colors:outline-[Highlight]"
-                        : ""} ${isDisabled ? "cursor-not-allowed opacity-45" : ""} ${isSelected ? "bg-primary/8" : "hover:bg-ink/4"}`, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected, mixed: false }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx(Text, { slot: "label", className: `truncate text-meta text-ink ${mono ? "font-mono" : ""}`, children: item.label }), item.detail === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro text-muted", children: item.detail }))] })] })) })) })] }));
+                        : ""} ${isDisabled ? "cursor-not-allowed opacity-45" : ""} ${isSelected ? "bg-primary/8" : "hover:bg-ink/4"}`, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected, mixed: false }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: `truncate text-meta text-ink ${mono ? "font-mono" : ""}`, children: item.label }), item.detail === undefined ? null : (_jsx("span", { className: "truncate text-micro text-muted", children: item.detail }))] })] })) })) })] }));
 }

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

@@ -1,4 +1,4 @@
-import { type FormMode } from "./mode.js";
+import { type FormMode } from "../../foundations/form.js";
 /**
  * Drop a file, or pick one. Progress is a real bar; failure is a sentence.
  *

package/dist/primitives/field/DropZone.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { cn } from "../../foundations/variants.js";
 import { Button, buttonClasses } from "../button/Button.js";
-import { useFieldIds } from "./context.js";
 import { ReadValue } from "./Field.js";
-import { useFormMode } from "./mode.js";
 import { Failed } from "../notice/Notice.js";
 import { ProgressBar } from "../value/ProgressBar.js";
 import { Button as AriaButton, DropZone as AriaDropZone, FileTrigger, } from "react-aria-components";