@godxjp/ui 11.0.2 → 12.0.0

package/README.md

@@ -67,13 +67,13 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 
 | Group              | Import                    | Examples                                                                                                                                                                                                                                |
 | ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Layout**         | `@godxjp/ui/layout`       | `Flex` (+ `Stack`/`Inline`), `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                          |
+| **Layout**         | `@godxjp/ui/layout`       | `Flex`, `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`                                                                                      |
+| **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
 | **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)                                                                                                                                                                      |
@@ -81,9 +81,37 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 | **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`.
+> **Renamed / removed** — use the new names; the old aliases were **removed in v11** (they are no
+> longer exported at runtime). See the [migration table](#migrating-6--11) below.
+
+---
+
+## Migrating 6 → 11
+
+The v11 line dropped the deprecated compatibility aliases entirely — they are no longer exported
+at runtime, and their leftover `*Prop` types and README references have now been removed too (issue
+#99). Replace these at the call site:
+
+| Removed / renamed (≤ v8)         | Replacement (v11)                                  |
+| -------------------------------- | -------------------------------------------------- |
+| `Stack`                          | `Flex direction="col"` (the default direction)     |
+| `Inline`                         | `Flex direction="row"`                             |
+| `Autocomplete`                   | `Select` with `showSearch` + `options`             |
+| `CountrySelect`                  | `AppSettingPicker kind="country"`                  |
+| `LocalePicker`                   | `AppSettingPicker kind="language"`                 |
+| `CountryOptionLabel`             | `Intl.DisplayNames` (ISO 3166-1 α-2) — no component |
+| `SwitchField`                    | `Field` + `Switch`                                 |
+| `CardStat`                       | `StatCard`                                          |
+| `KeyValueGrid`                   | `Descriptions`                                      |
+| `ProgressMeter`                  | `Progress`                                          |
+| `FilterBar`                      | `Toolbar`                                           |
+| `ChoiceField`                    | `Field`                                             |
+| `SkeletonCard`                   | `SkeletonStat`                                      |
+| `StatusBadge`                    | `Badge` (`status` / `tone`)                         |
+| `DialogConfirm` / `Dialog mode="confirm"` | `AlertDialog`                             |
+
+For the full feature data grid (sort / search / column visibility / paging) see
+`@godxjp/ui/data-grid` (`DataGrid`); the lean server-driven list stays `DataTable`.
 
 ---
 
@@ -109,7 +137,7 @@ import { PageContainer } from "@godxjp/ui/layout"; // every page wraps in this
 
 1. **Every page** uses `<PageContainer title subtitle extra footer>`.
 2. **Mobile-first** — verify at 320–390px in preview / browser.
-3. **Spacing via `Stack`/`Inline` `gap` + `ResponsiveGrid`** — no Tailwind `p-*` /
+3. **Spacing via `Flex` `gap` + `ResponsiveGrid`** — no Tailwind `p-*` /
    `gap-*` / `space-x|y-*` for app layout (see `docs/SPACING.md`).
 4. **Semantic tokens only** — no raw colors / hex / `dark:` overrides.
 5. **Dates** display via `formatDate` from `@godxjp/ui/datetime`.
@@ -126,12 +154,12 @@ One token `--phi-unit` drives page/section/card spacing; micro control gaps use
 4px grid. Density (`compact` | `default` | `comfortable`) retunes `--phi-unit` with
 control + table heights together.
 
-| App API             | φ level             |
-| ------------------- | ------------------- |
-| `<Stack gap="md">`  | φ⁰ (default)        |
-| `<Stack gap="lg">`  | φ¹                  |
-| `<Stack gap="xl">`  | φ²                  |
-| Card shell / footer | base × φ / base ÷ φ |
+| App API                          | φ level             |
+| -------------------------------- | ------------------- |
+| `<Flex direction="col" gap="md">`| φ⁰ (default)        |
+| `<Flex direction="col" gap="lg">`| φ¹                  |
+| `<Flex direction="col" gap="xl">`| φ²                  |
+| Card shell / footer              | base × φ / base ÷ φ |
 
 ---
 

package/dist/app/index.d.ts

@@ -26,8 +26,6 @@ declare function getDayPickerLocale(locale: AppLocale): react_day_picker.DayPick
 
 /** Curated preset — pass to `<AppProvider timezoneOptions={APP_TIMEZONE_PRESET} />`. */
 declare const APP_TIMEZONE_PRESET: readonly ["UTC", "Asia/Ho_Chi_Minh", "Asia/Bangkok", "Asia/Singapore", "Asia/Jakarta", "Asia/Manila", "Asia/Kuala_Lumpur", "Asia/Yangon", "Asia/Phnom_Penh", "Asia/Vientiane", "Asia/Brunei", "Asia/Tokyo", "Asia/Seoul", "Asia/Shanghai", "Asia/Hong_Kong", "Asia/Taipei", "Asia/Ulaanbaatar", "Asia/Kolkata", "Asia/Karachi", "Asia/Dhaka", "Asia/Colombo", "Asia/Dubai", "Asia/Riyadh", "Asia/Qatar", "Asia/Tehran", "Asia/Jerusalem", "Europe/London", "Europe/Paris", "Europe/Berlin", "Europe/Amsterdam", "Europe/Rome", "Europe/Madrid", "Europe/Moscow", "Europe/Istanbul", "America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Toronto", "America/Vancouver", "America/Mexico_City", "America/Sao_Paulo", "America/Buenos_Aires", "Australia/Sydney", "Australia/Melbourne", "Australia/Perth", "Pacific/Auckland"];
-/** @deprecated Use `APP_TIMEZONE_PRESET` or `getAllIanaTimezones()`. */
-declare const APP_TIMEZONE_OPTIONS: readonly ["UTC", "Asia/Ho_Chi_Minh", "Asia/Bangkok", "Asia/Singapore", "Asia/Jakarta", "Asia/Manila", "Asia/Kuala_Lumpur", "Asia/Yangon", "Asia/Phnom_Penh", "Asia/Vientiane", "Asia/Brunei", "Asia/Tokyo", "Asia/Seoul", "Asia/Shanghai", "Asia/Hong_Kong", "Asia/Taipei", "Asia/Ulaanbaatar", "Asia/Kolkata", "Asia/Karachi", "Asia/Dhaka", "Asia/Colombo", "Asia/Dubai", "Asia/Riyadh", "Asia/Qatar", "Asia/Tehran", "Asia/Jerusalem", "Europe/London", "Europe/Paris", "Europe/Berlin", "Europe/Amsterdam", "Europe/Rome", "Europe/Madrid", "Europe/Moscow", "Europe/Istanbul", "America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Toronto", "America/Vancouver", "America/Mexico_City", "America/Sao_Paulo", "America/Buenos_Aires", "Australia/Sydney", "Australia/Melbourne", "Australia/Perth", "Pacific/Auckland"];
 type AppTimezonePreset = (typeof APP_TIMEZONE_PRESET)[number];
 /**
  * Preferred IANA ids not returned by all runtimes (e.g. Node lists `Asia/Saigon` only).
@@ -39,8 +37,6 @@ declare function resolveTimezoneForIntl(timezone: string): string;
 /** Full IANA list from runtime — sorted lexicographically. */
 declare function getAllIanaTimezones(): readonly string[];
 declare function isValidIanaTimezone(value: string): boolean;
-/** @deprecated Use `isValidIanaTimezone`. */
-declare function isKnownAppTimezone(value: string): value is AppTimezonePreset;
 /**
  * Options for TimezonePicker.
  * - `configured` omitted/empty → full IANA list
@@ -137,4 +133,4 @@ declare function useFormatting(): {
 /** Alias for useFormatting — emphasises timezone-aware datetime helpers. */
 declare const useDateTime: typeof useFormatting;
 
-export { APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_TIMEZONE_OPTIONS, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppDateFormat, AppLocale, type AppLocaleConfig, AppProvider, AppRequestHeaders, AppTimeFormat, AppTimezone, type AppTimezonePreset, DEFAULT_STORAGE_KEY, FormatDateOptions, type StoredAppPreferences, TIMEZONE_ALIASES, formatDate, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getDateFnsLocale, getDateFormatLabel, getDayPickerLocale, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isAppLocale, isKnownAppTimezone, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultDateFormat, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useDateTime, useFormatting, useOptionalAppContext, writeStoredPreferences };
+export { APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppDateFormat, AppLocale, type AppLocaleConfig, AppProvider, AppRequestHeaders, AppTimeFormat, AppTimezone, type AppTimezonePreset, DEFAULT_STORAGE_KEY, FormatDateOptions, type StoredAppPreferences, TIMEZONE_ALIASES, formatDate, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getDateFnsLocale, getDateFormatLabel, getDayPickerLocale, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isAppLocale, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultDateFormat, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useDateTime, useFormatting, useOptionalAppContext, writeStoredPreferences };

package/dist/app/index.js

@@ -1,7 +1,7 @@
-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 { useAppContext } from '../chunk-TXRYSMOD.js';
+export { APP_LOCALES, APP_REQUEST_HEADER_LOCALE, APP_REQUEST_HEADER_TIMEZONE, APP_TIMEZONE_PRESET, APP_TIME_FORMAT_OPTIONS, AppProvider, DEFAULT_STORAGE_KEY, TIMEZONE_ALIASES, formatTimezoneDisplayLabel, getAllIanaTimezones, getAppRequestHeaders, getBrowserTimezone, getTimeFormatLabel, getTimezoneCityName, getTimezoneLabel, getTimezoneOffsetLabel, isValidIanaTimezone, readStoredPreferences, resetAppRequestHeaders, resetIanaTimezoneCacheForTests, resolveDefaultTimeFormat, resolveDefaultTimezone, resolveTimezoneForIntl, resolveTimezonePickerOptions, syncAppRequestHeaders, useAppContext, useAppDateFormat, useAppLocale, useAppTimeFormat, useAppTimezone, useOptionalAppContext, usePickerLocales, useTranslation, writeStoredPreferences } from '../chunk-TXRYSMOD.js';
+import { formatDate } from '../chunk-3ELRYXJK.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-3ELRYXJK.js';
 import { useMemo } from 'react';
 
 function useFormatting() {

package/dist/{checkbox-em-oFM5D.d.ts → checkbox-DPFcnsMZ.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-BR4vNA1j.js';
+import { b as CheckboxGroupProp } from './data-entry.prop-6J0o45se.js';
 
 declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
 

package/dist/{chunk-QVLUCB47.js → chunk-2JCSS6B4.js}

@@ -1,7 +1,7 @@
-import { humanError } from './chunk-X2VY4MOW.js';
+import { humanError } from './chunk-FK5QEFVY.js';
 import { Flex } from './chunk-INIIF7F7.js';
 import { Button } from './chunk-M4PZNAMV.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
+import { useTranslation } from './chunk-TXRYSMOD.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Info, CheckCircle2, TriangleAlert, AlertCircle, X, RefreshCw } from 'lucide-react';

package/dist/{chunk-6CSBMMZS.js → chunk-3ELRYXJK.js}

@@ -63,6 +63,7 @@ var en_default = {
     clearSearch: "Clear search",
     clearFilters: "Clear filters",
     first: "First",
+    previous: "Previous",
     next: "Next",
     selectedCount: "{count} selected",
     typeToConfirm: "Type {phrase} to confirm"
@@ -278,6 +279,14 @@ var en_default = {
     empty: "No data",
     loading: "Loading\u2026"
   },
+  dataGrid: {
+    search: "Search",
+    searchPlaceholder: "Search\u2026",
+    view: "View",
+    toggleColumns: "Toggle columns",
+    rowsPerPage: "Rows per page",
+    pageOf: "Page {page} of {total}"
+  },
   status: {
     active: "Active",
     completed: "Completed",
@@ -319,6 +328,7 @@ var ja_default = {
     clearSearch: "\u691C\u7D22\u3092\u30AF\u30EA\u30A2",
     clearFilters: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
     first: "\u6700\u521D",
+    previous: "\u524D\u3078",
     next: "\u6B21\u3078",
     selectedCount: "{count} \u4EF6\u9078\u629E",
     typeToConfirm: "\u78BA\u8A8D\u306E\u305F\u3081 {phrase} \u3068\u5165\u529B"
@@ -534,6 +544,14 @@ var ja_default = {
     empty: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",
     loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026"
   },
+  dataGrid: {
+    search: "\u691C\u7D22",
+    searchPlaceholder: "\u691C\u7D22\u2026",
+    view: "\u8868\u793A",
+    toggleColumns: "\u5217\u306E\u8868\u793A\u5207\u66FF",
+    rowsPerPage: "\u8868\u793A\u4EF6\u6570",
+    pageOf: "{page} / {total} \u30DA\u30FC\u30B8"
+  },
   status: {
     active: "\u6709\u52B9",
     completed: "\u5B8C\u4E86",
@@ -575,6 +593,7 @@ var vi_default = {
     clearSearch: "X\xF3a t\xECm ki\u1EBFm",
     clearFilters: "X\xF3a b\u1ED9 l\u1ECDc",
     first: "\u0110\u1EA7u",
+    previous: "Tr\u01B0\u1EDBc",
     next: "Ti\u1EBFp",
     selectedCount: "{count} \u0111\xE3 ch\u1ECDn",
     typeToConfirm: "Nh\u1EADp {phrase} \u0111\u1EC3 x\xE1c nh\u1EADn"
@@ -790,6 +809,14 @@ var vi_default = {
     empty: "Ch\u01B0a c\xF3 d\u1EEF li\u1EC7u",
     loading: "\u0110ang t\u1EA3i\u2026"
   },
+  dataGrid: {
+    search: "T\xECm ki\u1EBFm",
+    searchPlaceholder: "T\xECm ki\u1EBFm\u2026",
+    view: "Hi\u1EC3n th\u1ECB",
+    toggleColumns: "\u1EA8n/hi\u1EC7n c\u1ED9t",
+    rowsPerPage: "S\u1ED1 d\xF2ng/trang",
+    pageOf: "Trang {page}/{total}"
+  },
   status: {
     active: "\u0110ang ho\u1EA1t \u0111\u1ED9ng",
     completed: "Ho\xE0n th\xE0nh",

package/dist/{chunk-NXVCI6YB.js → chunk-3LPY7YA4.js}

@@ -1,9 +1,9 @@
-import { Command, CommandList, CommandItem, CommandGroup } from './chunk-HTEL5DQI.js';
 import { Input } from './chunk-VOHTRR5X.js';
+import { Command, CommandList, CommandItem, CommandGroup } from './chunk-HTEL5DQI.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { controlTriggerClass } from './chunk-IBK5D2Q6.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
+import { useTranslation } from './chunk-TXRYSMOD.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';

package/dist/chunk-BCBK4FLV.js

@@ -0,0 +1,83 @@
+import { Input } from './chunk-VOHTRR5X.js';
+import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-TXRYSMOD.js';
+import { useDebouncedValue } from './chunk-LFW37FGG.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  placeholder,
+  debounce = 250,
+  onValueChange,
+  onSearch,
+  label,
+  ariaLabel,
+  className,
+  inputClassName,
+  id,
+  disabled = false
+}) {
+  const { t } = useTranslation();
+  const isControlled = controlledValue !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = isControlled ? controlledValue : internal;
+  const debounced = useDebouncedValue(value, debounce);
+  const reactId = React.useId();
+  const inputId = id ?? `search-${reactId}`;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
+  const resolvedAriaLabel = ariaLabel ?? t("common.search");
+  const onSearchRef = React.useRef(onSearch);
+  React.useEffect(() => {
+    onSearchRef.current = onSearch;
+  });
+  React.useEffect(() => {
+    onSearchRef.current(debounced);
+  }, [debounced]);
+  const setValue = (v) => {
+    if (!isControlled) setInternal(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-search-input", className), children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "ui-search-input-label", children: label }) : /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "sr-only", children: resolvedAriaLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "ui-search-input-field", children: [
+      /* @__PURE__ */ jsx(Search, { className: "ui-search-input-icon", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: inputId,
+          type: "text",
+          role: "searchbox",
+          value,
+          onChange: (e) => {
+            setValue(e.target.value);
+          },
+          placeholder: resolvedPlaceholder,
+          "aria-label": resolvedAriaLabel,
+          className: cn(
+            "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
+            inputClassName
+          ),
+          disabled
+        }
+      ),
+      value && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setValue("");
+          },
+          "aria-label": t("common.clearSearch"),
+          className: "ui-search-input-clear",
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] })
+  ] });
+}
+
+export { SearchInput };

package/dist/{chunk-FAB3LMTK.js → chunk-F7BEIY7S.js}

@@ -1,9 +1,9 @@
-import { formatBytes } from './chunk-X2VY4MOW.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-BG5RNXTH.js';
 import { Slider } from './chunk-CRERCLIZ.js';
+import { formatBytes } from './chunk-FK5QEFVY.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-UJUWAQE5.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { controlIconClass } from './chunk-IBK5D2Q6.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
+import { useTranslation } from './chunk-TXRYSMOD.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React2 from 'react';
 import { Upload as Upload$1, ImagePlus, Camera, Trash2, RotateCcw, X } from 'lucide-react';

package/dist/chunk-FK2JDABO.js

@@ -0,0 +1,318 @@
+import { normalizeTreeOptions, formatPathLabels, getNodeByPath, filterTreeOptions, pathsEqual, pathKey } from './chunk-SMLKNECP.js';
+import { Command, CommandInput } from './chunk-HTEL5DQI.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-TXRYSMOD.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { Check, X, ChevronsUpDown, ChevronRight, Minus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function pathInValues(path, values) {
+  return values.some((v) => pathsEqual(v, path));
+}
+function togglePath(values, path) {
+  if (pathInValues(path, values)) return values.filter((v) => !pathsEqual(v, path));
+  return [...values, path];
+}
+function CheckboxVisual({
+  checked,
+  indeterminate,
+  disabled,
+  className
+}) {
+  const state = indeterminate ? "indeterminate" : checked ? "checked" : "unchecked";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "checkbox",
+      "data-state": state,
+      className: cn(
+        "ui-checkbox inline-flex items-center justify-center",
+        // The shared CSS fills the box for [data-state=checked]; mirror that fill for the
+        // indeterminate ("some children selected") state so a partial parent reads as partial.
+        "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : checked ? /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : null
+    }
+  );
+}
+function aggregateCheckState(node, path, values) {
+  let total = 0;
+  let selected = 0;
+  const walk = (n, p) => {
+    const isLeaf = (n.children?.length ?? 0) === 0 || n.isLeaf === true;
+    if (isLeaf) {
+      if (n.disabled || n.disableCheckbox) return;
+      total += 1;
+      if (pathInValues(p, values)) selected += 1;
+      return;
+    }
+    for (const child of n.children) walk(child, [...p, child.value]);
+  };
+  for (const child of node.children ?? []) walk(child, [...path, child.value]);
+  if (total === 0 || selected === 0) return "none";
+  return selected === total ? "checked" : "indeterminate";
+}
+function Cascader({
+  options: optionsProp,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple,
+  changeOnSelect,
+  showSearch,
+  placeholder,
+  disabled,
+  className,
+  id,
+  expandTrigger = "click",
+  fieldNames,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => normalizeTreeOptions(optionsProp, fieldNames),
+    [optionsProp, fieldNames]
+  );
+  const [open, setOpen] = React.useState(false);
+  const [activePath, setActivePath] = React.useState([]);
+  const [search, setSearch] = React.useState("");
+  const isControlledSingle = !multiple && value !== void 0;
+  const isControlledMulti = multiple && value !== void 0;
+  const [internalSingle, setInternalSingle] = React.useState(
+    multiple ? [] : defaultValue ?? []
+  );
+  const [internalMulti, setInternalMulti] = React.useState(
+    defaultValue ?? []
+  );
+  const singleValue = isControlledSingle ? value : internalSingle;
+  const multiValue = isControlledMulti ? value : internalMulti;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
+  const displayLabel = React.useMemo(() => {
+    if (multiple) {
+      if (!multiValue.length) return null;
+      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
+    }
+    if (!singleValue.length) return null;
+    return formatPathLabels(getNodeByPath(options, singleValue));
+  }, [multiple, multiValue, singleValue, options]);
+  const setSingleValue = (path) => {
+    if (!isControlledSingle) setInternalSingle(path);
+    onValueChange?.(path, getNodeByPath(options, path));
+  };
+  const commitSingle = (path) => {
+    setSingleValue(path);
+    setOpen(false);
+    setActivePath([]);
+    setSearch("");
+  };
+  const commitMulti = (paths) => {
+    if (!isControlledMulti) setInternalMulti(paths);
+    onValueChange?.(
+      paths,
+      paths.map((p) => getNodeByPath(options, p))
+    );
+  };
+  const columns = React.useMemo(() => {
+    const cols = [options];
+    for (const segment of activePath) {
+      const col = cols.at(-1);
+      const node = col?.find((n) => n.value === segment);
+      if (node?.children?.length) cols.push(node.children);
+      else break;
+    }
+    return cols;
+  }, [options, activePath]);
+  const handleSelectNode = (node, path) => {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    if (multiple) {
+      if (hasChildren && !changeOnSelect) setActivePath(path);
+      else if (!node.disableCheckbox) commitMulti(togglePath(multiValue, path));
+      return;
+    }
+    if (hasChildren) {
+      if (changeOnSelect) setSingleValue(path);
+      setActivePath(path);
+      return;
+    }
+    commitSingle(path);
+  };
+  const isSearching = showSearch && search.trim().length > 0;
+  const searchResults = React.useMemo(
+    () => isSearching ? filterTreeOptions(options, search) : [],
+    [options, search, isSearching]
+  );
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (next) {
+      setActivePath(multiple ? [] : singleValue);
+    } else {
+      setSearch("");
+      setActivePath([]);
+    }
+  };
+  const clearValue = (e) => {
+    e.stopPropagation();
+    if (multiple) commitMulti([]);
+    else commitSingle([]);
+  };
+  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex max-h-[min(280px,50vh)]", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+      "ul",
+      {
+        role: "listbox",
+        "aria-orientation": "vertical",
+        "aria-multiselectable": multiple ? true : void 0,
+        className: "min-w-[9rem] border-e last:border-e-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);
+          const aggregate = multiple && hasChildren ? aggregateCheckState(node, path, multiValue) : void 0;
+          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",
+                "hover:bg-accent hover:text-accent-foreground",
+                active && "bg-accent/70 font-medium",
+                node.disabled && "pointer-events-none opacity-50"
+              ),
+              onMouseEnter: (
+                // Hover-expand: a parent opens its children column; a leaf collapses any
+                // deeper column but keeps its own. Never collapse on the column's mouseleave
+                // — moving the pointer toward the next column would strand the deeper levels
+                // and make a depth-3 leaf unreachable.
+                expandTrigger === "hover" && !node.disabled ? () => setActivePath(hasChildren ? path : path.slice(0, -1)) : void 0
+              ),
+              onClick: () => !node.disabled && handleSelectNode(node, path),
+              children: [
+                multiple && /* @__PURE__ */ jsx(
+                  CheckboxVisual,
+                  {
+                    checked: aggregate ? aggregate === "checked" : selected,
+                    indeterminate: aggregate === "indeterminate",
+                    disabled: node.disabled || node.disableCheckbox,
+                    className: "me-1"
+                  }
+                ),
+                !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" })
+              ]
+            }
+          ) }, node.value);
+        })
+      },
+      colIndex
+    )) }),
+    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
+  ] });
+  const showClear = allowClear && displayLabel && !disabled;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id,
+          type: "button",
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          disabled,
+          className: cn(
+            "w-full justify-start font-normal",
+            // Reserve trailing room for the clear + chevron overlay rendered below.
+            showClear ? "pe-14" : "pe-9",
+            !displayLabel && "text-muted-foreground"
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          className: "w-auto min-w-[var(--radix-popover-trigger-width)] p-0",
+          align: "start",
+          children: [
+            showSearch && /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                placeholder: t("dataEntry.cascader.searchPlaceholder"),
+                value: search,
+                onValueChange: setSearch
+              }
+            ) }) }),
+            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",
+                        selected && "bg-accent/60"
+                      ),
+                      onClick: () => handleSelectNode({ value: path.at(-1)}, path),
+                      children: [
+                        multiple ? /* @__PURE__ */ jsx(CheckboxVisual, { checked: selected, className: "me-2" }) : /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "me-2 size-4 shrink-0",
+                              selected ? "opacity-100" : "opacity-0"
+                            ),
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
+                      ]
+                    },
+                    pathKey(path)
+                  );
+                })
+              }
+            ) }) : renderCascadeColumns()
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center gap-1", children: [
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t("dataEntry.cascader.clear"),
+          className: "pointer-events-auto 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 shrink-0 opacity-50", "aria-hidden": "true" })
+    ] })
+  ] });
+}
+
+export { Cascader };