@godxjp/ui 21.0.0 → 22.0.0

package/docs/roadmap/parity-backlog.md

@@ -23,19 +23,18 @@ compared against, or successive waves will silently measure against different ta
 
 ## P0 — fix first, regardless of which strategy wins
 
-| # | Defect | Evidence | Why P0 |
-| --- | --- | --- | --- |
-| 1 | **`NumberInput` corrupts values 10× in comma-decimal locales, including shipped `vi`** | formats via `Intl.NumberFormat` (`number-input.tsx:100`), parses via hardcoded `replace(/,/g,"")` (`:41`), `handleBlur` re-parses the displayed draft (`:220`). `Intl.NumberFormat("vi",{useGrouping:false}).format(1.5)` → `"1,5"` → parses back as `15` | Silent money/quantity corruption. Focus-then-blur is enough. Keep the NFKC 全角 fold — it is correct. |
-| 2 | **`Timeline` hardcodes English screen-reader status text** | `SR_PREFIX = {done:"Completed: ",…}` `timeline.tsx:31-35`, injected `:107`; `grep timeline src/i18n/messages/en.json` → 0 hits | A ja/vi product announces English. Violates the mandatory i18n gate. |
-| 3 | **`PasswordStrength` is hardcoded English end-to-end** | `password-strength.tsx:4-8,75,106,113,119-133`; never imports `useTranslation`; `labels` overrides only 3 of ~10 strings | Same gate; and consumers cannot work around it. |
+| #   | Defect                                                                                 | Evidence                                                                                                                                                                                                                                                  | Why P0                                                                                                |
+| --- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| 1   | **`NumberInput` corrupts values 10× in comma-decimal locales, including shipped `vi`** | formats via `Intl.NumberFormat` (`number-input.tsx:100`), parses via hardcoded `replace(/,/g,"")` (`:41`), `handleBlur` re-parses the displayed draft (`:220`). `Intl.NumberFormat("vi",{useGrouping:false}).format(1.5)` → `"1,5"` → parses back as `15` | Silent money/quantity corruption. Focus-then-blur is enough. Keep the NFKC 全角 fold — it is correct. |
+| 2   | **`Timeline` hardcodes English screen-reader status text**                             | `SR_PREFIX = {done:"Completed: ",…}` `timeline.tsx:31-35`, injected `:107`; `grep timeline src/i18n/messages/en.json` → 0 hits                                                                                                                            | A ja/vi product announces English. Violates the mandatory i18n gate.                                  |
+| 3   | **`PasswordStrength` is hardcoded English end-to-end**                                 | `password-strength.tsx:4-8,75,106,113,119-133`; never imports `useTranslation`; `labels` overrides only 3 of ~10 strings                                                                                                                                  | Same gate; and consumers cannot work around it.                                                       |
 
 ## P1 — grouped by owning file, so one agent owns one group
 
 **`data-entry`** — `Slider` missing `aria-valuetext` (`slider.tsx:138-157`) · `SearchInput` Enter does
 not commit (no `onKeyDown` in the file; `:59-63`) · `ColorPicker` has no `size`/`status`/`variant`
 and no `presets` (`data-entry.prop.ts:893-908`) · `PasswordStrength` uses `role="img"` instead of
-`role="meter"` (`:74-76`) · `Upload showUploadList` boolean-only (`:1196`) · `DateRangePicker
-disabled` scalar, cannot lock one end (`:787`) · no `defaultPickerValue` on either date picker ·
+`role="meter"` (`:74-76`) · `Upload showUploadList` boolean-only (`:1196`) ·
 `Transfer` has no `status` (`:1413-1459`) · `Cascader` search uncapped (`cascader.tsx:389-393`) ·
 `Select` lacks `fieldNames` although `Cascader` and `TreeSelect` both have it · `NumberInput` has
 no `stringMode`.

package/docs/showcase/acme-portal.tsx

@@ -112,6 +112,13 @@ const THEME = `
   --warning: 41 73% 53%;  --warning-foreground: 217 61% 12%;  /* = brand gold */
   --destructive: 12 83% 44%; --destructive-foreground: 0 0% 100%;
   --info: 217 69% 47%; --info-foreground: 0 0% 100%;
+  /* A TRACK IS A QUIET SURFACE, AND THIS THEME REPOINTED --secondary AT AN ACTION COLOUR.
+     Progress reads --progress-track-background, which defaults to hsl(var(--secondary)) — a pale
+     neutral in the stock palette. Here --secondary is the navy BUTTON, so the bar's track came out
+     near-black and the fill (a MARK: nothing is written on it, so SC 1.4.11 asks 3:1 against the
+     track) measured 2.50:1 success / 2.90:1 warning on it. Naming the track is the fix; the fills
+     then sit on --muted like everywhere else. Any theme that repurposes --secondary owes this line. */
+  --progress-track-background: hsl(var(--muted));
   /* Shape - base radius + exact ACME steps; re-declare the intermediates so the scope re-resolves */
   --radius: 0.875rem;                /* 14px card */
   --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "21.0.0",
-  "godxUiMcp": "21.0.0",
+  "version": "22.0.0",
+  "godxUiMcp": "22.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -213,10 +213,6 @@
       "types": "./dist/components/data-entry/date-picker.d.ts",
       "import": "./dist/components/data-entry/date-picker.js"
     },
-    "./ui/date-range-picker": {
-      "types": "./dist/components/data-entry/date-range-picker.d.ts",
-      "import": "./dist/components/data-entry/date-range-picker.js"
-    },
     "./ui/time-picker": {
       "types": "./dist/components/data-entry/time-picker.d.ts",
       "import": "./dist/components/data-entry/time-picker.js"
@@ -350,16 +346,17 @@
     "check:layout-nav-closure": "for frames in layout-flex,layout-app-shell,layout-aspect-ratio,layout-auth-shell layout-page-container,layout-resizable-panel,layout-separator,layout-sidebar layout-split-pane,layout-topbar,navigation-breadcrumb,navigation-app-setting-picker navigation-context-menu,navigation-dropdown-menu,navigation-menubar,navigation-navigation-menu navigation-steps,navigation-toolbar,navigation-tabs,navigation-pagination; do FRAMES=$frames node scripts/check-layout-nav-closure.mjs || exit 1; done",
     "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
     "check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
+    "check:tabs-overflow-menu": "node scripts/check-tabs-overflow-menu.mjs",
     "check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
     "check:timeline-title-fill": "node scripts/check-timeline-title-fill.mjs",
     "check:descriptions-label-value-step": "node scripts/check-descriptions-label-value-step.mjs",
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
-    "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs && pnpm check:timeline-title-fill && pnpm check:descriptions-label-value-step",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:tabs-overflow-menu && pnpm check:button-icon-xs && pnpm check:timeline-title-fill && pnpm check:descriptions-label-value-step",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
     "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
@@ -383,6 +380,7 @@
     "check:no-hardcoded-geometry": "node scripts/check-no-hardcoded-geometry.mjs",
     "check:no-external-assets": "node scripts/check-no-external-assets.mjs",
     "check:no-hardcoded-css-values": "node scripts/check-no-hardcoded-css-values.mjs",
+    "check:disclosure-duplication": "node scripts/check-disclosure-duplication.mjs",
     "check:no-inline-magic-numbers": "node scripts/check-no-inline-magic-numbers.mjs",
     "check:no-tailwind-class-assertions": "node scripts/check-no-tailwind-class-assertions.mjs",
     "check:control-sizing": "node scripts/check-control-sizing.mjs",
@@ -390,6 +388,7 @@
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
     "check:no-antd-runtime": "node scripts/check-no-antd-runtime.mjs",
+    "check:radix-surface": "node scripts/check-radix-surface.mjs",
     "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
@@ -414,7 +413,8 @@
     "check:frame-geometry": "node scripts/frame-geometry.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
-    "check:use-client": "node scripts/check-use-client.mjs"
+    "check:use-client": "node scripts/check-use-client.mjs",
+    "check:catalog-snippets": "node scripts/audit-catalog-snippets.mjs"
   },
   "peerDependencies": {
     "@axe-core/playwright": "*",
@@ -449,31 +449,19 @@
     "@fontsource/m-plus-2": "^5.3.0",
     "@fontsource/noto-sans-jp": "^5.3.0",
     "@radix-ui/react-accordion": "^1.2.20",
-    "@radix-ui/react-alert-dialog": "^1.1.23",
-    "@radix-ui/react-aspect-ratio": "^1.1.15",
     "@radix-ui/react-avatar": "^1.2.6",
-    "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-collapsible": "^1.1.20",
-    "@radix-ui/react-context": "^1.2.2",
     "@radix-ui/react-context-menu": "^2.3.7",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-hover-card": "^1.1.23",
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-menubar": "^1.1.24",
     "@radix-ui/react-navigation-menu": "^1.2.22",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-scroll-area": "^1.2.18",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
-    "@radix-ui/react-tooltip": "^1.2.16",
     "@react-aria/utils": "^3.34.1",
     "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",

package/scripts/ui-audit.mjs

@@ -33,7 +33,20 @@ const PALETTE =
  * Emoji in product text — Unicode "Extended_Pictographic" set (UTS #51). Catches
  * ✅🎉🔥🚀 etc. but NOT typographic punctuation (· — × ✓), which have their own rules.
  */
-const EMOJI = /\p{Extended_Pictographic}/u;
+/*
+ * EMOJI — pictographs, but NOT the three typographic marks that happen to carry the property.
+ *
+ * `\p{Extended_Pictographic}` includes U+00A9 ©, U+00AE ® and U+2122 ™. All three are
+ * `Emoji_Presentation=No`: they default to TEXT presentation, they have been in typography since
+ * long before emoji existed, and none of the reasons in this rule's message applies to them — a
+ * copyright line does not "break on Win/Linux" and does not pollute an accessible name. The
+ * catalog's own CenteredShell recipe was flagged for the `©` in its footer, which is unavoidable
+ * product copy, and every consumer with a footer would be flagged for the same thing.
+ *
+ * Followed by U+FE0F they are asking for emoji presentation on purpose, and then they ARE emoji —
+ * so that spelling is still caught.
+ */
+const EMOJI = /[\u00A9\u00AE\u2122]\uFE0F|(?![\u00A9\u00AE\u2122])\p{Extended_Pictographic}/u;
 /** Regional-indicator pairs = emoji flags (🇯🇵) — broken on Win/Linux; use Intl.DisplayNames. */
 const EMOJI_FLAG = /\p{Regional_Indicator}/u;
 
@@ -169,7 +182,7 @@ const RULES = [
     spansElement: true,
     test: new RegExp(
       "<(?:Checkbox\\.Group|Upload|Cascader|TreeSelect|Transfer|Select|SearchSelect|DatePicker|" +
-        `DateRangePicker|TimePicker|ColorPicker|LocalePicker|TimezonePicker|DateFormatPicker|TimeFormatPicker)\\b${ATTRS}\\bonChange=`,
+        `TimePicker|ColorPicker|LocalePicker|TimezonePicker|DateFormatPicker|TimeFormatPicker)\\b${ATTRS}\\bonChange=`,
       "g",
     ),
     message:
@@ -729,8 +742,8 @@ const CARD_FLUSH = new RegExp(
 // legitimately, so they are NOT matched. Whole-file pass (the pair spans lines).
 const BARE_FIELD = new RegExp(
   `<(?:label|Label)\\b${ATTRS}>[\\s\\S]{0,240}?</(?:label|Label)>\\s*` +
-    "<(?:Input|Select|Textarea|NumberInput|SearchInput|SearchSelect|DatePicker|DateRangePicker|" +
-    "TimePicker|MonthPicker|MonthRangePicker|Cascader|TreeSelect|input)\\b",
+    "<(?:Input|Select|Textarea|NumberInput|SearchInput|SearchSelect|DatePicker|" +
+    "TimePicker|Cascader|TreeSelect|input)\\b",
   "g",
 );
 

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

@@ -1,11 +0,0 @@
-import * as React from "react";
-import type { DateRangePickerProp } from "../../props/components/data-entry.prop.js";
-export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps, } from "../../props/components/data-entry.prop.js";
-/**
- * DateRangePicker — WAI-ARIA date-range combobox rendered as ONE input-styled control
- * (the established RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
- * real, typeable ISO `yyyy-MM-dd` inputs (form-submittable via `${name}_from` /
- * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
- * range calendar is the visual affordance.
- */
-export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, disabledDate, cellRender, allowClear, format, parseFormat, minDate, maxDate, showWeek, presets, needConfirm, allowEmpty, order, open: openProp, defaultOpen, onOpenChange, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, ...ariaProps }: DateRangePickerProp): React.JSX.Element;

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

@@ -1,349 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ArrowRight, CalendarIcon, X } from "lucide-react";
-import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { toIsoDate } from "../../lib/datetime/index.js";
-import {
-  formatPickerDate,
-  parsePickerDate,
-  pickerDateAllowed
-} from "../../lib/datetime/picker-format.js";
-import { Button } from "../general/button.js";
-import { Flex } from "../layout/flex.js";
-import {
-  CONTROL_VARIANT_CHROME_CLASS,
-  CONTROL_STATUS_CHROME_CLASS,
-  controlAppearanceAttributes
-} from "./control-appearance.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 { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
-import { Calendar } from "./calendar.js";
-const ISO_HINT = "yyyy-mm-dd";
-function DateRangePicker({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  name,
-  locale: localeProp,
-  showToday,
-  showClose,
-  fromDate,
-  toDate,
-  disabledDate,
-  cellRender,
-  allowClear,
-  format,
-  parseFormat,
-  minDate,
-  maxDate,
-  showWeek,
-  presets,
-  needConfirm = false,
-  allowEmpty = [true, true],
-  order = true,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  inputReadOnly,
-  preserveInvalidOnBlur,
-  placement = "bottom-start",
-  renderExtraFooter,
-  size,
-  status,
-  variant = "outlined",
-  ref,
-  ...ariaProps
-}) {
-  const { t } = useTranslation();
-  const { dayPickerLocale, locale } = usePickerLocales(localeProp);
-  const appearance = controlAppearanceAttributes({ status, variant });
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-  const open = !disabled && (openProp ?? internalOpen);
-  const [pending, setPending] = React.useState();
-  const [hasPending, setHasPending] = React.useState(false);
-  const setOpen = (next) => {
-    if (disabled && next) return;
-    if (openProp === void 0) setInternalOpen(next);
-    onOpenChange?.(next);
-    if (!next) {
-      setHasPending(false);
-      setPending(void 0);
-    }
-  };
-  const minimum = minDate ?? fromDate;
-  const maximum = maxDate ?? toDate;
-  const allowed = (date) => pickerDateAllowed(date, minimum, maximum, disabledDate);
-  const display = (date) => formatPickerDate(date, format, locale);
-  const parse = (text) => parsePickerDate(text, format, parseFormat);
-  const groupA11y = pickGroupFieldA11y(ariaProps);
-  const autoId = React.useId();
-  const groupId = id ?? autoId;
-  const fromId = `${groupId}-from`;
-  const toId = `${groupId}-to`;
-  const identity = useFieldIdentity({ id: groupId, name, "data-field": groupA11y["data-field"] });
-  const rangeField = groupA11y["data-field"] ?? identity["data-field"];
-  const rangeName = name ?? identity.name;
-  const isControlled = useControlledLatch(valueProp !== void 0);
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const value = isControlled ? valueProp : internalValue;
-  const working = hasPending ? pending : value;
-  const [fromText, setFromText] = React.useState(() => display(value?.from));
-  const [toText, setToText] = React.useState(() => display(value?.to));
-  React.useEffect(() => {
-    setFromText(formatPickerDate(value?.from, format, locale));
-    setToText(formatPickerDate(value?.to, format, locale));
-  }, [value?.from, value?.to, format, locale]);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder") ?? ISO_HINT;
-  const emit = (next) => {
-    if (!isControlled) setInternalValue(next);
-    onValueChange?.(next);
-  };
-  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
-  const showClear = clearControl.enabled && allowEmpty.every(Boolean) && Boolean(value?.from || value?.to) && !disabled;
-  const clear = () => {
-    emit(void 0);
-    setFromText("");
-    setToText("");
-  };
-  const validRange = (next) => Boolean(
-    next && (next.from ? allowed(next.from) : allowEmpty[0]) && (next.to ? allowed(next.to) : allowEmpty[1])
-  );
-  const choose = (range) => {
-    let next = range;
-    if (next?.from && !allowed(next.from) || next?.to && !allowed(next.to)) return;
-    if (order && next?.from && next.to && next.from > next.to)
-      next = { from: next.to, to: next.from };
-    if (needConfirm) {
-      setPending(next);
-      setHasPending(true);
-    } else emit(next);
-  };
-  const commitEdge = (edge, raw) => {
-    const trimmed = raw.trim();
-    const parsed = parse(trimmed);
-    if (trimmed && (!parsed || !allowed(parsed))) return;
-    if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
-    const next = { from: working?.from, to: working?.to, [edge]: parsed };
-    choose(next.from || next.to ? next : void 0);
-  };
-  const sharedKeyHandlers = {
-    onKeyDown: (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setOpen(true);
-      } else if (event.key === "Escape" && open) {
-        setOpen(false);
-      }
-    }
-  };
-  const innerInputClass = "ui-month-picker-input";
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    (format || needConfirm || preserveInvalidOnBlur) && rangeName ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "hidden",
-          disabled,
-          name: `${rangeName}_from`,
-          value: toIsoDate(value?.from)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "hidden",
-          disabled,
-          name: `${rangeName}_to`,
-          value: toIsoDate(value?.to)
-        }
-      )
-    ] }) : null,
-    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "group",
-        id: groupId,
-        ...groupA11y,
-        "data-field": rangeField,
-        "data-size": size,
-        ...appearance,
-        "aria-disabled": disabled ? true : void 0,
-        "data-state": open ? "open" : "closed",
-        className: cn(
-          // One input-styled shell for the whole range — the shared composite-field box, so
-          // this and the month range picker cannot drift into two slightly different fields.
-          "ui-control ui-control-composite-field",
-          "aria-invalid:border-destructive",
-          CONTROL_VARIANT_CHROME_CLASS[variant],
-          CONTROL_STATUS_CHROME_CLASS,
-          className
-        ),
-        onClick: () => {
-          if (!disabled) setOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: fromId,
-              "data-field": rangeField ? `${rangeField}_from` : void 0,
-              name: !format && !needConfirm && !preserveInvalidOnBlur && rangeName ? `${rangeName}_from` : void 0,
-              ref,
-              readOnly: inputReadOnly,
-              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: (event) => {
-                const parsed = parse(event.target.value);
-                const accepted = parsed && allowed(parsed) ? parsed : void 0;
-                if (!preserveInvalidOnBlur)
-                  setFromText(accepted ? display(accepted) : display(value?.from));
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: toId,
-              "data-field": rangeField ? `${rangeField}_to` : void 0,
-              name: !format && !needConfirm && !preserveInvalidOnBlur && rangeName ? `${rangeName}_to` : void 0,
-              readOnly: inputReadOnly,
-              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: (event) => {
-                const parsed = parse(event.target.value);
-                const accepted = parsed && allowed(parsed) ? parsed : void 0;
-                if (!preserveInvalidOnBlur)
-                  setToText(accepted ? display(accepted) : display(value?.to));
-              }
-            }
-          ),
-          showClear ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "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: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-            }
-          ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled,
-              tabIndex: -1,
-              "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
-              className: "text-muted-foreground hover:text-foreground shrink-0",
-              children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            PopoverContent,
-            {
-              className: "ui-control-panel-flush",
-              side: placement.startsWith("top") ? "top" : "bottom",
-              align: placement.endsWith("end") ? "end" : "start",
-              onClick: (event) => event.stopPropagation(),
-              onOpenAutoFocus: (event) => event.preventDefault(),
-              children: [
-                presets?.length ? /* @__PURE__ */ jsx(Flex, { wrap: true, gap: "xs", pad: "sm", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: () => {
-                      const range = typeof preset.value === "function" ? preset.value() : preset.value;
-                      if (validRange(range)) choose(range);
-                    },
-                    children: preset.label
-                  },
-                  index
-                )) }) : null,
-                /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    mode: "range",
-                    selected: working,
-                    defaultMonth: working?.from,
-                    showWeekNumber: showWeek,
-                    numberOfMonths: 2,
-                    onSelect: (range) => {
-                      choose(range);
-                      setFromText(display(range?.from));
-                      setToText(display(range?.to));
-                    },
-                    locale: dayPickerLocale,
-                    disabled: [
-                      ...minimum ? [{ before: minimum }] : [],
-                      ...maximum ? [{ after: maximum }] : [],
-                      ...disabledDate ? [disabledDate] : []
-                    ],
-                    cellRender,
-                    startMonth: minimum,
-                    endMonth: maximum,
-                    showToday,
-                    showClose,
-                    onClose: () => setOpen(false)
-                  }
-                ),
-                needConfirm ? /* @__PURE__ */ jsx(Flex, { pad: "sm", justify: "end", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    disabled: !validRange(working),
-                    onClick: () => {
-                      if (validRange(working)) {
-                        emit(working);
-                        setOpen(false);
-                      }
-                    },
-                    children: t("dataEntry.timePicker.confirm")
-                  }
-                ) }) : null,
-                renderExtraFooter?.()
-              ]
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-}
-export {
-  DateRangePicker
-};

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

@@ -1,10 +0,0 @@
-import * as React from "react";
-import type { MonthPickerProp } from "../../props/components/data-entry.prop.js";
-export type { MonthPickerProp, MonthPickerProp as MonthPickerProps, } from "../../props/components/data-entry.prop.js";
-/**
- * MonthPicker — year/month (`yyyy/MM`) input with a 12-cell 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, open: openProp, defaultOpen, onOpenChange, status, variant, size, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, ref, ...ariaProps }: MonthPickerProp): React.JSX.Element;