@godxjp/ui 19.6.0 → 20.0.0

package/dist/components/data-display/progress.js

@@ -1,27 +1,75 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-function Progress({ value, label, tone, over = false }) {
-  const isOver = over && value > 100;
-  const boundedValue = Math.max(0, Math.min(100, value));
-  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+function Progress(props) {
+  const { t } = useTranslation();
   const labelId = React.useId();
+  const {
+    label,
+    className,
+    segments,
+    value,
+    tone,
+    over = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...domProps
+  } = props;
+  const named = ariaLabel !== void 0 || ariaLabelledBy !== void 0;
+  const labelledBy = ariaLabelledBy ?? (label !== void 0 ? labelId : void 0);
+  const caption = label !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ui-progress-label", id: labelId, children: label }) : null;
+  if (segments !== void 0) {
+    const amounts = segments.map((segment) => Math.max(0, segment.value));
+    const total = amounts.reduce((sum, amount) => sum + amount, 0);
+    const separator = t("dataDisplay.progress.breakdownSeparator");
+    const spoken = segments.map((segment, index) => `${segment.label} ${amounts[index]}`).join(separator);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("ui-progress", className),
+        "data-breakdown": "",
+        role: "img",
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy !== void 0 ? void 0 : ariaLabel !== void 0 ? `${ariaLabel}${separator}${spoken}` : label !== void 0 ? `${label}${separator}${spoken}` : spoken,
+        ...domProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: segments.map((segment, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ui-progress-segment",
+              "data-tone": segment.tone,
+              style: { inlineSize: total === 0 ? "0%" : `${amounts[index] / total * 100}%` }
+            },
+            `${segment.label}-${index}`
+          )) }),
+          caption
+        ]
+      }
+    );
+  }
+  const meterValue = value ?? 0;
+  const isOver = over && meterValue > 100;
+  const boundedValue = Math.max(0, Math.min(100, meterValue));
+  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "ui-progress",
+      className: cn("ui-progress", className),
       "data-tone": effectiveTone,
       "data-over": isOver ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": `${isOver ? Math.round(value) : boundedValue}%`,
-      "aria-labelledby": label ? labelId : void 0,
-      "aria-label": label ? void 0 : "Progress",
+      "aria-valuetext": `${isOver ? Math.round(meterValue) : boundedValue}%`,
+      "aria-labelledby": labelledBy,
+      "aria-label": labelledBy !== void 0 ? void 0 : named ? ariaLabel : t("dataDisplay.progress.ariaLabel"),
+      ...domProps,
       children: [
         /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ui-progress-bar", style: { width: `${boundedValue}%` } }) }),
-        label ? /* @__PURE__ */ jsx("div", { className: "ui-progress-label", id: labelId, children: label }) : null
+        caption
       ]
     }
   );

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
 export type { CalendarProp, CalendarProp as CalendarProps, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
-export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;
+export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;

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

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { DayPicker, dateMatchModifiers } from "react-day-picker";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
@@ -21,6 +21,8 @@ function Calendar({
   showClose = false,
   onClose,
   footer,
+  width = "auto",
+  bordered = false,
   month: monthProp,
   onMonthChange,
   ...props
@@ -78,6 +80,8 @@ function Calendar({
         labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
       },
       className: cn("ui-calendar", className),
+      "data-width": width === "full" ? "full" : void 0,
+      "data-bordered": bordered ? "true" : void 0,
       classNames: {
         months: cn("ui-calendar-months", classNames?.months),
         month: cn("ui-calendar-month", classNames?.month),
@@ -100,51 +104,82 @@ function Calendar({
           classNames?.button_next
         ),
         month_grid: cn("ui-calendar-grid", classNames?.month_grid),
-        weekdays: cn("flex", classNames?.weekdays),
+        /*
+         * The weekday row needs a DS class of its own. It only ever carried `flex`, so any rule
+         * written for it — the ruled grid's end edge, the header tint — matched nothing and failed
+         * silently while looking correct in the stylesheet.
+         */
+        weekdays: cn("ui-calendar-weekdays flex", classNames?.weekdays),
+        /*
+         * Named for the same reason the weekday row is: a slot with no DS class cannot be styled
+         * from this package, and a rule written for one fails silently. These two only render with
+         * `showWeekNumber`, which is exactly why the gap went unnoticed.
+         */
+        week_number: cn("ui-calendar-week-number", classNames?.week_number),
+        week_number_header: cn("ui-calendar-week-number-header", classNames?.week_number_header),
         weekday: cn("ui-calendar-weekday", classNames?.weekday),
         week: cn("ui-calendar-week", classNames?.week),
-        day: cn(
-          "ui-calendar-day",
-          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
-          "[&:has([aria-selected].day-range-end)]:rounded-e-md",
-          classNames?.day
-        ),
+        /*
+         * ONE ELEMENT OWNS THE DAY SURFACE, and it is the `<button>`.
+         *
+         * It used to be split: hover painted the button, selection painted the `<td>`. Measured on
+         * a real page — the selected day came out a SHARP blue square (td, border-radius 0) while
+         * hover was a rounded grey (button, 3.71px). Same for `outside`: `text-muted-foreground`
+         * sat on the td while the ghost button set its own colour underneath, so days from the
+         * neighbouring month were not greyed at all. Two symptoms, one cause.
+         *
+         * So the `td` keeps ONLY grid duties — column width, the row it sits in — and every state
+         * (hover, selected, today, outside, disabled, range) is expressed on the button, where the
+         * radius and the padding already live. Adding a state later means adding it in one place;
+         * that was the part that kept going wrong.
+         */
+        day: cn("ui-calendar-day", classNames?.day),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "ui-calendar-day-button",
           classNames?.day_button
         ),
-        range_start: cn("day-range-start rounded-s-md", classNames?.range_start),
-        range_end: cn("day-range-end rounded-e-md", classNames?.range_end),
-        range_middle: cn(
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-          classNames?.range_middle
-        ),
-        selected: cn(
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-          // The day is a ghost <button> that sets its OWN (dark --foreground) text colour, which
-          // overrides the cell's text-primary-foreground and fails contrast on the blue fill
-          // (axe color-contrast). Force the button label to primary-foreground through hover/focus.
-          "[&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:text-primary-foreground",
-          classNames?.selected
-        ),
-        today: cn("bg-accent text-accent-foreground", classNames?.today),
-        outside: cn(
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-          classNames?.outside
-        ),
+        range_start: cn("day-range-start", classNames?.range_start),
+        range_end: cn("day-range-end", classNames?.range_end),
+        range_middle: cn("day-range-middle", classNames?.range_middle),
+        selected: cn("day-selected", classNames?.selected),
+        today: cn("day-today", classNames?.today),
+        outside: cn("day-outside", classNames?.outside),
         disabled: cn("ui-calendar-day-disabled", classNames?.disabled),
         hidden: cn("invisible", classNames?.hidden),
-        footer: cn("ui-calendar-footer", classNames?.footer),
-        ...classNames
+        footer: cn("ui-calendar-footer", classNames?.footer)
+        /*
+         * NO `...classNames` here. Spreading the consumer's object last REPLACED each slot that it
+         * names, so `classNames={{ day: "my-class" }}` dropped `.ui-calendar-day` — and with it
+         * every state selector, because they all key on that class. The slots above already merge
+         * the consumer's value through `cn()`; this line only ever un-merged them.
+         *
+         * A slot this component does not name still passes straight through: react-day-picker
+         * reads its own defaults for anything absent from this object.
+         */
       },
+      ...props,
       components: {
+        /*
+         * FOUR orientations, not two. `Nav` asks for left/right, but `Dropdown` asks for "down" —
+         * and mapping everything that is not "left" to ChevronRight pointed the month and year
+         * selects sideways. react-day-picker's own Chevron handles all four; ours has to as well.
+         */
         Chevron: ({ orientation, className: chevronClassName }) => {
-          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          const Icon = orientation === "left" ? ChevronLeft : orientation === "up" ? ChevronUp : orientation === "down" ? ChevronDown : ChevronRight;
           return /* @__PURE__ */ jsx(Icon, { className: cn("ui-calendar-chevron", chevronClassName), "aria-hidden": "true" });
-        }
+        },
+        /*
+         * A consumer's `components` MERGE with ours; they must not replace the object.
+         *
+         * `{...props}` used to sit after this block, so `components={{ DayButton: Custom }}` — the
+         * documented way to put a marker on a day — silently deleted our `Chevron` too. Measured
+         * on a live page: the nav arrows came back as react-day-picker's own polygon chevron,
+         * which needs a `fill` and therefore picked up `--rdp-accent-color: blue`. The consumer
+         * replaced one component and lost an unrelated one, with no error.
+         */
+        ...props.components
       },
-      ...props,
       ...rangeDefaults
     }
   );

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

@@ -1,11 +1,10 @@
 import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckboxGroup } from "./checkbox-group.js";
 /**
  * Decorative checkbox glyph — a non-interactive `<span>`, NOT the real {@link Checkbox} (which is a
- * `<button>`). Used where the row itself is the interactive element and a nested `<button>` would
- * be invalid HTML (Cascader's option rows). Shares {@link CheckboxGlyph} so "partial" can never
- * drift apart from the real control's rendering again.
+ * real `<input>` wrapped by react-aria-components). Used where the row itself is the interactive
+ * element and a nested control would be invalid HTML (Cascader's option rows). Shares
+ * {@link CheckboxGlyph} so "partial" can never drift apart from the real control's rendering again.
  */
 export declare function CheckboxVisual({ checked, indeterminate, disabled, className, }: {
     checked: boolean;
@@ -13,7 +12,21 @@ export declare function CheckboxVisual({ checked, indeterminate, disabled, class
     disabled?: boolean;
     className?: string;
 }): React.JSX.Element;
-/** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (Ant Design style). */
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+/**
+ * The PUBLIC prop shape, unchanged from the @radix-ui/react-checkbox era: `checked` /
+ * `defaultChecked` accept the tri-state `"indeterminate"`, `onCheckedChange` reports it back, and
+ * `disabled` / `required` keep their HTML spelling. react-aria-components spells the same four
+ * `isSelected` + `isIndeterminate` / `defaultSelected` / `onChange` / `isDisabled` / `isRequired`;
+ * that translation happens INSIDE this component and none of those names reach a consumer.
+ */
+interface CheckboxRootProps extends Omit<React.ComponentPropsWithoutRef<"button">, "checked" | "defaultChecked" | "onChange"> {
+    checked?: boolean | "indeterminate";
+    defaultChecked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    required?: boolean;
+}
+/** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (theo quy ước phổ biến). */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxRootProps & React.RefAttributes<HTMLLabelElement>> & {
     Group: typeof CheckboxGroup;
 };
+export {};

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Checkbox as AriaCheckbox } from "react-aria-components";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
@@ -28,44 +28,83 @@ function CheckboxVisual({
     }
   );
 }
-const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
+const CheckboxRoot = React.forwardRef((props, ref) => {
+  const {
+    className,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    required,
+    value,
+    tabIndex,
+    "data-field": ownField,
+    ...rest
+  } = props;
   const identity = useFieldIdentity({
     id: props.id,
     name: props.name,
-    "data-field": props["data-field"]
+    "data-field": ownField
   });
+  const fieldKey = ownField ?? identity["data-field"];
+  const inputRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (fieldKey === void 0) {
+      input.removeAttribute("data-field");
+    } else {
+      input.setAttribute("data-field", fieldKey);
+    }
+  }, [fieldKey]);
   const [uncontrolled, setUncontrolled] = React.useState(
-    props.defaultChecked ?? false
+    defaultChecked ?? false
   );
-  const state = props.checked ?? uncontrolled;
+  const state = checked ?? uncontrolled;
+  const invalid = props["aria-invalid"];
   return /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
+    AriaCheckbox,
     {
+      ...rest,
       ref,
+      inputRef,
       "data-slot": "checkbox",
+      "data-state": state === "indeterminate" ? "indeterminate" : state ? "checked" : "unchecked",
+      name: identity.name ?? props.name,
+      value,
+      isSelected: state === true,
+      isIndeterminate: state === "indeterminate",
+      isDisabled: disabled,
+      isRequired: required,
+      isInvalid: invalid !== void 0 && invalid !== false && invalid !== "false",
+      excludeFromTabOrder: tabIndex !== void 0 && tabIndex < 0,
       className: cn(
         // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
         // moved: `.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 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
+        // service overriding --checkbox-checked-background got no fill change at all. `data-state`
+        // above and react-aria's own `data-disabled` keep those CSS rules matching. Rendering is
+        // unchanged: both knobs default to exactly the values these utilities hard-coded.
+        //
+        // `inline-flex items-center justify-center` is NEW and load-bearing: the root used to be a
+        // `<button>` (inline-block, so `.ui-checkbox`'s width/height applied and the glyph centred
+        // itself). react-aria's root is a `<label>`, which is `display:inline` — without this the
+        // 16px box collapses to nothing. CheckboxVisual already carries the same three for the
+        // same reason.
+        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
         className
       ),
-      ...props,
-      ...identity,
-      onCheckedChange: (next) => {
+      onChange: (next) => {
         setUncontrolled(next);
-        props.onCheckedChange?.(next);
+        onCheckedChange?.(next);
       },
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(CheckboxGlyph, { state }) })
+      children: /* @__PURE__ */ jsx("span", { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: state ? /* @__PURE__ */ jsx(CheckboxGlyph, { state }) : null })
     }
   );
 });
-CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
+CheckboxRoot.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxRoot, {
   Group: CheckboxGroup
 });

package/dist/components/data-entry/choice-option.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-/** Shared option shape — Ant Design `CheckboxOptionType` / `Radio` options. */
+/** Shared option shape — the conventional `CheckboxOptionType` / `Radio` options entry. */
 export type ChoiceOption = {
     label: React.ReactNode;
     value: string;

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

@@ -3,7 +3,7 @@ import type { DateRangePickerProp } from "../../props/components/data-entry.prop
 export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
  * DateRangePicker — WAI-ARIA date-range combobox rendered as ONE input-styled control
- * (Ant Design RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
+ * (the established RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
  * real, typeable ISO `yyyy-MM-dd` inputs (form-submittable via `${name}_from` /
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { Label } from "./label.js";

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { FormErrorsProvider } from "./form-errors.js";

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

@@ -1,4 +1,5 @@
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
 import { type VariantProps } from "class-variance-authority";
-export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;

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

@@ -1,16 +1,19 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import { Label as AriaLabel } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
 const labelVariants = cva(
   "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,
-  {
-    ref,
+const Label = React.forwardRef(({ className, onMouseDown, asChild = false, ...props }, ref) => {
+  const shared = {
+    // `...props` đứng TRƯỚC, không phải sau: giữ đúng thứ tự thuộc tính mà
+    // @radix-ui/react-label phát ra (`for` → `data-slot` → `class`), nên phép so
+    // `outerHTML` trong __tests__/label-checkbox-rac.test.tsx khớp từng ký tự.
+    // `className` / `onMouseDown` / `asChild` đã được tách ra nên không bị ghi đè.
+    ...props,
     "data-slot": "label",
     className: cn(
       // A label inside a disabled group reads at the SYSTEM disabled alpha (--disabled-opacity),
@@ -19,10 +22,20 @@ const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
       labelVariants(),
       className
     ),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+    // Carried over BY HAND from @radix-ui/react-label, which react-aria-components' Label does not
+    // do: without it a double click on the label text selects the surrounding paragraph instead of
+    // just toggling the control twice. A press that started ON the control is left alone — cancelling
+    // that one would swallow the control's own activation.
+    onMouseDown: (event) => {
+      const target = event.target;
+      if (target.closest("button, input, select")) return;
+      onMouseDown?.(event);
+      if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+    }
+  };
+  return asChild ? /* @__PURE__ */ jsx(Slot, { ref, ...shared }) : /* @__PURE__ */ jsx(AriaLabel, { ref, ...shared });
+});
+Label.displayName = "Label";
 export {
   Label
 };

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { MonthPickerProp } from "../../props/components/data-entry.prop.js";
 export type { MonthPickerProp, MonthPickerProp as MonthPickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * MonthPicker — year/month (`yyyy/MM`) input with an Ant-Design-style month grid
+ * MonthPicker — year/month (`yyyy/MM`) input with a 12-cell month grid
  * popover: a year header with chevrons over a 3×4 grid of the twelve months.
  * The field stays a real, typeable input (form-submittable via `name` as
  * `yyyy-MM`); the grid is the visual affordance.

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { MonthRangePickerProp } from "../../props/components/data-entry.prop.js";
 export type { MonthRangePickerProp, MonthRangePickerProp as MonthRangePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * MonthRangePicker — year/month (`yyyy/MM`) RANGE rendered as ONE input-styled control (Ant Design
+ * MonthRangePicker — year/month (`yyyy/MM`) RANGE rendered as ONE input-styled control (the
  * RangePicker convention): `[ from → to ✕ 📅 ]`. The two inner fields stay real, typeable
  * `yyyy/MM` inputs (form-submittable via `${name}_from` / `${name}_to`); the Ant-style month grid
  * is the visual affordance.

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

@@ -42,7 +42,7 @@ function TransferPanel({
   };
   return /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane", children: [
     /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane-header", children: [
-      /* @__PURE__ */ jsxs("label", { className: "ui-transfer-pane-check", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane-check", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -70,7 +70,7 @@ function TransferPanel({
       }
     ) }),
     /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "ui-transfer-list", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "ui-transfer-empty", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      "label",
+      "div",
       {
         className: cn(
           "ui-transfer-row",
@@ -81,16 +81,26 @@ function TransferPanel({
           /* @__PURE__ */ jsx(
             Checkbox,
             {
+              id: `${titleId}-${item.key}-box`,
               checked: selectedKeys.includes(item.key),
               disabled: Boolean(disabled) || Boolean(item.disabled),
               onCheckedChange: (v) => toggleKey(item.key, v === true),
+              "aria-labelledby": `${titleId}-${item.key}`,
               className: "ui-transfer-row-check"
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "ui-transfer-row-body", children: [
-            /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
-            item.description && /* @__PURE__ */ jsx("span", { className: "ui-transfer-row-description text-muted-foreground block truncate", children: item.description })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "ui-transfer-row-body",
+              id: `${titleId}-${item.key}`,
+              htmlFor: `${titleId}-${item.key}-box`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
+                item.description && /* @__PURE__ */ jsx("span", { className: "ui-transfer-row-description text-muted-foreground block truncate", children: item.description })
+              ]
+            }
+          )
         ]
       }
     ) }, item.key)) }) })

package/dist/components/data-entry/tree-select-strategy.d.ts

@@ -1,4 +1,4 @@
-/** Ant Design `showCheckedStrategy` equivalents for TreeSelect. */
+/** `showCheckedStrategy` equivalents for TreeSelect — the conventional enterprise names. */
 export declare const SHOW_CHILD: "SHOW_CHILD";
 export declare const SHOW_PARENT: "SHOW_PARENT";
 export declare const SHOW_ALL: "SHOW_ALL";

package/dist/components/data-entry/tree-select.js

@@ -259,18 +259,35 @@ function TreeSelectRoot({
                       children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" })
                     }
                   ),
-                  checkable ? /* @__PURE__ */ jsxs("label", { className: "ui-tree-select-label", children: [
-                    /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        checked: isSelected,
-                        tabIndex: -1,
-                        disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
-                        onCheckedChange: () => toggleSelect(node)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
-                  ] }) : /* @__PURE__ */ jsx(
+                  checkable ? (
+                    // The row must NOT WRAP the Checkbox in a `<label>`: the Checkbox is itself a
+                    // `<label>` around a real `<input>`, and a label nested in a label is
+                    // invalid HTML — the browser resolves neither, so the box loses its
+                    // accessible name. The node text sits BESIDE the box as a `for=`-associated
+                    // label instead, which both names it and keeps the text clickable.
+                    /* @__PURE__ */ jsxs("div", { className: "ui-tree-select-label", children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          id: `${treeId}-${node.value}-box`,
+                          checked: isSelected,
+                          tabIndex: -1,
+                          disabled: Boolean(node.disabled) || Boolean(node.disableCheckbox),
+                          onCheckedChange: () => toggleSelect(node),
+                          "aria-labelledby": `${treeId}-${node.value}-label`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "label",
+                        {
+                          className: "truncate",
+                          id: `${treeId}-${node.value}-label`,
+                          htmlFor: `${treeId}-${node.value}-box`,
+                          children: node.label
+                        }
+                      )
+                    ] })
+                  ) : /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",

package/dist/components/data-entry/tree-utils.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-/** Normalized tree node — Ant Design `treeData` / Cascader `options`. */
+/** Normalized tree node — the conventional `treeData` / Cascader `options` shape. */
 export type TreeOption = {
     value: string;
     label: React.ReactNode;