@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-entry/month-range-picker.js

@@ -6,6 +6,8 @@ import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js"
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import { resolveAllowClear } from "./control-surface.js";
+import { CONTROL_STATUS_CHROME_CLASS, CONTROL_VARIANT_CHROME_CLASS } from "./control-appearance.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 const YM_HINT = "yyyy/mm";
@@ -29,12 +31,33 @@ function MonthRangePicker({
   name,
   fromYear,
   toYear,
-  allowClear = true,
+  allowClear,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  status,
+  variant,
+  size,
+  inputReadOnly,
+  preserveInvalidOnBlur,
+  placement = "bottom-start",
+  renderExtraFooter,
+  ref,
   ...ariaProps
 }) {
   const { t } = useTranslation();
   const { locale } = usePickerLocales();
-  const [open, setOpen] = React.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpenControlled = openProp !== void 0;
+  const open = isOpenControlled ? openProp : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (next && inputReadOnly) return;
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange, inputReadOnly]
+  );
   const groupA11y = pickGroupFieldA11y(ariaProps);
   const autoId = React.useId();
   const groupId = id ?? autoId;
@@ -62,7 +85,8 @@ function MonthRangePicker({
     if (!isControlled) setInternalValue(next);
     onValueChange?.(next);
   };
-  const showClear = allowClear && Boolean(value?.from || value?.to) && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && Boolean(value?.from || value?.to) && !disabled && !inputReadOnly;
   const prevDisabled = fromYear !== void 0 && viewYear <= fromYear;
   const nextDisabled = toYear !== void 0 && viewYear >= toYear;
   const clear = () => {
@@ -114,9 +138,14 @@ function MonthRangePicker({
       "aria-disabled": disabled ? true : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-state": open ? "open" : "closed",
+      "data-size": size,
+      "data-status": status,
+      "data-variant": variant,
       className: cn(
         "ui-control ui-control-composite-field",
         "aria-invalid:border-destructive",
+        CONTROL_VARIANT_CHROME_CLASS[variant ?? "outlined"],
+        CONTROL_STATUS_CHROME_CLASS,
         className
       ),
       onClick: () => {
@@ -126,11 +155,14 @@ function MonthRangePicker({
         /* @__PURE__ */ jsx(
           "input",
           {
+            ref,
             id: fromId,
             "data-field": rangeField ? `${rangeField}_from` : void 0,
             name: rangeName ? `${rangeName}_from` : void 0,
             value: fromText,
             disabled,
+            readOnly: inputReadOnly,
+            "aria-readonly": inputReadOnly || void 0,
             placeholder: resolvedPlaceholder,
             inputMode: "numeric",
             autoComplete: "off",
@@ -141,7 +173,9 @@ function MonthRangePicker({
               setFromText(event.target.value);
               commitEdge("from", event.target.value);
             },
-            onBlur: () => setFromText(toYmText(value?.from))
+            onBlur: () => {
+              if (!preserveInvalidOnBlur) setFromText(toYmText(value?.from));
+            }
           }
         ),
         /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
@@ -153,6 +187,8 @@ function MonthRangePicker({
             name: rangeName ? `${rangeName}_to` : void 0,
             value: toText,
             disabled,
+            readOnly: inputReadOnly,
+            "aria-readonly": inputReadOnly || void 0,
             placeholder: resolvedPlaceholder,
             inputMode: "numeric",
             autoComplete: "off",
@@ -163,7 +199,9 @@ function MonthRangePicker({
               setToText(event.target.value);
               commitEdge("to", event.target.value);
             },
-            onBlur: () => setToText(toYmText(value?.to))
+            onBlur: () => {
+              if (!preserveInvalidOnBlur) setToText(toYmText(value?.to));
+            }
           }
         ),
         showClear ? /* @__PURE__ */ jsx(
@@ -171,16 +209,16 @@ function MonthRangePicker({
           {
             type: "button",
             tabIndex: -1,
-            "aria-label": t("common.clear") ?? "Clear",
+            "aria-label": clearControl.label,
             className: "text-muted-foreground hover:text-foreground shrink-0",
             onClick: (event) => {
               event.stopPropagation();
+              event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
               clear();
             },
-            children: /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
+            children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
-        ) : null,
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -195,7 +233,8 @@ function MonthRangePicker({
           PopoverContent,
           {
             className: "ui-month-picker-panel",
-            align: "start",
+            side: placement.startsWith("top") ? "top" : "bottom",
+            align: placement.endsWith("end") ? "end" : "start",
             onOpenAutoFocus: (event) => event.preventDefault(),
             onClick: (event) => event.stopPropagation(),
             children: [
@@ -248,7 +287,8 @@ function MonthRangePicker({
                   },
                   label
                 );
-              }) })
+              }) }),
+              renderExtraFooter?.()
             ]
           }
         )

package/dist/components/data-entry/number-input.d.ts

@@ -12,6 +12,13 @@ export declare const NumberInput: React.ForwardRefExoticComponent<import("../../
     max?: number;
     step?: number;
     precision?: number;
+    formatter?: (value: number | null) => string;
+    parser?: (display: string) => number | null;
+    keyboard?: boolean;
+    changeOnWheel?: boolean;
+    controls?: boolean;
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
     disabled?: import("../../props/index.js").DisabledProp;
     readOnly?: boolean;
     size?: import("../../props/index.js").SizeProp;

package/dist/components/data-entry/number-input.js

@@ -19,6 +19,9 @@ function clamp(n, min, max) {
   if (max != null && out > max) out = max;
   return out;
 }
+function normalizeNumeric(raw) {
+  return raw.normalize("NFKC").replace(/,/g, "");
+}
 function roundTo(n, precision) {
   if (!Number.isFinite(n)) return n;
   const factor = 10 ** precision;
@@ -33,6 +36,13 @@ const NumberInput = React.forwardRef(
     max,
     step = 1,
     precision,
+    formatter,
+    parser,
+    keyboard = true,
+    changeOnWheel = false,
+    controls = true,
+    status,
+    variant,
     disabled,
     readOnly,
     size = "md",
@@ -51,7 +61,7 @@ const NumberInput = React.forwardRef(
     const [internal, setInternal] = React.useState(defaultValue);
     const numericValue = isControlled ? controlledValue ?? null : internal;
     const effectivePrecision = precision ?? decimalsOf(step);
-    const formatter = React.useMemo(
+    const intlFormatter = React.useMemo(
       () => new Intl.NumberFormat(locale, {
         minimumFractionDigits: 0,
         maximumFractionDigits: Math.max(effectivePrecision, 0),
@@ -60,8 +70,18 @@ const NumberInput = React.forwardRef(
       [locale, effectivePrecision]
     );
     const formatAtRest = React.useCallback(
-      (n) => n == null ? "" : formatter.format(n),
-      [formatter]
+      (n) => formatter ? formatter(n) : n == null ? "" : intlFormatter.format(n),
+      [formatter, intlFormatter]
+    );
+    const parseDraft = React.useCallback(
+      (raw) => {
+        if (parser) return parser(raw);
+        const trimmed = normalizeNumeric(raw).trim();
+        if (trimmed === "" || trimmed === "-") return null;
+        const parsed = Number(trimmed);
+        return Number.isNaN(parsed) ? null : parsed;
+      },
+      [parser]
     );
     const [draft, setDraft] = React.useState(() => formatAtRest(numericValue));
     const [focused, setFocused] = React.useState(false);
@@ -91,126 +111,155 @@ const NumberInput = React.forwardRef(
     const atMin = min != null && numericValue != null && numericValue <= min;
     const atMax = max != null && numericValue != null && numericValue >= max;
     const interactive = !disabled && !readOnly;
+    const composing = React.useRef(false);
     const handleChange = (event) => {
       const raw = event.target.value;
       setDraft(raw);
       if (readOnly) return;
-      const trimmed = raw.trim();
+      if (composing.current || event.nativeEvent.isComposing) return;
+      const trimmed = normalizeNumeric(raw).trim();
       if (trimmed === "" || trimmed === "-") {
         if (trimmed === "") commit(null);
         return;
       }
-      const parsed = Number(trimmed);
-      if (Number.isNaN(parsed)) return;
+      const parsed = parseDraft(raw);
+      if (parsed == null) return;
       if (!isControlled) setInternal(parsed);
       onValueChange?.(parsed);
     };
-    const handleBlur = () => {
-      setFocused(false);
-      const trimmed = draft.trim();
-      if (trimmed === "" || trimmed === "-") {
-        commit(null);
-        setDraft(formatAtRest(null));
+    const handleCompositionStart = () => {
+      composing.current = true;
+    };
+    const handleCompositionEnd = (event) => {
+      composing.current = false;
+      if (readOnly) return;
+      const raw = event.currentTarget.value;
+      const parsed = parseDraft(raw);
+      if (parsed == null) {
+        if (normalizeNumeric(raw).trim() === "") commit(null);
         return;
       }
-      const parsed = Number(trimmed);
-      const committed = commit(Number.isNaN(parsed) ? null : parsed);
+      if (!isControlled) setInternal(parsed);
+      onValueChange?.(parsed);
+    };
+    const handleBlur = () => {
+      setFocused(false);
+      const committed = commit(parseDraft(draft));
       setDraft(formatAtRest(committed));
     };
     const handleKeyDown = (event) => {
       if (!interactive) return;
-      if (event.key === "ArrowUp") {
+      if (composing.current || event.nativeEvent.isComposing) return;
+      if (keyboard && event.key === "ArrowUp") {
         event.preventDefault();
         stepBy(1, event.shiftKey ? 10 : 1);
-      } else if (event.key === "ArrowDown") {
+      } else if (keyboard && event.key === "ArrowDown") {
         event.preventDefault();
         stepBy(-1, event.shiftKey ? 10 : 1);
       } else if (event.key === "Enter") {
-        const trimmed = draft.trim();
-        const parsed = Number(trimmed);
-        const committed = commit(trimmed === "" || Number.isNaN(parsed) ? null : parsed);
+        const committed = commit(parseDraft(draft));
         setDraft(formatAtRest(committed));
       }
     };
-    return /* @__PURE__ */ jsxs("div", { "data-slot": "number-input", "data-size": size, className: cn("ui-number-input", className), children: [
-      prefix != null ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "number-input-prefix",
-          className: "ui-number-input-affix",
-          "aria-hidden": "true",
-          children: prefix
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          ref,
-          id,
-          name,
-          type: "text",
-          inputMode: "decimal",
-          autoComplete: "off",
-          role: "spinbutton",
-          "data-slot": "number-input-field",
-          "data-testid": dataTestId,
-          "data-field": ariaProps["data-field"],
-          className: "ui-number-input-field",
-          value: draft,
-          placeholder,
-          disabled,
-          readOnly,
-          ...fieldA11y,
-          "aria-valuenow": numericValue ?? void 0,
-          "aria-valuemin": min,
-          "aria-valuemax": max,
-          "aria-valuetext": numericValue != null ? formatAtRest(numericValue) : void 0,
-          onChange: handleChange,
-          onFocus: () => setFocused(true),
-          onBlur: handleBlur,
-          onKeyDown: handleKeyDown
-        }
-      ),
-      suffix != null ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "number-input-suffix",
-          className: "ui-number-input-affix",
-          "aria-hidden": "true",
-          children: suffix
-        }
-      ) : null,
-      /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "icon-xs",
-            className: "ui-number-input-step ui-number-input-step-up",
-            tabIndex: -1,
-            disabled: !interactive || atMax,
-            "aria-label": t("ui.numberInput.increment"),
-            onClick: () => stepBy(1),
-            children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "icon-xs",
-            className: "ui-number-input-step ui-number-input-step-down",
-            tabIndex: -1,
-            disabled: !interactive || atMin,
-            "aria-label": t("ui.numberInput.decrement"),
-            onClick: () => stepBy(-1),
-            children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
-          }
-        )
-      ] })
-    ] });
+    const handleWheel = (event) => {
+      if (!changeOnWheel || !interactive || !focused || event.deltaY === 0) return;
+      stepBy(event.deltaY < 0 ? 1 : -1);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "number-input",
+        "data-size": size,
+        "data-status": status,
+        "data-variant": variant,
+        "data-controls": controls ? void 0 : "off",
+        className: cn("ui-number-input", className),
+        children: [
+          prefix != null ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "number-input-prefix",
+              className: "ui-number-input-affix",
+              "aria-hidden": "true",
+              children: prefix
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref,
+              id,
+              name,
+              type: "text",
+              inputMode: "decimal",
+              autoComplete: "off",
+              role: "spinbutton",
+              "data-slot": "number-input-field",
+              "data-testid": dataTestId,
+              "data-field": ariaProps["data-field"],
+              className: "ui-number-input-field",
+              value: draft,
+              placeholder,
+              disabled,
+              readOnly,
+              status,
+              variant,
+              ...fieldA11y,
+              "aria-valuenow": numericValue ?? void 0,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuetext": numericValue != null ? formatAtRest(numericValue) : void 0,
+              onChange: handleChange,
+              onCompositionStart: handleCompositionStart,
+              onCompositionEnd: handleCompositionEnd,
+              onFocus: () => setFocused(true),
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              onWheel: handleWheel
+            }
+          ),
+          suffix != null ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "number-input-suffix",
+              className: "ui-number-input-affix",
+              "aria-hidden": "true",
+              children: suffix
+            }
+          ) : null,
+          controls ? /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "icon-xs",
+                className: "ui-number-input-step ui-number-input-step-up",
+                tabIndex: -1,
+                disabled: !interactive || atMax,
+                "aria-label": t("ui.numberInput.increment"),
+                onClick: () => stepBy(1),
+                children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "icon-xs",
+                className: "ui-number-input-step ui-number-input-step-down",
+                tabIndex: -1,
+                disabled: !interactive || atMin,
+                "aria-label": t("ui.numberInput.decrement"),
+                onClick: () => stepBy(-1),
+                children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
   }
 );
 NumberInput.displayName = "NumberInput";

package/dist/components/data-entry/password-input.d.ts

@@ -1,2 +1,2 @@
 export { PasswordInput } from "../ui/password-input.js";
-export type { PasswordInputProps } from "../ui/password-input.js";
+export type { PasswordInputProps, PasswordVisibilityToggleProp } from "../ui/password-input.js";

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

@@ -4,7 +4,7 @@ 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 function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, ...ariaProps }: RadioGroupProp): React.JSX.Element;
+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>>;

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
@@ -42,12 +42,35 @@ const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 RadioItem.displayName = RadioGroupPrimitive.Item.displayName;
+function RadioButtonBar({
+  options,
+  value,
+  optionDomId,
+  resolvedField
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: options.map((opt, index) => /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      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 })
+    },
+    opt.value
+  )) });
+}
 function RadioGroupOptions({
   value,
   defaultValue,
   onValueChange,
   options,
   orientation = "vertical",
+  optionType = "default",
+  buttonStyle = "outline",
   disabled,
   name,
   id,
@@ -62,7 +85,7 @@ function RadioGroupOptions({
   const resolvedField = groupA11y["data-field"] ?? identity["data-field"];
   const optionDomId = (optionValue, index) => id ? `${id}-${optionValue}` : `${reactId}-${optionValue}-${index}`;
   if (options && options.length > 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       RadioGroupRoot,
       {
         value,
@@ -74,19 +97,44 @@ function RadioGroupOptions({
         ...groupA11y,
         "data-field": resolvedField,
         "data-orientation": orientation,
-        className: choiceGroupClassName(orientation, className),
-        children: options.map((opt, index) => {
-          const optionId = optionDomId(opt.value, index);
-          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
-            RadioItem,
+        "data-option-type": optionType === "default" ? void 0 : optionType,
+        "data-button-style": optionType === "button" ? buttonStyle : void 0,
+        className: cn(
+          optionType === "button" ? "ui-radio-button-bar" : choiceGroupClassName(orientation),
+          className
+        ),
+        children: [
+          optionType === "button" ? /* @__PURE__ */ jsx(
+            RadioButtonBar,
             {
-              id: optionId,
-              value: opt.value,
-              disabled: opt.disabled,
-              "data-field": resolvedField
+              options,
+              value,
+              optionDomId,
+              resolvedField
             }
-          ) }, opt.value);
-        })
+          ) : null,
+          optionType === "button" ? null : options.map((opt, index) => {
+            const optionId = optionDomId(opt.value, index);
+            return /* @__PURE__ */ jsx(
+              Field,
+              {
+                id: optionId,
+                label: opt.label,
+                description: opt.description,
+                children: /* @__PURE__ */ jsx(
+                  RadioItem,
+                  {
+                    id: optionId,
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    "data-field": resolvedField
+                  }
+                )
+              },
+              opt.value
+            );
+          })
+        ]
       }
     );
   }

package/dist/components/data-entry/search-input.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { SearchInputProp } from "../../props/components/data-entry.prop.js";
 export type SearchInputProps = SearchInputProp;
-export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, ...ariaProps }: SearchInputProps): React.JSX.Element;
+export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, status, variant, ...ariaProps }: SearchInputProps): React.JSX.Element;

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

@@ -21,13 +21,18 @@ function SearchInput({
   inputClassName,
   id,
   disabled = false,
+  status,
+  variant,
   ...ariaProps
 }) {
   const { t } = useTranslation();
   const isControlled = controlledValue !== void 0;
   const [internal, setInternal] = React.useState(defaultValue);
   const value = isControlled ? controlledValue : internal;
-  const debounced = useDebouncedValue(value, debounce);
+  const [composing, setComposing] = React.useState(false);
+  const settledValue = React.useRef(value);
+  if (!composing) settledValue.current = value;
+  const debounced = useDebouncedValue(composing ? settledValue.current : value, debounce);
   const reactId = React.useId();
   const inputId = id ?? `search-${reactId}`;
   const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
@@ -61,10 +66,19 @@ function SearchInput({
           onChange: (e) => {
             setValue(e.target.value);
           },
+          onCompositionStart: () => {
+            setComposing(true);
+          },
+          onCompositionEnd: (e) => {
+            setComposing(false);
+            setValue(e.currentTarget.value);
+          },
           placeholder: resolvedPlaceholder,
+          status,
+          variant,
           ...fieldA11y,
           className: cn(
-            "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
+            "ui-search-input-control !ps-[var(--search-input-start-padding)] !pe-[var(--search-input-end-padding)]",
             inputClassName
           ),
           disabled

package/dist/components/data-entry/search-select.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { SearchSelectProp } from "../../props/components/data-entry.prop.js";
-export type { SearchSelectProp, SearchSelectProp as SearchSelectProps, SearchSelectOptionProp, SearchSelectOptionProp as SearchSelectOption, SearchSelectLoadParamsProp, SearchSelectLoadResultProp, } from "../../props/components/data-entry.prop.js";
+export type { SearchSelectProp, SearchSelectProp as SearchSelectProps, SearchSelectBaseProp, SearchSelectSingleProp, SearchSelectMultipleProp, SearchSelectOptionProp, SearchSelectOptionProp as SearchSelectOption, SearchSelectLoadParamsProp, SearchSelectLoadResultProp, } from "../../props/components/data-entry.prop.js";
 /**
  * SearchSelect — a searchable single-select combobox with a debounced search box, optional
  * optgroup-style grouping (`option.group`), and loading/empty states. Drive it EITHER remotely
  * with `loadOptions({ query, page })` (server search + infinite scroll) OR with a static `options`
  * array (client-side filter) — the latter supersedes the legacy `Autocomplete`.
  */
-export declare function SearchSelect({ value: valueProp, defaultValue, onValueChange, options: staticOptions, loadOptions, renderOption, labelRender, selectedLabel, selectedIcon, placeholder, searchPlaceholder, emptyMessage, loadingMessage, errorMessage, clearLabel, clearable, disabled, readOnly, size, open: openProp, onOpenChange, search: searchProp, onSearchChange, filterOption, renderError, renderLoadMore, name, id, className, "data-testid": dataTestId, "data-field": dataField, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, }: SearchSelectProp): React.JSX.Element;
+export declare function SearchSelect(props: SearchSelectProp): React.JSX.Element;