@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -0,0 +1,67 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as x, useContext as D } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useDrag as h } from "@use-gesture/react";
+import { OverlayTriggerStateContext as v } from "react-aria-components";
+import { useBreakpointListener as P } from "../../../hooks/use-breakpoint-listener.js";
+const S = b({
+  slots: {
+    base: [
+      "uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500",
+      "uy:cursor-grab uy:touch-action-none"
+    ],
+    indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
+  }
+}), T = 100;
+function I() {
+  const r = x(null), n = D(v), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = h(
+    (d) => {
+      var o;
+      const {
+        movement: [N, e],
+        direction: [E, m],
+        intentional: f,
+        cancel: y,
+        last: p,
+        event: g
+      } = d;
+      if (!u) {
+        y();
+        return;
+      }
+      g.preventDefault();
+      const t = (o = r.current) == null ? void 0 : o.closest(
+        "[data-unity-side-panel]"
+      );
+      if (t) {
+        if (e < 0) {
+          t.style.transform = "translate3d(0, 0, 0)";
+          return;
+        }
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > T || m > 0 ? n && setTimeout(() => {
+          n.close();
+        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
+      }
+    },
+    {
+      axis: "y",
+      filterTaps: !0,
+      threshold: 5
+    }
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(),
+      "aria-hidden": "true",
+      ref: r,
+      ...c(),
+      children: /* @__PURE__ */ a("div", { className: l() })
+    }
+  );
+}
+I.displayName = "SidePanelDragIndicator";
+export {
+  I as SidePanelDragIndicator,
+  S as sidePanelDragIndicator
+};

package/dist/esm/components/side-panel/parts/SidePanelFooter.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
+    className?: string;
+}
+/**
+ * The `SidePanelFooter` component renders the footer section of a side panel.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {SidePanelFooterProps} props - The props for the `SidePanelFooter` component
+ * @example
+ * ```tsx
+ * import { SidePanelFooter, Button } from '@payfit/unity-components'
+ *
+ * <SidePanelFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </SidePanelFooter>
+ * ```
+ * @see {@link SidePanelFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelFooter: import('react').ForwardRefExoticComponent<SidePanelFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelFooter };

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -0,0 +1,20 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+const a = t({
+  base: [
+    "uy:py-200 uy:px-300 uy:w-full",
+    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0",
+    "uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
+    "uy:sticky uy:bottom-0 uy:z-10",
+    "uy:mt-auto",
+    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
+  ]
+}), d = y(
+  ({ children: e, ...r }, o) => /* @__PURE__ */ u("footer", { ref: o, className: a(), ...r, children: e })
+);
+d.displayName = "SidePanelFooter";
+export {
+  d as SidePanelFooter,
+  a as sidePanelFooter
+};

package/dist/esm/components/side-panel/parts/SidePanelHeader.d.ts

@@ -0,0 +1,59 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface SidePanelHeaderProps extends PropsWithChildren<VariantProps<typeof sidePanelHeader>> {
+    className?: string;
+}
+/**
+ * The `SidePanelHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {SidePanelHeaderProps} props - The props for the `SidePanelHeader` component
+ * @example
+ * ```tsx
+ * import { SidePanelHeader } from '@payfit/unity-components'
+ *
+ * <SidePanelHeader>Title of the panel</SidePanelHeader>
+ * ```
+ * @see {@link SidePanelHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelHeader: import('react').ForwardRefExoticComponent<SidePanelHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelHeader };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+import { Heading as i } from "react-aria-components";
+import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
+const d = y({
+  // add the component styles
+  slots: {
+    base: [
+      "uy:py-200 uy:px-300 uy:w-full",
+      "uy:flex uy:flex-col uy:shrink-0",
+      "uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
+      "uy:sticky uy:top-0 uy:z-10"
+    ],
+    content: ["uy:flex uy:items-center uy:justify-between uy:w-full"],
+    heading: [
+      "uy:typography-h2 uy:md:typography-h3 uy:text-content-neutral uy:truncate"
+    ]
+  }
+}), m = s(
+  ({ children: t, ...o }, r) => {
+    const { base: u, content: n, heading: l } = d();
+    return /* @__PURE__ */ e("header", { ref: r, className: u(), ...o, children: /* @__PURE__ */ a("div", { className: n(), children: [
+      /* @__PURE__ */ e(i, { slot: "title", className: l(), children: t }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          asElement: "button",
+          slot: "close",
+          icon: "CloseOutlined",
+          title: "Close",
+          size: "large",
+          color: "content.neutral.low"
+        }
+      )
+    ] }) });
+  }
+);
+m.displayName = "SidePanelHeader";
+export {
+  m as SidePanelHeader,
+  d as sidePanelHeader
+};

package/dist/esm/components/skip-links/SkipLinks.d.ts

@@ -0,0 +1,79 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
+    label?: string;
+}
+export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
+    /** The target element ID to skip to */
+    targetId: string;
+}
+/**
+ * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
+ *
+ * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
+ * allowing keyboard users to quickly jump to important sections like main content, toolbars,
+ * or action areas. It follows WCAG guidelines for skip navigation.
+ * @param props - The props for the SkipLinks component
+ * @param props.label - Optional label for the skip links navigation section
+ * @param props.children - SkipLink components
+ * @example
+ * ```tsx
+ * import { SkipLinks, SkipLink } from '@payfit/unity-components'
+ *
+ * function TableWithActions() {
+ *   return (
+ *     <div>
+ *       <SkipLinks label="Quick navigation:">
+ *         <SkipLink targetId="main-content">
+ *           Skip to main content
+ *         </SkipLink>
+ *         <SkipLink targetId="table-actions-toolbar">
+ *           Skip to actions
+ *         </SkipLink>
+ *       </SkipLinks>
+ *       <div id="main-content" tabIndex={-1}>
+ *         Main content
+ *       </div>
+ *       <div id="table-actions-toolbar" tabIndex={-1}>
+ *         Action bar content
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Skip links are visually hidden by default and become visible when focused
+ * - Each link should target an element with a valid ID and tabIndex={-1}
+ * - The component follows WCAG 2.1 guidelines for skip navigation
+ * @see {@link SkipLinksProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * SkipLink component represents a single skip navigation link
+ *
+ * The SkipLink component should be used as a child of SkipLinks to create individual
+ * navigation shortcuts. It automatically handles focus management and accessibility.
+ * @param props - The props for the SkipLink component
+ * @param props.targetId - The ID of the target element to skip to
+ * @param props.children - The link text content
+ * @example
+ * ```tsx
+ * import { SkipLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SkipLink targetId="main-content">
+ *       Skip to main content
+ *     </SkipLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Should only be used as a child of SkipLinks component
+ * - Automatically focuses the target element when activated
+ * @see {@link SkipLinkProps} for all available props
+ */
+declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { SkipLinks, SkipLink };

package/dist/esm/components/skip-links/SkipLinks.js

@@ -0,0 +1,80 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l, useId as y } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { FormattedMessage as m } from "react-intl";
+import { Link as f } from "../link/Link.js";
+const b = p({
+  slots: {
+    base: [
+      "uy:sr-only",
+      "uy:focus-within:p-200",
+      "uy:focus-within:bg-surface-neutral",
+      "uy:focus-within:shadow-raising",
+      "uy:focus-within:rounded-100",
+      "uy:focus-within:not-sr-only",
+      "uy:focus-within:absolute",
+      "uy:focus-within:top-100",
+      "uy:focus-within:left-100",
+      "uy:focus-within:z-50"
+    ],
+    label: "uy:typography-h4",
+    list: "uy:mt-1 uy:space-y-1 uy:list-none"
+  }
+}), k = l(
+  ({ label: s, className: e, children: n, ...a }, i) => {
+    const o = `skip-links-label-${y()}`;
+    if (!n)
+      return null;
+    const { base: r, label: u, list: c } = b();
+    return /* @__PURE__ */ d(
+      "nav",
+      {
+        "data-dd-privacy": "allow",
+        ...a,
+        ref: i,
+        className: r({ className: e }),
+        role: "navigation",
+        "aria-labelledby": o,
+        "data-unity-component": "SkipLinks",
+        children: [
+          /* @__PURE__ */ t("span", { id: o, className: u(), children: s || /* @__PURE__ */ t(
+            m,
+            {
+              id: "unity:component:skip-links:label",
+              defaultMessage: "Skip to:"
+            }
+          ) }),
+          /* @__PURE__ */ t("ol", { className: c(), children: n })
+        ]
+      }
+    );
+  }
+), h = l(
+  ({ targetId: s, children: e, ...n }, a) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+    f,
+    {
+      ...n,
+      ref: a,
+      size: "small",
+      color: "primary",
+      variant: "standalone",
+      onPress: () => {
+        const i = document.getElementById(s);
+        i && (i.focus(), i.hasAttribute("tabindex") || (i.setAttribute("tabindex", "-1"), i.addEventListener(
+          "blur",
+          () => {
+            i.removeAttribute("tabindex");
+          },
+          { once: !0 }
+        )));
+      },
+      children: e
+    }
+  ) })
+);
+k.displayName = "SkipLinks";
+h.displayName = "SkipLink";
+export {
+  h as SkipLink,
+  k as SkipLinks
+};

package/dist/esm/components/spinner/Spinner.js

@@ -0,0 +1,108 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import f from "../../hooks/use-id.js";
+const h = m({
+  slots: {
+    base: "uy:flex uy:flex-col uy:items-center uy:gap-200",
+    indicator: "",
+    label: "uy:typography-body uy:text-left uy:truncate"
+  },
+  variants: {
+    size: {
+      small: {
+        indicator: "uy:w-200 uy:h-200",
+        label: "uy:hidden"
+      },
+      medium: {
+        indicator: "uy:w-300 uy:h-300"
+      }
+    },
+    color: {
+      primary: {
+        indicator: "uy:text-content-primary"
+      },
+      inverted: {
+        indicator: "uy:text-content-inverted",
+        label: "uy:text-content-inverted"
+      },
+      inherit: {
+        indicator: ""
+      }
+    }
+  },
+  defaultVariants: {
+    size: "small",
+    color: "primary"
+  }
+});
+function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
+  const a = `spinner-label-${f()}`, {
+    base: d,
+    indicator: y,
+    label: u
+  } = h({
+    size: e,
+    color: o
+  });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...s,
+      ref: c,
+      role: r,
+      className: d(),
+      "aria-labelledby": r === "status" ? a : void 0,
+      "aria-live": "polite",
+      "data-dd-privacy": "allow",
+      children: [
+        /* @__PURE__ */ t(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            className: y(),
+            children: [
+              /* @__PURE__ */ i("title", { children: "Loading" }),
+              /* @__PURE__ */ i(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "currentColor",
+                  style: {
+                    "--r": "45px",
+                    "--1deg": "calc(2 * pi * var(--r) / 360)",
+                    strokeWidth: "9.6px",
+                    shapeRendering: "geometricPrecision",
+                    strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
+                    transformOrigin: "50% 50%",
+                    animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            id: a,
+            className: u(),
+            "aria-hidden": e !== "small",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+n.displayName = "Spinner";
+const S = p(
+  n
+);
+export {
+  S as Spinner
+};

package/dist/esm/components/table/Table.context.d.ts

@@ -0,0 +1,59 @@
+import { default as React, PropsWithChildren } from 'react';
+import { CellPosition } from './hooks/useTableKeyboardNavigation.js';
+interface TableKeyboardNavigationContextValue {
+    /** The currently focused cell position */
+    focusedCell: CellPosition;
+    /** Check if a specific cell is currently focused */
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    /** Handle keyboard events on table cells */
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    /** Handle keyboard events on the table element */
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    /** Handle focus events on the table element */
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    /** Handle focus events on table cells */
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    /** Reference to the table element */
+    tableRef: React.RefObject<HTMLTableElement>;
+    /** Focus a specific cell by its row and column indices */
+    focusCell: (rowIndex: number, colIndex: number) => void;
+    /** Focus a specific row by its index */
+    focusRow: (rowIndex: number) => void;
+}
+interface TableContextValue {
+    /** The total number of rows in the table */
+    rowCount: number;
+    /** The total number of columns in the table */
+    columnCount: number;
+    /** Keyboard navigation functionality */
+    keyboardNavigation: TableKeyboardNavigationContextValue;
+}
+/**
+ * React context for the table component.
+ */
+export declare const TableContext: React.Context<TableContextValue>;
+/**
+ * Hook to access the table context.
+ * @example
+ * ```tsx
+ * const { rowCount, columnCount, keyboardNavigation } = useTableContext()
+ * ```
+ */
+export declare function useTableContext(): TableContextValue;
+/**
+ * Provider component for the table context.
+ * This component initializes the keyboard navigation and provides it to all table components.
+ * @param props - The TableContext props
+ * @param props.rowCount - The total number of rows in the table
+ * @param props.columnCount - The total number of columns in the table
+ * @param props.children - The children to render
+ * @see {@link TableContextValue} for available props
+ * @example
+ * ```tsx
+ * <TableContextProvider rowCount={10} columnCount={5}>
+ *   <Table>...</Table>
+ * </TableContextProvider>
+ * ```
+ */
+export declare function TableContextProvider({ children, ...props }: PropsWithChildren<Omit<TableContextValue, 'keyboardNavigation'>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/table/Table.context.js

@@ -0,0 +1,42 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as r, useContext as d } from "react";
+import { useTableKeyboardNavigation as i } from "./hooks/useTableKeyboardNavigation.js";
+const u = {
+  focusedCell: { rowIndex: 0, colIndex: 0 },
+  isCellFocused: () => !1,
+  handleCellKeyDown: () => {
+  },
+  handleTableKeyDown: () => {
+  },
+  handleTableFocus: () => {
+  },
+  handleCellFocus: () => {
+  },
+  tableRef: { current: null },
+  focusCell: () => {
+  },
+  focusRow: () => {
+  }
+}, c = {
+  rowCount: 0,
+  columnCount: 0,
+  keyboardNavigation: u
+}, o = r(c);
+function f() {
+  return d(o);
+}
+function b({
+  children: e,
+  ...t
+}) {
+  const n = i(), l = {
+    ...t,
+    keyboardNavigation: n
+  };
+  return /* @__PURE__ */ a(o.Provider, { value: l, children: e });
+}
+export {
+  o as TableContext,
+  b as TableContextProvider,
+  f as useTableContext
+};

package/dist/esm/components/table/Table.d.ts

@@ -0,0 +1,97 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface TableRootProps extends PropsWithChildren {
+    /**
+     * The minimum number of rows to display, affecting the minimum height
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows to display, affecting the maximum height
+     */
+    maxRows?: number;
+}
+/**
+ * @component
+ * The `TableRoot` component serves as the container for the table and its pagination controls.
+ * It provides styling and layout for the table, including min and max height constraints.
+ * @param {TableRootProps} props - The props for the `TableRoot` component
+ * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height
+ * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height
+ * @param {ReactNode} props.children - The table and pagination components
+ * @example
+ * ```tsx
+ * import { TableRoot, Table } from '@payfit/unity-components'
+ *
+ * <TableRoot minRows={5} maxRows={20}>
+ *   <Table>
+ *     <TableHeader>...</TableHeader>
+ *     <TableBody>...</TableBody>
+ *   </Table>
+ *   <TablePagination pageCount={5} rowCount={100} rowsPerPage={20} currentPage={1} />
+ * </TableRoot>
+ * ```
+ * @see {@link TableRootProps} for all available props
+ * @see {@link Table} for the table component
+ * @see {@link TablePagination} for the pagination component
+ */
+declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * The label for the table. This is used for accessibility purposes.
+     */
+    label?: string;
+    /**
+     * The description for the table. This is used for accessibility purposes.
+     * ```
+     */
+    description?: string;
+    /**
+     * Enables horizontal scrolling if the table overflows its container. Enabled by default.
+     */
+    isHorizontalScrollEnabled?: boolean;
+}
+export interface TableImperativeHandler {
+    /**
+     * Scrolls the table contents to the top.
+     */
+    scrollToTop: () => void;
+}
+/**
+ * The `Table` component provides a fully accessible, keyboard-navigable data table with support for row and column headers,
+ * pagination, and empty states. It follows WAI-ARIA grid pattern for accessibility.
+ * @param {TableProps} props - The props for the `Table` component
+ * @example
+ * ```tsx
+ * import { Table, TableRoot, TableHeader, TableBody, TableRow, TableCell, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableRoot>
+ *   <Table label="Employee data" description="List of employees with their details">
+ *     <TableHeader>
+ *       <TableColumnHeader>Name</TableColumnHeader>
+ *       <TableColumnHeader>Position</TableColumnHeader>
+ *       <TableColumnHeader>Department</TableColumnHeader>
+ *     </TableHeader>
+ *     <TableBody>
+ *       <TableRow>
+ *         <TableCell isRowHeader>John Doe</TableCell>
+ *         <TableCell>Developer</TableCell>
+ *         <TableCell>Engineering</TableCell>
+ *       </TableRow>
+ *     </TableBody>
+ *   </Table>
+ * </TableRoot>
+ * ```
+ * @see {@link TableProps} for all available props
+ * @see {@link TableRoot} for the container component
+ * @see {@link TableHeader} for the header component
+ * @see {@link TableBody} for the body component
+ * @see {@link TableRow} for the row component
+ * @see {@link TableCell} for the cell component
+ * @see {@link TableColumnHeader} for the column header component
+ * @see {@link TablePagination} for the pagination component
+ * @see {@link TableEmptyState} for the empty state component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table--default|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableImperativeHandler>>;
+export { Table, TableRoot };