@godxjp/ui 7.0.0 → 8.0.0

package/dist/app/index.d.ts

@@ -5,12 +5,12 @@ 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-IobwLwaM.js';
+import { a as AppProviderProp, A as AppContextValue } from '../app.prop-DnIXFzLi.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';
 export { usePickerLocales, useTranslation } from '../i18n/index.js';
-import '../shared.prop-BNRJc9K0.js';
+import '../shared.prop-BsNSXeqD.js';
 import 'react';
 import '@date-fns/tz';
 

package/dist/{app.prop-IobwLwaM.d.ts → app.prop-DnIXFzLi.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, D as DisabledProp, I as IdProp } from './shared.prop-BNRJc9K0.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';
 
 /** App shell prop types — @see docs/COMPONENTS.md#app */
 
@@ -40,16 +40,16 @@ type LocalePickerProp = {
     disabled?: DisabledProp;
     id?: IdProp;
     /** Controlled value; default reads/writes AppProvider. */
-    value?: AppLocale;
-    onChange?: (locale: AppLocale) => void;
+    value?: ValueProp<AppLocale>;
+    onValueChange?: OnValueChangeProp<AppLocale>;
 };
 /** @see TimezonePicker */
 type TimezonePickerProp = {
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;
-    value?: AppTimezone;
-    onChange?: (timezone: AppTimezone) => void;
+    value?: ValueProp<AppTimezone>;
+    onValueChange?: OnValueChangeProp<AppTimezone>;
     /** Override AppProvider list; omit to use context or full IANA. */
     options?: readonly AppTimezone[];
 };
@@ -58,16 +58,16 @@ type TimeFormatPickerProp = {
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;
-    value?: AppTimeFormat;
-    onChange?: (timeFormat: AppTimeFormat) => void;
+    value?: ValueProp<AppTimeFormat>;
+    onValueChange?: OnValueChangeProp<AppTimeFormat>;
 };
 /** @see DateFormatPicker */
 type DateFormatPickerProp = {
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;
-    value?: AppDateFormat;
-    onChange?: (dateFormat: AppDateFormat) => void;
+    value?: ValueProp<AppDateFormat>;
+    onValueChange?: OnValueChangeProp<AppDateFormat>;
 };
 /** Value exposed by `useAppContext`. */
 type AppContextValue = {

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

@@ -1,9 +1,9 @@
 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-CpSx5dX6.js';
+import { c as CheckboxGroupProp } from './data-entry.prop-CDkOajPj.js';
 
-declare function CheckboxGroup({ value: controlledValue, defaultValue, onChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
 
 /** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (Ant Design style). */
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {

package/dist/{chunk-3UGU5TYP.js → chunk-25RYBC5T.js}

@@ -1,4 +1,4 @@
-import { ChoiceField, choiceGroupClassName } from './chunk-CQBADMFG.js';
+import { Field, choiceGroupClassName } from './chunk-26CPAKUP.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -61,7 +61,7 @@ function RadioGroupOptions({
         className: choiceGroupClassName(orientation, className),
         children: options.map((opt, index) => {
           const id = `${reactId}-${opt.value}-${index}`;
-          return /* @__PURE__ */ jsx(ChoiceField, { id, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(RadioItem, { id, value: opt.value, disabled: opt.disabled }) }, opt.value);
+          return /* @__PURE__ */ jsx(Field, { id, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(RadioItem, { id, value: opt.value, disabled: opt.disabled }) }, opt.value);
         })
       }
     );

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

@@ -2,7 +2,7 @@ import { Label } from './chunk-7PWBC4BY.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function ChoiceField({ id, label, description, className, children }) {
+function Field({ id, label, description, className, children }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-choice-field", className), children: [
     /* @__PURE__ */ jsx("div", { className: "ui-choice-control", children }),
     /* @__PURE__ */ jsxs("div", { className: "ui-choice-content", children: [
@@ -11,10 +11,11 @@ function ChoiceField({ 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, choiceGroupClassName };
+export { ChoiceField, Field, choiceGroupClassName };

package/dist/{chunk-TT2L7JM6.js → chunk-3TS3G4U3.js}

@@ -1,5 +1,5 @@
-import { controlIconClass } from './chunk-ICM6XBST.js';
 import { Input } from './chunk-VOHTRR5X.js';
+import { controlIconClass } from './chunk-IBK5D2Q6.js';
 import { useTranslation } from './chunk-RLGHEV4A.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
@@ -12,7 +12,7 @@ function normalizeHex(value) {
 }
 function ColorPicker({
   value = "#2563eb",
-  onChange,
+  onValueChange,
   disabled,
   className,
   id,
@@ -28,7 +28,7 @@ function ColorPicker({
       return;
     }
     setDraft(null);
-    onChange?.(normalized);
+    onValueChange?.(normalized);
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [

package/dist/{chunk-ZS6DTAM2.js → chunk-4MMIMZMK.js}

@@ -1,4 +1,4 @@
-import { tableHeadHeightClass } from './chunk-ICM6XBST.js';
+import { tableHeadHeightClass } from './chunk-IBK5D2Q6.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-6TSU4IHV.js → chunk-4R7RQDXI.js}

@@ -1,5 +1,5 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-ARDVPIF4.js';
-import { Button } from './chunk-HJEBRCXL.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-G2WYOCDL.js';
+import { Button } from './chunk-M4PZNAMV.js';
 import { useTranslation, useOptionalAppContext, APP_LOCALES, resolveTimezonePickerOptions, getTimezoneLabel, APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from './chunk-RLGHEV4A.js';
 import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from './chunk-FXFJF4YA.js';
 import { cn } from './chunk-U7N2A7A3.js';
@@ -8,27 +8,29 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Link } from 'react-router-dom';
 import * as React from 'react';
 
-function FilterBar({
+function Toolbar({
   onClear,
   hasActiveFilters = true,
   className,
   children
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: cn("ui-filter-bar", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-toolbar", className), children: [
     children,
-    onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-filter-clear", children: [
+    onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
       /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
       t("common.clearFilters")
     ] })
   ] });
 }
-function FilterGroup({ label, className, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-xs ui-filter-group", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-filter-label", children: label }),
+function ToolbarGroup({ label, className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-xs ui-toolbar-group", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "ui-toolbar-label", children: label }),
     children
   ] });
 }
+var FilterBar = Toolbar;
+var FilterGroup = ToolbarGroup;
 function PageHeader({ title, description, breadcrumb, actions, className }) {
   return /* @__PURE__ */ jsxs("header", { className: cn("ui-page-header", className), children: [
     breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
@@ -54,13 +56,13 @@ function PageHeader({ title, description, breadcrumb, actions, className }) {
     ] })
   ] });
 }
-function LocalePicker({ className, disabled, id, value, onChange }) {
+function LocalePicker({ className, disabled, id, value, onValueChange }) {
   const ctx = useOptionalAppContext();
   const { t } = useTranslation();
   const current = value ?? ctx?.locale;
-  const handleChange = onChange ?? ctx?.setLocale;
+  const handleChange = onValueChange ?? ctx?.setLocale;
   if (current === void 0 || !handleChange) {
-    throw new Error("LocalePicker requires <AppProvider> or controlled value + onChange");
+    throw new Error("LocalePicker requires <AppProvider> or controlled value + onValueChange");
   }
   return /* @__PURE__ */ jsxs(Select, { value: current, onValueChange: handleChange, disabled, children: [
     /* @__PURE__ */ jsxs(
@@ -83,16 +85,16 @@ function TimezonePicker({
   disabled,
   id,
   value,
-  onChange,
+  onValueChange,
   options: optionsProp
 }) {
   const ctx = useOptionalAppContext();
   const { t, locale, fallbackLocale } = useTranslation();
   const current = value ?? ctx?.timezone;
-  const handleChange = onChange ?? ctx?.setTimezone;
+  const handleChange = onValueChange ?? ctx?.setTimezone;
   const configured = optionsProp ?? ctx?.timezoneOptions;
   if (current === void 0 || !handleChange) {
-    throw new Error("TimezonePicker requires <AppProvider> or controlled value + onChange");
+    throw new Error("TimezonePicker requires <AppProvider> or controlled value + onValueChange");
   }
   const options = React.useMemo(
     () => resolveTimezonePickerOptions(configured, current),
@@ -119,14 +121,14 @@ function TimeFormatPicker({
   disabled,
   id,
   value,
-  onChange
+  onValueChange
 }) {
   const ctx = useOptionalAppContext();
   const { t, locale, fallbackLocale } = useTranslation();
   const current = value ?? ctx?.timeFormat;
-  const handleChange = onChange ?? ctx?.setTimeFormat;
+  const handleChange = onValueChange ?? ctx?.setTimeFormat;
   if (current === void 0 || !handleChange) {
-    throw new Error("TimeFormatPicker requires <AppProvider> or controlled value + onChange");
+    throw new Error("TimeFormatPicker requires <AppProvider> or controlled value + onValueChange");
   }
   return /* @__PURE__ */ jsxs(Select, { value: current, onValueChange: handleChange, disabled, children: [
     /* @__PURE__ */ jsxs(
@@ -149,14 +151,14 @@ function DateFormatPicker({
   disabled,
   id,
   value,
-  onChange
+  onValueChange
 }) {
   const ctx = useOptionalAppContext();
   const { t, locale, fallbackLocale } = useTranslation();
   const current = value ?? ctx?.dateFormat;
-  const handleChange = onChange ?? ctx?.setDateFormat;
+  const handleChange = onValueChange ?? ctx?.setDateFormat;
   if (current === void 0 || !handleChange) {
-    throw new Error("DateFormatPicker requires <AppProvider> or controlled value + onChange");
+    throw new Error("DateFormatPicker requires <AppProvider> or controlled value + onValueChange");
   }
   return /* @__PURE__ */ jsxs(Select, { value: current, onValueChange: handleChange, disabled, children: [
     /* @__PURE__ */ jsxs(
@@ -175,4 +177,4 @@ function DateFormatPicker({
   ] });
 }
 
-export { DateFormatPicker, FilterBar, FilterGroup, LocalePicker, PageHeader, TimeFormatPicker, TimezonePicker };
+export { DateFormatPicker, FilterBar, FilterGroup, LocalePicker, PageHeader, TimeFormatPicker, TimezonePicker, Toolbar, ToolbarGroup };

package/dist/{chunk-OXKY5QMK.js → chunk-6QXQQAOQ.js}

@@ -1,7 +1,7 @@
-import { Command, CommandList, CommandItem, CommandGroup } from './chunk-V6UWJKZF.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { Command, CommandList, CommandItem, CommandGroup } from './chunk-HTEL5DQI.js';
 import { Input } from './chunk-VOHTRR5X.js';
-import { Button } from './chunk-HJEBRCXL.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { Button } from './chunk-M4PZNAMV.js';
 import { useTranslation } from './chunk-RLGHEV4A.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
@@ -11,7 +11,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 var DEBOUNCE_MS = 250;
 function SearchSelect({
   value = "",
-  onChange,
+  onValueChange,
   options: staticOptions,
   loadOptions,
   renderOption,
@@ -103,12 +103,12 @@ function SearchSelect({
   const select = (option) => {
     if (option.disabled) return;
     setPicked(option);
-    onChange?.(option.value, option);
+    onValueChange?.(option.value, option);
     setOpen(false);
   };
   const clear = () => {
     setPicked(null);
-    onChange?.("", void 0);
+    onValueChange?.("", void 0);
     setOpen(false);
   };
   const onScroll = (event) => {

package/dist/{chunk-JJCGMCTL.js → chunk-A22MCA3X.js}

@@ -1,9 +1,9 @@
 import { normalizeTreeOptions, collectAllExpandableKeys, filterVisibleTree, flattenVisibleTree, findNodeByValue, reactNodeText, getDescendantValues } from './chunk-SMLKNECP.js';
-import { Checkbox } from './chunk-E76QIYSY.js';
-import { Command, CommandInput } from './chunk-V6UWJKZF.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { Checkbox } from './chunk-O24Z3ULJ.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
-import { Button } from './chunk-HJEBRCXL.js';
+import { Command, CommandInput } from './chunk-HTEL5DQI.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { Button } from './chunk-M4PZNAMV.js';
 import { useTranslation } from './chunk-RLGHEV4A.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
@@ -38,7 +38,7 @@ function TreeSelectRoot({
   treeData: treeDataProp,
   value,
   defaultValue,
-  onChange,
+  onValueChange,
   multiple,
   treeCheckable,
   treeCheckStrictly,
@@ -73,7 +73,7 @@ function TreeSelectRoot({
   }, [options, expandedKeys, search, showSearch]);
   const commit = (next) => {
     if (!isControlled) setInternal(next);
-    onChange?.(checkable || multiple ? next : next[0] ?? void 0);
+    onValueChange?.(checkable || multiple ? next : next[0] ?? void 0);
   };
   const toggleExpand = (key) => {
     setExpandedKeys((prev) => {

package/dist/{chunk-VXXKR5U4.js → chunk-A7PKMT7Y.js}

@@ -1,7 +1,7 @@
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-ZS6DTAM2.js';
-import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-ICM6XBST.js';
-import { Inline, densityClass } from './chunk-S66TJXJU.js';
-import { Button } from './chunk-HJEBRCXL.js';
+import { Inline, densityClass } from './chunk-TILFZBTE.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-4MMIMZMK.js';
+import { Button } from './chunk-M4PZNAMV.js';
+import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-IBK5D2Q6.js';
 import { useTranslation } from './chunk-RLGHEV4A.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-HKQITNB3.js → chunk-AINW5WYN.js}

@@ -1,4 +1,4 @@
-import { tableCellPaddingClass, tableRowHeightClass } from './chunk-ICM6XBST.js';
+import { tableCellPaddingClass, tableRowHeightClass } from './chunk-IBK5D2Q6.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -45,12 +45,13 @@ function SkeletonDetail() {
     ] }, i)) })
   ] });
 }
-function SkeletonCard() {
-  return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-card", "aria-busy": "true", children: [
+function SkeletonStat() {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-stat", "aria-busy": "true", children: [
     /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
     /* @__PURE__ */ jsx(Skeleton, { className: "h-[length:var(--control-height)] w-32" }),
     /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
   ] });
 }
+var SkeletonCard = SkeletonStat;
 
-export { Skeleton, SkeletonCard, SkeletonDetail, SkeletonRows, SkeletonTable };
+export { Skeleton, SkeletonCard, SkeletonDetail, SkeletonRows, SkeletonStat, SkeletonTable };