@godxjp/ui 20.0.0 → 20.1.0

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

@@ -33,7 +33,13 @@ 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 { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from "./upload.js";
+import {
+  UPLOAD_LIST_IGNORE,
+  Upload,
+  collectUploadCommitActions,
+  createUploadItem,
+  useUploadDraft
+} from "./upload.js";
 import { Cascader } from "./cascader.js";
 import { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select.js";
 import { Transfer } from "./transfer.js";
@@ -53,6 +59,7 @@ import { Rating } from "./rating.js";
 import { TagInput } from "./tag-input.js";
 import { Segmented } from "./segmented.js";
 import { BranchScopePicker } from "./branch-scope-picker.js";
+import { TimeRangePicker } from "./time-range-picker.js";
 export {
   BranchScopePicker,
   Calendar,
@@ -110,11 +117,13 @@ export {
   TagInput,
   Textarea,
   TimePicker,
+  TimeRangePicker,
   Toggle,
   ToggleGroup,
   ToggleGroupItem,
   Transfer,
   TreeSelect,
+  UPLOAD_LIST_IGNORE,
   Upload,
   collectUploadCommitActions,
   createUploadItem,

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

@@ -1,2 +1,2 @@
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
-export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";
+export type { InputOTPAlignProp, InputOTPMaskProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, InputOTPProp, InputOTPProps, } from "../ui/input-otp.js";

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

@@ -1,39 +1,17 @@
 import * as React from "react";
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
-    size?: "sm" | "md";
-    /** Show an inline ✕ that clears the field while it holds text (default false). */
-    allowClear?: boolean;
-    /** Called after the field is cleared via the inline ✕. */
+export type { InputProp, InputProp as InputProps } from "../../props/components/data-entry.prop.js";
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
+    onValueChange?: (value: string) => void;
+    size?: "sm" | "md" | "lg";
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
+    allowClear?: import("../../props/index.js").AllowClearProp;
     onClear?: () => void;
-    /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
-     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
-     */
     leadingIcon?: React.ReactNode;
-    /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
-     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
-     * clear ✕ REPLACES this icon; otherwise this icon shows.
-     */
-    trailingIcon?: React.ReactNode;
-};
-export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
-    size?: "sm" | "md";
-    /** Show an inline ✕ that clears the field while it holds text (default false). */
-    allowClear?: boolean;
-    /** Called after the field is cleared via the inline ✕. */
-    onClear?: () => void;
-    /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
-     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
-     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
-     * clear ✕ REPLACES this icon; otherwise this icon shows.
-     */
     trailingIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    count?: import("../../props/components/data-entry.prop.js").ControlCountProp;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -5,24 +5,40 @@ import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import {
+  CONTROL_STATUS_CHROME_CLASS,
+  CONTROL_VARIANT_CHROME_CLASS,
+  controlAppearanceAttributes,
+  resolveControlCount
+} from "./control-appearance.js";
+import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
-  "aria-invalid:border-destructive"
+  "aria-invalid:border-destructive",
+  CONTROL_STATUS_CHROME_CLASS
 ];
 const Input = React.forwardRef(
   ({
     size,
+    status,
+    variant = "outlined",
     className,
     type,
-    allowClear = false,
+    allowClear,
     onClear,
     leadingIcon,
     trailingIcon,
+    prefix,
+    suffix,
+    addonBefore,
+    addonAfter,
+    count,
     value,
     defaultValue,
     onChange,
+    onValueChange,
     ...props
   }, ref) => {
     const { t } = useTranslation();
@@ -35,6 +51,11 @@ const Input = React.forwardRef(
       name: props.name,
       "data-field": props["data-field"]
     });
+    const appearance = controlAppearanceAttributes({
+      status,
+      variant,
+      "aria-invalid": props["aria-invalid"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -44,15 +65,15 @@ const Input = React.forwardRef(
       },
       [ref]
     );
-    const [hasText, setHasText] = React.useState(
-      () => String(value ?? defaultValue ?? "").length > 0
-    );
+    const [text, setText] = React.useState(() => String(value ?? defaultValue ?? ""));
+    const hasText = text.length > 0;
     React.useEffect(() => {
-      if (value !== void 0) setHasText(String(value).length > 0);
+      if (value !== void 0) setText(String(value));
     }, [value]);
     const handleChange = (event) => {
-      if (value === void 0) setHasText(event.target.value.length > 0);
+      if (value === void 0) setText(event.target.value);
       onChange?.(event);
+      if (onChange !== onValueChange) onValueChange?.(event.target.value);
     };
     const clear = () => {
       const el = innerRef.current;
@@ -65,11 +86,17 @@ const Input = React.forwardRef(
         el.dispatchEvent(new Event("input", { bubbles: true }));
         el.focus();
       }
-      setHasText(false);
+      setText("");
       onClear?.();
     };
-    if (!allowClear && trailingIcon == null && leadingIcon == null) {
-      return /* @__PURE__ */ jsx(
+    const clearControl = resolveAllowClear(allowClear, false, t("common.clear") ?? "Clear");
+    const chrome = CONTROL_VARIANT_CHROME_CLASS[variant];
+    const counter = resolveControlCount(count, text);
+    const leading = prefix ?? leadingIcon;
+    const leadingIsDecorative = prefix == null;
+    const hasAddon = addonBefore != null || addonAfter != null;
+    if (!clearControl.enabled && leading == null && trailingIcon == null && suffix == null && !counter) {
+      const bare = /* @__PURE__ */ jsx(
         "input",
         {
           type,
@@ -78,28 +105,38 @@ const Input = React.forwardRef(
           ref: setRefs,
           value,
           defaultValue,
-          onChange,
-          className: cn(inputBaseClass, className),
+          onChange: handleChange,
+          className: cn(inputBaseClass, chrome, className),
           ...props,
           ...nameFallback,
-          ...identity
+          ...identity,
+          ...appearance
         }
       );
+      return hasAddon ? withAddons(bare, addonBefore, addonAfter, size, appearance) : bare;
     }
-    const showClear = allowClear && hasText && !props.disabled && !props.readOnly;
+    const showClear = clearControl.enabled && hasText && !props.disabled && !props.readOnly;
     const trailing = showClear ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         tabIndex: -1,
-        "aria-label": t("common.clear") ?? "Clear",
+        "aria-label": clearControl.label,
         onClick: clear,
         className: "ui-control-inline-affix-action",
-        children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+        children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
       }
-    ) : trailingIcon;
-    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "ui-input-affix-wrapper", children: [
-      leadingIcon != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-leading", "aria-hidden": "true", className: "ui-input-leading", children: leadingIcon }) : null,
+    ) : suffix ?? trailingIcon;
+    const affixed = /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "ui-input-affix-wrapper", children: [
+      leading != null ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "input-leading",
+          "aria-hidden": leadingIsDecorative ? "true" : void 0,
+          className: "ui-input-leading",
+          children: leading
+        }
+      ) : null,
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -112,20 +149,51 @@ const Input = React.forwardRef(
           onChange: handleChange,
           className: cn(
             inputBaseClass,
-            leadingIcon != null && "ui-input--leading-affix",
-            (showClear || trailingIcon != null) && "ui-input--trailing-affix",
+            chrome,
+            leading != null && "ui-input--leading-affix",
+            (trailing != null || counter !== null) && "ui-input--trailing-affix",
             className
           ),
           ...props,
           ...nameFallback,
-          ...identity
+          ...identity,
+          ...appearance
         }
       ),
-      trailing != null ? /* @__PURE__ */ jsx("span", { className: "ui-input-trailing", children: trailing }) : null
+      trailing != null || counter !== null ? /* @__PURE__ */ jsxs("span", { className: "ui-input-trailing", children: [
+        counter ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "input-count",
+            "data-exceeded": counter.exceeded ? "true" : void 0,
+            className: "ui-control-count",
+            "aria-hidden": "true",
+            children: counter.content
+          }
+        ) : null,
+        trailing
+      ] }) : null
     ] });
+    return hasAddon ? withAddons(affixed, addonBefore, addonAfter, size, appearance) : affixed;
   }
 );
 Input.displayName = "Input";
+function withAddons(field, addonBefore, addonAfter, size, appearance) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "input-group",
+      "data-size": size,
+      "data-status": appearance["data-status"],
+      className: "ui-input-group",
+      children: [
+        addonBefore != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-addon-before", className: "ui-input-addon", children: addonBefore }) : null,
+        field,
+        addonAfter != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-addon-after", className: "ui-input-addon", children: addonAfter }) : null
+      ]
+    }
+  );
+}
 export {
   Input
 };

package/dist/components/data-entry/month-picker.d.ts

@@ -7,4 +7,4 @@ export type { MonthPickerProp, MonthPickerProp as MonthPickerProps, } from "../.
  * The field stays a real, typeable input (form-submittable via `name` as
  * `yyyy-MM`); the grid is the visual affordance.
  */
-export declare function MonthPicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, ...ariaProps }: MonthPickerProp): React.JSX.Element;
+export declare function MonthPicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, open: openProp, defaultOpen, onOpenChange, status, variant, size, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, ref, ...ariaProps }: MonthPickerProp): React.JSX.Element;

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

@@ -6,6 +6,8 @@ import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js"
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import { resolveAllowClear, resolveAriaInvalid } 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";
@@ -28,12 +30,33 @@ function MonthPicker({
   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 autoId = React.useId();
   const inputId = id ?? autoId;
   const dialogId = `${inputId}-dialog`;
@@ -56,7 +79,8 @@ function MonthPicker({
     if (!isControlled) setInternalValue(next);
     onValueChange?.(next);
   };
-  const showClear = allowClear && Boolean(value) && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && Boolean(value) && !disabled && !inputReadOnly;
   const prevDisabled = fromYear !== void 0 && viewYear <= fromYear;
   const nextDisabled = toYear !== void 0 && viewYear >= toYear;
   return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -64,9 +88,14 @@ function MonthPicker({
     {
       "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: () => {
@@ -76,11 +105,13 @@ function MonthPicker({
         /* @__PURE__ */ jsx(
           "input",
           {
+            ref,
             id: inputId,
             name: name ?? identity.name,
             "data-field": fieldA11y["data-field"] ?? identity["data-field"],
             value: text,
             disabled,
+            readOnly: inputReadOnly,
             placeholder: placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT,
             inputMode: "numeric",
             autoComplete: "off",
@@ -88,7 +119,9 @@ function MonthPicker({
             "aria-expanded": open,
             "aria-haspopup": "dialog",
             "aria-controls": open ? dialogId : void 0,
+            "aria-readonly": inputReadOnly || void 0,
             ...fieldA11y,
+            "aria-invalid": resolveAriaInvalid(fieldA11y["aria-invalid"], status),
             className: "ui-month-picker-input",
             onKeyDown: (event) => {
               if (event.key === "ArrowDown") {
@@ -104,7 +137,9 @@ function MonthPicker({
               if (parsed) emit(parsed);
               else if (event.target.value.trim() === "") emit(void 0);
             },
-            onBlur: () => setText(toYmText(value))
+            onBlur: () => {
+              if (!preserveInvalidOnBlur) setText(toYmText(value));
+            }
           }
         ),
         showClear ? /* @__PURE__ */ jsx(
@@ -112,17 +147,17 @@ function MonthPicker({
           {
             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();
               emit(void 0);
               setText("");
             },
-            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",
@@ -140,7 +175,8 @@ function MonthPicker({
             role: "dialog",
             "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Month grid",
             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: [
@@ -191,7 +227,8 @@ function MonthPicker({
                   },
                   label
                 );
-              }) })
+              }) }),
+              renderExtraFooter?.()
             ]
           }
         )

package/dist/components/data-entry/month-range-picker.d.ts

@@ -7,4 +7,4 @@ export type { MonthRangePickerProp, MonthRangePickerProp as MonthRangePickerProp
  * `yyyy/MM` inputs (form-submittable via `${name}_from` / `${name}_to`); the Ant-style month grid
  * is the visual affordance.
  */
-export declare function MonthRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, ...ariaProps }: MonthRangePickerProp): React.JSX.Element;
+export declare function MonthRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, open: openProp, defaultOpen, onOpenChange, status, variant, size, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, ref, ...ariaProps }: MonthRangePickerProp): React.JSX.Element;

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;