@godxjp/ui 18.15.4 → 19.1.0

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,20 +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(
-      "peer ui-checkbox focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-      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.d.ts

@@ -5,7 +5,7 @@ export declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -20,7 +20,7 @@ export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pic
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -30,7 +30,7 @@ export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -39,14 +39,14 @@ export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -57,7 +57,7 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon } from "lucide-react";
+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";
@@ -30,6 +30,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);
@@ -48,6 +51,7 @@ function DatePicker({
     emit(void 0);
     setText("");
   };
+  const showClear = allowClear && text !== "" && !disabled;
   const commit = (raw) => {
     const trimmed = raw.trim();
     if (trimmed === "") {
@@ -65,7 +69,8 @@ function DatePicker({
       Input,
       {
         id,
-        name,
+        name: resolvedName,
+        "data-field": resolvedField,
         value: text,
         disabled,
         placeholder: resolvedPlaceholder,
@@ -76,19 +81,31 @@ function DatePicker({
         "aria-haspopup": "dialog",
         "aria-controls": open ? dialogId : void 0,
         ...fieldA11y,
-        allowClear,
-        onClear: clear,
-        trailingIcon: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            tabIndex: -1,
-            "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
-            className: "text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" })
-          }
-        ) }),
+        className: showClear ? "ui-control-inline-affix-pair-affixed" : void 0,
+        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": t("common.clear") ?? "Clear",
+              onClick: clear,
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              tabIndex: -1,
+              "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -116,7 +133,7 @@ function DatePicker({
         id: dialogId,
         role: "dialog",
         "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
-        className: "w-auto p-0",
+        className: "ui-control-panel-flush",
         align: "start",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: /* @__PURE__ */ jsx(

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";
@@ -33,6 +33,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;
@@ -70,21 +73,21 @@ function DateRangePicker({
       }
     }
   };
-  const innerInputClass = "min-w-0 flex-1 bg-transparent tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed";
+  const innerInputClass = "ui-month-picker-input";
   return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "group",
       id: groupId,
       ...groupA11y,
+      "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
       className: cn(
-        // One input-styled shell for the whole range — mirrors Input's control
-        // tokens (border/radius/ring) so it reads as a single form field.
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+        // 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]",
-        disabled && "pointer-events-none cursor-not-allowed opacity-50",
         className
       ),
       onClick: () => {
@@ -95,7 +98,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,
@@ -114,12 +118,13 @@ function DateRangePicker({
             }
           }
         ),
-        /* @__PURE__ */ jsx(ArrowRight, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx(
           "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,
@@ -149,9 +154,10 @@ function DateRangePicker({
               event.stopPropagation();
               clear();
             },
-            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
-        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -159,13 +165,13 @@ function DateRangePicker({
             tabIndex: -1,
             "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
             className: "text-muted-foreground hover:text-foreground shrink-0",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
         ) }),
         /* @__PURE__ */ jsx(
           PopoverContent,
           {
-            className: "w-auto p-0",
+            className: "ui-control-panel-flush",
             align: "start",
             onOpenAutoFocus: (event) => event.preventDefault(),
             children: /* @__PURE__ */ jsx(

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,17 +52,30 @@ 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.
-    /* @__PURE__ */ jsx("span", { className: "text-sm break-all", children: staticText })
+    // 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,
+    // gh#337 — the machine key. 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
@@ -83,7 +100,7 @@ function FormField({
     style["--form-label-width"] = toCssLength(labelWidth);
   if (controlWidth != null)
     style["--form-control-width"] = toCssLength(controlWidth);
-  if (colSpan != null) style.gridColumn = `span ${colSpan}`;
+  if (colSpan != null) style["--form-field-col-span"] = String(colSpan);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -121,7 +138,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/index.d.ts

@@ -21,8 +21,9 @@ export { SearchInput } from "./search-input.js";
 export { Switch } from "./switch.js";
 export type { SwitchProps } from "./switch.js";
 export { Toggle } from "./toggle.js";
-export type { ToggleProps } from "./toggle.js";
+export type { ToggleProp, ToggleProps } from "./toggle.js";
 export { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export type { ToggleGroupItemProp, ToggleGroupItemProps } from "./toggle-group.js";
 export { Slider } from "./slider.js";
 export type { SliderProps } from "./slider.js";
 export { Calendar } from "./calendar.js";

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

@@ -3,15 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { useFieldNameFallback } from "../../lib/field-a11y.js";
+import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 const inputBaseClass = [
-  "ui-control border-input bg-background w-full min-w-0 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
-  "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
   "placeholder:text-muted-foreground",
-  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
 ];
 const Input = React.forwardRef(
@@ -32,6 +29,11 @@ const Input = React.forwardRef(
       "aria-label": props["aria-label"],
       "aria-labelledby": props["aria-labelledby"]
     });
+    const identity = useFieldIdentity({
+      id: props.id,
+      name: props.name,
+      "data-field": props["data-field"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -77,7 +79,8 @@ const Input = React.forwardRef(
           onChange,
           className: cn(inputBaseClass, className),
           ...props,
-          ...nameFallback
+          ...nameFallback,
+          ...identity
         }
       );
     }
@@ -89,20 +92,12 @@ const Input = React.forwardRef(
         tabIndex: -1,
         "aria-label": t("common.clear") ?? "Clear",
         onClick: clear,
-        className: "text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100",
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        className: "ui-control-inline-affix-action",
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
       }
     ) : trailingIcon;
-    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
-      leadingIcon != null ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "input-leading",
-          "aria-hidden": "true",
-          className: "text-muted-foreground pointer-events-none absolute inset-y-0 start-2 inline-flex items-center",
-          children: leadingIcon
-        }
-      ) : null,
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "ui-input-affix-wrapper", children: [
+      leadingIcon != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-leading", "aria-hidden": "true", className: "ui-input-leading", children: leadingIcon }) : null,
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -114,15 +109,16 @@ const Input = React.forwardRef(
           onChange: handleChange,
           className: cn(
             inputBaseClass,
-            leadingIcon != null && "ps-9",
-            (showClear || trailingIcon != null) && "pe-9",
+            leadingIcon != null && "ui-input--leading-affix",
+            (showClear || trailingIcon != null) && "ui-input--trailing-affix",
             className
           ),
           ...props,
-          ...nameFallback
+          ...nameFallback,
+          ...identity
         }
       ),
-      trailing != null ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 end-2 inline-flex items-center", children: trailing }) : null
+      trailing != null ? /* @__PURE__ */ jsx("span", { className: "ui-input-trailing", children: trailing }) : null
     ] });
   }
 );

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

@@ -5,7 +5,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "font-medium leading-[var(--control-label-line-height)] peer-disabled:cursor-not-allowed peer-disabled:opacity-[var(--control-label-disabled-alpha)]"
 );
 const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
@@ -13,7 +13,9 @@ const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ref,
     "data-slot": "label",
     className: cn(
-      "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+      // A label inside a disabled group reads at the SYSTEM disabled alpha (--disabled-opacity),
+      // the same one .ui-checkbox/.ui-radio/.ui-switch:disabled use — one knob, not a second one.
+      "ui-label group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-[var(--disabled-opacity)]",
       labelVariants(),
       className
     ),