@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/data-table/DataTable.d.ts

@@ -4,10 +4,77 @@ import { TablePaginationProps } from '../table/parts/TablePagination.js';
 import { TableProps, TableRootProps } from '../table/Table.js';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Marks the cell as a row header. When true, the cell renders as `<th scope="row">` instead of `<td>`.
+         * Use this for the first column that identifies each row (e.g., ID, name). Important for accessibility.
+         * @default false
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     isRowHeader: true
+         *   }
+         * }
+         * ```
+         */
         isRowHeader?: boolean;
+        /**
+         * CSS classes to apply to table cells (`TableCell`) in this column.
+         * Use this to control cell styling such as width, truncation, or alignment.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     className: 'uy:w-1/4 uy:truncate'
+         *   }
+         * }
+         * ```
+         */
         className?: string;
+        /**
+         * Helper text to display as a tooltip icon next to the column header.
+         * Use this to provide additional context or explanations for the column.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     helperText: 'This column shows the employee ID'
+         *   }
+         * }
+         * ```
+         */
         helperText?: string;
+        /**
+         * Controls whether the column cells can receive keyboard focus during table navigation.
+         * Set to false for cells containing interactive elements like buttons or checkboxes.
+         * @default true
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     isFocusable: false // For cells with buttons or checkboxes
+         *   }
+         * }
+         * ```
+         */
         isFocusable?: boolean;
+        /**
+         * CSS classes to apply to the column header (`TableColumnHeader`).
+         * Use this to set explicit widths when using `layout="fixed"`.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     headerClassName: 'uy:w-[200px]' // Fixed pixel width
+         *     // or
+         *     headerClassName: 'uy:w-1/4' // Percentage width
+         *     // or
+         *     headerClassName: 'uy:w-[20ch]' // Character-based width
+         *   }
+         * }
+         * ```
+         */
+        headerClassName?: string;
     }
 }
 export interface DataTablePaginationLabels {
@@ -107,10 +174,15 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * The DataTable component provides a standardized way to display tabular data with built-in support for
  * pagination, sorting, filtering, and row selection. It handles common table patterns like loading states,
  * empty states, and consistent table heights.
+ *
+ * The component supports two layout modes via the `layout` prop:
+ * - **Auto layout** (default): Columns adapt to content with horizontal scrolling
+ * - **Fixed layout**: Explicit column widths that fit the container. Set widths using `headerClassName` in column meta.
  * @param props - The props for the `DataTable` component
  * @param props.table - The table instance from @tanstack/react-table
  * @param props.minRows - The minimum number of rows to display, affecting the minimum height
  * @param props.maxRows - The maximum number of rows to display, affecting the maximum height
+ * @param props.layout - Table layout algorithm: 'auto' (default) or 'fixed'. See {@link TableProps['layout']}
  * @param props.isLoading - Custom loading state to show when isLoading is true
  * @param props.error - Custom error state
  * @param props.emptyState - Custom empty state to show when there's no data
@@ -120,47 +192,65 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @param props.onPageChange - Optional callback for pagination change
  * @param props.onPageHover - Optional callback for pagination hover
  * @param props.onPageSizeChange - Optional callback for pagination size change
+ * @param props.enableVirtualization - Enable internal scroll virtualization for large datasets
+ * @param props.estimatedRowHeight - Estimated row height in pixels for the virtualizer
+ * @param props.overscan - Number of extra rows rendered above/below viewport for virtualization
  * @param props.children - Render function that takes care of rendering the table rows
  * @see {@link DataTableProps} for all available props
  * @example
  * ```tsx
  * import { DataTableRoot, DataTable, DataTableBulkActions, TableRow, TableCell } from '@payfit/unity-components'
- * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
+ * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table'
  * import { useState, useMemo } from 'react'
  *
  * function EmployeeTable() {
  *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
  *   const [rowSelection, setRowSelection] = useState({})
  *
- *   // Memoize columns to prevent unnecessary re-renders
- *   const columns = useMemo(() => employeeColumns, [])
+ *   const columnHelper = createColumnHelper<Employee>()
+ *
+ *   // Define columns with optional width control for fixed layout
+ *   const columns = useMemo(() => [
+ *     columnHelper.accessor('name', {
+ *       header: 'Name',
+ *       meta: {
+ *         isRowHeader: true,
+ *         headerClassName: 'uy:w-[200px]' // Set explicit width for fixed layout
+ *       }
+ *     }),
+ *     columnHelper.accessor('position', {
+ *       header: 'Position',
+ *       meta: {
+ *         headerClassName: 'uy:w-1/3' // Use percentage for proportional width
+ *       }
+ *     }),
+ *     columnHelper.accessor('department', {
+ *       header: 'Department'
+ *       // No headerClassName: will share remaining space
+ *     })
+ *   ], [])
  *
  *   const table = useReactTable({
  *     data: employees,
  *     columns,
- *     // Provide stable row ID for better performance
  *     getRowId: (row) => row.id,
- *     state: {
- *       pagination,
- *       rowSelection,
- *     },
+ *     state: { pagination, rowSelection },
  *     onPaginationChange: setPagination,
  *     onRowSelectionChange: setRowSelection,
  *     getCoreRowModel: getCoreRowModel(),
  *     getPaginationRowModel: getPaginationRowModel(),
- *     // Enable row selection features
  *     enableRowSelection: true,
  *     enableMultiRowSelection: true,
  *   })
  *
- *   const actions = [
- *     { id: 'delete', label: 'Delete', onPress: handleDelete },
- *     { id: 'archive', label: 'Archive', onPress: handleArchive },
- *   ]
- *
  *   return (
  *     <DataTableRoot>
- *       <DataTable table={table} minRows={5} maxRows={10}>
+ *       <DataTable
+ *         table={table}
+ *         minRows={5}
+ *         maxRows={10}
+ *         layout="fixed" // Use fixed layout with explicit column widths
+ *       >
  *         {row => (
  *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
  *             {row.getVisibleCells().map(cell => (
@@ -179,9 +269,12 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @remarks
  * - For bulk actions, use DataTableBulkActions component alongside DataTable within DataTableRoot
  * - DataTableBulkActions provides the F6 keyboard shortcut for accessibility
+ * - **Layout modes**: Use `layout="auto"` (default) for content-driven columns with scrolling, or `layout="fixed"` for predictable widths that fit the container
+ * - **Setting column widths**: Add `headerClassName` to column meta with width classes (e.g., `'uy:w-[200px]'`, `'uy:w-1/3'`)
+ * - **Fixed layout best practices**: Set explicit widths on column headers and use truncation for overflow content
  * - [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
  */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/esm/components/data-table/DataTable.js

@@ -1,129 +1,143 @@
-import { jsxs as m, jsx as e, Fragment as E } from "react/jsx-runtime";
-import { useRef as R, useEffect as z } from "react";
+import { jsxs as i, jsx as o, Fragment as N } from "react/jsx-runtime";
+import { useRef as v, useEffect as F } from "react";
 import { flexRender as f } from "@tanstack/react-table";
-import { useId as I } from "react-aria";
-import { CircularIconButton as N } from "../icon-button/CircularIconButton.js";
-import { TableBody as F } from "../table/parts/TableBody.js";
-import { TableColumnHeader as M } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateLoading as O, TableEmptyStateError as j, TableEmptyStateNoData as B } from "../table/parts/TableEmptyState.js";
-import { TableHeader as $ } from "../table/parts/TableHeader.js";
-import { TablePagination as G } from "../table/parts/TablePagination.js";
-import { TableRoot as L, Table as Q } from "../table/Table.js";
-import { ColumnSortHeader as W } from "./parts/ColumnSortHeader.js";
-const b = ({
-  children: o,
+import { useId as M } from "react-aria";
+import { CircularIconButton as O } from "../icon-button/CircularIconButton.js";
+import { TableBody as j } from "../table/parts/TableBody.js";
+import { TableColumnHeader as B } from "../table/parts/TableColumnHeader.js";
+import { TableEmptyStateLoading as $, TableEmptyStateError as G, TableEmptyStateNoData as L } from "../table/parts/TableEmptyState.js";
+import { TableHeader as Q } from "../table/parts/TableHeader.js";
+import { TablePagination as W } from "../table/parts/TablePagination.js";
+import { TableRoot as k, Table as q } from "../table/Table.js";
+import { ColumnSortHeader as A } from "./parts/ColumnSortHeader.js";
+const C = ({
+  children: t,
   columnNameId: a,
   helperText: r
-}) => r !== void 0 ? /* @__PURE__ */ m("div", { className: "uy:flex uy:gap-50 uy:items-center", children: [
-  o,
-  /* @__PURE__ */ e(
-    N,
+}) => r !== void 0 ? /* @__PURE__ */ i("div", { className: "uy:flex uy:gap-50 uy:items-center", children: [
+  t,
+  /* @__PURE__ */ o(
+    O,
     {
       "aria-labelledby": a,
-      className: "uy:text-content-neutral-low uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-low",
       icon: "QuestionOutlined",
       title: r,
-      color: "content.neutral.low"
+      color: "content.neutral.lowest"
     }
   )
-] }) : /* @__PURE__ */ e(E, { children: o });
-function k({
-  table: o,
+] }) : /* @__PURE__ */ o(N, { children: t });
+function J({
+  table: t,
   isLoading: a,
   error: r,
   emptyState: u,
-  loadingState: C,
+  loadingState: b,
   errorState: T,
   pagination: c,
-  minRows: h,
-  maxRows: P,
-  onPageChange: S,
+  minRows: P,
+  maxRows: S,
+  onPageChange: h,
   onPageHover: x,
-  onPageSizeChange: w,
-  children: y,
-  ...i
+  onPageSizeChange: y,
+  children: D,
+  enableVirtualization: w,
+  estimatedRowHeight: H,
+  overscan: E,
+  ...m
 }) {
-  const p = R(null), D = I(), { pageIndex: s, pageSize: g } = o.getState().pagination;
-  z(() => {
-    p.current?.scrollToTop();
-  }, [s, g]);
-  const H = {
-    label: i.label,
-    description: i.description,
-    isHorizontalScrollEnabled: i.isHorizontalScrollEnabled
+  const s = v(null), R = M(), { pageIndex: p, pageSize: g } = t.getState().pagination;
+  F(() => {
+    s.current?.scrollToTop();
+  }, [p, g]);
+  const z = {
+    label: m.label,
+    description: m.description,
+    isHorizontalScrollEnabled: m.isHorizontalScrollEnabled,
+    layout: m.layout
   }, d = () => {
     if (a)
-      return C ?? /* @__PURE__ */ e(O, {});
+      return b ?? /* @__PURE__ */ o($, {});
     if (r)
-      return T ?? /* @__PURE__ */ e(j, {});
-  }, v = () => a || r ? d() : o.getRowModel().rows.length === 0 ? u ?? /* @__PURE__ */ e(B, {}) : u;
-  return /* @__PURE__ */ m(L, { minRows: h, maxRows: P, children: [
-    /* @__PURE__ */ m(Q, { ref: p, ...H, children: [
-      /* @__PURE__ */ e($, { children: o.getHeaderGroups().map(
-        (n) => n.headers.map((t) => {
-          const l = `${D}-column-name-${t.column.columnDef.id}`;
-          return /* @__PURE__ */ e(
-            M,
-            {
-              isFocusable: t.column.columnDef.meta?.isFocusable,
-              children: o.getRowModel().rows.length > 0 && t.column.getCanSort() ? /* @__PURE__ */ e(W, { header: t, children: /* @__PURE__ */ e(
-                b,
-                {
-                  columnNameId: l,
-                  helperText: t.column.columnDef.meta?.helperText,
-                  children: /* @__PURE__ */ e("span", { id: l, children: f(
-                    t.column.columnDef.header,
-                    t.getContext()
-                  ) })
-                }
-              ) }) : /* @__PURE__ */ e(
-                b,
+      return T ?? /* @__PURE__ */ o(G, {});
+  }, I = () => a || r ? d() : t.getRowModel().rows.length === 0 ? u ?? /* @__PURE__ */ o(L, {}) : u;
+  return /* @__PURE__ */ i(k, { minRows: P, maxRows: S, children: [
+    /* @__PURE__ */ i(
+      q,
+      {
+        ref: s,
+        ...z,
+        enableVirtualization: w,
+        estimatedRowHeight: H,
+        overscan: E,
+        children: [
+          /* @__PURE__ */ o(Q, { children: t.getHeaderGroups().map(
+            (n) => n.headers.map((e) => {
+              const l = `${R}-column-name-${e.column.columnDef.id}`;
+              return /* @__PURE__ */ o(
+                B,
                 {
-                  columnNameId: l,
-                  helperText: t.column.columnDef.meta?.helperText,
-                  children: /* @__PURE__ */ e("span", { id: l, children: f(
-                    t.column.columnDef.header,
-                    t.getContext()
-                  ) })
-                }
-              )
-            },
-            t.id
-          );
-        })
-      ) }),
-      /* @__PURE__ */ e(
-        F,
-        {
-          renderEmptyState: v,
-          renderDataState: d,
-          children: !a && !r && o.getRowModel().rows.map(y)
-        }
-      )
-    ] }),
-    o.getPageCount() > 0 && /* @__PURE__ */ e(
-      G,
+                  isFocusable: e.column.columnDef.meta?.isFocusable,
+                  className: e.column.columnDef.meta?.headerClassName,
+                  children: t.getRowModel().rows.length > 0 && e.column.getCanSort() ? /* @__PURE__ */ o(A, { header: e, children: /* @__PURE__ */ o(
+                    C,
+                    {
+                      columnNameId: l,
+                      helperText: e.column.columnDef.meta?.helperText,
+                      children: /* @__PURE__ */ o("span", { id: l, children: f(
+                        e.column.columnDef.header,
+                        e.getContext()
+                      ) })
+                    }
+                  ) }) : /* @__PURE__ */ o(
+                    C,
+                    {
+                      columnNameId: l,
+                      helperText: e.column.columnDef.meta?.helperText,
+                      children: /* @__PURE__ */ o("span", { id: l, children: f(
+                        e.column.columnDef.header,
+                        e.getContext()
+                      ) })
+                    }
+                  )
+                },
+                e.id
+              );
+            })
+          ) }),
+          /* @__PURE__ */ o(
+            j,
+            {
+              renderEmptyState: I,
+              renderDataState: d,
+              children: !a && !r && t.getRowModel().rows.map(D)
+            }
+          )
+        ]
+      }
+    ),
+    t.getPageCount() > 0 && /* @__PURE__ */ o(
+      W,
       {
-        pageCount: o.getPageCount(),
-        rowCount: o.getRowCount(),
-        currentPage: s + 1,
+        pageCount: t.getPageCount(),
+        rowCount: t.getRowCount(),
+        currentPage: p + 1,
         rowsPerPage: g,
         pageSizeOptions: c?.pageSizeOptions,
-        onPageChange: (n, t, l) => {
-          o.setPageIndex(n - 1), S?.(n - 1, t, l);
+        onPageChange: (n, e, l) => {
+          t.setPageIndex(n - 1), h?.(n - 1, e, l);
         },
         onPageHover: (n) => {
           x?.(n);
         },
         onPageSizeChange: (n) => {
-          o.setPageSize(n), w?.(n);
+          t.setPageSize(n), y?.(n);
         },
         itemLabel: c?.labels?.itemLabel
       }
     )
   ] });
 }
-k.displayName = "DataTable";
+J.displayName = "DataTable";
 export {
-  k as DataTable
+  J as DataTable
 };

package/dist/esm/components/data-table/mocks/employee-data.d.ts

@@ -15,3 +15,4 @@ export type Employee = {
     } | null;
 };
 export declare const employees: Employee[];
+export declare const employees500: Employee[];

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -14,7 +14,7 @@ const q = k({
     dialogHeader: "uy:flex uy:items-center uy:h-500 uy:w-full",
     dialogHeaderGroup: "uy:flex uy:items-center",
     calendarGrid: "uy:border-separate uy:border-spacing-25 uy:w-full",
-    calendarHeaderCell: "uy:typography-body-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
+    calendarHeaderCell: "uy:typography-body-small-strong uy:sm:typography-body-strong uy:text-content-neutral-low uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:uppercase",
     calendarCell: [
       // base styles
       "uy:typography-body uy:relative uy:text-content-form-enabled uy:w-[44px] uy:h-[44px] uy:p-[1px] uy:outline-hidden uy:cursor-pointer uy:rounded-circle uy:flex uy:items-center uy:justify-center",

package/dist/esm/components/date-calendar/parts/DateSegmentSelect.js

@@ -34,7 +34,7 @@ function x({
           m(t.target.value), p(s(t.target.value));
         },
         disabled: i,
-        className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",
+        className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:data-[focus-visible='true']:outline-2 uy:data-[focus-visible='true']:outline-offset-2 uy:data-[focus-visible='true']:outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",
         style: {
           "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${y.length}ch)`
         },

package/dist/esm/components/date-picker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { CalendarDate } from '@internationalized/date';
 import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
-export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
+export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
     /** The currently selected date */
     value?: CalendarDate | null;
     /** The default selected date (uncontrolled) */

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,28 +1,28 @@
 import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { forwardRef as V } from "react";
+import { forwardRef as U } from "react";
 import { uyTv as b } from "@payfit/unity-themes";
-import { DatePicker as N, Group as O, Button as W, Popover as I, Dialog as U } from "react-aria-components";
-import { useIntl as B } from "react-intl";
-import { DateCalendar as j } from "../date-calendar/DateCalendar.js";
-import { Icon as E } from "../icon/Icon.js";
-import { DateInput as M } from "./parts/DateInput.js";
-const R = b({
+import { DatePicker as B, Group as j, Button as E, Popover as M, Dialog as R } from "react-aria-components";
+import { useIntl as G } from "react-intl";
+import { DateCalendar as T } from "../date-calendar/DateCalendar.js";
+import { Icon as $ } from "../icon/Icon.js";
+import { DateInput as q } from "./parts/DateInput.js";
+const z = b({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
-      "uy:active:border-border-form-active uy:data-[focus-visible]:border-border-form-active"
+      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
+      "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active"
     ],
     inputWrapper: [
-      "uy:flex uy:grow uy:rounded-75 uy:outline-none",
+      "uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
       // Show focus styles when input wrapper is focused AND button is not focused
-      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
       // Hide focus styles when button is focused
       "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:text-content-neutral-low",
-      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:border-border-form-active",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[3px]"
+      "uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
     ]
   },
   variants: {
@@ -58,8 +58,8 @@ const R = b({
       }
     }
   ]
-}), G = b({
-  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
+}), A = b({
+  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
   variants: {
     isEntering: {
       true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out"
@@ -68,68 +68,77 @@ const R = b({
       true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
     }
   }
-}), T = V(
+}), H = U(
   ({
-    value: u,
+    value: t,
     defaultValue: i,
-    isInvalid: n,
+    isInvalid: d,
     isLoading: y,
     isDisabled: o,
-    isReadOnly: t,
+    isReadOnly: u,
     onClearButtonPress: c,
     onBlur: s,
-    onFocus: d,
+    onFocus: n,
     onChange: m,
     onOpenChange: p,
     id: g,
+    "aria-label": h,
+    "aria-labelledby": v,
+    "aria-describedby": x,
+    "aria-details": D,
     ...e
-  }, $) => {
-    const h = B(), { base: v, inputWrapper: x, suffix: D } = R({
-      isInvalid: !!n,
-      isReadOnly: !!t,
+  }, w) => {
+    const k = G(), { base: C, inputWrapper: P, suffix: V } = z({
+      isInvalid: !!d,
+      isReadOnly: !!u,
       isDisabled: !!o
     }), l = (r) => {
       m?.(r);
-    }, w = (r) => {
-      p?.(r), r ? d?.() : s?.();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, C = () => {
+    }, N = (r) => {
+      p?.(r), r ? n?.() : s?.();
+    }, O = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, W = () => {
       c?.();
     };
     return /* @__PURE__ */ f(
-      N,
+      B,
       {
+        ref: w,
         "data-dd-privacy": "mask",
         ...e,
-        className: v(),
-        value: u,
+        className: C(),
+        value: t,
         defaultValue: i,
         minValue: e.minValue,
         maxValue: e.maxValue,
-        isReadOnly: !!t,
+        isReadOnly: !!u,
         isDisabled: !!o,
         onChange: l,
-        onFocus: d,
+        onFocus: n,
         onBlur: s,
-        onOpenChange: w,
-        isDateUnavailable: k,
+        onOpenChange: N,
+        isDateUnavailable: O,
+        "aria-label": h,
+        "aria-labelledby": v,
+        "aria-describedby": x,
+        "aria-details": D,
         children: [
-          /* @__PURE__ */ f(O, { className: x(), id: g, children: [
+          /* @__PURE__ */ f(j, { className: P(), id: g, children: [
             /* @__PURE__ */ a(
-              M,
+              q,
               {
                 isLoading: y,
                 isDisabled: o,
-                isReadOnly: t,
-                isInvalid: n,
-                onClearButtonPress: C
+                isReadOnly: u,
+                isInvalid: d,
+                onClearButtonPress: W
               }
             ),
-            /* @__PURE__ */ a(W, { className: D(), isDisabled: t || o, children: /* @__PURE__ */ a(
-              E,
+            /* @__PURE__ */ a(E, { className: V(), isDisabled: u || o, children: /* @__PURE__ */ a(
+              $,
               {
                 src: "CalendarBlankOutlined",
                 color: "inherit",
-                alt: h.formatMessage({
+                alt: k.formatMessage({
                   id: "unity:component:form-field:date-picker:calendar-button",
                   defaultMessage: "Open Calendar"
                 })
@@ -137,13 +146,13 @@ const R = b({
             ) })
           ] }),
           /* @__PURE__ */ a(
-            I,
+            M,
             {
-              className: ({ isEntering: r, isExiting: P }) => G({ isEntering: r, isExiting: P }),
-              children: /* @__PURE__ */ a(U, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-                j,
+              className: ({ isEntering: r, isExiting: I }) => A({ isEntering: r, isExiting: I }),
+              children: /* @__PURE__ */ a(R, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                T,
                 {
-                  value: u,
+                  value: t,
                   defaultValue: i,
                   minValue: e.minValue,
                   maxValue: e.maxValue,
@@ -158,7 +167,7 @@ const R = b({
     );
   }
 );
-T.displayName = "DatePicker";
+H.displayName = "DatePicker";
 export {
-  T as DatePicker
+  H as DatePicker
 };