@godxjp/ui 18.15.4 → 19.1.0

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

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
 import {
   mergeAriaIds,
+  useFieldIdentity,
   omitFieldA11y,
   pickFieldA11y,
   useFieldNameFallback
@@ -26,7 +27,36 @@ function Select(props) {
 function CompoundSelect({ id, ...props }) {
   const fieldA11y = pickFieldA11y(props);
   const rootProps = omitFieldA11y(props);
-  return /* @__PURE__ */ jsx(SelectFieldA11yContext.Provider, { value: { ...fieldA11y, id }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...rootProps }) });
+  const [uncontrolled, setUncontrolled] = React.useState(props.defaultValue);
+  const value = props.value ?? uncontrolled;
+  const identity = useFieldIdentity({
+    id,
+    name: props.name,
+    "data-field": fieldA11y["data-field"]
+  });
+  return /* @__PURE__ */ jsx(
+    SelectFieldA11yContext.Provider,
+    {
+      value: {
+        ...fieldA11y,
+        "data-field": identity["data-field"] ?? fieldA11y["data-field"],
+        id,
+        value
+      },
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Root,
+        {
+          "data-slot": "select",
+          ...rootProps,
+          name: props.name ?? identity.name,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            props.onValueChange?.(next);
+          }
+        }
+      )
+    }
+  );
 }
 function SelectGroup(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
@@ -54,8 +84,10 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       field?.["aria-errormessage"]
     ),
     "aria-required": props["aria-required"] ?? field?.["aria-required"],
-    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"]
+    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"],
+    "data-field": props["data-field"] ?? field?.["data-field"]
   } : void 0;
+  const dataValue = (props["data-value"] ?? field?.value) || void 0;
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
@@ -64,18 +96,19 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       "data-size": size,
       className: cn(
         controlTriggerClass,
-        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
         className
       ),
       ...props,
       ...fieldA11y,
+      "data-value": dataValue,
       children: [
         children,
         showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
           ChevronDown,
           {
             "data-slot": "select-chevron",
-            className: "size-4 shrink-0 opacity-50",
+            className: "ui-select-chevron",
             "aria-hidden": "true"
           }
         ) }) : null
@@ -89,9 +122,9 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     "data-slot": "select-scroll-up-button",
-    className: cn("flex cursor-default items-center justify-center py-1", className),
+    className: cn("ui-select-scroll-button", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": "true" })
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -100,9 +133,9 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     "data-slot": "select-scroll-down-button",
-    className: cn("flex cursor-default items-center justify-center py-1", className),
+    className: cn("ui-select-scroll-button", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" })
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -112,7 +145,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     ref,
     "data-slot": "select-content",
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+      "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "translate-y-1",
       className
     ),
@@ -125,7 +158,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
         {
           "data-slot": "select-viewport",
           className: cn(
-            "p-1",
+            "ui-select-viewport",
             position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
           children
@@ -141,7 +174,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     "data-slot": "select-label",
-    className: cn("px-2 py-1.5 text-sm font-medium", className),
+    className: cn("ui-select-label", className),
     ...props
   }
 ));
@@ -151,10 +184,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     "data-slot": "select-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-select-item [&_svg:not([class*='text-'])]:text-muted-foreground", className),
     ...props,
     children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
   }
@@ -165,7 +195,7 @@ const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @_
   {
     ref,
     "data-slot": "select-separator",
-    className: cn("bg-border -mx-1 my-1 h-px", className),
+    className: cn("ui-select-separator", className),
     ...props
   }
 ));
@@ -215,12 +245,18 @@ function DataSelect({
   id,
   className,
   "data-testid": dataTestId,
+  "data-field": dataField,
   ...rest
 }) {
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
   const { t } = useTranslation();
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const currentValue = value ?? uncontrolledValue;
+  const identity = useFieldIdentity({ id, name, "data-field": dataField });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = dataField ?? identity["data-field"];
   const searchable = showSearch ?? Boolean(loadOptions);
   const hasOptions = options.length > 0;
   if (searchable) {
@@ -253,10 +289,11 @@ function DataSelect({
         filterOption,
         renderError,
         renderLoadMore,
-        name,
+        name: resolvedName,
         id,
         className,
         "data-testid": dataTestId,
+        "data-field": resolvedField,
         ...ariaProps
       }
     );
@@ -281,19 +318,24 @@ function DataSelect({
       "data-slot": "select",
       value: isControlled ? value : void 0,
       defaultValue: isControlled ? void 0 : defaultValue || void 0,
-      onValueChange: (next) => onValueChange?.(
-        next,
-        options.find((option) => option.value === next)
-      ),
+      onValueChange: (next) => {
+        setUncontrolledValue(next);
+        onValueChange?.(
+          next,
+          options.find((option) => option.value === next)
+        );
+      },
       disabled: disabled || !hasOptions,
-      name,
+      name: resolvedName,
       children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
           {
             id,
             "data-testid": dataTestId,
-            className: cn(showClear && "pe-9", canClear ? void 0 : className),
+            "data-field": resolvedField,
+            "data-value": currentValue || void 0,
+            className: cn(showClear && "ui-control-trigger-affixed", canClear ? void 0 : className),
             showIndicator: !showClear,
             ...ariaProps,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
@@ -311,15 +353,15 @@ function DataSelect({
   if (!canClear) return select;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     select,
-    showClear ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 end-2 flex items-center", children: /* @__PURE__ */ jsx(
+    showClear ? /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
         "data-testid": dataTestId ? `${dataTestId}-clear` : void 0,
-        className: "flex size-6 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        className: "ui-control-affix-action",
         onClick: () => onValueChange?.("", void 0),
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
     ) }) : null
   ] });

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

@@ -3,8 +3,15 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
 const Switch = React.forwardRef(
   ({ className, size = "md", name, checked, defaultChecked = false, onCheckedChange, ...props }, ref) => {
+    const identity = useFieldIdentity({
+      id: props.id,
+      name,
+      "data-field": props["data-field"]
+    });
+    const resolvedName = name ?? identity.name;
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
     const isControlled = checked !== void 0;
     const isChecked = isControlled ? checked : internalChecked;
@@ -15,7 +22,7 @@ const Switch = React.forwardRef(
       onCheckedChange?.(next);
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: isChecked ? "1" : "0", readOnly: true }) : null,
+      resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: isChecked ? "1" : "0", readOnly: true }) : null,
       /* @__PURE__ */ jsx(
         SwitchPrimitive.Root,
         {
@@ -25,10 +32,17 @@ const Switch = React.forwardRef(
           checked: isChecked,
           onCheckedChange: handleCheckedChange,
           className: cn(
-            "peer ui-switch focus-visible:border-ring focus-visible:ring-ring/50 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+            // `disabled:cursor-not-allowed disabled:opacity-50` DELETED, not moved (#319):
+            // `.ui-switch:disabled, .ui-switch[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. Byte-identical: the token
+            // defaults to 0.5. (`shadow-xs` STAYS — .ui-switch declares --shadow-sm, so this
+            // utility is the switch's real resting elevation, not a duplicate.)
+            "peer ui-switch shadow-xs transition-all outline-none",
             className
           ),
           ...props,
+          "data-field": identity["data-field"] ?? props["data-field"],
           children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb" })
         }
       )

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

@@ -4,10 +4,66 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
+     * in a surface that already draws the box (a chat composer inside a Card). The surface then
+     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     */
+    variant?: "default" | "ghost";
+    /**
+     * Grow the control with its content instead of holding a fixed `rows` height (default false —
+     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
+     *
+     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
+     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
+     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
+     * value change, a font swap and a container resize — not just typing — and it never writes
+     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     */
+    autoGrow?: boolean;
+    /**
+     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
+     * Ignored when `autoGrow` is false.
+     */
+    minRows?: number;
+    /**
+     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
+     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
+     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     */
+    maxRows?: number;
 };
 export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Show an inline ✕ (top-end) that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
+     * in a surface that already draws the box (a chat composer inside a Card). The surface then
+     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     */
+    variant?: "default" | "ghost";
+    /**
+     * Grow the control with its content instead of holding a fixed `rows` height (default false —
+     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
+     *
+     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
+     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
+     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
+     * value change, a font swap and a container resize — not just typing — and it never writes
+     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     */
+    autoGrow?: boolean;
+    /**
+     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
+     * Ignored when `autoGrow` is false.
+     */
+    minRows?: number;
+    /**
+     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
+     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
+     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     */
+    maxRows?: number;
 } & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -4,10 +4,34 @@ import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { controlMultilineClass } from "../../lib/control-styles.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
+import { controlMultilineClass, controlMultilineGhostClass } from "../../lib/control-styles.js";
+const UNBOUNDED_ROWS = "infinity";
 const Textarea = React.forwardRef(
-  ({ className, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+  ({
+    className,
+    allowClear = false,
+    onClear,
+    variant = "default",
+    autoGrow = false,
+    minRows,
+    maxRows,
+    rows,
+    style,
+    value,
+    defaultValue,
+    onChange,
+    onCompositionStart,
+    onCompositionEnd,
+    ...props
+  }, ref) => {
     const { t } = useTranslation();
+    const base = variant === "ghost" ? controlMultilineGhostClass : controlMultilineClass;
+    const identity = useFieldIdentity({
+      id: props.id,
+      name: props.name,
+      "data-field": props["data-field"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -23,10 +47,39 @@ const Textarea = React.forwardRef(
     React.useEffect(() => {
       if (value !== void 0) setHasText(String(value).length > 0);
     }, [value]);
+    const [mirror, setMirror] = React.useState(() => String(value ?? defaultValue ?? ""));
+    const composing = React.useRef(false);
+    const syncMirror = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el || composing.current) return;
+      setMirror(el.value);
+    }, []);
+    React.useLayoutEffect(() => {
+      if (autoGrow) syncMirror();
+    });
+    React.useEffect(() => {
+      const form = innerRef.current?.form;
+      if (!autoGrow || !form) return;
+      const onReset = () => {
+        queueMicrotask(syncMirror);
+      };
+      form.addEventListener("reset", onReset);
+      return () => form.removeEventListener("reset", onReset);
+    }, [autoGrow, syncMirror]);
     const handleChange = (event) => {
       if (value === void 0) setHasText(event.target.value.length > 0);
+      if (autoGrow && !composing.current) setMirror(event.target.value);
       onChange?.(event);
     };
+    const handleCompositionStart = (event) => {
+      composing.current = true;
+      onCompositionStart?.(event);
+    };
+    const handleCompositionEnd = (event) => {
+      composing.current = false;
+      if (autoGrow) setMirror(event.currentTarget.value);
+      onCompositionEnd?.(event);
+    };
     const clear = () => {
       const el = innerRef.current;
       if (el) {
@@ -39,46 +92,63 @@ const Textarea = React.forwardRef(
         el.focus();
       }
       setHasText(false);
+      if (autoGrow) setMirror("");
       onClear?.();
     };
-    if (!allowClear) {
-      return /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          value,
-          defaultValue,
-          onChange,
-          className: cn(controlMultilineClass, className),
-          ...props
-        }
-      );
-    }
-    const showClear = hasText && !props.disabled && !props.readOnly;
-    return /* @__PURE__ */ jsxs("span", { "data-slot": "textarea-affix-wrapper", className: "relative block w-full", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          value,
-          defaultValue,
-          onChange: handleChange,
-          className: cn(controlMultilineClass, showClear && "pe-9", className),
-          ...props
-        }
-      ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-label": t("common.clear") ?? "Clear",
-          onClick: clear,
-          className: "text-muted-foreground hover:text-foreground absolute end-2 top-2 inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100",
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-        }
-      ) : null
-    ] });
+    const floorRows = minRows ?? (typeof rows === "number" ? rows : void 0);
+    const autoGrowVars = autoGrow ? {
+      ...floorRows === void 0 ? null : { "--textarea-autogrow-min-height-rows": floorRows },
+      ...maxRows === void 0 ? null : {
+        "--textarea-autogrow-max-height-rows": maxRows === 0 ? UNBOUNDED_ROWS : maxRows
+      }
+    } : void 0;
+    const showClear = allowClear && hasText && !props.disabled && !props.readOnly;
+    const needsWrapper = allowClear || autoGrow;
+    const field = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        value,
+        defaultValue,
+        rows: autoGrow ? 1 : rows,
+        onChange: needsWrapper ? handleChange : onChange,
+        onCompositionStart: handleCompositionStart,
+        onCompositionEnd: handleCompositionEnd,
+        style,
+        className: cn(base, showClear && "ui-input--trailing-affix", className),
+        ...props,
+        ...identity
+      }
+    );
+    if (!needsWrapper) return field;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-slot": "textarea-affix-wrapper",
+        "data-autogrow-value": autoGrow ? mirror : void 0,
+        style: autoGrowVars,
+        className: cn(
+          "relative w-full",
+          autoGrow ? "grid" : "block",
+          autoGrow && "ui-textarea-autogrow",
+          autoGrow && variant === "ghost" && "ui-textarea-autogrow--ghost"
+        ),
+        children: [
+          field,
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": t("common.clear") ?? "Clear",
+              onClick: clear,
+              className: "ui-control-inline-affix-action ui-textarea-clear",
+              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null
+        ]
+      }
+    );
   }
 );
 Textarea.displayName = "Textarea";