@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -0,0 +1,146 @@
+import { jsx as e } from "react/jsx-runtime";
+import { tv as u } from "tailwind-variants";
+const c = u({
+  slots: {
+    base: [
+      "uy:flex uy:items-center uy:justify-center uy:rounded-50 uy:m-25 uy:w-200 uy:h-200 uy:text-content-inverted uy:border uy:border-solid uy:transition-all uy:duration-100"
+    ],
+    checkmark: [
+      "uy:w-[16px] uy:fill-none uy:stroke-[2px] uy:stroke-content-inverted uy:transition-all uy:duration-500"
+    ]
+  },
+  variants: {
+    isSelected: {
+      true: {
+        base: "uy:border-border-form-active uy:bg-surface-form-active"
+      }
+    },
+    isDisabled: {
+      true: ""
+    },
+    isReadOnly: {
+      true: ""
+    },
+    isInvalid: {
+      true: ""
+    }
+  },
+  defaultVariants: {
+    isSelected: !1,
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  },
+  compoundVariants: [
+    {
+      isSelected: !1,
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled"
+      }
+    },
+    {
+      isSelected: !1,
+      isDisabled: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isDisabled: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+        checkmark: "uy:text-border-form-disabled"
+      }
+    },
+    {
+      isSelected: !1,
+      isInvalid: !0,
+      className: {
+        base: "uy:border-border-form-error uy:bg-surface-form-enabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isInvalid: !0,
+      className: {
+        base: "uy:border-border-form-error! uy:bg-surface-danger!",
+        checkmark: "uy:text-content-inverted"
+      }
+    },
+    {
+      isSelected: !1,
+      isReadOnly: !0,
+      className: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isReadOnly: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+        checkmark: "uy:text-border-form-read-only"
+      }
+    }
+  ]
+});
+function n({
+  isSelected: r,
+  isDisabled: s,
+  isIndeterminate: a,
+  isInvalid: t,
+  isReadOnly: d,
+  className: o
+}) {
+  const { base: i, checkmark: l } = c({
+    isSelected: r || a,
+    isDisabled: s,
+    isInvalid: t,
+    isReadOnly: d
+  });
+  return /* @__PURE__ */ e("div", { className: i({ className: o }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
+    "svg",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 16 16",
+      "aria-hidden": "true",
+      className: l(),
+      style: {
+        strokeDashoffset: r ? 44 : 66
+      },
+      children: a ? /* @__PURE__ */ e(
+        "rect",
+        {
+          x: "3",
+          y: "7",
+          width: "10",
+          height: "2",
+          rx: "0.5",
+          stroke: "none",
+          fill: "currentColor"
+        }
+      ) : /* @__PURE__ */ e(
+        "polyline",
+        {
+          points: "3.5,8 6.5,11 12.5,5",
+          stroke: "currentColor",
+          strokeDasharray: "22",
+          strokeLinecap: "butt",
+          strokeLinejoin: "bevel"
+        }
+      )
+    }
+  ) });
+}
+n.displayName = "CheckboxIndicator";
+export {
+  n as CheckboxIndicator
+};

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

@@ -0,0 +1,61 @@
+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 { FormControl as j } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as w } from "../form-field/parts/FormFeedbackText.js";
+function N({
+  name: o,
+  children: e,
+  defaultSelected: r,
+  helperText: m,
+  contextualLink: c,
+  isRequired: i,
+  isInvalid: l,
+  isLoading: n,
+  isDisabled: f,
+  isReadOnly: s,
+  requiredVariant: p,
+  ...x
+}, d) {
+  const { control: F, watch: a } = k(), u = a(o);
+  return /* @__PURE__ */ h(
+    y,
+    {
+      control: F,
+      name: o,
+      className: "uy:flex uy:flex-col uy:gap-100",
+      ...{
+        isRequired: i,
+        isInvalid: l,
+        isLoading: n,
+        isDisabled: f,
+        isReadOnly: s
+      },
+      children: [
+        /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(
+          C,
+          {
+            ref: d,
+            defaultSelected: r,
+            isSelected: u,
+            requiredVariant: p,
+            helperText: m,
+            feedbackText: /* @__PURE__ */ t(w, {}),
+            ...x,
+            children: e
+          }
+        ) }),
+        c
+      ]
+    }
+  );
+}
+const P = b(function(e, r) {
+  return N(e, r);
+});
+P.displayName = "CheckboxField";
+export {
+  P as CheckboxField
+};

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

@@ -0,0 +1,65 @@
+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. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the checkbox group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** The current selected values of the checkbox group (controlled). */
+    value?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: AriaCheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: AriaCheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `CheckboxGroup` component is an accessible group of related checkboxes.
+ * It provides a way to select multiple options from a list of choices.
+ * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
+ *
+ * <CheckboxGroup
+ *   label="Notification preferences"
+ *   helperText="Choose how you want to receive notifications"
+ * >
+ *   <Checkbox value="email">Email notifications</Checkbox>
+ *   <Checkbox value="sms">SMS notifications</Checkbox>
+ *   <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CheckboxGroup };

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

@@ -0,0 +1,73 @@
+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 { Label as v } from "../label/Label.js";
+import { Text as c } from "../text/Text.js";
+const G = b({
+  base: "uy:flex uy:flex-col uy:gap-50"
+}), C = d(
+  ({
+    label: t,
+    helperText: l,
+    feedbackText: o,
+    isDisabled: e,
+    isReadOnly: n,
+    isInvalid: m,
+    isRequired: s,
+    isLoading: a,
+    children: p,
+    requiredVariant: i,
+    ...u
+  }, y) => /* @__PURE__ */ f(
+    g,
+    {
+      ...{
+        isDisabled: e,
+        isReadOnly: n,
+        isInvalid: m,
+        isRequired: s,
+        isLoading: a
+      },
+      ...u,
+      ref: y,
+      className: G(),
+      children: [
+        t && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: t }),
+        l && /* @__PURE__ */ r(
+          c,
+          {
+            variant: "bodySmall",
+            color: "content.neutral.low",
+            slot: "description",
+            children: l
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25",
+            "data-dd-privacy": "mask",
+            children: p
+          }
+        ),
+        m && (typeof o == "string" ? /* @__PURE__ */ r(
+          c,
+          {
+            variant: "bodySmallStrong",
+            color: "content.form.invalid",
+            slot: "errorMessage",
+            children: o
+          }
+        ) : x(o) && h(o, {
+          slot: "errorMessage"
+        }))
+      ]
+    }
+  )
+);
+C.displayName = "CheckboxGroup";
+export {
+  C as CheckboxGroup,
+  G as checkboxGroup
+};

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.js

@@ -0,0 +1,54 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as a } from "react-hook-form";
+import { CheckboxGroup as G } from "../checkbox-group/CheckboxGroup.js";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as w } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.js";
+function P({
+  name: o,
+  label: r,
+  defaultValue: e,
+  helperText: m,
+  contextualLink: c,
+  isRequired: i,
+  isInvalid: n,
+  isLoading: p,
+  isDisabled: f,
+  isReadOnly: l,
+  requiredVariant: d,
+  children: s,
+  ...u
+}, x) {
+  const { control: F, watch: h } = a(), b = h(o);
+  return /* @__PURE__ */ k(j, { control: F, name: o, ...{
+    isRequired: i,
+    isInvalid: n,
+    isLoading: p,
+    isDisabled: f,
+    isReadOnly: l
+  }, children: [
+    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+      G,
+      {
+        ref: x,
+        label: r,
+        defaultValue: e,
+        value: b,
+        helperText: m,
+        feedbackText: /* @__PURE__ */ t(y, {}),
+        requiredVariant: d,
+        ...u,
+        children: s
+      }
+    ) }),
+    c
+  ] });
+}
+const T = C(function(r, e) {
+  return P(r, e);
+});
+T.displayName = "CheckboxGroupField";
+export {
+  T as CheckboxGroupField
+};

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

@@ -0,0 +1,23 @@
+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,
+    {
+      "data-dd-privacy": "allow",
+      ...l,
+      className: f(),
+      ref: t,
+      isExpanded: i,
+      children: o
+    }
+  )
+);
+a.displayName = "Collapsible";
+export {
+  a as Collapsible
+};

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

@@ -0,0 +1,10 @@
+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 }) })
+);
+i.displayName = "CollapsibleContent";
+export {
+  i as CollapsibleContent
+};

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

@@ -0,0 +1,51 @@
+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 { Icon as v } from "../../icon/Icon.js";
+import { Text as r } from "../../text/Text.js";
+const h = b({
+  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",
+    title: "uy:flex uy:grow uy:text-left uy:items-center",
+    icon: "uy:mr-100"
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        icon: "uy:rotate-180"
+      },
+      false: {
+        icon: "uy:rotate-0"
+      }
+    }
+  },
+  defaultVariants: {
+    isExpanded: !1
+  }
+}), w = m(
+  ({ 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
+    });
+    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
+    ] }) });
+  }
+);
+w.displayName = "CollapsibleTitle";
+export {
+  w as CollapsibleTitle
+};

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

@@ -0,0 +1,91 @@
+import { default as React } from 'react';
+import { Row, Table as TableType } from '@tanstack/react-table';
+import { TablePaginationProps } from '../table/parts/TablePagination.js';
+import { TableProps, TableRootProps } from '../table/Table.js';
+export interface DataTablePaginationLabels {
+    /** Label for the "rows per page" and pagination label dropdown */
+    itemLabel?: string;
+}
+export interface DataTablePaginationOptions {
+    /** Available options in the "rows per page" dropdown */
+    pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
+    /** Custom labels for pagination */
+    labels?: DataTablePaginationLabels;
+}
+export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
+    /** The table instance from @tanstack/react-table */
+    table: TableType<TData>;
+    /** Optional loading state */
+    isLoading?: boolean;
+    /** Optional error state */
+    error?: Error | null;
+    /** Custom empty state when there's no data */
+    emptyState?: React.ReactNode;
+    /** Custom loading state */
+    loadingState?: React.ReactNode;
+    /** Custom error state */
+    errorState?: React.ReactNode;
+    /** Pagination customization */
+    pagination?: DataTablePaginationOptions;
+    /** Render function for table rows */
+    children: (row: Row<TData>) => React.ReactNode;
+}
+/**
+ * A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
+ *
+ * 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.
+ * @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.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
+ * @param props.loadingState - Custom loading state to show when `isLoading` is true
+ * @param props.errorState - Custom error state to show when `error` is not null
+ * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
+ * @param props.children - Render function that takes care of rendering the table rows
+ * @see {@link DataTableProps} for all available props
+ * @example
+ * ```tsx
+ * import { DataTable, TableRow, TableCell } from '@payfit/unity-components'
+ * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
+ * import { useState } from 'react'
+ *
+ * function EmployeeTable() {
+ *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
+ *
+ *   const table = useReactTable({
+ *     data: employees,
+ *     columns: employeeColumns,
+ *     state: { pagination },
+ *     onPaginationChange: setPagination,
+ *     getCoreRowModel: getCoreRowModel(),
+ *     getPaginationRowModel: getPaginationRowModel(),
+ *   })
+ *
+ *   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>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [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 {
+    var displayName: string;
+}
+export { DataTable };

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

@@ -0,0 +1,82 @@
+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,
+  emptyState: i,
+  loadingState: S,
+  errorState: T,
+  pagination: n,
+  minRows: P,
+  maxRows: b,
+  children: C,
+  ...m
+}) {
+  var p;
+  const c = x(null), { pageIndex: s, pageSize: u } = e.getState().pagination;
+  E(() => {
+    var r;
+    (r = c.current) == null || r.scrollToTop();
+  }, [s, u]);
+  const h = {
+    label: m.label,
+    description: m.description,
+    isHorizontalScrollEnabled: m.isHorizontalScrollEnabled
+  }, d = () => {
+    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))
+      ) }),
+      /* @__PURE__ */ o(
+        R,
+        {
+          renderEmptyState: w,
+          renderDataState: d,
+          children: !l && !a && e.getRowModel().rows.map(C)
+        }
+      )
+    ] }),
+    e.getPageCount() > 1 && /* @__PURE__ */ o(
+      j,
+      {
+        pageCount: e.getPageCount(),
+        rowCount: e.getPaginationRowModel().rows.length,
+        currentPage: s + 1,
+        rowsPerPage: u,
+        pageSizeOptions: n == null ? void 0 : n.pageSizeOptions,
+        onPageChange: (r) => {
+          e.setPageIndex(r - 1);
+        },
+        onPageSizeChange: (r) => {
+          e.setPageSize(r);
+        },
+        itemLabel: (p = n == null ? void 0 : n.labels) == null ? void 0 : p.itemLabel
+      }
+    )
+  ] });
+}
+v.displayName = "DataTable";
+export {
+  v as DataTable
+};

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

@@ -0,0 +1,3 @@
+import { Employee } from './employee-data.js';
+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>)[];

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

@@ -0,0 +1,17 @@
+export type Employee = {
+    id: string;
+    name: string;
+    position: string;
+    avatarUrl: string;
+    team: string;
+    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
+    startWorkingDate: string;
+    endWorkingDate: string;
+    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
+    manager: {
+        name: string;
+        position: string;
+        team: string;
+    } | null;
+};
+export declare const employees: Employee[];