@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/checkbox-field/CheckboxField.js

@@ -1,49 +1,54 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { useFormContext as k } from "react-hook-form";
-import { Checkbox as C } from "../checkbox/Checkbox.js";
-import { FormField as y } from "../form-field/FormField.js";
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as y } from "react";
+import { useFormContext as R } from "react-hook-form";
+import { Checkbox as q } from "../checkbox/Checkbox.js";
+import { FormField as P } from "../form-field/FormField.js";
 import { FormControl as j } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as w } from "../form-field/parts/FormFeedbackText.js";
-function N({
+import { FormFeedbackText as v } from "../form-field/parts/FormFeedbackText.js";
+import { isFieldRequired as w } from "../form-field/utils/isFieldRequired.js";
+import { useUnityFormProvider as N } from "../form/Form.context.js";
+function S({
   name: o,
   children: e,
   defaultSelected: r,
-  helperText: m,
+  helperText: t,
   contextualLink: c,
-  isRequired: i,
-  isInvalid: l,
-  isLoading: n,
-  isDisabled: f,
-  isReadOnly: s,
+  isRequired: s,
+  isInvalid: d,
+  isLoading: l,
+  isDisabled: n,
+  isReadOnly: f,
   requiredVariant: p,
-  ...x
-}, d) {
-  const { control: F, watch: a } = k(), u = a(o);
-  return /* @__PURE__ */ h(
-    y,
+  ...u
+}, x) {
+  const { control: F, watch: h } = R(), { schema: m } = N(), a = y(
+    () => w(m, o),
+    [m, o]
+  ), b = h(o);
+  return /* @__PURE__ */ k(
+    P,
     {
       control: F,
       name: o,
       className: "uy:flex uy:flex-col uy:gap-100",
       ...{
-        isRequired: i,
-        isInvalid: l,
-        isLoading: n,
-        isDisabled: f,
-        isReadOnly: s
+        isInvalid: d,
+        isLoading: l,
+        isDisabled: n,
+        isReadOnly: f
       },
       children: [
-        /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(
-          C,
+        /* @__PURE__ */ i(j, { children: /* @__PURE__ */ i(
+          q,
           {
-            ref: d,
+            ref: x,
             defaultSelected: r,
-            isSelected: u,
+            isSelected: b,
             requiredVariant: p,
-            helperText: m,
-            feedbackText: /* @__PURE__ */ t(w, {}),
-            ...x,
+            helperText: t,
+            feedbackText: /* @__PURE__ */ i(v, {}),
+            ...u,
+            isRequired: a ?? s,
             children: e
           }
         ) }),
@@ -52,10 +57,10 @@ function N({
     }
   );
 }
-const P = b(function(e, r) {
-  return N(e, r);
+const T = C(function(e, r) {
+  return S(e, r);
 });
-P.displayName = "CheckboxField";
+T.displayName = "CheckboxField";
 export {
-  P as CheckboxField
+  T as CheckboxField
 };

package/dist/esm/components/checkbox-group/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-50", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-50", unknown, unknown, undefined>>;
 export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
     /** The label for the checkbox group. */

package/dist/esm/components/checkbox-group/CheckboxGroup.js

@@ -1,31 +1,31 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { forwardRef as d, isValidElement as x, cloneElement as h } from "react";
-import { CheckboxGroup as g } from "react-aria-components";
-import { tv as b } from "tailwind-variants";
+import { uyTv as g } from "@payfit/unity-themes";
+import { CheckboxGroup as b } from "react-aria-components";
 import { Label as v } from "../label/Label.js";
 import { Text as c } from "../text/Text.js";
-const G = b({
+const G = g({
   base: "uy:flex uy:flex-col uy:gap-50"
 }), C = d(
   ({
-    label: t,
-    helperText: l,
+    label: l,
+    helperText: m,
     feedbackText: o,
     isDisabled: e,
     isReadOnly: n,
-    isInvalid: m,
+    isInvalid: t,
     isRequired: s,
     isLoading: a,
     children: p,
     requiredVariant: i,
     ...u
   }, y) => /* @__PURE__ */ f(
-    g,
+    b,
     {
       ...{
         isDisabled: e,
         isReadOnly: n,
-        isInvalid: m,
+        isInvalid: t,
         isRequired: s,
         isLoading: a
       },
@@ -33,14 +33,14 @@ const G = b({
       ref: y,
       className: G(),
       children: [
-        t && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: t }),
-        l && /* @__PURE__ */ r(
+        l && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: l }),
+        m && /* @__PURE__ */ r(
           c,
           {
             variant: "bodySmall",
             color: "content.neutral.low",
             slot: "description",
-            children: l
+            children: m
           }
         ),
         /* @__PURE__ */ r(
@@ -51,7 +51,7 @@ const G = b({
             children: p
           }
         ),
-        m && (typeof o == "string" ? /* @__PURE__ */ r(
+        t && (typeof o == "string" ? /* @__PURE__ */ r(
           c,
           {
             variant: "bodySmallStrong",

package/dist/esm/components/collapsible/Collapsible.js

@@ -1,23 +1,29 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Disclosure as r } from "react-aria-components";
-import { tv as e } from "tailwind-variants";
-const f = e({
-  base: "uy:w-full uy:rounded-50 uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring"
-}), a = s(
-  ({ children: o, isExpanded: i, ...l }, t) => /* @__PURE__ */ u(
-    r,
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as e } from "@payfit/unity-themes";
+import { Disclosure as l } from "react-aria-components";
+const r = e({
+  base: [
+    "uy:w-full uy:rounded-50",
+    "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
+    "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
+    "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
+    "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
+  ]
+}), n = u(
+  ({ children: i, isExpanded: t, ...o }, s) => /* @__PURE__ */ a(
+    l,
     {
       "data-dd-privacy": "allow",
-      ...l,
-      className: f(),
-      ref: t,
-      isExpanded: i,
-      children: o
+      ...o,
+      className: r(),
+      ref: s,
+      isExpanded: t,
+      children: i
     }
   )
 );
-a.displayName = "Collapsible";
+n.displayName = "Collapsible";
 export {
-  a as Collapsible
+  n as Collapsible
 };

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

@@ -1,10 +1,19 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { DisclosurePanel as t } from "react-aria-components";
-const i = e(
-  ({ children: r, ...l }, a) => /* @__PURE__ */ o(t, { ref: a, "data-dd-privacy": "allow", ...l, children: /* @__PURE__ */ o("div", { className: "uy:ml-400 uy:typography-body", children: r }) })
+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(
+  ({ children: i, ...o }, r) => /* @__PURE__ */ a(
+    e,
+    {
+      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",
+      children: /* @__PURE__ */ a("div", { className: "uy:ml-400 uy:typography-body", children: i })
+    }
+  )
 );
-i.displayName = "CollapsibleContent";
+l.displayName = "CollapsibleContent";
 export {
-  i as CollapsibleContent
+  l as CollapsibleContent
 };

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

@@ -1,15 +1,17 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as m, useContext as p } from "react";
-import { DisclosureStateContext as y, Heading as f, Button as x } from "react-aria-components";
-import { tv as b } from "tailwind-variants";
+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 { DisclosureStateContext as f, Heading as x, Button as b } from "react-aria-components";
 import { Icon as v } from "../../icon/Icon.js";
 import { Text as r } from "../../text/Text.js";
-const h = b({
+const g = p({
   slots: {
     base: "uy:w-full",
-    button: "uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:hover:text-content-neutral-hover uy:focus-visible:outline-none",
+    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"
+    ],
     title: "uy:flex uy:grow uy:text-left uy:items-center",
-    icon: "uy:mr-100"
+    icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center"
   },
   variants: {
     isExpanded: {
@@ -24,24 +26,22 @@ const h = b({
   defaultVariants: {
     isExpanded: !1
   }
-}), w = m(
+}), w = d(
   ({ children: a, suffix: o, ...n }, i) => {
-    const t = p(y), { base: s, button: u, title: c, icon: d } = h({
-      isExpanded: t == null ? void 0 : t.isExpanded
+    const e = m(f), { base: l, button: s, title: u, icon: c } = g({
+      isExpanded: e == null ? void 0 : e.isExpanded
     });
-    return /* @__PURE__ */ e(f, { "data-dd-privacy": "allow", ...n, ref: i, className: s(), children: /* @__PURE__ */ l(x, { className: u(), slot: "trigger", children: [
-      /* @__PURE__ */ l(r, { variant: "bodyStrong", className: c(), children: [
-        /* @__PURE__ */ e(
-          v,
-          {
-            src: "CaretDownOutlined",
-            className: d(),
-            role: "presentation"
-          }
-        ),
-        a
-      ] }),
-      o ? /* @__PURE__ */ e(r, { variant: "body", children: o }) : null
+    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...n, ref: i, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
+      /* @__PURE__ */ t(
+        v,
+        {
+          src: "CaretDownOutlined",
+          className: c(),
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ t(r, { variant: "bodyStrong", className: u(), children: a }),
+      o ? /* @__PURE__ */ t(r, { variant: "body", children: o }) : null
     ] }) });
   }
 );

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

@@ -1,7 +1,15 @@
 import { default as React } from 'react';
-import { Row, Table as TableType } from '@tanstack/react-table';
+import { Row, RowData, Table as TableType } from '@tanstack/react-table';
 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> {
+        isRowHeader?: boolean;
+        className?: string;
+        helperText?: string;
+        isFocusable?: boolean;
+    }
+}
 export interface DataTablePaginationLabels {
     /** Label for the "rows per page" and pagination label dropdown */
     itemLabel?: string;
@@ -50,39 +58,62 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @see {@link DataTableProps} for all available props
  * @example
  * ```tsx
- * import { DataTable, TableRow, TableCell } from '@payfit/unity-components'
+ * import { DataTableRoot, DataTable, DataTableBulkActions, TableRow, TableCell } from '@payfit/unity-components'
  * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
- * import { useState } from 'react'
+ * 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 table = useReactTable({
  *     data: employees,
- *     columns: employeeColumns,
- *     state: { pagination },
+ *     columns,
+ *     // Provide stable row ID for better performance
+ *     getRowId: (row) => row.id,
+ *     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 (
- *     <DataTable table={table} minRows={5} maxRows={10}>
- *       {row => (
- *         <TableRow key={row.id}>
- *           {row.getVisibleCells().map(cell => (
- *             <TableCell key={cell.id}>
- *               {flexRender(cell.column.columnDef.cell, cell.getContext())}
- *             </TableCell>
- *           ))}
- *         </TableRow>
- *       )}
- *     </DataTable>
+ *     <DataTableRoot>
+ *       <DataTable table={table} minRows={5} maxRows={10}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
  *   )
  * }
  * ```
  * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
+ * - For bulk actions, use DataTableBulkActions component alongside DataTable within DataTableRoot
+ * - DataTableBulkActions provides the F6 keyboard shortcut for accessibility
+ * - [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, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {

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

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

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

@@ -1,3 +1,7 @@
 import { Employee } from './employee-data.js';
+/**
+ * Creates optimized checkbox column with stable handlers to prevent unnecessary re-renders
+ */
+export declare const createCheckboxColumn: () => import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>;
 export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
 export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];