@godxjp/ui 21.0.0 → 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

@@ -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,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/layout/mobile-shell.d.ts

@@ -18,4 +18,4 @@ export type { MobileShellProp, MobileShellProp as MobileShellProps, } from "../.
  * IS the app's primary navigation). They are the same strings in all three locales, and a fourth
  * identical copy under `layout.mobileShell.*` would be three files of duplication to keep in sync.
  */
-export declare function MobileShell({ statusBar, header, children, actions, tabBar, height, className, }: MobileShellProp): import("react").JSX.Element;
+export declare function MobileShell({ statusBar, header, children, actions, tabBar, height, width, className, }: MobileShellProp): import("react").JSX.Element;

package/dist/components/layout/mobile-shell.js

@@ -9,6 +9,7 @@ function MobileShell({
   actions,
   tabBar,
   height = "viewport",
+  width = "fill",
   className
 }) {
   const { t } = useTranslation();
@@ -17,6 +18,7 @@ function MobileShell({
     {
       "data-slot": "mobile-shell",
       "data-height": height === "viewport" ? void 0 : height,
+      "data-width": width === "fill" ? void 0 : width,
       className: cn("ui-mobile-shell", className),
       children: [
         (statusBar !== void 0 || header !== void 0) && /* @__PURE__ */ jsxs("header", { className: "ui-mobile-shell-chrome", "aria-label": t("layout.appShell.headerLabel"), children: [

package/dist/components/navigation/menubar.d.ts

@@ -1,9 +1,16 @@
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 export declare const Menubar: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
-export declare const MenubarMenu: (props: MenubarPrimitive.MenubarMenuProps & {
-    __scopeMenubar?: import("@radix-ui/react-context").Scope;
-}) => React.JSX.Element;
+/**
+ * Annotated rather than inferred, and that is load-bearing.
+ *
+ * Radix types this one through `createContextScope`, so its INFERRED type reaches into
+ * `@radix-ui/react-context` for a `Scope` — and TypeScript then refuses to emit a declaration it
+ * cannot name portably (TS2883) unless that package is a DIRECT dependency. It was one, purely to
+ * satisfy this line: nothing in the tree ever imported it. Naming the props here severs that,
+ * which is what let the dependency go.
+ */
+export declare const MenubarMenu: (props: React.ComponentProps<typeof MenubarPrimitive.Menu>) => React.ReactNode;
 export declare function MenubarTrigger(props: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
 export declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/components/navigation/steps.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
 export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, StepsTypeProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, percent, onValueChange, className, }: StepsProp): React.JSX.Element;
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, percent, onValueChange, className, ...props }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -50,7 +50,8 @@ function Steps({
   separator = "chevron",
   percent,
   onValueChange,
-  className
+  className,
+  ...props
 }) {
   const { t } = useTranslation();
   const base = defaultValue;
@@ -69,6 +70,7 @@ function Steps({
       "data-type": type,
       className: cn("flex w-full", inline ? "ui-steps-inline" : "ui-steps-list", className),
       "aria-label": t("navigation.steps.ariaLabel"),
+      ...props,
       children: items.map((item, index) => {
         const absoluteIndex = base + index;
         const stepStatus = resolveStepStatus(absoluteIndex, current, item.status, currentStatus);

package/dist/components/navigation/tabs-scroll.d.ts

@@ -34,3 +34,30 @@ export declare function syncActiveTabIntoView(list: HTMLElement | null, behavior
  * pre-fix behaviour instead of throwing.
  */
 export declare function useKeepActiveTabVisible(listRef: React.RefObject<HTMLElement | null>): void;
+/**
+ * The values of the triggers that are NOT fully inside the strip's scrollport, in document order.
+ *
+ * Pure apart from the two rect reads — `values` is the `items` array's own order, and the triggers
+ * are matched to it by INDEX rather than by DOM id: `TabsTrigger` hands its `value` to React Aria
+ * as the collection KEY, and the rendered `id` attribute is RAC-generated, so the element carries
+ * no readable handle back to the item it came from.
+ *
+ * This is the measurement behind `overflow="menu"`. It is separated from the hook below so it can
+ * be exercised on plain numbers — jsdom lays nothing out, so the only honest unit assertions about
+ * it are the ones that hand it real geometry.
+ */
+export declare function resolveHiddenTabValues(list: HTMLElement, values: readonly string[]): string[];
+/**
+ * Keeps `onChange` fed with the values currently out of the scrollport, recomputing on the two
+ * things that can move them: the strip resizing (a viewport change, a font swap, a tab added or
+ * removed) and the strip scrolling (the user swiping, or `useKeepActiveTabVisible` re-pinning a
+ * trigger).
+ *
+ * `values` is joined into the effect key rather than passed as a dependency, so a consumer that
+ * rebuilds its `items` array on every render does not re-arm the observers on every render.
+ *
+ * The first measurement ALWAYS reports, even when nothing is hidden. Suppressing it looks harmless
+ * and is not: on a remount the local `last` resets while the caller's state does not, so a strip
+ * that had overflowed and then stopped would keep a stale menu forever.
+ */
+export declare function useTabsOverflowValues(listRef: React.RefObject<HTMLElement | null>, values: readonly string[] | undefined, onChange: (hidden: string[]) => void): void;