@godxjp/ui 6.1.2 → 6.3.0

package/dist/app/index.js

@@ -1,7 +1,7 @@
-import { useAppContext } from '../chunk-3F2AKYRD.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-3F2AKYRD.js';
-import { formatDate } from '../chunk-YFCQKO3B.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-YFCQKO3B.js';
+import { useAppContext } from '../chunk-EYLUVDHJ.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-EYLUVDHJ.js';
+import { formatDate } from '../chunk-6BJ2X7PA.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-6BJ2X7PA.js';
 import { useMemo } from 'react';
 
 function useFormatting() {

package/dist/{checkbox-NkFkqsQ8.d.ts → checkbox-CNP1MnPn.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-BEGA1lTq.js';
+import { c as CheckboxGroupProp } from './data-entry.prop-I3mgmdGm.js';
 
 declare function CheckboxGroup({ value: controlledValue, defaultValue, onChange, options, orientation, disabled, name, className, children, }: CheckboxGroupProp): react_jsx_runtime.JSX.Element;
 

package/dist/{chunk-TOO5AEKL.js → chunk-5DRKN2HI.js}

@@ -1,7 +1,7 @@
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from './chunk-V6UWJKZF.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { ChevronsUpDown, Check } from 'lucide-react';

package/dist/{chunk-YFCQKO3B.js → chunk-6BJ2X7PA.js}

@@ -69,16 +69,21 @@ var en_default = {
   },
   dataEntry: {
     datePicker: {
-      placeholder: "Select date"
+      placeholder: "Select date",
+      openCalendar: "Open calendar"
     },
     dateRangePicker: {
-      placeholder: "Select date range"
+      placeholder: "Select date range",
+      from: "From",
+      to: "To",
+      openCalendar: "Open calendar"
     },
     timePicker: {
       placeholder: "Select time",
       hour: "Hour",
       minute: "Minute",
-      typeLabel: "Type time HH:mm"
+      typeLabel: "Type time HH:mm",
+      openPicker: "Open time picker"
     },
     searchInput: {
       placeholder: "Search\u2026"
@@ -242,16 +247,21 @@ var ja_default = {
   },
   dataEntry: {
     datePicker: {
-      placeholder: "\u65E5\u4ED8\u3092\u9078\u629E"
+      placeholder: "\u65E5\u4ED8\u3092\u9078\u629E",
+      openCalendar: "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F"
     },
     dateRangePicker: {
-      placeholder: "\u671F\u9593\u3092\u9078\u629E"
+      placeholder: "\u671F\u9593\u3092\u9078\u629E",
+      from: "\u958B\u59CB",
+      to: "\u7D42\u4E86",
+      openCalendar: "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F"
     },
     timePicker: {
       placeholder: "\u6642\u523B\u3092\u9078\u629E",
       hour: "\u6642",
       minute: "\u5206",
-      typeLabel: "HH:mm \u3092\u5165\u529B"
+      typeLabel: "HH:mm \u3092\u5165\u529B",
+      openPicker: "\u6642\u523B\u3092\u9078\u629E"
     },
     searchInput: {
       placeholder: "\u691C\u7D22\u2026"
@@ -415,16 +425,21 @@ var vi_default = {
   },
   dataEntry: {
     datePicker: {
-      placeholder: "Ch\u1ECDn ng\xE0y"
+      placeholder: "Ch\u1ECDn ng\xE0y",
+      openCalendar: "M\u1EDF l\u1ECBch"
     },
     dateRangePicker: {
-      placeholder: "Ch\u1ECDn kho\u1EA3ng ng\xE0y"
+      placeholder: "Ch\u1ECDn kho\u1EA3ng ng\xE0y",
+      from: "T\u1EEB",
+      to: "\u0110\u1EBFn",
+      openCalendar: "M\u1EDF l\u1ECBch"
     },
     timePicker: {
       placeholder: "Ch\u1ECDn gi\u1EDD",
       hour: "Gi\u1EDD",
       minute: "Ph\xFAt",
-      typeLabel: "Nh\u1EADp gi\u1EDD HH:mm"
+      typeLabel: "Nh\u1EADp gi\u1EDD HH:mm",
+      openPicker: "M\u1EDF ch\u1ECDn gi\u1EDD"
     },
     searchInput: {
       placeholder: "T\xECm ki\u1EBFm\u2026"
@@ -638,6 +653,7 @@ var defaultContext = () => ({
   dateFormat: resolveDefaultDateFormat(DEFAULT_LOCALE)
 });
 var syncedContext = defaultContext();
+var liveRelativeFormattingEnabled = true;
 function syncDatetimeContext(partial) {
   syncedContext = {
     locale: partial.locale,
@@ -650,8 +666,18 @@ function syncDatetimeContext(partial) {
 function getDatetimeContext() {
   return syncedContext;
 }
+function enableLiveRelativeFormatting() {
+  liveRelativeFormattingEnabled = true;
+}
+function disableLiveRelativeFormatting() {
+  liveRelativeFormattingEnabled = false;
+}
+function canUseLiveRelativeFormatting() {
+  return liveRelativeFormattingEnabled;
+}
 function resetDatetimeContextForTests() {
   syncedContext = defaultContext();
+  liveRelativeFormattingEnabled = true;
 }
 
 // src/lib/datetime/detect.ts
@@ -668,6 +694,13 @@ function isDateOnlyString(value) {
 }
 
 // src/lib/datetime/parse.ts
+function toIsoDate(value) {
+  if (value == null || Number.isNaN(value.getTime())) return "";
+  const year = String(value.getFullYear()).padStart(4, "0");
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
 function parseDateInput(value) {
   if (value == null) return null;
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
@@ -791,6 +824,10 @@ function resolveKind(value, options) {
   if (options?.calendar && value instanceof Date) return "calendar";
   return detectFormatDateKind(value);
 }
+function formatInitialRelative(value, options) {
+  if (canUseLiveRelativeFormatting()) return formatAppRelative(value, options);
+  return formatAppDateTime(value, options);
+}
 function formatDate(value, options) {
   if (value == null || value === "") return EMPTY2;
   if (typeof value === "string") {
@@ -805,7 +842,7 @@ function formatDate(value, options) {
       case "long":
         return formatAppDateLong(trimmed, options);
       case "relative":
-        return formatAppRelative(trimmed, options);
+        return formatInitialRelative(trimmed, options);
       case "calendar":
       case "datetime":
       default:
@@ -824,7 +861,7 @@ function formatDate(value, options) {
     case "long":
       return formatAppDateLong(value, options);
     case "relative":
-      return formatAppRelative(value, options);
+      return formatInitialRelative(value, options);
     case "datetime":
     default:
       return formatAppDateTime(value, options);
@@ -839,4 +876,4 @@ function isFormatDateValue(value) {
   return parseDateInput(trimmed) != null;
 }
 
-export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, MESSAGE_CATALOG, calendarDateToTZDate, detectFormatDateKind, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, hhmmToTZDate, isAppDateFormat, isAppLocale, isAppTimeFormat, isDateOnlyString, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resetDatetimeContextForTests, resetI18nLocale, resolveDefaultDateFormat, syncDatetimeContext, syncI18nLocale, translate, translateCurrent };
+export { APP_DATE_FORMATS, APP_DATE_FORMAT_OPTIONS, APP_LOCALE_CONFIG, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, APP_TIME_FORMATS, MESSAGE_CATALOG, calendarDateToTZDate, detectFormatDateKind, disableLiveRelativeFormatting, enableLiveRelativeFormatting, formatAppDate, formatAppDateLong, formatAppDateTime, formatAppRelative, formatAppTime, formatCalendarDate, formatDate, formatTimeOfDay, getDateFnsLocale, getDateFormatLabel, getDatePattern, getDateTimePattern, getDatetimeContext, getDayPickerLocale, getTimePattern, hhmmToTZDate, isAppDateFormat, isAppLocale, isAppTimeFormat, isDateOnlyString, isFormatDateValue, isValidHhmm, normalizeHhmm, parseDateInput, resetDatetimeContextForTests, resetI18nLocale, resolveDefaultDateFormat, syncDatetimeContext, syncI18nLocale, toIsoDate, translate, translateCurrent };

package/dist/{chunk-E7LTWRYF.js → chunk-7JN4JXK6.js}

@@ -286,7 +286,7 @@ function Breadcrumb({ items }) {
     ] }, item.to ?? index);
   }) }) });
 }
-function ResponsiveGrid({ columns = 3, children }) {
+function ResponsiveGrid({ columns = 4, children }) {
   return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", "data-columns": columns, children });
 }
 function SplitPane({ children, aside, asideWidth = "md" }) {

package/dist/{chunk-7S7MYFXE.js → chunk-7W3CHMLL.js}

@@ -1,4 +1,4 @@
-import { formatDate, translateCurrent } from './chunk-YFCQKO3B.js';
+import { formatDate, translateCurrent } from './chunk-6BJ2X7PA.js';
 
 // src/lib/format.ts
 function formatDateTime(value, options) {

package/dist/{chunk-3F2AKYRD.js → chunk-EYLUVDHJ.js}

@@ -1,4 +1,4 @@
-import { APP_TIME_FORMATS, isAppDateFormat, isAppTimeFormat, isAppLocale, translate, syncI18nLocale, syncDatetimeContext, getDateFnsLocale, getDayPickerLocale, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, resolveDefaultDateFormat } from './chunk-YFCQKO3B.js';
+import { APP_TIME_FORMATS, isAppDateFormat, isAppTimeFormat, isAppLocale, translate, getDateFnsLocale, syncI18nLocale, syncDatetimeContext, disableLiveRelativeFormatting, enableLiveRelativeFormatting, getDayPickerLocale, APP_REQUEST_HEADER_DATE_FORMAT, APP_REQUEST_HEADER_TIME_FORMAT, resolveDefaultDateFormat } from './chunk-6BJ2X7PA.js';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -230,6 +230,10 @@ function buildRequestHeaders(locale, timezone, timeFormat, dateFormat) {
     [APP_REQUEST_HEADER_DATE_FORMAT]: dateFormat
   };
 }
+function resolveHydrationSafeTimezone(defaultTimezone, systemTimezone) {
+  if (defaultTimezone === "browser") return systemTimezone ?? "UTC";
+  return resolveDefaultTimezone(defaultTimezone, systemTimezone);
+}
 function AppProvider({
   children,
   defaultLocale = "vi",
@@ -246,22 +250,52 @@ function AppProvider({
   onTimeFormatChange,
   onDateFormatChange
 }) {
-  const stored = React.useMemo(
-    () => persist ? readStoredPreferences(storageKey) : {},
-    [persist, storageKey]
-  );
-  const initialLocale = stored.locale ?? defaultLocale;
+  const initialLocale = defaultLocale;
   const [locale, setLocaleState] = React.useState(initialLocale);
   const [timezone, setTimezoneState] = React.useState(
-    stored.timezone ?? resolveDefaultTimezone(defaultTimezone, systemTimezone)
+    resolveHydrationSafeTimezone(defaultTimezone, systemTimezone)
   );
   const [timeFormat, setTimeFormatState] = React.useState(
-    () => resolveInitialTimeFormat(stored.timeFormat, defaultTimeFormat, initialLocale)
+    () => resolveInitialTimeFormat(void 0, defaultTimeFormat, initialLocale)
   );
   const [dateFormat, setDateFormatState] = React.useState(
-    () => resolveInitialDateFormat(stored.dateFormat, defaultDateFormat, initialLocale)
+    () => resolveInitialDateFormat(void 0, defaultDateFormat, initialLocale)
   );
+  const hasMountedRef = React.useRef(false);
   const prefsRef = React.useRef({ locale, timezone, timeFormat, dateFormat });
+  React.useEffect(() => {
+    const stored = persist ? readStoredPreferences(storageKey) : {};
+    const nextLocale = stored.locale ?? defaultLocale;
+    const nextTimezone = stored.timezone ?? resolveDefaultTimezone(defaultTimezone, systemTimezone);
+    const nextTimeFormat = resolveInitialTimeFormat(
+      stored.timeFormat,
+      defaultTimeFormat,
+      nextLocale
+    );
+    const nextDateFormat = resolveInitialDateFormat(
+      stored.dateFormat,
+      defaultDateFormat,
+      nextLocale
+    );
+    prefsRef.current = {
+      locale: nextLocale,
+      timezone: nextTimezone,
+      timeFormat: nextTimeFormat,
+      dateFormat: nextDateFormat
+    };
+    setLocaleState(nextLocale);
+    setTimezoneState(nextTimezone);
+    setTimeFormatState(nextTimeFormat);
+    setDateFormatState(nextDateFormat);
+  }, [
+    defaultDateFormat,
+    defaultLocale,
+    defaultTimeFormat,
+    defaultTimezone,
+    persist,
+    storageKey,
+    systemTimezone
+  ]);
   React.useEffect(() => {
     prefsRef.current = { locale, timezone, timeFormat, dateFormat };
   }, [locale, timezone, timeFormat, dateFormat]);
@@ -305,17 +339,25 @@ function AppProvider({
     () => buildRequestHeaders(locale, timezone, timeFormat, dateFormat),
     [locale, timezone, timeFormat, dateFormat]
   );
+  const dateFnsLocale = getDateFnsLocale(locale);
+  syncI18nLocale(locale, fallbackLocale);
+  syncDatetimeContext({
+    locale,
+    timezone,
+    timeFormat,
+    dateFormat,
+    dateFnsLocale
+  });
+  if (!hasMountedRef.current) {
+    disableLiveRelativeFormatting();
+  }
   React.useEffect(() => {
     syncAppRequestHeaders(requestHeaders);
-    syncI18nLocale(locale, fallbackLocale);
-    syncDatetimeContext({
-      locale,
-      timezone,
-      timeFormat,
-      dateFormat,
-      dateFnsLocale: getDateFnsLocale(locale)
-    });
-  }, [requestHeaders, locale, fallbackLocale, timezone, timeFormat, dateFormat]);
+  }, [requestHeaders]);
+  React.useEffect(() => {
+    hasMountedRef.current = true;
+    enableLiveRelativeFormatting();
+  }, []);
   const value = React.useMemo(
     () => ({
       locale,
@@ -323,7 +365,7 @@ function AppProvider({
       timezone,
       timeFormat,
       dateFormat,
-      dateFnsLocale: getDateFnsLocale(locale),
+      dateFnsLocale,
       dayPickerLocale: getDayPickerLocale(locale),
       requestHeaders,
       timezoneOptions,
@@ -338,6 +380,7 @@ function AppProvider({
       timezone,
       timeFormat,
       dateFormat,
+      dateFnsLocale,
       requestHeaders,
       timezoneOptions,
       setLocale,

package/dist/{chunk-DU6ZYZRP.js → chunk-FKAXA6OI.js}

@@ -1,7 +1,7 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { buttonVariants, Button } from './chunk-HJEBRCXL.js';
 import { Label } from './chunk-7PWBC4BY.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';

package/dist/{chunk-E4HJNQ62.js → chunk-FNZQTYAG.js}

@@ -1,7 +1,7 @@
-import { humanError } from './chunk-7S7MYFXE.js';
+import { humanError } from './chunk-7W3CHMLL.js';
 import { Inline } from './chunk-S66TJXJU.js';
 import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { CheckCircle2, TriangleAlert, AlertCircle, Info, X, RefreshCw } from 'lucide-react';

package/dist/{chunk-7NZFVD24.js → chunk-GXHZAJUA.js}

@@ -78,6 +78,14 @@ var CardFooter = React.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
+function getDeltaTone(delta, inverse) {
+  const text = typeof delta === "string" || typeof delta === "number" ? String(delta).trim() : "";
+  const sign = text.match(/^[+\-−]/)?.[0];
+  if (!sign) return void 0;
+  const isPositive = sign === "+";
+  const semanticPositive = inverse ? !isPositive : isPositive;
+  return semanticPositive ? "positive" : "negative";
+}
 function CardStat({
   label,
   value,
@@ -85,10 +93,12 @@ function CardStat({
   delta,
   layout = "stacked",
   align = "start",
+  inverse = false,
   className,
   size = "compact",
   ...props
 }) {
+  const deltaTone = getDeltaTone(delta, inverse);
   return /* @__PURE__ */ jsxs(
     Card,
     {
@@ -106,7 +116,18 @@ function CardStat({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "card-stat-value-row", children: [
             /* @__PURE__ */ jsx("span", { "data-slot": "card-stat-value", children: value }),
-            delta ? /* @__PURE__ */ jsx("span", { "data-slot": "card-stat-delta", children: delta }) : null
+            delta ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "card-stat-delta",
+                "data-delta-tone": deltaTone,
+                className: cn(
+                  deltaTone === "positive" && "text-success",
+                  deltaTone === "negative" && "text-destructive"
+                ),
+                children: delta
+              }
+            ) : null
           ] }),
           hint && layout !== "inline" ? /* @__PURE__ */ jsx("div", { "data-slot": "card-stat-hint", children: hint }) : null
         ] })

package/dist/{chunk-WXCYI3YN.js → chunk-J6ZZVN6T.js}

@@ -1,8 +1,8 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
-import { isValidHhmm, formatTimeOfDay, normalizeHhmm } from './chunk-YFCQKO3B.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
+import { normalizeHhmm, isValidHhmm } from './chunk-6BJ2X7PA.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { Clock } from 'lucide-react';
@@ -138,6 +138,7 @@ function TimePicker({
   disabled,
   className,
   id,
+  name,
   minuteStep = 5
 }) {
   const { t } = useTranslation();
@@ -145,42 +146,70 @@ function TimePicker({
   const [internal, setInternal] = React.useState(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internal;
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.timePicker.placeholder");
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.timePicker.placeholder") ?? "hh:mm";
+  const [text, setText] = React.useState(value);
+  React.useEffect(() => {
+    setText(value);
+  }, [value]);
   const setValue = (next) => {
     if (!isControlled) setInternal(next);
     onChange?.(next);
   };
-  const display = value && isValidHhmm(value) ? formatTimeOfDay(value) : value || null;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
       {
         id,
-        type: "button",
-        variant: "outline",
+        name,
+        value: text,
         disabled,
-        className: cn(
-          "w-full justify-start text-left font-normal tabular-nums",
-          !display && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Clock, { className: "mr-2 size-4 shrink-0", "aria-hidden": "true" }),
-          display ?? resolvedPlaceholder
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-      TimePickerPanel,
-      {
-        value: value || "09:00",
-        minuteStep,
-        onChange: setValue,
-        onDone: () => {
-          setOpen(false);
+        placeholder: resolvedPlaceholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        className: "pr-10 tabular-nums",
+        onChange: (event) => {
+          setText(event.target.value);
+          const normalized = normalizeHhmm(event.target.value);
+          if (normalized) setValue(normalized);
+        },
+        onBlur: (event) => {
+          const normalized = normalizeHhmm(event.target.value);
+          setText(normalized ?? (isValidHhmm(value) ? value : ""));
         }
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          disabled,
+          tabIndex: -1,
+          "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
+          className: "text-muted-foreground absolute inset-y-0 right-0 h-full px-2 hover:bg-transparent",
+          children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx(
+        TimePickerPanel,
+        {
+          value: value || "09:00",
+          minuteStep,
+          onChange: (next) => {
+            setValue(next);
+            setText(next);
+          },
+          onDone: () => {
+            setOpen(false);
+          }
+        }
+      ) })
+    ] })
   ] });
 }
 

package/dist/{chunk-RTRZZ2IZ.js → chunk-LFLHBTDK.js}

@@ -4,7 +4,7 @@ import { Input } from './chunk-VOHTRR5X.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
 import { Button } from './chunk-HJEBRCXL.js';
 import { Label } from './chunk-7PWBC4BY.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { useState, useEffect } from 'react';

package/dist/{chunk-H2FHJOLU.js → chunk-MIVDO3Z3.js}

@@ -1,7 +1,7 @@
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-UX634MYF.js';
 import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation, useOptionalAppContext, APP_LOCALES, resolveTimezonePickerOptions, getTimezoneLabel, APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from './chunk-3F2AKYRD.js';
-import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from './chunk-YFCQKO3B.js';
+import { useTranslation, useOptionalAppContext, APP_LOCALES, resolveTimezonePickerOptions, getTimezoneLabel, APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from './chunk-EYLUVDHJ.js';
+import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from './chunk-6BJ2X7PA.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import { X, ChevronRight, Languages, Globe, Clock, CalendarDays } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunk-PPXBEAAM.js

@@ -0,0 +1,106 @@
+import { Calendar } from './chunk-I2V4Y2VF.js';
+import { Input } from './chunk-VOHTRR5X.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { Button } from './chunk-HJEBRCXL.js';
+import { useTranslation, usePickerLocales } from './chunk-EYLUVDHJ.js';
+import { toIsoDate, parseDateInput } from './chunk-6BJ2X7PA.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { CalendarIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ISO_HINT = "yyyy-mm-dd";
+function DatePicker({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  locale: localeProp,
+  fromDate,
+  toDate
+}) {
+  const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
+  const [open, setOpen] = React.useState(false);
+  const [text, setText] = React.useState(() => toIsoDate(value));
+  React.useEffect(() => {
+    setText(toIsoDate(value));
+  }, [value]);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder") ?? ISO_HINT;
+  const commit = (raw) => {
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      onChange?.(void 0);
+      return;
+    }
+    const parsed = parseDateInput(trimmed);
+    if (parsed) {
+      onChange?.(parsed);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        name,
+        value: text,
+        disabled,
+        placeholder: resolvedPlaceholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        className: "pr-10",
+        onChange: (event) => {
+          setText(event.target.value);
+          commit(event.target.value);
+        },
+        onBlur: (event) => {
+          const parsed = parseDateInput(event.target.value.trim());
+          setText(parsed ? toIsoDate(parsed) : toIsoDate(value));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          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",
+          children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: value,
+          onSelect: (date) => {
+            onChange?.(date);
+            setText(toIsoDate(date));
+            setOpen(false);
+          },
+          locale: dayPickerLocale,
+          disabled: [
+            ...fromDate ? [{ before: fromDate }] : [],
+            ...toDate ? [{ after: toDate }] : []
+          ],
+          startMonth: fromDate,
+          endMonth: toDate
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { DatePicker };

package/dist/{chunk-JEA3QDRW.js → chunk-PUY25RRT.js}

@@ -1,6 +1,6 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { controlIconClass } from './chunk-ICM6XBST.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-7LB5XDO7.js → chunk-QDAASTWZ.js}

@@ -4,7 +4,7 @@ import { ScrollArea, ScrollBar } from './chunk-3KPEZ5CF.js';
 import { Command, CommandInput } from './chunk-V6UWJKZF.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
 import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation } from './chunk-3F2AKYRD.js';
+import { useTranslation } from './chunk-EYLUVDHJ.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import { X, ChevronsUpDown, Check, ChevronRight } from 'lucide-react';