@godxjp/ui 13.9.3 → 13.11.0

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

@@ -1,4 +1,98 @@
-export { Input } from '../../chunk-K24AQV4R.js';
-import '../../chunk-B6S6LTWT.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+const inputBaseClass = [
+  "ui-control border-input bg-background w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+  "selection:bg-primary selection:text-primary-foreground",
+  "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+  "placeholder:text-muted-foreground",
+  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
+];
+const Input = React.forwardRef(
+  ({ className, type, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+    const { t } = useTranslation();
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [hasText, setHasText] = React.useState(
+      () => String(value ?? defaultValue ?? "").length > 0
+    );
+    React.useEffect(() => {
+      if (value !== void 0) setHasText(String(value).length > 0);
+    }, [value]);
+    const handleChange = (event) => {
+      if (value === void 0) setHasText(event.target.value.length > 0);
+      onChange?.(event);
+    };
+    const clear = () => {
+      const el = innerRef.current;
+      if (el) {
+        const setter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        setter?.call(el, "");
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.focus();
+      }
+      setHasText(false);
+      onClear?.();
+    };
+    if (!allowClear) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          "data-slot": "input",
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange,
+          className: cn(inputBaseClass, className),
+          ...props
+        }
+      );
+    }
+    const showClear = hasText && !props.disabled && !props.readOnly;
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          "data-slot": "input",
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange: handleChange,
+          className: cn(inputBaseClass, 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 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
+    ] });
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};

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

@@ -1,8 +1,4 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { VariantProps } from 'class-variance-authority';
-
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
-
-export { Label };
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;

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

@@ -1,2 +1,25 @@
-export { Label } from '../../chunk-7PWBC4BY.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    "data-slot": "label",
+    className: cn(
+      "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+      labelVariants(),
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+export {
+  Label
+};

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

@@ -0,0 +1,9 @@
+import type { MonthPickerProp } from "../../props/components/data-entry.prop";
+export type { MonthPickerProp, MonthPickerProp as MonthPickerProps, } from "../../props/components/data-entry.prop";
+/**
+ * MonthPicker — year/month (`yyyy/MM`) input with an Ant-Design-style month grid
+ * popover: a year header with chevrons over a 3×4 grid of the twelve months.
+ * 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, }: MonthPickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
+const YM_HINT = "yyyy/mm";
+const toYmText = (d) => d ? `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}` : "";
+const parseYm = (raw) => {
+  const m = /^(\d{4})[/-](\d{1,2})$/.exec(raw.trim());
+  if (!m) return void 0;
+  const month = Number(m[2]);
+  if (month < 1 || month > 12) return void 0;
+  return new Date(Number(m[1]), month - 1, 1);
+};
+function MonthPicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  fromYear,
+  toYear,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const { locale } = usePickerLocales();
+  const [open, setOpen] = React.useState(false);
+  const autoId = React.useId();
+  const inputId = id ?? autoId;
+  const isControlled = React.useRef(valueProp !== void 0).current;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const [text, setText] = React.useState(() => toYmText(value));
+  const [viewYear, setViewYear] = React.useState(() => (value ?? /* @__PURE__ */ new Date()).getFullYear());
+  React.useEffect(() => {
+    setText(toYmText(value));
+    if (value) setViewYear(value.getFullYear());
+  }, [value]);
+  const monthLabels = React.useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2026, i, 1)));
+  }, [locale]);
+  const emit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const showClear = allowClear && Boolean(value) && !disabled;
+  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(
+    "div",
+    {
+      className: cn(
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        open && "border-ring ring-ring/50 ring-[3px]",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: () => {
+        if (!disabled) setOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            name,
+            value: text,
+            disabled,
+            placeholder: placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT,
+            inputMode: "numeric",
+            autoComplete: "off",
+            className: "placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent tabular-nums outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setOpen(true);
+              } else if (event.key === "Escape" && open) {
+                setOpen(false);
+              }
+            },
+            onChange: (event) => {
+              setText(event.target.value);
+              const parsed = parseYm(event.target.value);
+              if (parsed) emit(parsed);
+              else if (event.target.value.trim() === "") emit(void 0);
+            },
+            onBlur: () => setText(toYmText(value))
+          }
+        ),
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": t("common.clear") ?? "Clear",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: (event) => {
+              event.stopPropagation();
+              emit(void 0);
+              setText("");
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            tabIndex: -1,
+            "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Open month grid",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            className: "w-auto p-3",
+            align: "start",
+            onOpenAutoFocus: (event) => event.preventDefault(),
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    disabled: prevDisabled,
+                    "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
+                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    onClick: () => setViewYear((y) => y - 1),
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", "aria-live": "polite", children: viewYear }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    disabled: nextDisabled,
+                    "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
+                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    onClick: () => setViewYear((y) => y + 1),
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "mt-3 grid grid-cols-3 gap-1", children: monthLabels.map((label, i) => {
+                const selected = value?.getFullYear() === viewYear && value?.getMonth() === i;
+                return /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: selected ? "default" : "ghost",
+                    size: "sm",
+                    "aria-pressed": selected,
+                    className: "px-4 font-normal",
+                    onClick: () => {
+                      emit(new Date(viewYear, i, 1));
+                      setOpen(false);
+                    },
+                    children: label
+                  },
+                  label
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  MonthPicker
+};

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

@@ -0,0 +1,11 @@
+import type { MonthRangePickerProp } from "../../props/components/data-entry.prop";
+export type { MonthRangePickerProp, MonthRangePickerProp as MonthRangePickerProps, } from "../../props/components/data-entry.prop";
+/**
+ * MonthRangePicker — year/month (`yyyy/MM`) RANGE rendered as ONE input-styled
+ * control (Ant Design RangePicker convention): `[ from → to  ✕ 📅 ]`. The two
+ * inner fields stay real, typeable `yyyy/MM` inputs (form-submittable via
+ * `${name}_from` / `${name}_to`); the Ant-style month grid is the visual
+ * affordance. Grid picks are two-step (from, then to — swapped when picked
+ * backwards) and a pick on a COMPLETE range starts a new one (reset-on-complete).
+ */
+export declare function MonthRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, }: MonthRangePickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
+const YM_HINT = "yyyy/mm";
+const toYmText = (d) => d ? `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}` : "";
+const parseYm = (raw) => {
+  const m = /^(\d{4})[/-](\d{1,2})$/.exec(raw.trim());
+  if (!m) return void 0;
+  const month = Number(m[2]);
+  if (month < 1 || month > 12) return void 0;
+  return new Date(Number(m[1]), month - 1, 1);
+};
+const ymIndex = (d) => d.getFullYear() * 12 + d.getMonth();
+function MonthRangePicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  fromYear,
+  toYear,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const { locale } = usePickerLocales();
+  const [open, setOpen] = React.useState(false);
+  const autoId = React.useId();
+  const fromId = id ?? autoId;
+  const toId = `${fromId}-to`;
+  const isControlled = React.useRef(valueProp !== void 0).current;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const [fromText, setFromText] = React.useState(() => toYmText(value?.from));
+  const [toText, setToText] = React.useState(() => toYmText(value?.to));
+  const [viewYear, setViewYear] = React.useState(() => (value?.from ?? /* @__PURE__ */ new Date()).getFullYear());
+  React.useEffect(() => {
+    setFromText(toYmText(value?.from));
+    setToText(toYmText(value?.to));
+    if (value?.from) setViewYear(value.from.getFullYear());
+  }, [value?.from, value?.to]);
+  const monthLabels = React.useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2026, i, 1)));
+  }, [locale]);
+  const emit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const showClear = allowClear && Boolean(value?.from || value?.to) && !disabled;
+  const prevDisabled = fromYear !== void 0 && viewYear <= fromYear;
+  const nextDisabled = toYear !== void 0 && viewYear >= toYear;
+  const clear = () => {
+    emit(void 0);
+    setFromText("");
+    setToText("");
+  };
+  const commitEdge = (edge, raw) => {
+    const trimmed = raw.trim();
+    const parsed = trimmed === "" ? void 0 : parseYm(trimmed);
+    if (trimmed !== "" && !parsed) return;
+    const next = { from: value?.from, to: value?.to, [edge]: parsed };
+    if (next.from && next.to && ymIndex(next.from) > ymIndex(next.to)) {
+      const swapped = { from: next.to, to: next.from };
+      emit(swapped);
+      return;
+    }
+    emit(next.from || next.to ? next : void 0);
+  };
+  const pickMonth = (picked) => {
+    const pendingFrom = value?.from && !value?.to ? value.from : void 0;
+    if (!pendingFrom) {
+      emit({ from: picked, to: void 0 });
+      return;
+    }
+    const [from, to] = ymIndex(picked) < ymIndex(pendingFrom) ? [picked, pendingFrom] : [pendingFrom, picked];
+    emit({ from, to });
+    setOpen(false);
+  };
+  const sharedKeyHandlers = {
+    onKeyDown: (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+      } else if (event.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+  };
+  const innerInputClass = "min-w-0 flex-1 bg-transparent tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed";
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT;
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        open && "border-ring ring-ring/50 ring-[3px]",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: () => {
+        if (!disabled) setOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fromId,
+            name: name ? `${name}_from` : void 0,
+            value: fromText,
+            disabled,
+            placeholder: resolvedPlaceholder,
+            inputMode: "numeric",
+            autoComplete: "off",
+            "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
+            className: innerInputClass,
+            ...sharedKeyHandlers,
+            onChange: (event) => {
+              setFromText(event.target.value);
+              commitEdge("from", event.target.value);
+            },
+            onBlur: () => setFromText(toYmText(value?.from))
+          }
+        ),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: toId,
+            name: name ? `${name}_to` : void 0,
+            value: toText,
+            disabled,
+            placeholder: resolvedPlaceholder,
+            inputMode: "numeric",
+            autoComplete: "off",
+            "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
+            className: innerInputClass,
+            ...sharedKeyHandlers,
+            onChange: (event) => {
+              setToText(event.target.value);
+              commitEdge("to", event.target.value);
+            },
+            onBlur: () => setToText(toYmText(value?.to))
+          }
+        ),
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": t("common.clear") ?? "Clear",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: (event) => {
+              event.stopPropagation();
+              clear();
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            tabIndex: -1,
+            "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Open month grid",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            className: "w-auto p-3",
+            align: "start",
+            onOpenAutoFocus: (event) => event.preventDefault(),
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    disabled: prevDisabled,
+                    "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
+                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    onClick: () => setViewYear((y) => y - 1),
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", "aria-live": "polite", children: viewYear }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    disabled: nextDisabled,
+                    "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
+                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    onClick: () => setViewYear((y) => y + 1),
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "mt-3 grid grid-cols-3 gap-1", children: monthLabels.map((label, i) => {
+                const cell = new Date(viewYear, i, 1);
+                const cellIdx = ymIndex(cell);
+                const fromIdx = value?.from ? ymIndex(value.from) : void 0;
+                const toIdx = value?.to ? ymIndex(value.to) : void 0;
+                const isEdge = cellIdx === fromIdx || cellIdx === toIdx;
+                const inRange = fromIdx !== void 0 && toIdx !== void 0 && cellIdx > fromIdx && cellIdx < toIdx;
+                return /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: isEdge ? "default" : inRange ? "secondary" : "ghost",
+                    size: "sm",
+                    "aria-pressed": isEdge,
+                    className: "px-4 font-normal",
+                    onClick: () => pickMonth(cell),
+                    children: label
+                  },
+                  label
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  MonthRangePicker
+};

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { NumberInputProp } from "../../props/components/data-entry.prop";
+export type { NumberInputProp, NumberInputProp as NumberInputProps, } from "../../props/components/data-entry.prop";
+/**
+ * NumberInput — WAI-ARIA spinbutton: a localized numeric `<Input>` with increment/decrement steps.
+ *
+ * Composes the real `Input` primitive (no raw `<input>`) plus two icon `Button`s. The text input is
+ * the `role="spinbutton"` element carrying `aria-valuenow/min/max/text`; type freely, ArrowUp/Down
+ * (Shift = ×10) step, and the value commits clamped + rounded to `precision` on blur/Enter/step.
+ * Display formats via `Intl.NumberFormat` at rest, but stays raw and typeable while focused.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProp & React.RefAttributes<HTMLInputElement>>;