@dragunio/fe-libs 0.1.12 → 0.1.13

package/dist/index.d.mts

@@ -526,11 +526,26 @@ type CurrencyInputProps = Omit<NumberInputProps, 'suffix' | 'endAdornment'> & {
 declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, disabled, ...props }: CurrencyInputProps): react.JSX.Element;
 
 type DateRange = [Date | null, Date | null];
+/** Text of the picker. `weekdays` runs from Monday to Sunday. */
+type DateTimePickerLabels = {
+    weekdays: readonly [string, string, string, string, string, string, string];
+    today: string;
+    time: string;
+    start: string;
+    end: string;
+    previousMonth: string;
+    nextMonth: string;
+    dialog: string;
+    selectDateTime: string;
+    selectDateRange: string;
+};
 type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & FieldBaseProps & {
     format?: string;
     disabled?: boolean;
     placeholder?: string;
     locale?: string;
+    /** Overrides the text chosen from `locale` (Vietnamese for `vi*`, otherwise English). */
+    labels?: Partial<DateTimePickerLabels>;
 };
 type DateTimePickerSingleProps = DateTimeBaseProps & {
     mode?: 'single';
@@ -1017,4 +1032,4 @@ declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
 /** A 404 page with a stable random design, or an explicitly selected variant. */
 declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };

package/dist/index.d.ts

@@ -526,11 +526,26 @@ type CurrencyInputProps = Omit<NumberInputProps, 'suffix' | 'endAdornment'> & {
 declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, disabled, ...props }: CurrencyInputProps): react.JSX.Element;
 
 type DateRange = [Date | null, Date | null];
+/** Text of the picker. `weekdays` runs from Monday to Sunday. */
+type DateTimePickerLabels = {
+    weekdays: readonly [string, string, string, string, string, string, string];
+    today: string;
+    time: string;
+    start: string;
+    end: string;
+    previousMonth: string;
+    nextMonth: string;
+    dialog: string;
+    selectDateTime: string;
+    selectDateRange: string;
+};
 type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & FieldBaseProps & {
     format?: string;
     disabled?: boolean;
     placeholder?: string;
     locale?: string;
+    /** Overrides the text chosen from `locale` (Vietnamese for `vi*`, otherwise English). */
+    labels?: Partial<DateTimePickerLabels>;
 };
 type DateTimePickerSingleProps = DateTimeBaseProps & {
     mode?: 'single';
@@ -1017,4 +1032,4 @@ declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
 /** A 404 page with a stable random design, or an explicitly selected variant. */
 declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };

package/dist/index.js

@@ -2819,6 +2819,30 @@ function CurrencyInput({
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
 var import_react20 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var LABELS_EN = {
+  weekdays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+  today: "Today",
+  time: "Time",
+  start: "Start",
+  end: "End",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  dialog: "Date and time picker",
+  selectDateTime: "Select date and time",
+  selectDateRange: "Select date range"
+};
+var LABELS_VI = {
+  weekdays: ["T2", "T3", "T4", "T5", "T6", "T7", "CN"],
+  today: "H\xF4m nay",
+  time: "Gi\u1EDD",
+  start: "B\u1EAFt \u0111\u1EA7u",
+  end: "K\u1EBFt th\xFAc",
+  previousMonth: "Th\xE1ng tr\u01B0\u1EDBc",
+  nextMonth: "Th\xE1ng sau",
+  dialog: "Ch\u1ECDn ng\xE0y v\xE0 gi\u1EDD",
+  selectDateTime: "Ch\u1ECDn ng\xE0y v\xE0 gi\u1EDD",
+  selectDateRange: "Ch\u1ECDn kho\u1EA3ng ng\xE0y"
+};
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -2848,12 +2872,17 @@ function DateTimePicker(props) {
     disabled,
     placeholder,
     locale = "en-US",
+    labels,
     className,
     mode = "single",
     id,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
+  const text = {
+    ...locale.toLowerCase().startsWith("vi") ? LABELS_VI : LABELS_EN,
+    ...labels
+  };
   const generatedId = (0, import_react20.useId)();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
@@ -2941,6 +2970,15 @@ function DateTimePicker(props) {
     { length: 42 },
     (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1)
   );
+  const today = /* @__PURE__ */ new Date();
+  const selectToday = () => {
+    setMonth(today);
+    selectDay(today);
+  };
+  const toggleOpen = () => {
+    if (!open) setMonth((isRange ? rangeValue[0] : singleValue) ?? today);
+    setOpen(!open);
+  };
   const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
   const setTime = (time) => {
     if (!selectedForTime) return;
@@ -2981,7 +3019,7 @@ function DateTimePicker(props) {
             "aria-labelledby": labelledBy,
             "aria-describedby": describedBy,
             "aria-expanded": open,
-            onClick: () => setOpen((current) => !current),
+            onClick: toggleOpen,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -2989,7 +3027,7 @@ function DateTimePicker(props) {
                 {
                   className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
                   children: [
-                    shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
+                    shownValue || placeholder || (isRange ? text.selectDateRange : text.selectDateTime),
                     isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
@@ -3002,14 +3040,14 @@ function DateTimePicker(props) {
           {
             className: "fe-datetime-picker__popper",
             role: "dialog",
-            "aria-label": "Date and time picker",
+            "aria-label": text.dialog,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-datetime-picker__month", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Previous month",
+                    "aria-label": text.previousMonth,
                     onClick: () => setMonth(
                       (current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)
                     ),
@@ -3024,7 +3062,7 @@ function DateTimePicker(props) {
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Next month",
+                    "aria-label": text.nextMonth,
                     onClick: () => setMonth(
                       (current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)
                     ),
@@ -3032,17 +3070,20 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: day }, day)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__weekdays", children: text.weekdays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: day }, day)) }),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
                 const inMonth = day.getMonth() === month.getMonth();
                 const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
                 const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
+                const isToday = sameDay(day, today);
                 return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
+                    "aria-current": isToday ? "date" : void 0,
                     className: [
                       !inMonth && "is-other-month",
+                      isToday && "is-today",
                       selected && "is-selected",
                       inRange && "is-in-range"
                     ].filter(Boolean).join(" "),
@@ -3052,6 +3093,7 @@ function DateTimePicker(props) {
                   day.toISOString()
                 );
               }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__footer", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", onClick: selectToday, children: text.today }) }),
               isRange && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
@@ -3059,7 +3101,7 @@ function DateTimePicker(props) {
                     type: "button",
                     className: !editingEnd ? "is-active" : "",
                     onClick: () => setEditingEnd(false),
-                    children: "Start"
+                    children: text.start
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -3068,12 +3110,12 @@ function DateTimePicker(props) {
                     type: "button",
                     className: editingEnd ? "is-active" : "",
                     onClick: () => setEditingEnd(true),
-                    children: "End"
+                    children: text.end
                   }
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "fe-datetime-picker__time", children: [
-                "Time",
+                text.time,
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "input",
                   {

package/dist/index.mjs

@@ -2519,6 +2519,30 @@ function CurrencyInput({
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
 import { useEffect as useEffect7, useId as useId9, useRef as useRef9, useState as useState14 } from "react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var LABELS_EN = {
+  weekdays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+  today: "Today",
+  time: "Time",
+  start: "Start",
+  end: "End",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  dialog: "Date and time picker",
+  selectDateTime: "Select date and time",
+  selectDateRange: "Select date range"
+};
+var LABELS_VI = {
+  weekdays: ["T2", "T3", "T4", "T5", "T6", "T7", "CN"],
+  today: "H\xF4m nay",
+  time: "Gi\u1EDD",
+  start: "B\u1EAFt \u0111\u1EA7u",
+  end: "K\u1EBFt th\xFAc",
+  previousMonth: "Th\xE1ng tr\u01B0\u1EDBc",
+  nextMonth: "Th\xE1ng sau",
+  dialog: "Ch\u1ECDn ng\xE0y v\xE0 gi\u1EDD",
+  selectDateTime: "Ch\u1ECDn ng\xE0y v\xE0 gi\u1EDD",
+  selectDateRange: "Ch\u1ECDn kho\u1EA3ng ng\xE0y"
+};
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -2548,12 +2572,17 @@ function DateTimePicker(props) {
     disabled,
     placeholder,
     locale = "en-US",
+    labels,
     className,
     mode = "single",
     id,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
+  const text = {
+    ...locale.toLowerCase().startsWith("vi") ? LABELS_VI : LABELS_EN,
+    ...labels
+  };
   const generatedId = useId9();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
@@ -2641,6 +2670,15 @@ function DateTimePicker(props) {
     { length: 42 },
     (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1)
   );
+  const today = /* @__PURE__ */ new Date();
+  const selectToday = () => {
+    setMonth(today);
+    selectDay(today);
+  };
+  const toggleOpen = () => {
+    if (!open) setMonth((isRange ? rangeValue[0] : singleValue) ?? today);
+    setOpen(!open);
+  };
   const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
   const setTime = (time) => {
     if (!selectedForTime) return;
@@ -2681,7 +2719,7 @@ function DateTimePicker(props) {
             "aria-labelledby": labelledBy,
             "aria-describedby": describedBy,
             "aria-expanded": open,
-            onClick: () => setOpen((current) => !current),
+            onClick: toggleOpen,
             children: [
               /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: "\u25F7" }),
               /* @__PURE__ */ jsxs14(
@@ -2689,7 +2727,7 @@ function DateTimePicker(props) {
                 {
                   className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
                   children: [
-                    shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
+                    shownValue || placeholder || (isRange ? text.selectDateRange : text.selectDateTime),
                     isRequired && placeholder && !shownValue && /* @__PURE__ */ jsx18("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
@@ -2702,14 +2740,14 @@ function DateTimePicker(props) {
           {
             className: "fe-datetime-picker__popper",
             role: "dialog",
-            "aria-label": "Date and time picker",
+            "aria-label": text.dialog,
             children: [
               /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__month", children: [
                 /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Previous month",
+                    "aria-label": text.previousMonth,
                     onClick: () => setMonth(
                       (current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)
                     ),
@@ -2724,7 +2762,7 @@ function DateTimePicker(props) {
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Next month",
+                    "aria-label": text.nextMonth,
                     onClick: () => setMonth(
                       (current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)
                     ),
@@ -2732,17 +2770,20 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx18("span", { children: day }, day)) }),
+              /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__weekdays", children: text.weekdays.map((day) => /* @__PURE__ */ jsx18("span", { children: day }, day)) }),
               /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
                 const inMonth = day.getMonth() === month.getMonth();
                 const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
                 const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
+                const isToday = sameDay(day, today);
                 return /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
+                    "aria-current": isToday ? "date" : void 0,
                     className: [
                       !inMonth && "is-other-month",
+                      isToday && "is-today",
                       selected && "is-selected",
                       inRange && "is-in-range"
                     ].filter(Boolean).join(" "),
@@ -2752,6 +2793,7 @@ function DateTimePicker(props) {
                   day.toISOString()
                 );
               }) }),
+              /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__footer", children: /* @__PURE__ */ jsx18("button", { type: "button", onClick: selectToday, children: text.today }) }),
               isRange && /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__range-tabs", children: [
                 /* @__PURE__ */ jsx18(
                   "button",
@@ -2759,7 +2801,7 @@ function DateTimePicker(props) {
                     type: "button",
                     className: !editingEnd ? "is-active" : "",
                     onClick: () => setEditingEnd(false),
-                    children: "Start"
+                    children: text.start
                   }
                 ),
                 /* @__PURE__ */ jsx18(
@@ -2768,12 +2810,12 @@ function DateTimePicker(props) {
                     type: "button",
                     className: editingEnd ? "is-active" : "",
                     onClick: () => setEditingEnd(true),
-                    children: "End"
+                    children: text.end
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs14("label", { className: "fe-datetime-picker__time", children: [
-                "Time",
+                text.time,
                 /* @__PURE__ */ jsx18(
                   "input",
                   {

package/dist/styles.css

@@ -1711,6 +1711,34 @@ table[data-fe-table][data-resizing] {
 .fe-datetime-picker__days button.is-other-month {
   color: #aab0bb;
 }
+.fe-datetime-picker__days button.is-today {
+  box-shadow: inset 0 0 0 1.5px #2878f0;
+  color: #1e60cc;
+  font-weight: 700;
+}
+.fe-datetime-picker__days button.is-today.is-selected {
+  box-shadow: inset 0 0 0 1.5px #2878f0, inset 0 0 0 3px #fff;
+  color: #fff;
+}
+.fe-datetime-picker__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+.fe-datetime-picker__footer button {
+  padding: 5px 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #1e60cc;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.fe-datetime-picker__footer button:hover {
+  background: #f0f5ff;
+}
 .fe-datetime-picker__range-tabs {
   display: flex;
   gap: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {