@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/table/parts/TableBody.js

@@ -0,0 +1,38 @@
+import { jsx as l } from "react/jsx-runtime";
+import p, { forwardRef as b, Children as f, cloneElement as h } from "react";
+import { tv as v } from "tailwind-variants";
+const C = v({
+  base: [
+    "[&[data-empty]]:uy-h-[var(--uy-table-min-rows)]",
+    "[&_tr:last-child]:uy-border-b",
+    "[&_tr:last-child]:uy-border-b-[length:calc(1px*(1-var(--uy-table-is-scrollable,0)))]",
+    "uy-transition-all uy-duration-200 uy-ease-in-out"
+  ]
+}), x = b(
+  ({ children: c, renderEmptyState: r, renderDataState: s, ...y }, m) => {
+    const d = s ? s() : void 0, t = d !== void 0, o = t ? [] : f.map(c, (a, u) => p.isValidElement(a) ? h(
+      a,
+      {
+        rowIndex: u,
+        ...a.props
+      }
+    ) : a), n = (!o || o.length === 0) && !t, i = n && r ? r() : null;
+    let e = null;
+    return t ? e = d : n && i && (e = i), /* @__PURE__ */ l(
+      "tbody",
+      {
+        ref: m,
+        className: C(),
+        "data-dd-privacy": "mask",
+        "data-empty": n || t || void 0,
+        ...y,
+        children: e ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", { colSpan: 1e3, className: "uy-p-0", children: e }) }) : o
+      }
+    );
+  }
+);
+x.displayName = "TableBody";
+export {
+  x as TableBody,
+  C as tableBody
+};

package/dist/esm/components/table/parts/TableCell.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    colIndex?: number;
+    rowIndex?: number;
+    align?: 'left' | 'center' | 'right';
+    isRowHeader?: boolean;
+}
+export declare const tableCell: import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * The `TableCell` component renders a cell in the table, containing data.
+ * It handles keyboard navigation, focus management, and accessibility attributes.
+ * @component
+ * @param {TableCellProps} props - The props for the `TableCell` component
+ * @param {ReactNode} props.children - The content to render in the cell
+ * @param {number} [props.colIndex=0] - The index of the column (automatically set by TableRow)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableRow)
+ * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the cell
+ * @param {boolean} [props.isRowHeader=false] - Whether this cell is a row header (renders as `<th>` instead of `<td>`)
+ * @example
+ * ```tsx
+ * import { TableCell } from '@payfit/unity-components'
+ *
+ * <TableCell>Cell content</TableCell>
+ * ```
+ * @example
+ * ```tsx
+ * // Row header with right alignment
+ * import { TableCell } from '@payfit/unity-components'
+ *
+ * <TableCell isRowHeader align="right">Employee ID</TableCell>
+ * ```
+ * @see {@link TableCellProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecell--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableCell };

package/dist/esm/components/table/parts/TableCell.js

@@ -0,0 +1,55 @@
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { tv as g } from "tailwind-variants";
+import { useTableContext as v } from "../Table.context.js";
+const C = g({
+  base: [
+    "uy-px-200 uy-py-150 uy-w-max uy-text-content-neutral uy-typography-body",
+    "focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+  ],
+  variants: {
+    align: {
+      left: "uy-text-left",
+      center: "uy-text-center",
+      right: "uy-text-right"
+    }
+  }
+}), T = h(
+  ({
+    children: i,
+    colIndex: a = 0,
+    rowIndex: o = 0,
+    align: s,
+    onKeyDown: t,
+    onFocus: l,
+    className: u,
+    isRowHeader: r = !1,
+    ...n
+  }, y) => {
+    const { keyboardNavigation: c } = v(), { isCellFocused: f, handleCellKeyDown: b, handleCellFocus: d } = c, m = f(o, a), p = (e) => {
+      e.key !== "Tab" && (b(e), t == null || t(e));
+    };
+    return /* @__PURE__ */ x(
+      r ? "th" : "td",
+      {
+        ref: y,
+        role: r ? "rowheader" : "gridcell",
+        "aria-colindex": a + 1,
+        tabIndex: m ? 0 : -1,
+        className: C({ align: s, className: u }),
+        onKeyDown: p,
+        onFocus: (e) => {
+          d(e), l == null || l(e);
+        },
+        "data-dd-privacy": "mask",
+        ...n,
+        children: i
+      }
+    );
+  }
+);
+T.displayName = "TableCell";
+export {
+  T as TableCell,
+  C as tableCell
+};

package/dist/esm/components/table/parts/TableColumnHeader.d.ts

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+import { ActionableProps } from '../../actionable/Actionable.js';
+type BaseTableColumnHeaderProps = {
+    colIndex?: number;
+    rowIndex?: number;
+    align?: 'left' | 'center' | 'right';
+};
+type StaticTableColumnHeaderProps = BaseTableColumnHeaderProps & React.ThHTMLAttributes<HTMLTableCellElement>;
+type InteractiveTableColumnHeaderProps = BaseTableColumnHeaderProps & ActionableProps;
+export type TableColumnHeaderProps = (StaticTableColumnHeaderProps & {
+    onPress?: never;
+}) | InteractiveTableColumnHeaderProps;
+export declare const tableColumnHeader: import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * The `TableColumnHeader` component renders a header cell in the table's header row.
+ * It can be either static or interactive (clickable) and supports text alignment.
+ * @param {TableColumnHeaderProps} props - The props for the `TableColumnHeader` component
+ * @param {ReactNode} props.children - The content to render in the header cell
+ * @param {number} [props.colIndex=0] - The index of the column (automatically set by TableHeader)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableHeader)
+ * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the header cell
+ * @param {Function} [props.onPress] - Optional callback for when the header is clicked (makes the header interactive)
+ * @example
+ * ```tsx
+ * import { TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableColumnHeader>Name</TableColumnHeader>
+ * ```
+ * @example
+ * ```tsx
+ * // Interactive header with center alignment
+ * import { TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableColumnHeader
+ *   align="center"
+ *   onPress={() => console.log('Header clicked')}
+ * >
+ *   Department
+ * </TableColumnHeader>
+ * ```
+ * @see {@link TableColumnHeaderProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecolumnheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableColumnHeader: React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableColumnHeader };

package/dist/esm/components/table/parts/TableColumnHeader.js

@@ -0,0 +1,72 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as x } from "tailwind-variants";
+import { Actionable as g } from "../../actionable/Actionable.js";
+import { useTableContext as C } from "../Table.context.js";
+const c = x({
+  base: [
+    "uy-align-middle uy-leading-100",
+    "uy-px-200 uy-py-100 uy-typography-action uy-text-content-neutral",
+    "focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+  ],
+  variants: {
+    align: {
+      left: "uy-text-left",
+      center: "uy-text-center",
+      right: "uy-text-right"
+    }
+  }
+}), T = p(
+  ({
+    children: n,
+    colIndex: a = 0,
+    rowIndex: m = 0,
+    align: o,
+    onKeyDown: i,
+    onFocus: t,
+    className: u,
+    ...l
+  }, d) => {
+    const { keyboardNavigation: f } = C(), { isCellFocused: b, handleCellKeyDown: h, handleCellFocus: s } = f, v = b(m, a), y = (e) => {
+      e.key !== "Tab" && (h(e), i == null || i(
+        e
+      ));
+    };
+    return "onPress" in l ? /* @__PURE__ */ r(
+      "th",
+      {
+        ref: d,
+        role: "columnheader",
+        "aria-colindex": a + 1,
+        className: c({ align: o, className: u }),
+        "data-dd-privacy": "allow",
+        onKeyDown: y,
+        onFocus: (e) => {
+          s(e), t == null || t(e);
+        },
+        children: /* @__PURE__ */ r(g, { ...l, children: n })
+      }
+    ) : /* @__PURE__ */ r(
+      "th",
+      {
+        ref: d,
+        role: "columnheader",
+        "aria-colindex": a + 1,
+        tabIndex: v ? 0 : -1,
+        className: c({ align: o, className: u }),
+        onKeyDown: y,
+        onFocus: (e) => {
+          s(e), t == null || t(e);
+        },
+        "data-dd-privacy": "allow",
+        ...l,
+        children: n
+      }
+    );
+  }
+);
+T.displayName = "TableColumnHeader";
+export {
+  T as TableColumnHeader,
+  c as tableColumnHeader
+};

package/dist/esm/components/table/parts/TableEmptyState.d.ts

@@ -0,0 +1,177 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    wrapper: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export type TableEmptyStateProps = PropsWithChildren<VariantProps<typeof tableEmptyState>> & {
+    className?: string;
+};
+export interface TableEmptyStateTextProps extends PropsWithChildren {
+    /**
+     * The text's variant. It can be one of two options:
+     * - `title` renders an `h6` element with `bodyStrong` style
+     * - `description` renders a `p` element with `body` style
+     */
+    variant: 'title' | 'description';
+}
+/**
+ * The `TableEmptyStateText` component provides styled text elements for empty state messages.
+ * Use this component to create consistent text hierarchies within empty states, with support for titles and descriptions.
+ * @param {TableEmptyStateTextProps} props - The props for the `TableEmptyStateText` component
+ * @see {TableEmptyStateTextProps} for all available props
+ * @example
+ * ```tsx
+ * import { TableEmptyStateText } from '@payfit/unity-components'
+ *
+ * <TableEmptyStateText variant="title">No results found</TableEmptyStateText>
+ * <TableEmptyStateText variant="description">Try adjusting your search filters</TableEmptyStateText>
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs) • [Design docs]()
+ */
+declare const TableEmptyStateText: import('react').ForwardRefExoticComponent<TableEmptyStateTextProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * The `TableEmptyState` component provides a standardized way to display empty states in tables when there's no data to show.
+ * Use this component to improve user experience by providing clear feedback and guidance when a table has no content.
+ * @param {TableEmptyStateProps} props - The props for the `TableEmptyState` component
+ * @see {@link TableEmptyStateProps} for all available props
+ * @example
+ * ```tsx
+ * import { TableEmptyState } from '@payfit/unity-components'
+ *
+ * <TableEmptyState>
+ *   <img src="/images/empty-state.svg" alt="No data" />
+ *   <TableEmptyStateText>No data available</TableEmptyStateText>
+ * </TableEmptyState>
+ * ```
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs|API and Demos} • {@link https://payfit.design|Design docs}
+ */
+declare const TableEmptyState: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    wrapper: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & {
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * A pre-configured loading state for tables.
+ * Use this component to indicate that data is being loaded.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateLoading } from '@payfit/unity-components'
+ *
+ * <TableBody renderEmptyState={() => <TableEmptyStateLoading />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateLoading: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * A pre-configured empty state for tables with no data.
+ * Use this component to indicate that no results were found and provide guidance on how to adjust search or filters.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateNoData } from '@payfit/unity-components'
+ *
+ * <TableBody renderEmptyState={() => <TableEmptyStateNoData />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateNoData: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * A pre-configured error state for tables.
+ * Use this component to indicate that an error occurred while loading data and provide guidance on how to resolve it.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateError } from '@payfit/unity-components'
+ *
+ * <TableBody renderEmptyState={() => <TableEmptyStateError />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateError: () => import("react/jsx-runtime").JSX.Element;
+export { TableEmptyState, TableEmptyStateText, TableEmptyStateLoading, TableEmptyStateNoData, TableEmptyStateError, };

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -0,0 +1,94 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as d, useMemo as c } from "react";
+import { useIntl as m } from "react-intl";
+import { tv as y } from "tailwind-variants";
+import { Spinner as u } from "../../spinner/Spinner.js";
+import { Text as f } from "../../text/Text.js";
+import b from "../assets/EmptyStateError.svg.js";
+import x from "../assets/EmptyStateNoData.svg.js";
+const E = y({
+  slots: {
+    base: "uy-flex uy-flex-col uy-items-center uy-justify-center",
+    wrapper: "uy-max-w-[300px] uy-flex uy-flex-col uy-items-center"
+  }
+}), r = d(
+  (t, i) => {
+    const { variant: a, children: o } = t, s = c(() => {
+      switch (a) {
+        case "title":
+          return "bodyStrong";
+        case "description":
+        default:
+          return "body";
+      }
+    }, [a]), l = c(() => {
+      switch (a) {
+        case "title":
+          return "h6";
+        case "description":
+        default:
+          return "p";
+      }
+    }, [a]);
+    return /* @__PURE__ */ e(
+      f,
+      {
+        variant: s,
+        asElement: l,
+        ref: i,
+        className: "uy-text-center",
+        children: o
+      }
+    );
+  }
+);
+r.displayName = "TableEmptyStateText";
+const n = d(
+  ({ children: t, className: i, ...a }, o) => {
+    const { base: s, wrapper: l } = E();
+    return /* @__PURE__ */ e("div", { "data-dd-privacy": "allow", ...a, ref: o, className: s(), children: /* @__PURE__ */ e("div", { className: l({ className: i }), children: t }) });
+  }
+);
+n.displayName = "TableEmptyState";
+const j = () => {
+  const t = m();
+  return /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+    u,
+    {
+      size: "medium",
+      label: t.formatMessage({
+        id: "unity:component:table:empty-state:loading:title"
+      })
+    }
+  ) });
+}, D = () => {
+  const t = m();
+  return /* @__PURE__ */ p(n, { children: [
+    /* @__PURE__ */ e(x, {}),
+    /* @__PURE__ */ e(r, { variant: "title", children: t.formatMessage({
+      id: "unity:component:table:empty-state:no-data:title"
+    }) }),
+    /* @__PURE__ */ e(r, { variant: "description", children: t.formatMessage({
+      id: "unity:component:table:empty-state:no-data:description"
+    }) })
+  ] });
+}, z = () => {
+  const t = m();
+  return /* @__PURE__ */ p(n, { children: [
+    /* @__PURE__ */ e(b, {}),
+    /* @__PURE__ */ e(r, { variant: "title", children: t.formatMessage({
+      id: "unity:component:table:empty-state:error:title"
+    }) }),
+    /* @__PURE__ */ e(r, { variant: "description", children: t.formatMessage({
+      id: "unity:component:table:empty-state:error:description"
+    }) })
+  ] });
+};
+export {
+  n as TableEmptyState,
+  z as TableEmptyStateError,
+  j as TableEmptyStateLoading,
+  D as TableEmptyStateNoData,
+  r as TableEmptyStateText,
+  E as tableEmptyState
+};

package/dist/esm/components/table/parts/TableHeader.d.ts

@@ -0,0 +1,29 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const tableHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
+/**
+ * The `TableHeader` component renders the header section of a table, containing column headers.
+ * It automatically processes its children to add row indices and applies appropriate styling.
+ * @param {TableHeaderProps} props - The props for the `TableHeader` component
+ * @param {ReactNode} props.children - The column headers to render (typically TableColumnHeader components)
+ * @example
+ * ```tsx
+ * import { TableHeader, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableHeader>
+ *   <TableColumnHeader>Name</TableColumnHeader>
+ *   <TableColumnHeader>Email</TableColumnHeader>
+ *   <TableColumnHeader>Department</TableColumnHeader>
+ * </TableHeader>
+ * ```
+ * @see {@link TableHeaderProps} for all available props
+ * @see {@link TableColumnHeader} for the column header component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableHeader };

package/dist/esm/components/table/parts/TableHeader.js

@@ -0,0 +1,35 @@
+import { jsx as t } from "react/jsx-runtime";
+import r, { forwardRef as u } from "react";
+import { tv as s } from "tailwind-variants";
+const y = s({
+  base: [
+    "uy-h-500 uy-bg-surface-neutral-low uy-rounded-tl-100 uy-rounded-tr-100 uy-overflow-hidden",
+    "uy-sticky uy-top-0 uy-z-[1]",
+    "[&_tr]:uy-border-b [&_tr]:uy-border-solid [&_tr]:uy-border-b-border-neutral-enabled"
+  ]
+}), b = u(
+  ({ children: o, ...d }, a) => {
+    const l = r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
+      e,
+      {
+        rowIndex: n,
+        ...e.props
+      }
+    ) : e);
+    return /* @__PURE__ */ t(
+      "thead",
+      {
+        ref: a,
+        className: y(),
+        "data-dd-privacy": "allow",
+        ...d,
+        children: /* @__PURE__ */ t("tr", { children: l })
+      }
+    );
+  }
+);
+b.displayName = "TableHeader";
+export {
+  b as TableHeader,
+  y as tableHeader
+};