@dragunio/fe-libs 0.1.11 → 0.1.13

package/dist/index.d.mts

@@ -411,7 +411,21 @@ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'default
     disabled?: boolean;
     name?: string;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Caps the field width. Numbers are pixels (`240` → `240px`); strings are
+     * any CSS length (`'16rem'`, `'50%'`). The field still shrinks inside
+     * narrower containers.
+     */
+    maxWidth?: number | string;
+    /**
+     * How a selected label longer than the field is shown:
+     * - `'ellipsis'` (default): one line ending in `…`; the full text appears
+     *   in a tooltip on hover or focus.
+     * - `'wrap'`: the label wraps onto more lines and the field grows taller.
+     */
+    overflow?: SelectionOverflow;
 };
+type SelectionOverflow = 'ellipsis' | 'wrap';
 
 /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
 declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
@@ -435,6 +449,8 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
     disabled?: boolean;
     name?: string;
     onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement>;
+    maxWidth?: number | string;
+    overflow?: SelectionOverflow;
 } & react.RefAttributes<HTMLDivElement>>;
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
@@ -510,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';
@@ -1001,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 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

@@ -411,7 +411,21 @@ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'default
     disabled?: boolean;
     name?: string;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Caps the field width. Numbers are pixels (`240` → `240px`); strings are
+     * any CSS length (`'16rem'`, `'50%'`). The field still shrinks inside
+     * narrower containers.
+     */
+    maxWidth?: number | string;
+    /**
+     * How a selected label longer than the field is shown:
+     * - `'ellipsis'` (default): one line ending in `…`; the full text appears
+     *   in a tooltip on hover or focus.
+     * - `'wrap'`: the label wraps onto more lines and the field grows taller.
+     */
+    overflow?: SelectionOverflow;
 };
+type SelectionOverflow = 'ellipsis' | 'wrap';
 
 /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
 declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
@@ -435,6 +449,8 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
     disabled?: boolean;
     name?: string;
     onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement>;
+    maxWidth?: number | string;
+    overflow?: SelectionOverflow;
 } & react.RefAttributes<HTMLDivElement>>;
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
@@ -510,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';
@@ -1001,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 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

@@ -2127,6 +2127,9 @@ var Selection = (0, import_react17.forwardRef)(
     disabled = false,
     name,
     onKeyDown,
+    maxWidth,
+    overflow = "ellipsis",
+    style,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -2137,6 +2140,7 @@ var Selection = (0, import_react17.forwardRef)(
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
+    const tooltipId = generatedId + "-tooltip";
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
     const resolvedDescription = description ?? helperText;
@@ -2163,6 +2167,26 @@ var Selection = (0, import_react17.forwardRef)(
     const [activeIndex, setActiveIndex] = (0, import_react17.useState)(0);
     const rootRef = (0, import_react17.useRef)(null);
     const menuRef = (0, import_react17.useRef)(null);
+    const valueRef = (0, import_react17.useRef)(null);
+    const [truncated, setTruncated] = (0, import_react17.useState)(false);
+    const [hovered, setHovered] = (0, import_react17.useState)(false);
+    const [focused, setFocused] = (0, import_react17.useState)(false);
+    const showsTags = tag && multiple && selectedOptions.length > 0;
+    const canTruncate = overflow === "ellipsis" && !showsTags && selectedOptions.length > 0;
+    const selectedKey = selectedOptions.map((option) => String(option.value)).join("|");
+    (0, import_react17.useLayoutEffect)(() => {
+      const node = valueRef.current;
+      if (!canTruncate || !node) {
+        setTruncated(false);
+        return;
+      }
+      const measure = () => setTruncated(node.scrollWidth > node.clientWidth + 1);
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [canTruncate, selectedKey]);
     const [menuPosition, setMenuPosition] = (0, import_react17.useState)(null);
     (0, import_react17.useEffect)(() => {
       const close = (event) => {
@@ -2227,6 +2251,12 @@ var Selection = (0, import_react17.forwardRef)(
       setQuery("");
     };
     const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const showTooltip = truncated && (hovered || focused) && !open;
+    const renderLabels = () => displayLabel?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+      item,
+      index < displayLabel.length - 1 ? ", " : ""
+    ] }, index));
+    const toPx = (length) => typeof length === "number" ? length + "px" : length;
     const onTriggerKeyDown = (event) => {
       onKeyDown?.(event);
       if (disabled) return;
@@ -2258,12 +2288,14 @@ var Selection = (0, import_react17.forwardRef)(
         className: [
           "fe-selection",
           "fe-selection--" + size,
+          "fe-selection--" + overflow,
           open && "fe-selection--open",
           clearable && selectedOptions.length > 0 && "fe-selection--clearable",
           hasError && "fe-selection--error",
           disabled && "fe-selection--disabled",
           className
         ].filter(Boolean).join(" "),
+        style: maxWidth === void 0 ? style : { ...style, maxWidth: toPx(maxWidth) },
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2297,16 +2329,24 @@ var Selection = (0, import_react17.forwardRef)(
                 "aria-invalid": hasError || void 0,
                 "aria-required": isRequired || void 0,
                 "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy,
+                "aria-describedby": getDescribedBy(
+                  describedBy,
+                  showTooltip ? tooltipId : void 0
+                ),
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
+                onMouseEnter: () => setHovered(true),
+                onMouseLeave: () => setHovered(false),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "span",
                     {
+                      ref: valueRef,
                       className: [
                         "fe-selection__value",
                         !selectedOptions.length && "is-placeholder",
@@ -2322,10 +2362,7 @@ var Selection = (0, import_react17.forwardRef)(
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
-                        item,
-                        index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                      )) : renderLabels() : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: placeholder }),
                         isRequired && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
@@ -2344,6 +2381,7 @@ var Selection = (0, import_react17.forwardRef)(
                 onClick: clear
               }
             ),
+            showTooltip && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: tooltipId, role: "tooltip", className: "fe-selection__tooltip", children: renderLabels() }),
             open && menuPosition && (0, import_react_dom2.createPortal)(
               /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "div",
@@ -2395,7 +2433,7 @@ var Selection = (0, import_react17.forwardRef)(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: option.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-selection__option-label", children: option.label }),
                             isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               "span",
                               {
@@ -2781,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()));
@@ -2810,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";
@@ -2903,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;
@@ -2943,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)(
@@ -2951,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: "*" })
                   ]
                 }
@@ -2964,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)
                     ),
@@ -2986,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)
                     ),
@@ -2994,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(" "),
@@ -3014,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",
@@ -3021,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)(
@@ -3030,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

@@ -1821,6 +1821,9 @@ var Selection = forwardRef9(
     disabled = false,
     name,
     onKeyDown,
+    maxWidth,
+    overflow = "ellipsis",
+    style,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -1831,6 +1834,7 @@ var Selection = forwardRef9(
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
+    const tooltipId = generatedId + "-tooltip";
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
     const resolvedDescription = description ?? helperText;
@@ -1857,6 +1861,26 @@ var Selection = forwardRef9(
     const [activeIndex, setActiveIndex] = useState11(0);
     const rootRef = useRef7(null);
     const menuRef = useRef7(null);
+    const valueRef = useRef7(null);
+    const [truncated, setTruncated] = useState11(false);
+    const [hovered, setHovered] = useState11(false);
+    const [focused, setFocused] = useState11(false);
+    const showsTags = tag && multiple && selectedOptions.length > 0;
+    const canTruncate = overflow === "ellipsis" && !showsTags && selectedOptions.length > 0;
+    const selectedKey = selectedOptions.map((option) => String(option.value)).join("|");
+    useLayoutEffect3(() => {
+      const node = valueRef.current;
+      if (!canTruncate || !node) {
+        setTruncated(false);
+        return;
+      }
+      const measure = () => setTruncated(node.scrollWidth > node.clientWidth + 1);
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [canTruncate, selectedKey]);
     const [menuPosition, setMenuPosition] = useState11(null);
     useEffect5(() => {
       const close = (event) => {
@@ -1921,6 +1945,12 @@ var Selection = forwardRef9(
       setQuery("");
     };
     const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const showTooltip = truncated && (hovered || focused) && !open;
+    const renderLabels = () => displayLabel?.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
+      item,
+      index < displayLabel.length - 1 ? ", " : ""
+    ] }, index));
+    const toPx = (length) => typeof length === "number" ? length + "px" : length;
     const onTriggerKeyDown = (event) => {
       onKeyDown?.(event);
       if (disabled) return;
@@ -1952,12 +1982,14 @@ var Selection = forwardRef9(
         className: [
           "fe-selection",
           "fe-selection--" + size,
+          "fe-selection--" + overflow,
           open && "fe-selection--open",
           clearable && selectedOptions.length > 0 && "fe-selection--clearable",
           hasError && "fe-selection--error",
           disabled && "fe-selection--disabled",
           className
         ].filter(Boolean).join(" "),
+        style: maxWidth === void 0 ? style : { ...style, maxWidth: toPx(maxWidth) },
         ...props,
         children: [
           /* @__PURE__ */ jsx15(
@@ -1991,16 +2023,24 @@ var Selection = forwardRef9(
                 "aria-invalid": hasError || void 0,
                 "aria-required": isRequired || void 0,
                 "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy,
+                "aria-describedby": getDescribedBy(
+                  describedBy,
+                  showTooltip ? tooltipId : void 0
+                ),
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
+                onMouseEnter: () => setHovered(true),
+                onMouseLeave: () => setHovered(false),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
                 children: [
                   /* @__PURE__ */ jsx15(
                     "span",
                     {
+                      ref: valueRef,
                       className: [
                         "fe-selection__value",
                         !selectedOptions.length && "is-placeholder",
@@ -2016,10 +2056,7 @@ var Selection = forwardRef9(
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
-                        item,
-                        index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+                      )) : renderLabels() : /* @__PURE__ */ jsxs12(Fragment2, { children: [
                         /* @__PURE__ */ jsx15("span", { children: placeholder }),
                         isRequired && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
@@ -2038,6 +2075,7 @@ var Selection = forwardRef9(
                 onClick: clear
               }
             ),
+            showTooltip && /* @__PURE__ */ jsx15("span", { id: tooltipId, role: "tooltip", className: "fe-selection__tooltip", children: renderLabels() }),
             open && menuPosition && createPortal2(
               /* @__PURE__ */ jsxs12(
                 "div",
@@ -2089,7 +2127,7 @@ var Selection = forwardRef9(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ jsx15("span", { children: option.label }),
+                            /* @__PURE__ */ jsx15("span", { className: "fe-selection__option-label", children: option.label }),
                             isSelected && /* @__PURE__ */ jsx15(
                               "span",
                               {
@@ -2481,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()));
@@ -2510,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";
@@ -2603,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;
@@ -2643,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(
@@ -2651,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: "*" })
                   ]
                 }
@@ -2664,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)
                     ),
@@ -2686,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)
                     ),
@@ -2694,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(" "),
@@ -2714,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",
@@ -2721,7 +2801,7 @@ function DateTimePicker(props) {
                     type: "button",
                     className: !editingEnd ? "is-active" : "",
                     onClick: () => setEditingEnd(false),
-                    children: "Start"
+                    children: text.start
                   }
                 ),
                 /* @__PURE__ */ jsx18(
@@ -2730,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

@@ -886,8 +886,9 @@ table[data-fe-table][data-resizing] {
   display: flex;
   align-items: center;
   width: 100%;
+  min-width: 0;
   min-height: 40px;
-  padding: 0 13px;
+  padding: 0 40px 0 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
   outline: 0;
@@ -902,7 +903,11 @@ table[data-fe-table][data-resizing] {
     background 0.15s;
 }
 .fe-selection--clearable .fe-selection__trigger {
-  padding-right: 64px;
+  padding-right: 72px;
+}
+.fe-selection--wrap .fe-selection__trigger {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .fe-selection--small .fe-selection__trigger {
   min-height: 34px;
@@ -922,19 +927,24 @@ table[data-fe-table][data-resizing] {
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.12);
 }
 .fe-selection__value {
-  display: flex;
+  display: block;
   width: 100%;
   min-width: 0;
   flex: 1 1 auto;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.fe-selection--wrap .fe-selection__value {
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
 .fe-selection__value.is-placeholder {
   color: #8b94a4;
 }
 .fe-selection__value.is-tags {
+  display: flex;
   flex-wrap: wrap;
   align-content: center;
   gap: 5px;
@@ -1013,6 +1023,24 @@ table[data-fe-table][data-resizing] {
   outline: 2px solid #2878f0;
   outline-offset: 1px;
 }
+.fe-selection__tooltip {
+  position: absolute;
+  z-index: 50;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 7px 9px;
+  border-radius: 7px;
+  background: #20242c;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
 .fe-selection__chevron {
   position: absolute;
   top: 2px;
@@ -1073,6 +1101,7 @@ table[data-fe-table][data-resizing] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
   min-height: 37px;
   padding: 8px 10px;
@@ -1098,7 +1127,12 @@ table[data-fe-table][data-resizing] {
   opacity: 0.45;
   cursor: not-allowed;
 }
+.fe-selection__option-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .fe-selection__check {
+  flex: none;
   font-weight: 800;
 }
 .fe-selection__empty {
@@ -1677,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.11",
+  "version": "0.1.13",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {
@@ -93,4 +93,4 @@
       "public"
     ]
   }
-}
+}