@godxjp/ui 20.2.1 → 22.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;
@@ -151,6 +153,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 +173,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

@@ -7,6 +7,10 @@ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 export { Checkbox } from "./checkbox.js";
 export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
+export { ChatComposer } from "./chat-composer.js";
+export type { ChatComposerProp, ChatComposerProps, ChatComposerSubmitTypeProp, } from "./chat-composer.js";
+export { ChatSuggestion } from "./chat-suggestion.js";
+export type { ChatSuggestionProp, ChatSuggestionProps, ChatSuggestionItemProp, ChatSuggestionRenderProp, } from "./chat-suggestion.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
@@ -28,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

@@ -16,6 +16,8 @@ import {
 import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
+import { ChatComposer } from "./chat-composer.js";
+import { ChatSuggestion } from "./chat-suggestion.js";
 import { Textarea } from "./textarea.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
@@ -27,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 {
@@ -64,6 +63,8 @@ export {
   BranchScopePicker,
   Calendar,
   Cascader,
+  ChatComposer,
+  ChatSuggestion,
   Checkbox,
   CheckboxGroup,
   ColorPicker,
@@ -75,7 +76,6 @@ export {
   CommandList,
   CommandPalette,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormErrors,
@@ -87,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,108 @@
 "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
+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: /* @__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: /* @__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 +138,7 @@ function RadioGroupOptions({
         disabled,
         name: resolvedName,
         id,
+        orientation,
         ...groupA11y,
         "data-field": resolvedField,
         "data-orientation": orientation,
@@ -108,7 +153,6 @@ function RadioGroupOptions({
             RadioButtonBar,
             {
               options,
-              value,
               optionDomId,
               resolvedField
             }
@@ -147,6 +191,7 @@ function RadioGroupOptions({
       disabled,
       name: resolvedName,
       id,
+      orientation,
       ...groupA11y,
       "data-field": resolvedField,
       "data-orientation": orientation,

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

@@ -36,6 +36,7 @@ function SearchSelect(props) {
     size,
     status,
     variant,
+    width = "full",
     loading: loadingProp = false,
     open: openProp,
     defaultOpen = false,
@@ -334,9 +335,15 @@ function SearchSelect(props) {
               "data-field": resolvedField,
               "data-value": (multiple ? values.join(",") : value) || void 0,
               "data-mode": multiple ? "multiple" : void 0,
+              "data-width": width,
               className: cn(
                 controlSurfaceTriggerClass,
-                "w-full justify-start",
+                "justify-start",
+                // `bounded` deliberately emits NO width utility — its width is owned by the
+                // `[data-width="bounded"]` rule in control.css, and a utility here would win the
+                // layer order and make that token dead. Same reasoning as SelectTrigger.
+                width === "auto" && "w-auto",
+                width === "full" && "w-full",
                 // Reserve trailing room for the single clear-or-chevron overlay rendered below.
                 "ui-control-trigger-affixed"
               ),

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

@@ -298,6 +298,7 @@ function DataSelect(props) {
     size,
     status,
     variant,
+    width,
     loading,
     open,
     defaultOpen,
@@ -372,6 +373,7 @@ function DataSelect(props) {
             size,
             variant,
             status,
+            width,
             "aria-busy": loading || void 0,
             className: cn(
               (showClear || loading) && "ui-control-trigger-affixed",

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

@@ -1,9 +1,12 @@
 import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
 export type { SwitchProp, SwitchProp as SwitchProps } from "../../props/components/data-entry.prop.js";
-export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+export declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "checked" | "defaultChecked" | "onChange" | "value"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
     size?: "sm" | "md";
     loading?: boolean;
     checkedChildren?: React.ReactNode;
     unCheckedChildren?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLLabelElement>>;

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

@@ -1,10 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Switch as AriaSwitch } from "react-aria-components";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useFieldIdentity } from "../../lib/field-a11y.js";
+import { useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
 const Switch = React.forwardRef(
   ({
     className,
@@ -16,6 +16,8 @@ const Switch = React.forwardRef(
     loading = false,
     checkedChildren,
     unCheckedChildren,
+    disabled,
+    required,
     ...props
   }, ref) => {
     const identity = useFieldIdentity({
@@ -34,19 +36,42 @@ const Switch = React.forwardRef(
       }
       onCheckedChange?.(next);
     };
+    const ownField = props["data-field"];
+    const fieldKey = ownField ?? identity["data-field"];
+    const invalid = props["aria-invalid"];
+    const isInvalid = invalid !== void 0 && invalid !== false && invalid !== "false";
+    const inputRef = React.useRef(null);
+    useMirroredInputAttributes(inputRef, {
+      "aria-invalid": isInvalid ? "true" : void 0,
+      "aria-busy": loading ? "true" : void 0,
+      "aria-disabled": loading ? "true" : void 0,
+      // react-aria's `Switch` Omits `isRequired`, and a switch is never the target of native
+      // constraint validation in this library — the form layer owns that. The prop is accepted
+      // for shape and announced through `aria-required`.
+      "aria-required": required ? "true" : void 0,
+      "data-field": fieldKey
+    });
+    const state = isChecked ? "checked" : "unchecked";
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: isChecked ? "1" : "0", readOnly: true }) : null,
       /* @__PURE__ */ jsxs(
-        SwitchPrimitive.Root,
+        AriaSwitch,
         {
+          ...props,
           ref,
+          inputRef,
           "data-slot": "switch",
           "data-size": size,
+          "data-state": state,
           "data-loading": loading ? "true" : void 0,
-          "aria-busy": loading || void 0,
-          "aria-disabled": loading || void 0,
-          checked: isChecked,
-          onCheckedChange: handleCheckedChange,
+          isSelected: isChecked,
+          isDisabled: disabled,
+          onChange: handleCheckedChange,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter") return;
+            event.preventDefault();
+            handleCheckedChange(!isChecked);
+          },
           className: cn(
             // `.ui-switch:disabled, .ui-switch[data-disabled]` in styles/control.css already
             // declares both and reads --disabled-opacity. The utility was layered after
@@ -56,11 +81,9 @@ const Switch = React.forwardRef(
             "peer ui-switch shadow-xs transition-all outline-none",
             className
           ),
-          ...props,
-          "data-field": identity["data-field"] ?? props["data-field"],
           children: [
             checkedChildren != null || unCheckedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "switch-content", className: "ui-switch-content", "aria-hidden": "true", children: isChecked ? checkedChildren : unCheckedChildren }) : null,
-            /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb", children: loading ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("span", { "data-slot": "switch-thumb", "data-state": state, className: "ui-switch-thumb", children: loading ? /* @__PURE__ */ jsx(
               Loader2,
               {
                 "data-slot": "switch-spinner",
@@ -74,7 +97,7 @@ const Switch = React.forwardRef(
     ] });
   }
 );
-Switch.displayName = SwitchPrimitive.Root.displayName;
+Switch.displayName = "Switch";
 export {
   Switch
 };

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

@@ -158,11 +158,13 @@ const Textarea = React.forwardRef(
       }
     );
     if (!needsWrapper) return field;
+    const placeholderText = typeof props.placeholder === "string" ? props.placeholder : void 0;
+    const mirrorText = mirror.length > 0 ? mirror : placeholderText ?? "";
     return /* @__PURE__ */ jsxs(
       "span",
       {
         "data-slot": "textarea-affix-wrapper",
-        "data-autogrow-value": growing ? mirror : void 0,
+        "data-autogrow-value": growing ? mirrorText : void 0,
         style: { ...autoGrowVars, ...mirrorInset },
         className: cn(
           "relative w-full",

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

@@ -1,48 +1,10 @@
-import type * as React from "react";
-/** Normalized tree node — the conventional `treeData` / Cascader `options` shape. */
-export type TreeOption = {
-    value: string;
-    label: React.ReactNode;
-    disabled?: boolean;
-    disableCheckbox?: boolean;
-    /** When false with `loadData`, shows expand affordance */
-    isLeaf?: boolean;
-    children?: TreeOption[];
-};
-export type TreeFieldNames = {
-    label?: string;
-    value?: string;
-    children?: string;
-};
-export type NormalizedTreeOption = TreeOption & {
-    children?: NormalizedTreeOption[];
-};
-type RawTreeNode = Record<string, unknown>;
-export declare function reactNodeText(value: React.ReactNode): string;
-export declare function normalizeTreeOptions(nodes: RawTreeNode[] | undefined, fieldNames?: TreeFieldNames): NormalizedTreeOption[];
-export declare function getNodeByPath(options: NormalizedTreeOption[], path: string[]): NormalizedTreeOption[];
-export declare function getOptionsAtPath(options: NormalizedTreeOption[], path: string[]): NormalizedTreeOption[];
-export declare function formatPathLabels(chain: NormalizedTreeOption[], separator?: string): string;
-export type TreePath = {
-    path: string[];
-    labels: string[];
-};
-export declare function collectLeafPaths(options: NormalizedTreeOption[], prefix?: string[], root?: NormalizedTreeOption[]): TreePath[];
-export declare function collectAllPaths(options: NormalizedTreeOption[], prefix?: string[], root?: NormalizedTreeOption[]): TreePath[];
-export declare function pathKey(path: string[]): string;
-export declare function pathsEqual(a: string[], b: string[]): boolean;
-export declare function filterTreeOptions(options: NormalizedTreeOption[], query: string, filter?: (query: string, path: NormalizedTreeOption[]) => boolean): TreePath[];
-export declare function getDescendantValues(node: NormalizedTreeOption): string[];
-export declare function flattenVisibleTree(options: NormalizedTreeOption[], expandedKeys: Set<string>, depth?: number): {
-    node: NormalizedTreeOption;
-    depth: number;
-    hasChildren: boolean;
-}[];
-export declare function filterVisibleTree(options: NormalizedTreeOption[], query: string): {
-    node: NormalizedTreeOption;
-    depth: number;
-    hasChildren: boolean;
-}[];
-export declare function collectAllExpandableKeys(options: NormalizedTreeOption[]): string[];
-export declare function findNodeByValue(options: NormalizedTreeOption[], value: string): NormalizedTreeOption | undefined;
-export {};
+/**
+ * RE-EXPORT SHIM — the tree model moved to `src/lib/tree.ts`.
+ *
+ * `Tree` (data-display) and `TreeSelect` (data-entry) are two SURFACES over ONE model. Forking the
+ * traversal would let a page tree and a dropdown tree disagree about what "expanded", "a leaf" or
+ * "every descendant" means — so the normalizer, the visible-row flattener and the descendant walk
+ * live in `src/lib/`, which both groups may import, and this path stays valid so nothing that
+ * already imports `./tree-utils` has to change.
+ */
+export * from "../../lib/tree.js";