@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/client-side-pagination/parts/RawPaginationLink.js

@@ -1,28 +1,28 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { Link as o } from "react-aria-components";
+import { forwardRef as s } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { Link as i } from "react-aria-components";
 import { useIntl as l } from "react-intl";
-const d = s({
+const d = o({
   base: [
     "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:transition-colors",
     "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
-    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:cursor-not-allowed",
-    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
-    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-lowest-disabled uy:data-[disabled]:cursor-not-allowed",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
   ],
   variants: {
     isActive: {
-      true: "uy:bg-surface-neutral-active",
+      true: "uy:bg-surface-neutral-lowest-selected",
       false: ""
     }
   }
-}), y = i(
+}), y = s(
   ({ isActive: e, isDisabled: a, ...t }, n) => {
     const u = l();
     return /* @__PURE__ */ r(
-      o,
+      i,
       {
         ref: n,
         className: d({ isActive: e }),

package/dist/esm/components/collapsible/parts/CollapsibleContent.js

@@ -1,14 +1,14 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { DisclosurePanel as e } from "react-aria-components";
-const l = t(
+import { forwardRef as e } from "react";
+import { DisclosurePanel as t } from "react-aria-components";
+const l = e(
   ({ children: i, ...o }, r) => /* @__PURE__ */ a(
-    e,
+    t,
     {
       ref: r,
       "data-dd-privacy": "allow",
       ...o,
-      className: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0",
+      className: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0 uy:overflow-hidden uy:aria-hidden:max-h-0",
       children: /* @__PURE__ */ a("div", { className: "uy:ml-400 uy:typography-body", children: i })
     }
   )

package/dist/esm/components/collapsible/parts/CollapsibleTitle.js

@@ -1,14 +1,14 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as d, useContext as m } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
+import { forwardRef as d, useContext as p } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
 import { DisclosureStateContext as f, Heading as x, Button as b } from "react-aria-components";
 import { Icon as v } from "../../icon/Icon.js";
 import { Text as o } from "../../text/Text.js";
-const g = p({
+const g = m({
   slots: {
     base: "uy:w-full",
     button: [
-      "uy:flex uy:gap-50 uy:pb-100 uy:pt-100 uy:w-full uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
+      "uy:flex uy:gap-50 uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
     ],
     title: "uy:flex uy:grow uy:text-left uy:items-center",
     icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center"
@@ -27,11 +27,11 @@ const g = p({
     isExpanded: !1
   }
 }), w = d(
-  ({ children: a, suffix: e, ...r }, n) => {
-    const i = m(f), { base: l, button: s, title: u, icon: c } = g({
+  ({ children: r, suffix: e, ...a }, n) => {
+    const i = p(f), { base: l, button: s, title: u, icon: c } = g({
       isExpanded: i?.isExpanded
     });
-    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...r, ref: n, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
+    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...a, ref: n, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
       /* @__PURE__ */ t(
         v,
         {
@@ -40,7 +40,7 @@ const g = p({
           role: "presentation"
         }
       ),
-      /* @__PURE__ */ t(o, { variant: "bodyStrong", className: u(), children: a }),
+      /* @__PURE__ */ t(o, { variant: "bodyStrong", className: u(), children: r }),
       e ? /* @__PURE__ */ t(o, { variant: "body", children: e }) : null
     ] }) });
   }

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) */