@godxjp/ui 9.1.0 → 10.0.0

package/README.md

@@ -1,10 +1,15 @@
 # @godxjp/ui
 
 The shared React UI framework for every godx surface (admin, agency portal,
-handheld). Built on shadcn + Radix UI + Tailwind CSS v4.
+handheld). Built on shadcn + Radix UI + Tailwind CSS v4. **~98 components**, fully catalogued.
 
-Location: `packages/godx-ui/` (linked into the app as a `file:` dependency at
-`@godxjp/ui`).
+- 📦 **npm:** `@godxjp/ui` (published) · MCP server `@godxjp/ui-mcp`
+- 🌐 **Live preview / catalog:** **https://godx-jp.github.io/godxjp-ui/** (components · tokens · props)
+- 🤖 **Agents:** the `@godxjp/ui-mcp` server exposes the full catalog (`get_component`, `list_primitives`, `search_components`) so coding agents use the real API instead of hand-rolling.
+
+```bash
+npm i @godxjp/ui
+```
 
 ---
 
@@ -22,6 +27,11 @@ infrastructure, which means two things are non-negotiable:
   logic, no product copy, no raw colors. Those are **consumer-layer** concerns — they
   must never leak into this package. The framework ships **its own theme**, so a
   consumer imports the styles and needs **zero** extra theme configuration.
+- **The root export is runtime-neutral.** Importing `@godxjp/ui` (or its primitive
+  subpaths) forces **no** foreign runtime — React Router, TanStack Query, react-hook-form
+  and the i18n singleton live ONLY on their adapter subpaths (`./form`, `./query`, `./app`).
+  A CI guard (`pnpm check:core-isolation`) traces the root dist graph and fails the build if
+  an adapter ever leaks into the root barrel.
 
 > Deciding whether a component belongs here vs. app-level? Use the
 > **`godx-ui-component-placement`** skill.
@@ -33,17 +43,17 @@ Full contributor rules: **[docs/DEVELOPMENT.md](./docs/DEVELOPMENT.md)**.
 ## Architecture (bottom-up)
 
 ```
-src/tokens/      Design tokens — the single source of values
-  foundation.css   :root + .dark: colors, fonts, type scale, spacing, radius, wa-iro
-  primitives/      Per-domain primitive tokens (card, table, control, badge, …)
+src/tokens/      Design tokens — 3-tier: primitive → semantic → component
+  foundation.css   primitive :root + .dark: raw palette, fonts, type scale, spacing, radius, wa-iro
+  semantic/        UI-role aliases (--primary, --destructive, --muted, …)
+  components/      per-component tokens (--card-*, --badge-*, …) aliasing semantic/primitive
 src/styles/      CSS that styles components by [data-slot]; density.css = the one density knob
   index.css        Entry: fontsource → tailwindcss → @theme (token→utility map) → *-layout.css
 src/components/  React components by group (data-display, data-entry, layout, feedback, …)
-src/props/       Prop type system: vocabulary/ (atomic) + components/ + registry.ts
-src/lib/         cn(), control-styles, variants
-examples/        *.preview.tsx — Storybook-style stories
-docs/primitives/ <component>/index.tsx demo + examples/ + generated .md
-preview/         The preview app (vite, :6008) rendering examples + docs
+src/props/       Prop type system: vocabulary/ (atomic) + components/ + registry.ts (NORMATIVE, CI-checked)
+src/lib/         cn(), control-styles, variants, hooks
+examples/        *.preview.tsx — Storybook-style stories (rendered by the preview app + Pages site)
+preview/         The preview app (vite, :6008) → also deployed to GitHub Pages
 ```
 
 A value is defined **once** as a CSS var (`--primary`), mapped to a utility in the
@@ -55,19 +65,25 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 
 ## Component groups
 
-| Group              | Import                    | Examples                                                                        |
-| ------------------ | ------------------------- | ------------------------------------------------------------------------------- |
-| **Layout**         | `@godxjp/ui/layout`       | `PageContainer`, `Stack`, `Inline`, `ResponsiveGrid`                            |
-| **General**        | `@godxjp/ui/general`      | `Button`                                                                        |
-| **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `DatePicker`, `Switch`                          |
-| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `Badge`, `KeyValueGrid`, `Timeline`, `EmptyState` |
-| **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `Sheet`, `Toast`, `Skeleton`, `Alert`                                 |
-| **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink`, `MutationFeedback`           |
-| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `FilterBar`, `DropdownMenu`, `Steps`, `Pagination`, `LocalePicker`      |
-| **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime`                                                    |
-| **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                            |
-| **shadcn paths**   | `@godxjp/ui/ui`           | Thin re-exports for shadcn-style imports                                        |
-| **Admin (legacy)** | `@godxjp/ui/admin`        | Compound admin exports                                                          |
+| Group              | Import                    | Examples                                                                                                                                                                                                                                |
+| ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Layout**         | `@godxjp/ui/layout`       | `Flex` (+ `Stack`/`Inline`), `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                          |
+| **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
+| **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
+| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                                       |
+| **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
+| **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
+| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar` (+ `FilterBar`), `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `LocalePicker`                                                                                      |
+| **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime` (adapter — i18n/datetime singleton)                                                                                                                                                                        |
+| **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                                                                                                                                                                                    |
+| **Form**           | `@godxjp/ui/form`         | `useZodForm`, `FormRoot` (adapter subpath — pulls react-hook-form)                                                                                                                                                                      |
+| **Hooks**          | `@godxjp/ui/hooks`        | `useIsMobile`, `useMediaQuery`                                                                                                                                                                                                          |
+| **shadcn paths**   | `@godxjp/ui/ui`           | Thin re-exports for shadcn-style imports (tree-shakeable)                                                                                                                                                                               |
+| **Admin (legacy)** | `@godxjp/ui/admin`        | Compound admin exports                                                                                                                                                                                                                  |
+
+> **Renamed in 8.0** (thin aliases kept): `Stack`/`Inline`→`Flex`, `KeyValueGrid`→`Descriptions`,
+> `ProgressMeter`→`Progress`, `CardStat`→`StatCard`, `FilterBar`→`Toolbar`, `ChoiceField`→`Field`,
+> `SkeletonCard`→`SkeletonStat`. `StatusBadge`→`Badge` (`status`/`tone`), `DialogConfirm`/`Dialog mode="confirm"`→`AlertDialog`.
 
 ---
 
@@ -123,15 +139,25 @@ control + table heights together.
 
 ```bash
 pnpm preview          # preview app → http://localhost:6008 (fixed port, kills stale)
-pnpm preview:build    # static build — the integration test for examples + docs
-pnpm docs:sync-primitives   # regenerate docs/primitives/**/*.md from source
-pnpm typecheck && pnpm audit && pnpm test
-pnpm check:mcp-sync   # MCP registry ↔ library export drift guard (also in verify)
+pnpm preview:build    # static build — also what deploys to GitHub Pages
+pnpm verify           # typecheck · lint · format · the 5 guards · test
 pnpm release --ui <patch|minor|major> --mcp <…|skip>   # publish lib + MCP in lockstep
 ```
 
+**Five CI guards** (wired into `verify` / `verify:release`) keep the library honest:
+
+| Guard                   | Enforces                                                             |
+| ----------------------- | -------------------------------------------------------------------- |
+| `check:prop-vocabulary` | every public `*Prop` field maps to the registry (no ad-hoc props)    |
+| `check:token-tiers`     | 3-tier tokens; no domain/raw-palette tokens in component CSS         |
+| `check:mcp-sync`        | every MCP catalog entry is a real export (no stale agent guidance)   |
+| `check:mcp-orphans`     | every public component HAS a catalog entry (catalog can't rot)       |
+| `check:core-isolation`  | the root export pulls no foreign runtime (adapters stay on subpaths) |
+
 This repo ships two packages — `@godxjp/ui` (this dir) and `@godxjp/ui-mcp` (`mcp/`). They keep
 separate version lines but release together via `pnpm release`; see DEVELOPMENT.md §6.
+The **preview app auto-deploys to [GitHub Pages](https://godx-jp.github.io/godxjp-ui/)** on every push to `main`
+(`.github/workflows/preview-pages.yml`) — which doubles as the CI gate for `preview:build`.
 
 → **[docs/DEVELOPMENT.md](./docs/DEVELOPMENT.md)** is the contributor guideline (the
 boundary, the layers, how to add/extend a component, verification).
@@ -139,7 +165,10 @@ boundary, the layers, how to add/extend a component, verification).
 ## Docs index
 
 - [docs/DEVELOPMENT.md](./docs/DEVELOPMENT.md) — contributor guideline (start here to edit the package)
+- [docs/STANDARDS-vocabulary-tokens.md](./docs/STANDARDS-vocabulary-tokens.md) — the 22 vocabulary + token rules (CI-enforced)
+- [docs/roadmap/post-7.0.0.md](./docs/roadmap/post-7.0.0.md) — shipped log (7.0→9.2) + key decisions
 - [docs/COMPONENTS.md](./docs/COMPONENTS.md) · [docs/TOKENS.md](./docs/TOKENS.md) · [docs/SPACING.md](./docs/SPACING.md)
 - [docs/PROPS-VOCABULARY.md](./docs/PROPS-VOCABULARY.md) · [docs/PROPS-REGISTRY.md](./docs/PROPS-REGISTRY.md)
 - [docs/DATETIME.md](./docs/DATETIME.md) · [docs/FORMS.md](./docs/FORMS.md) · [docs/TESTING.md](./docs/TESTING.md)
-- MCP: **godxjp-ui-mcp** (`.mcp.json`)
+- **Architecture decisions** under `debate/*/04-Decision.md` (ADRs from the design debates)
+- MCP: **godxjp-ui-mcp** (`.mcp.json`) — live catalog for agents

package/dist/app/index.d.ts

@@ -5,7 +5,7 @@ import * as date_fns from 'date-fns';
 import { Locale } from 'date-fns';
 import { vi } from 'react-day-picker/locale';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as AppProviderProp, A as AppContextValue } from '../app.prop-DnIXFzLi.js';
+import { a as AppProviderProp, A as AppContextValue } from '../app.prop-Cy6dJnU8.js';
 import { j as formatDate, a as FormatDateOptions } from '../format-date-ByyZoqI5.js';
 export { F as FormatDateKind, b as FormatDatetimeOptions, d as detectFormatDateKind, f as formatAppDate, c as formatAppDateLong, e as formatAppDateTime, g as formatAppRelative, h as formatAppTime, i as formatCalendarDate, k as formatTimeOfDay, m as isFormatDateValue } from '../format-date-ByyZoqI5.js';
 export { getDatetimeContext, isValidHhmm, normalizeHhmm, parseDateInput, syncDatetimeContext } from '../lib/datetime/index.js';

package/dist/app/index.js

@@ -1,7 +1,7 @@
-import { useAppContext } from '../chunk-RLGHEV4A.js';
-export { APP_LOCALES, APP_REQUEST_HEADER_LOCALE, APP_REQUEST_HEADER_TIMEZONE, APP_TIMEZONE_OPTIONS, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppProvider, DEFAULT_STORAGE_KEY, TIMEZONE_ALIASES, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isKnownAppTimezone, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useOptionalAppContext, usePickerLocales, useTranslation, writeStoredPreferences } from '../chunk-RLGHEV4A.js';
-import { formatDate } from '../chunk-FXFJF4YA.js';
-export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, detectFormatDateKind, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, isAppDateFormat, isAppLocale, isAppTimeFormat, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resolveDefaultDateFormat, syncDatetimeContext } from '../chunk-FXFJF4YA.js';
+import { useAppContext } from '../chunk-HTG5VHU7.js';
+export { APP_LOCALES, APP_REQUEST_HEADER_LOCALE, APP_REQUEST_HEADER_TIMEZONE, APP_TIMEZONE_OPTIONS, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppProvider, DEFAULT_STORAGE_KEY, TIMEZONE_ALIASES, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isKnownAppTimezone, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useOptionalAppContext, usePickerLocales, useTranslation, writeStoredPreferences } from '../chunk-HTG5VHU7.js';
+import { formatDate } from '../chunk-6CSBMMZS.js';
+export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, detectFormatDateKind, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, isAppDateFormat, isAppLocale, isAppTimeFormat, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resolveDefaultDateFormat, syncDatetimeContext } from '../chunk-6CSBMMZS.js';
 import { useMemo } from 'react';
 
 function useFormatting() {

package/dist/{app.prop-DnIXFzLi.d.ts → app.prop-Cy6dJnU8.d.ts}

@@ -1,7 +1,7 @@
 import { Locale } from 'date-fns';
 import { DayPickerProps } from 'react-day-picker';
 import { h as AppLocale, l as AppTimezoneDefault, k as AppTimezone, j as AppTimeFormat, g as AppDateFormat, i as AppRequestHeaders } from './types-mvzYGrma.js';
-import { C as ChildrenProp, a as ClassNameProp, c as DisabledProp, I as IdProp, V as ValueProp, g as OnValueChangeProp } from './shared.prop-BsNSXeqD.js';
+import { C as ChildrenProp, a as ClassNameProp, c as DisabledProp, I as IdProp, N as NameProp, V as ValueProp, g as OnValueChangeProp } from './shared.prop-BsNSXeqD.js';
 
 /** App shell prop types — @see docs/COMPONENTS.md#app */
 
@@ -21,7 +21,7 @@ type AppProviderProp = {
     /** Initial date display format. `"locale"` derives from `defaultLocale`. Default: `"locale"`. */
     defaultDateFormat?: AppDateFormat | "locale";
     /**
-     * IANA ids shown in `TimezonePicker`.
+     * IANA ids offered by the timezone-picker recipe (`useAppContext().timezoneOptions`).
      * Omit for the full IANA list; set to restrict (e.g. `APP_TIMEZONE_PRESET`).
      */
     timezoneOptions?: readonly AppTimezone[];
@@ -34,40 +34,23 @@ type AppProviderProp = {
     onTimeFormatChange?: (timeFormat: AppTimeFormat) => void;
     onDateFormatChange?: (dateFormat: AppDateFormat) => void;
 };
-/** @see LocalePicker */
-type LocalePickerProp = {
+/** Which AppProvider setting the {@link AppSettingPicker} reads/writes. */
+type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat";
+/**
+ * @see AppSettingPicker — one provider-bound Select for any single AppProvider setting.
+ * Replaces the former Locale/Timezone/Date-format/Time-format pickers; pick the target
+ * via `kind`. Bound to `<AppProvider>` by default; pass value + onValueChange to control.
+ */
+type AppSettingPickerProp = {
+    kind: AppSettingKind;
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;
-    /** Controlled value; default reads/writes AppProvider. */
-    value?: ValueProp<AppLocale>;
-    onValueChange?: OnValueChangeProp<AppLocale>;
-};
-/** @see TimezonePicker */
-type TimezonePickerProp = {
-    className?: ClassNameProp;
-    disabled?: DisabledProp;
-    id?: IdProp;
-    value?: ValueProp<AppTimezone>;
-    onValueChange?: OnValueChangeProp<AppTimezone>;
-    /** Override AppProvider list; omit to use context or full IANA. */
-    options?: readonly AppTimezone[];
-};
-/** @see TimeFormatPicker */
-type TimeFormatPickerProp = {
-    className?: ClassNameProp;
-    disabled?: DisabledProp;
-    id?: IdProp;
-    value?: ValueProp<AppTimeFormat>;
-    onValueChange?: OnValueChangeProp<AppTimeFormat>;
-};
-/** @see DateFormatPicker */
-type DateFormatPickerProp = {
-    className?: ClassNameProp;
-    disabled?: DisabledProp;
-    id?: IdProp;
-    value?: ValueProp<AppDateFormat>;
-    onValueChange?: OnValueChangeProp<AppDateFormat>;
+    /** Form field name — submits the selected value with the form. */
+    name?: NameProp;
+    /** Controlled value; default reads/writes the matching AppProvider context. */
+    value?: ValueProp<string>;
+    onValueChange?: OnValueChangeProp<string>;
 };
 /** Value exposed by `useAppContext`. */
 type AppContextValue = {
@@ -79,7 +62,7 @@ type AppContextValue = {
     dateFnsLocale: Locale;
     dayPickerLocale: NonNullable<DayPickerProps["locale"]>;
     requestHeaders: AppRequestHeaders;
-    /** Configured picker list; `undefined` → full IANA in TimezonePicker. */
+    /** Configured timezone list; `undefined` → full IANA in the timezone-picker recipe. */
     timezoneOptions?: readonly AppTimezone[];
     setLocale: (locale: AppLocale) => void;
     setTimezone: (timezone: AppTimezone) => void;
@@ -87,4 +70,4 @@ type AppContextValue = {
     setDateFormat: (dateFormat: AppDateFormat) => void;
 };
 
-export type { AppContextValue as A, DateFormatPickerProp as D, LocalePickerProp as L, TimeFormatPickerProp as T, AppProviderProp as a, TimezonePickerProp as b };
+export type { AppContextValue as A, AppProviderProp as a, AppSettingKind as b, AppSettingPickerProp as c };

package/dist/aspect-ratio-CZZJd9Km.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { AspectRatio as A, Separator as S };

package/dist/{checkbox-ChRsR7Nk.d.ts → checkbox-em-oFM5D.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as CheckboxGroupProp } from './data-entry.prop-CDkOajPj.js';
+import { c as CheckboxGroupProp } from './data-entry.prop-BR4vNA1j.js';
 
 declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
 

package/dist/{chunk-LJLGABFV.js → chunk-2HXZT2WJ.js}

@@ -1,9 +1,9 @@
-import { Calendar } from './chunk-IOGU3ZWF.js';
+import { Calendar } from './chunk-DNGJHWJZ.js';
 import { Input } from './chunk-VOHTRR5X.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { useTranslation, usePickerLocales } from './chunk-RLGHEV4A.js';
-import { toIsoDate, parseDateInput } from './chunk-FXFJF4YA.js';
+import { useTranslation, usePickerLocales } from './chunk-HTG5VHU7.js';
+import { toIsoDate, parseDateInput } from './chunk-6CSBMMZS.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { CalendarIcon } from 'lucide-react';
@@ -11,7 +11,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ISO_HINT = "yyyy-mm-dd";
 function DatePicker({
-  value,
+  value: valueProp,
+  defaultValue,
   onValueChange,
   placeholder,
   disabled,
@@ -25,6 +26,13 @@ function DatePicker({
   const { t } = useTranslation();
   const { dayPickerLocale } = usePickerLocales(localeProp);
   const [open, setOpen] = React.useState(false);
+  const isControlled = React.useRef(valueProp !== void 0).current;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const emit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
   const [text, setText] = React.useState(() => toIsoDate(value));
   React.useEffect(() => {
     setText(toIsoDate(value));
@@ -33,12 +41,12 @@ function DatePicker({
   const commit = (raw) => {
     const trimmed = raw.trim();
     if (trimmed === "") {
-      onValueChange?.(void 0);
+      emit(void 0);
       return;
     }
     const parsed = parseDateInput(trimmed);
     if (parsed) {
-      onValueChange?.(parsed);
+      emit(parsed);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
@@ -55,7 +63,7 @@ function DatePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
-        className: "pr-10",
+        className: "pe-10",
         onChange: (event) => {
           setText(event.target.value);
           commit(event.target.value);
@@ -76,7 +84,7 @@ function DatePicker({
           disabled,
           tabIndex: -1,
           "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
-          className: "text-muted-foreground absolute inset-y-0 right-0 h-full px-2 hover:bg-transparent",
+          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
           children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
@@ -86,7 +94,7 @@ function DatePicker({
           mode: "single",
           selected: value,
           onSelect: (date) => {
-            onValueChange?.(date);
+            emit(date);
             setText(toIsoDate(date));
             setOpen(false);
           },

package/dist/{chunk-QLMXEJSY.js → chunk-3Q4A4U2P.js}

@@ -1,4 +1,4 @@
-import { normalizeHhmm, isValidHhmm } from './chunk-FXFJF4YA.js';
+import { normalizeHhmm, isValidHhmm } from './chunk-6CSBMMZS.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -24,6 +24,14 @@ function maskTime(raw) {
   if (digits.length <= 2) return digits;
   return `${digits.slice(0, 2)}:${digits.slice(2)}`;
 }
+function stepTime(value, deltaMinutes) {
+  const normalized = normalizeHhmm(value) ?? "00:00";
+  const [hourText, minuteText] = normalized.split(":");
+  const total = (Number(hourText) * 60 + Number(minuteText) + deltaMinutes + 24 * 60) % (24 * 60);
+  const hour = Math.floor(total / 60);
+  const minute = total % 60;
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
 function TimeInput({
   value: controlledValue,
   defaultValue = "",
@@ -66,6 +74,7 @@ function TimeInput({
     },
     [isControlled, onValueChange, safeStep, value]
   );
+  const valid = isValidHhmm(value);
   return /* @__PURE__ */ jsx(
     "input",
     {
@@ -74,6 +83,11 @@ function TimeInput({
       value: displayValue,
       "data-slot": "time-input",
       className: cn("ui-time-input", className),
+      role: "spinbutton",
+      "aria-valuemin": 0,
+      "aria-valuemax": 24 * 60 - 1,
+      "aria-valuenow": valid ? Number(value.slice(0, 2)) * 60 + Number(value.slice(3, 5)) : void 0,
+      "aria-valuetext": valid ? value : void 0,
       "aria-invalid": displayValue !== "" && !isValidHhmm(displayValue) ? "true" : void 0,
       placeholder: placeholder ?? "HH:mm",
       inputMode: "numeric",
@@ -104,6 +118,15 @@ function TimeInput({
       onKeyDown: (event) => {
         if (event.key === "Enter") {
           commit(event.currentTarget.value, true);
+        } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+          event.preventDefault();
+          const base = isValidHhmm(displayValue) ? displayValue : value || "00:00";
+          const next = stepTime(base, event.key === "ArrowUp" ? safeStep : -safeStep);
+          setDisplayValue(next);
+          if (!isControlled) {
+            setInternal(next);
+          }
+          onValueChange?.(next);
         }
         props.onKeyDown?.(event);
       }

package/dist/{chunk-26CPAKUP.js → chunk-44YRPSZ7.js}

@@ -11,11 +11,10 @@ function Field({ id, label, description, className, children }) {
     ] })
   ] });
 }
-var ChoiceField = Field;
 
 // src/components/data-entry/choice-option.ts
 function choiceGroupClassName(_orientation = "vertical", className) {
   return cn("ui-choice-group", className);
 }
 
-export { ChoiceField, Field, choiceGroupClassName };
+export { Field, choiceGroupClassName };

package/dist/{chunk-HB2OHB5X.js → chunk-5NCFLCM7.js}

@@ -1,10 +1,10 @@
 import { normalizeTreeOptions, formatPathLabels, getNodeByPath, filterTreeOptions, pathsEqual, pathKey } from './chunk-SMLKNECP.js';
-import { Checkbox } from './chunk-O24Z3ULJ.js';
 import { Command, CommandInput } from './chunk-HTEL5DQI.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { ScrollArea, ScrollBar } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-RLGHEV4A.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { X, ChevronsUpDown, Check, ChevronRight } from 'lucide-react';
@@ -117,17 +117,24 @@ function Cascader({
     /* @__PURE__ */ jsx("div", { className: "flex max-h-[min(280px,50vh)]", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
       "ul",
       {
-        className: "min-w-[9rem] border-r last:border-r-0",
+        role: "listbox",
+        "aria-orientation": "vertical",
+        "aria-multiselectable": multiple ? true : void 0,
+        className: "min-w-[9rem] border-e last:border-e-0",
         onMouseLeave: expandTrigger === "hover" ? () => setActivePath(activePath.slice(0, colIndex)) : void 0,
         children: col.map((node) => {
           const path = [...activePath.slice(0, colIndex), node.value];
           const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
           const active = activePath[colIndex] === node.value;
           const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
+              role: "option",
+              "aria-selected": selected,
+              "aria-haspopup": hasChildren ? "menu" : void 0,
+              "aria-expanded": hasChildren ? active : void 0,
               disabled: node.disabled,
               className: cn(
                 "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
@@ -143,13 +150,13 @@ function Cascader({
                   {
                     checked: selected,
                     disabled: node.disabled,
-                    className: "mr-1",
+                    className: "me-1",
                     "aria-hidden": true,
                     tabIndex: -1
                   }
                 ),
-                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "mr-1 size-4 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: node.label }),
+                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "me-1 size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: node.label }),
                 hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
               ]
             }
@@ -177,13 +184,15 @@ function Cascader({
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder }),
-          /* @__PURE__ */ jsxs("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ms-2 flex shrink-0 items-center gap-1", children: [
             allowClear && displayLabel && !disabled && /* @__PURE__ */ jsx(
-              X,
+              "button",
               {
-                className: "size-4 opacity-50 hover:opacity-100",
-                "aria-hidden": "true",
-                onClick: clearValue
+                type: "button",
+                "aria-label": t("dataEntry.cascader.clear"),
+                className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+                onClick: clearValue,
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
               }
             ),
             /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" })
@@ -205,13 +214,15 @@ function Cascader({
               onValueChange: setSearch
             }
           ) }) }),
-          isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx("div", { className: "p-1", children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
+          isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx("div", { className: "p-1", role: "listbox", "aria-multiselectable": multiple ? true : void 0, children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
             const label = labels.join(" / ");
             const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
             return /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
+                role: "option",
+                "aria-selected": selected,
                 className: cn(
                   "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
                   "hover:bg-accent hover:text-accent-foreground",
@@ -219,17 +230,17 @@ function Cascader({
                 ),
                 onClick: () => handleSelectNode({ value: path.at(-1)}, path),
                 children: [
-                  multiple ? /* @__PURE__ */ jsx(Checkbox, { checked: selected, className: "mr-2", "aria-hidden": true, tabIndex: -1 }) : /* @__PURE__ */ jsx(
+                  multiple ? /* @__PURE__ */ jsx(Checkbox, { checked: selected, className: "me-2", "aria-hidden": true, tabIndex: -1 }) : /* @__PURE__ */ jsx(
                     Check,
                     {
                       className: cn(
-                        "mr-2 size-4 shrink-0",
+                        "me-2 size-4 shrink-0",
                         selected ? "opacity-100" : "opacity-0"
                       ),
                       "aria-hidden": "true"
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: label })
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
                 ]
               },
               pathKey(path)