@godxjp/ui 21.0.0 → 23.0.0

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, field, label, required, helper, error: errorProp, validateStatus, hasFeedback, feedback, 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, helperPlacement, error: errorProp, validateStatus, hasFeedback, feedback, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

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

@@ -19,6 +19,7 @@ function FormField({
   label,
   required,
   helper,
+  helperPlacement = "after",
   error: errorProp,
   validateStatus,
   hasFeedback,
@@ -46,6 +47,7 @@ function FormField({
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -67,6 +69,7 @@ function FormField({
     [fieldKey, emitFieldNames]
   );
   const childProps = React.isValidElement(children) ? children.props : void 0;
+  const controlId = childProps?.id ?? resolvedId;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
     // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
@@ -76,7 +79,7 @@ function FormField({
     // 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,
+    id: controlId,
     ...form?.disabled && childProps?.disabled !== false ? { disabled: true } : {},
     ...validationStatus === "validating" ? { "aria-busy": true } : {},
     // Read the child's own value first in BOTH cases: cloneElement
@@ -131,7 +134,7 @@ function FormField({
                 "span",
                 {
                   onClick: () => {
-                    const el = document.getElementById(resolvedId);
+                    const el = document.getElementById(controlId);
                     if (!(el instanceof HTMLElement)) return;
                     const focusable = el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
                     (focusable ?? el).focus();
@@ -151,6 +154,7 @@ function FormField({
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
+          helperPlacement === "before" ? helperNode : null,
           isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(
             "fieldset",
             {
@@ -170,7 +174,7 @@ function FormField({
             ),
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
-          helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
+          helperPlacement === "after" ? helperNode : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
         ] })
       ]

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

@@ -9,6 +9,15 @@ const FormLayoutContext = React.createContext(null);
 function useFormLayout() {
   return React.useContext(FormLayoutContext);
 }
+function asChildContent(children, columns) {
+  if (columns == null) return children;
+  const child = React.Children.only(children);
+  return React.cloneElement(
+    child,
+    void 0,
+    /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children: child.props.children })
+  );
+}
 const Form = React.forwardRef(function Form2({
   layout = "vertical",
   disabled,
@@ -41,7 +50,7 @@ const Form = React.forwardRef(function Form2({
           "data-layout": layout,
           className: cn("ui-form", density && `ui-density-${density}`, className),
           ...props,
-          children
+          children: asChildContent(children, columns)
         }
       )
     ) });

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

@@ -32,14 +32,8 @@ export { Slider } from "./slider.js";
 export type { SliderProps } from "./slider.js";
 export { Calendar } from "./calendar.js";
 export type { CalendarProps } from "./calendar.js";
-export { MonthPicker } from "./month-picker.js";
-export type { MonthPickerProps } from "./month-picker.js";
-export { MonthRangePicker } from "./month-range-picker.js";
-export type { MonthRangePickerProps } from "./month-range-picker.js";
 export { DatePicker } from "./date-picker.js";
 export type { DatePickerProps } from "./date-picker.js";
-export { DateRangePicker } from "./date-range-picker.js";
-export type { DateRangePickerProps } from "./date-range-picker.js";
 export { TimePicker } from "./time-picker.js";
 export type { TimePickerProps } from "./time-picker.js";
 export { ColorPicker } from "./color-picker.js";

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

@@ -29,10 +29,7 @@ import { Toggle } from "./toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
 import { Slider } from "./slider.js";
 import { Calendar } from "./calendar.js";
-import { MonthPicker } from "./month-picker.js";
-import { MonthRangePicker } from "./month-range-picker.js";
 import { DatePicker } from "./date-picker.js";
-import { DateRangePicker } from "./date-range-picker.js";
 import { TimePicker } from "./time-picker.js";
 import { ColorPicker } from "./color-picker.js";
 import {
@@ -79,7 +76,6 @@ export {
   CommandList,
   CommandPalette,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormErrors,
@@ -91,8 +87,6 @@ export {
   InputOTPSeparator,
   InputOTPSlot,
   Label,
-  MonthPicker,
-  MonthRangePicker,
   NumberInput,
   PasswordInput,
   PasswordStrength,

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

@@ -1,5 +1,18 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-export declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & {
+export declare const Label: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "slot"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & {
     asChild?: boolean;
+    /**
+     * react-aria's slot channel, DEFAULTED OFF.
+     *
+     * A `Label` rendered inside a react-aria collection (a `RadioGroup`, say) is otherwise
+     * claimed by that collection as the GROUP's label: it comes out as a `<span>`, the `htmlFor`
+     * this library passed is dropped on the floor, and the control it was meant to name ends up
+     * with no accessible name at all — a silent failure, measured on `Radio.Group` the moment
+     * that group moved to react-aria. `<Label htmlFor="x">` means one thing in this library and
+     * a surrounding primitive does not get to redefine it, so the default is react-aria's own
+     * opt-out: "an explicit `null` value indicates that the local props completely override all
+     * props received from a parent". Pass a slot name to opt back in.
+     */
+    slot?: string | null;
 } & React.RefAttributes<HTMLLabelElement>>;

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

@@ -7,8 +7,13 @@ 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, onMouseDown, asChild = false, ...props }, ref) => {
+const Label = React.forwardRef(({ className, onMouseDown, asChild = false, slot = null, ...props }, ref) => {
   const shared = {
+    // `string | null`, cast because react-aria's own `LabelProps` extends `LabelHTMLAttributes`
+    // and so re-types `slot` as `string | undefined` — narrower than the `SlotProps` contract the
+    // rest of the library publishes, and narrower than `useSlottedContext`, which branches on
+    // `slot === null` explicitly. React drops a `null` attribute, so nothing reaches the DOM.
+    slot,
     // `...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ự.

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

@@ -1,14 +1,35 @@
 import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type { RadioGroupProp } from "../../props/components/data-entry.prop.js";
 export type { RadioGroupProp, RadioGroupProp as RadioGroupProps, } from "../../props/components/data-entry.prop.js";
-declare const RadioGroupRoot: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const RadioItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const RadioGroupRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "dir" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    orientation?: "horizontal" | "vertical";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const RadioItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
+    value: string;
+} & React.RefAttributes<HTMLLabelElement>>;
 declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, optionType, buttonStyle, disabled, name, id, className, children, ...ariaProps }: RadioGroupProp): React.JSX.Element;
 /** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
-export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
-    Root: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
+    value: string;
+} & React.RefAttributes<HTMLLabelElement>> & {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "dir" | "onChange"> & {
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (value: string) => void;
+        disabled?: boolean;
+        required?: boolean;
+        name?: string;
+        orientation?: "horizontal" | "vertical";
+    } & React.RefAttributes<HTMLDivElement>>;
     Group: typeof RadioGroupOptions;
-    Item: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
+        value: string;
+    } & React.RefAttributes<HTMLLabelElement>>;
 };
 export { RadioGroupRoot, RadioItem, RadioGroupOptions as RadioGroup };

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

@@ -1,64 +1,109 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { Circle } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
-const RadioGroupRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  RadioGroupPrimitive.Root,
-  {
-    ref,
-    "data-slot": "radio-group",
-    className: cn("ui-choice-group", className),
-    ...props
+import { withOwnHitTarget } from "./choice-hit-target.js";
+function checkedState(isSelected) {
+  return isSelected ? "checked" : "unchecked";
+}
+function useFieldKeyedInput(fieldKey) {
+  const inputRef = React.useRef(null);
+  useMirroredInputAttributes(inputRef, { "data-field": fieldKey });
+  return inputRef;
+}
+const RadioGroupRoot = React.forwardRef(
+  ({ className, value, defaultValue, onValueChange, disabled, required, orientation, ...props }, ref) => {
+    const invalid = props["aria-invalid"];
+    const { "aria-label": ariaLabel, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      AriaRadioGroup,
+      {
+        ref,
+        "data-slot": "radio-group",
+        className: cn("ui-choice-group", className),
+        value,
+        defaultValue,
+        onChange: onValueChange,
+        isDisabled: disabled,
+        isRequired: required,
+        isInvalid: invalid !== void 0 && invalid !== false && invalid !== "false",
+        orientation,
+        "aria-label": props["aria-labelledby"] ? void 0 : ariaLabel,
+        ...rest
+      }
+    );
   }
-));
-RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  RadioGroupPrimitive.Item,
-  {
-    ref,
-    "data-slot": "radio-group-item",
-    className: cn(
-      // `.ui-radio:disabled, .ui-radio[data-disabled]` in styles/control.css already declares both
-      // and reads --disabled-opacity. The utility was layered after components, so it silently
-      // outranked that token — a service theme's --disabled-opacity never reached a radio.
-      // Byte-identical: --disabled-opacity defaults to 0.5.
-      "ui-radio aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow outline-none",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      RadioGroupPrimitive.Indicator,
+);
+RadioGroupRoot.displayName = "RadioGroup";
+const RadioItem = React.forwardRef(
+  ({ className, disabled, value, ...props }, ref) => {
+    const { "data-field": fieldKey } = props;
+    const inputRef = useFieldKeyedInput(fieldKey);
+    return /* @__PURE__ */ jsx(
+      AriaRadio,
       {
-        "data-slot": "radio-group-indicator",
-        className: "ui-choice-indicator",
-        children: /* @__PURE__ */ jsx(Circle, { className: "ui-radio-icon", "aria-hidden": "true" })
+        ref,
+        inputRef,
+        value,
+        isDisabled: disabled,
+        "data-slot": "radio-group-item",
+        className: cn(
+          // `.ui-radio:disabled, .ui-radio[data-disabled]` in styles/control.css already declares both
+          // and reads --disabled-opacity. The utility was layered after components, so it silently
+          // outranked that token — a service theme's --disabled-opacity never reached a radio.
+          // Byte-identical: --disabled-opacity defaults to 0.5.
+          //
+          // `inline-flex items-center justify-center` is load-bearing, for the reason Checkbox
+          // records: react-aria's root is a `<label>`, which is `display:inline`, so without it the
+          // 16px dot collapses to nothing. `data-[invalid]` replaces `aria-invalid:` because
+          // react-aria puts `aria-invalid` on the `<input>` and `data-invalid` on this box.
+          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+          className
+        ),
+        ...props,
+        render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
+        children: /* @__PURE__ */ jsx("span", { "data-slot": "radio-group-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Circle, { className: "ui-radio-icon", "aria-hidden": "true" }) })
       }
-    )
+    );
   }
-));
-RadioItem.displayName = RadioGroupPrimitive.Item.displayName;
+);
+RadioItem.displayName = "Radio";
+function RadioBarButton({
+  id,
+  option,
+  resolvedField
+}) {
+  const inputRef = useFieldKeyedInput(resolvedField);
+  return /* @__PURE__ */ jsx(
+    AriaRadio,
+    {
+      id,
+      inputRef,
+      value: option.value,
+      isDisabled: option.disabled,
+      "data-slot": "radio-button",
+      className: "ui-radio-button ui-focus-ring",
+      render: (domProps, state) => /* @__PURE__ */ jsx("label", { ...domProps, "data-state": checkedState(state.isSelected), children: withOwnHitTarget(domProps.children) }),
+      children: /* @__PURE__ */ jsx("span", { className: "ui-radio-button-label", children: option.label })
+    }
+  );
+}
 function RadioButtonBar({
   options,
-  value,
   optionDomId,
   resolvedField
 }) {
   return /* @__PURE__ */ jsx(Fragment, { children: options.map((opt, index) => /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
+    RadioBarButton,
     {
       id: optionDomId(opt.value, index),
-      value: opt.value,
-      disabled: opt.disabled,
-      "data-slot": "radio-button",
-      "data-field": resolvedField,
-      "data-state": value === opt.value ? "checked" : "unchecked",
-      className: "ui-radio-button ui-focus-ring",
-      children: /* @__PURE__ */ jsx("span", { className: "ui-radio-button-label", children: opt.label })
+      option: opt,
+      resolvedField
     },
     opt.value
   )) });
@@ -94,6 +139,7 @@ function RadioGroupOptions({
         disabled,
         name: resolvedName,
         id,
+        orientation,
         ...groupA11y,
         "data-field": resolvedField,
         "data-orientation": orientation,
@@ -108,7 +154,6 @@ function RadioGroupOptions({
             RadioButtonBar,
             {
               options,
-              value,
               optionDomId,
               resolvedField
             }
@@ -147,6 +192,7 @@ function RadioGroupOptions({
       disabled,
       name: resolvedName,
       id,
+      orientation,
       ...groupA11y,
       "data-field": resolvedField,
       "data-orientation": orientation,