@godxjp/ui 19.0.0 → 19.2.0

package/dist/components/data-entry/calendar.js

@@ -1,24 +1,78 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
-import { buttonVariants } from "../general/button.js";
+import { Button, buttonVariants } from "../general/button.js";
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+const sameDay = (a, b) => startOfDay(a).getTime() === startOfDay(b).getTime();
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   "aria-label": ariaLabel,
   labels,
+  showToday = false,
+  showClose = false,
+  onClose,
+  footer,
+  month: monthProp,
+  onMonthChange,
   ...props
 }) {
+  const { t } = useTranslation();
+  const [month, setMonth] = React.useState(monthProp ?? props.defaultMonth);
+  const today = startOfDay(props.today ?? /* @__PURE__ */ new Date());
+  const todayDisabled = props.startMonth != null && today < startOfMonth(props.startMonth) || props.endMonth != null && today > endOfMonth(props.endMonth) || props.disabled != null && dateMatchModifiers(today, props.disabled);
+  const modifiers = { today: true };
+  const selectToday = (event) => {
+    setMonth(startOfMonth(today));
+    onMonthChange?.(startOfMonth(today));
+    if (props.mode === "single") {
+      props.onSelect?.(today, today, modifiers, event);
+    } else if (props.mode === "multiple") {
+      const current = props.selected ?? [];
+      const next = current.some((day) => sameDay(day, today)) ? current : [...current, today];
+      props.onSelect?.(next, today, modifiers, event);
+    } else if (props.mode === "range") {
+      const from = props.selected?.from;
+      const to = props.selected?.to;
+      const next = from && !to ? today < from ? { from: today, to: from } : { from, to: today } : { from: today, to: void 0 };
+      props.onSelect?.(next, today, modifiers, event);
+    }
+  };
+  const actions = showToday || showClose ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    showToday ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "ui-calendar-footer-today",
+        disabled: todayDisabled,
+        onClick: selectToday,
+        children: t("dataEntry.calendar.today") ?? "Today"
+      }
+    ) : null,
+    showClose ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClose, children: t("dataEntry.calendar.close") ?? "Close" }) : null
+  ] }) : void 0;
   const rangeDefaults = props.mode === "range" ? { resetOnSelect: props.resetOnSelect ?? true } : null;
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
       "aria-label": ariaLabel,
+      month: showToday ? monthProp ?? month : monthProp,
+      onMonthChange: (next) => {
+        setMonth(next);
+        onMonthChange?.(next);
+      },
+      footer: footer ?? actions,
       labels: {
         ...labels,
         labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
@@ -81,6 +135,7 @@ function Calendar({
         ),
         disabled: cn("ui-calendar-day-disabled", classNames?.disabled),
         hidden: cn("invisible", classNames?.hidden),
+        footer: cn("ui-calendar-footer", classNames?.footer),
         ...classNames
       },
       components: {

package/dist/components/data-entry/cascader.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Check, ChevronRight, ChevronsUpDown, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -86,6 +86,7 @@ function Cascader({
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
   const reactId = React.useId();
   const panelId = `${id ?? reactId}-panel`;
   const options = React.useMemo(
@@ -240,6 +241,7 @@ function Cascader({
         Button,
         {
           id,
+          "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
           variant: "outline",
           role: "combobox",

package/dist/components/data-entry/checkbox-group.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { Checkbox } from "./checkbox.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
@@ -33,6 +33,10 @@ function CheckboxGroup({
   const reactId = React.useId();
   const [value, setValue] = useControllableArray(controlledValue, defaultValue);
   const groupA11y = pickGroupFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": groupA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = groupA11y["data-field"] ?? identity["data-field"];
+  const optionDomId = (optionValue, index) => id ? `${id}-${optionValue}` : `${reactId}-${optionValue}-${index}`;
   const toggle = (optionValue) => {
     const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
     setValue(next);
@@ -45,17 +49,19 @@ function CheckboxGroup({
         role: "group",
         id,
         ...groupA11y,
+        "data-field": resolvedField,
         "aria-disabled": disabled ? true : void 0,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
         children: options.map((opt, index) => {
-          const id2 = `${reactId}-${opt.value}-${index}`;
+          const optionId = optionDomId(opt.value, index);
           const checked = value.includes(opt.value);
-          return /* @__PURE__ */ jsx(Field, { id: id2, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
             Checkbox,
             {
-              id: id2,
-              name,
+              id: optionId,
+              name: resolvedName,
+              "data-field": resolvedField,
               value: opt.value,
               checked,
               disabled: Boolean(disabled) || Boolean(opt.disabled),
@@ -74,6 +80,7 @@ function CheckboxGroup({
       role: "group",
       id,
       ...groupA11y,
+      "data-field": resolvedField,
       "aria-disabled": disabled ? true : void 0,
       "data-orientation": orientation,
       className: cn(choiceGroupClassName(orientation), className),

package/dist/components/data-entry/checkbox.js

@@ -4,28 +4,37 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { CheckboxGroup } from "./checkbox-group.js";
-const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    "data-slot": "checkbox",
-    className: cn(
-      // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
-      // moved (#319): `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
-      // `.ui-checkbox[data-state="checked"]` in styles/control.css already declare both, reading
-      // --disabled-opacity and --checkbox-checked-background. Utilities are layered AFTER
-      // components in Tailwind v4, so these literals were silently OUTRANKING those knobs — a
-      // service overriding --checkbox-checked-background got no fill change at all. Radix sets
-      // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
-      // both knobs default to exactly the values these utilities hard-coded.
-      "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
-  }
-));
+const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
+  const identity = useFieldIdentity({
+    id: props.id,
+    name: props.name,
+    "data-field": props["data-field"]
+  });
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      "data-slot": "checkbox",
+      className: cn(
+        // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
+        // moved (#319): `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
+        // `.ui-checkbox[data-state="checked"]` in styles/control.css already declare both, reading
+        // --disabled-opacity and --checkbox-checked-background. Utilities are layered AFTER
+        // components in Tailwind v4, so these literals were silently OUTRANKING those knobs — a
+        // service overriding --checkbox-checked-background got no fill change at all. Radix sets
+        // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
+        // both knobs default to exactly the values these utilities hard-coded.
+        "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
+        className
+      ),
+      ...props,
+      ...identity,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
+    }
+  );
+});
 CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
 const Checkbox = Object.assign(CheckboxRoot, {
   Group: CheckboxGroup

package/dist/components/data-entry/command-palette.d.ts

@@ -31,7 +31,7 @@ export type CommandPaletteProps = {
     onOpenChange?: (open: boolean) => void;
     /**
      * Controlled search-box query. Pairs with `onSearchChange`; leave it out for the uncontrolled
-     * palette (seeded by `defaultSearch`). Same idiom as `SearchSelect`'s `search`.
+     * palette (seeded by `defaultSearch`).
      */
     search?: string;
     /** Initial uncontrolled query, and the value the palette resets to when it closes. Default `""`. */
@@ -45,8 +45,6 @@ export type CommandPaletteProps = {
      * Whether the palette filters `groups` itself (cmdk's client-side fuzzy match). Set `false` when
      * the QUERY is answered by a server and `groups` already holds the matches — otherwise every row
      * is scored a second time against the same string and late-arriving matches are dropped.
-     *
-     * It also decides who owns the empty node; see the component doc block. Default `true`.
      */
     shouldFilter?: boolean;
     loading?: boolean;
@@ -55,24 +53,12 @@ export type CommandPaletteProps = {
     shortcut?: boolean;
 };
 /**
- * CommandPalette — the ⌘K search dialog.
- *
- * ## The empty-state contract (gh#412)
- *
- * `labels.empty` renders under exactly one rule, and which mechanism decides follows `shouldFilter`:
- *
- * - **`shouldFilter` (default, client-side)** — cmdk owns it: the palette holds items, the query
- *   matches none of them. Unchanged.
- * - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived synchronously from
- *   props: the empty node renders when `groups` carries no items, and never while `loading` or
- *   `error` is set. cmdk's own empty node cannot be trusted here, because it is driven by a
- *   scheduled count of the items that have REGISTERED in the DOM, not by what the consumer knows —
- *   so an async group that populates a frame late flips it on and off and any assertion over it
- *   races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
- *   props at that render, which is what a contract test can assert.
- *
- * The practical consequence for search-as-you-type: hold `loading` true for the whole in-flight
- * window. While it is true the palette shows `labels.loading` and never claims "no results" —
- * a request that has not answered yet is not an empty result.
+ * Unchanged. - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived
+ * synchronously from props: the empty node renders when `groups` carries no items, and never while
+ * `loading` or `error` is set. cmdk's own empty node cannot be trusted here, because it is driven
+ * by a scheduled count of the items that have REGISTERED in the DOM, not by what the consumer
+ * knows — so an async group that populates a frame late flips it on and off and any assertion over
+ * it races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
+ * props at that render, which is what a contract test can assert.
  */
 export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/date-picker.d.ts

@@ -2,9 +2,8 @@ import * as React from "react";
 import type { DatePickerProp } from "../../props/components/data-entry.prop.js";
 export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an
- * ISO-8601 `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a
- * `name`), screen-reader friendly, and e2e-testable by simply filling the input. The calendar
- * popover is the visual affordance; typing and the calendar stay in sync.
+ * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an ISO-8601
+ * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
+ * screen-reader friendly, and e2e-testable by simply filling the input.
  */
-export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;
+export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;

package/dist/components/data-entry/date-picker.js

@@ -5,7 +5,7 @@ import { CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/parse.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -21,6 +21,8 @@ function DatePicker({
   id,
   name,
   locale: localeProp,
+  showToday,
+  showClose,
   fromDate,
   toDate,
   allowClear = true,
@@ -30,6 +32,9 @@ function DatePicker({
   const { dayPickerLocale } = usePickerLocales(localeProp);
   const [open, setOpen] = React.useState(false);
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = fieldA11y["data-field"] ?? identity["data-field"];
   const reactId = React.useId();
   const dialogId = `${id ?? reactId}-dialog`;
   const isControlled = useControlledLatch(valueProp !== void 0);
@@ -66,7 +71,8 @@ function DatePicker({
       Input,
       {
         id,
-        name,
+        name: resolvedName,
+        "data-field": resolvedField,
         value: text,
         disabled,
         placeholder: resolvedPlaceholder,
@@ -149,7 +155,10 @@ function DatePicker({
               ...toDate ? [{ after: toDate }] : []
             ],
             startMonth: fromDate,
-            endMonth: toDate
+            endMonth: toDate,
+            showToday,
+            showClose,
+            onClose: () => setOpen(false)
           }
         )
       }

package/dist/components/data-entry/date-range-picker.d.ts

@@ -8,4 +8,4 @@ export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps,
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.
  */
-export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;

package/dist/components/data-entry/date-range-picker.js

@@ -5,7 +5,7 @@ import { ArrowRight, CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/index.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
@@ -20,6 +20,8 @@ function DateRangePicker({
   id,
   name,
   locale: localeProp,
+  showToday,
+  showClose,
   fromDate,
   toDate,
   allowClear = true,
@@ -33,6 +35,9 @@ function DateRangePicker({
   const groupId = id ?? autoId;
   const fromId = `${groupId}-from`;
   const toId = `${groupId}-to`;
+  const identity = useFieldIdentity({ id: groupId, name, "data-field": groupA11y["data-field"] });
+  const rangeField = groupA11y["data-field"] ?? identity["data-field"];
+  const rangeName = name ?? identity.name;
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
@@ -77,13 +82,14 @@ function DateRangePicker({
       role: "group",
       id: groupId,
       ...groupA11y,
+      "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
+      "data-state": open ? "open" : "closed",
       className: cn(
         // One input-styled shell for the whole range — the shared composite-field box, so
         // this and the month range picker cannot drift into two slightly different fields.
         "ui-control ui-control-composite-field",
-        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-        open && "border-ring ring-ring/50 ring-[3px]",
+        "aria-invalid:border-destructive",
         className
       ),
       onClick: () => {
@@ -94,7 +100,8 @@ function DateRangePicker({
           "input",
           {
             id: fromId,
-            name: name ? `${name}_from` : void 0,
+            "data-field": rangeField ? `${rangeField}_from` : void 0,
+            name: rangeName ? `${rangeName}_from` : void 0,
             value: fromText,
             disabled,
             placeholder: resolvedPlaceholder,
@@ -118,7 +125,8 @@ function DateRangePicker({
           "input",
           {
             id: toId,
-            name: name ? `${name}_to` : void 0,
+            "data-field": rangeField ? `${rangeField}_to` : void 0,
+            name: rangeName ? `${rangeName}_to` : void 0,
             value: toText,
             disabled,
             placeholder: resolvedPlaceholder,
@@ -186,7 +194,10 @@ function DateRangePicker({
                   ...toDate ? [{ after: toDate }] : []
                 ],
                 startMonth: fromDate,
-                endMonth: toDate
+                endMonth: toDate,
+                showToday,
+                showClose,
+                onClose: () => setOpen(false)
               }
             )
           }

package/dist/components/data-entry/form-errors.d.ts

@@ -3,10 +3,9 @@ import type { FormErrorsProp, FormErrorsProviderProp } from "../../props/compone
 import type { ErrorBagProp } from "../../props/vocabulary/index.js";
 export type { FormErrorsProp, FormErrorsProp as FormErrorsProps, FormErrorsProviderProp, FormErrorsProviderProp as FormErrorsProviderProps, } from "../../props/components/data-entry.prop.js";
 /**
- * Registry shared by a `Form` with its FormFields and `<FormErrors />`. Each mounted
- * `FormField name="…"` CLAIMS its error-bag key (it is the visible owner of that message);
- * `<FormErrors />` renders only the unclaimed remainder. Claims are reference-counted so
- * duplicate names and unmount order stay correct.
+ * Registry shared by a `Form` with its FormFields and `<FormErrors />`. Each mounted `FormField
+ * name="…"` CLAIMS its error-bag key (it is the visible owner of that message); `<FormErrors />`
+ * renders only the unclaimed remainder.
  */
 interface FormErrorsRegistryValue {
     errors: ErrorBagProp;
@@ -19,18 +18,9 @@ export declare function useFormErrorsRegistry(): FormErrorsRegistryValue | null;
 /** First message of a bag entry — Laravel arrays surface their first message on the field. */
 export declare function firstBagMessage(entry: string | string[] | undefined): string | undefined;
 /**
- * FormErrorsProvider — one shared error registry (error bag + claim set) over a region.
- * 兄弟 Form 群で 1 つのエラーバッグを共有するための公開プロバイダ。Two ways to get one:
- *
- * 1. `Form errors={…}` renders this provider itself (both `<form>` and `asChild` modes) —
- *    the single-form case needs nothing else.
- * 2. An edit screen split into several sibling Card+Form sections (the standard exseli shape)
- *    wraps the REGION in `<FormErrorsProvider errors={…}>` instead: Forms **without** their own
- *    `errors` join the surrounding registry, every `FormField name="…"` inside claims into it,
- *    and one `<FormErrors />` anywhere in the region renders the unclaimed remainder.
- *
- * A nested Form WITH its own `errors` starts a new registry that shadows this one — its claims
- * and messages stay inside it.
+ * FormErrorsProvider — one shared error registry (error bag + claim set) over a region. 兄弟 Form 群で
+ * 1 つのエラーバッグを共有するための公開プロバイダ。Two ways to get one: 1. `Form errors={…}` renders this provider itself
+ * (both `<form>` and `asChild` modes) — the single-form case needs nothing else. 2.
  */
 export declare function FormErrorsProvider({ errors, children }: FormErrorsProviderProp): React.JSX.Element;
 /** FormField calls this to claim its error-bag key while mounted (no-op outside a Form). */
@@ -39,7 +29,6 @@ export declare function useClaimErrorKey(name: string | undefined): void;
  * FormErrors — renders the error-bag entries no mounted `FormField name="…"` displays: server
  * validation errors attached to hidden/derived fields (an `action_mode`, a `page`, a source-record
  * id) that would otherwise fail silently. Place it inside a `Form errors={…}` — typically above
- * the fields; it renders nothing while every entry is claimed or the bag is empty. Composed on
- * `Alert tone="destructive"` (role="alert"), so appearing messages are announced assertively.
+ * the fields; it renders nothing while every entry is claimed or the bag is empty.
  */
 export declare function FormErrors({ errors: errorsProp, title, className }: FormErrorsProp): React.JSX.Element | null;

package/dist/components/data-entry/form-field.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { FormFieldProp } from "../../props/components/data-entry.prop.js";
 export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop.js";
-export declare function FormField({ id, name, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;
+export declare function FormField({ id, name, field, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

package/dist/components/data-entry/form-field.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
-import { FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
@@ -11,6 +12,7 @@ const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button
 function FormField({
   id,
   name,
+  field,
   label,
   required,
   helper,
@@ -38,6 +40,8 @@ function FormField({
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
   const errorId = error ? `${resolvedId}-error` : void 0;
+  const fieldKey = field ?? name ?? id;
+  const emitFieldNames = useOptionalAppContext()?.emitFieldNames ?? false;
   const isStatic = staticText !== void 0;
   if (!isStatic && typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
     console.warn(
@@ -48,21 +52,26 @@ function FormField({
     () => ({ labelId, label: typeof label === "string" ? label : void 0 }),
     [labelId, label]
   );
+  const fieldIdentityContext = React.useMemo(
+    () => fieldKey === void 0 ? null : { emitName: emitFieldNames },
+    [fieldKey, emitFieldNames]
+  );
   const childProps = React.isValidElement(children) ? children.props : void 0;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
-    // Byte-for-byte the same value typography as `Descriptions.Item`'s `dd` (gh#294), so a
     // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
-    // used to be two copies of the literal `text-sm` kept in sync by this comment; both call sites
-    // now read the SAME token pair (#319), so a service retunes both from one place and they
     // cannot drift. --descriptions-value-line-height is the mandatory companion: `text-sm` also
-    // set Tailwind's `--text-sm--line-height`, which the theme never remaps (the gh#260 bug).
     /* @__PURE__ */ jsx("span", { className: "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] break-all", children: staticText })
   ) : React.isValidElement(children) ? React.cloneElement(children, {
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
     id: childProps?.id ?? resolvedId,
+    // Read the child's own value first in BOTH cases: cloneElement
+    // overwrites every key present in the config bag, `undefined` included, so a bare
+    // `"data-field": fieldKey` would erase a value the control set for itself.
+    "data-field": childProps?.["data-field"] ?? fieldKey,
+    ...emitFieldNames ? { name: childProps?.name ?? fieldKey } : void 0,
     "aria-labelledby": childProps?.["aria-labelledby"] ?? labelId,
     // Redundant `aria-label` fallback (belt-and-suspenders): the accessible name is the
     // SAME string as the visible label, just reachable even if an aria-labelledby lookup
@@ -125,7 +134,7 @@ function FormField({
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
-          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: childWithA11y }),
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: childWithA11y }) }),
           helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
         ] })

package/dist/components/data-entry/form.d.ts

@@ -14,15 +14,7 @@ export declare function useFormLayout(): FormLayoutContextValue | null;
 /**
  * Form — Ant-style layout container. Renders a `<form>` and provides layout (vertical/horizontal),
  * label/control width, label alignment, and a responsive collapse breakpoint to every FormField
- * inside it. A FormField may override any of these per-field. Optionally lays fields out in a
- * responsive multi-column grid via `columns` (reuses ResponsiveGrid — mobile-first, 1 col on small).
- *
- * `asChild` renders the caller's own element instead of a `<form>`, keeping only the layout
- * context. Routing libraries own the form element — Inertia's `<Form action method>` and
- * TanStack Form both render their own — so without this every such consumer has to choose
- * between the router's submission handling and the design system's field layout, and ends up
- * hand-rolling label columns per field. Two `<form>` elements cannot nest, so wrapping is not
- * an option: `<Form asChild layout="horizontal" labelWidth={174}><InertiaForm …/></Form>`.
+ * inside it.
  */
 export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
     layout?: FormLayoutProp;

package/dist/components/data-entry/input.d.ts

@@ -1,37 +1,39 @@
 import * as React from "react";
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
+    size?: "sm" | "md";
     /** Show an inline ✕ that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or
-     * search icon (the common auth/search pattern). Decorative by default; the
-     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
+     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
      */
     leadingIcon?: React.ReactNode;
     /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
-     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
-     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
+     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
+     * clear ✕ REPLACES this icon; otherwise this icon shows.
      */
     trailingIcon?: React.ReactNode;
 };
-export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
+    size?: "sm" | "md";
     /** Show an inline ✕ that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or
-     * search icon (the common auth/search pattern). Decorative by default; the
-     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
+     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
      */
     leadingIcon?: React.ReactNode;
     /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
-     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
-     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
+     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
+     * clear ✕ REPLACES this icon; otherwise this icon shows.
      */
     trailingIcon?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;