@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

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

@@ -1,27 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const sidePanelFooter: 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 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

@@ -1,20 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { tv as y } from "tailwind-variants";
-const a = y({
-  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))] md:uy-pb-200"
-  ]
-}), d = t(
-  ({ 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

@@ -1,75 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, 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

@@ -1,43 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Heading as y } from "react-aria-components";
-import { tv as i } from "tailwind-variants";
-import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
-const d = i({
-  // 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 md:uy-typography-h3 uy-text-content-neutral uy-truncate"
-    ]
-  }
-}), m = s(
-  ({ children: t, ...o }, r) => {
-    const { base: n, content: u, heading: l } = d();
-    return /* @__PURE__ */ e("header", { ref: r, className: n(), ...o, children: /* @__PURE__ */ a("div", { className: u(), children: [
-      /* @__PURE__ */ e(y, { 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/spinner/Spinner.d.ts

@@ -1,17 +0,0 @@
-import { HTMLAttributes } from 'react';
-export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'role'> & {
-    /** The label text for the spinner */
-    label: string;
-    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
-    size: 'small' | 'medium';
-    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
-    color?: 'primary' | 'inverted' | 'inherit';
-};
-export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
-    /** The label text for the spinner */
-    label: string;
-    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
-    size: "small" | "medium";
-    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
-    color?: "primary" | "inverted" | "inherit";
-} & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,108 +0,0 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { tv as m } from "tailwind-variants";
-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 = `uy-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/spinner/dynamic-content.d.ts

@@ -1,2 +0,0 @@
-declare const DynamicContent: () => import("react/jsx-runtime").JSX.Element;
-export default DynamicContent;

package/dist/esm/components/stepper/Stepper.context.d.ts

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from 'react';
-interface StepperContextValue {
-    currentStep: number;
-}
-export declare const StepperContext: import('react').Context<StepperContextValue>;
-export declare function StepperProvider({ children, currentStep, }: PropsWithChildren<StepperContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useStepperContext(): StepperContextValue;
-export {};

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

@@ -1,59 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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;
-}
-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 };

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

@@ -1,148 +0,0 @@
-import { jsx as i, jsxs as T } from "react/jsx-runtime";
-import r, { forwardRef as R, useRef as k, useMemo as H, useImperativeHandle as V, useCallback as $ } from "react";
-import { tv as N } from "tailwind-variants";
-import { useResizeObserver as D } from "usehooks-ts";
-import { TableContextProvider as M, useTableContext as P } from "./Table.context.js";
-const j = N({
-  slots: {
-    root: "uy-w-full uy-border uy-border-solid uy-border-border-neutral-enabled uy-rounded-100 uy-overflow-hidden",
-    scroller: [
-      "uy-relative uy-flex uy-flex-col",
-      "uy-min-h-[var(--uy-table-min-rows)] uy-max-h-[var(--uy-table-max-rows)]",
-      "uy-w-full"
-      // Ensure full width
-    ]
-  }
-}), A = R(
-  ({ minRows: u = 10, maxRows: c = 50, children: e }, o) => {
-    const { root: a, scroller: d } = j();
-    return /* @__PURE__ */ i("div", { ref: o, className: a(), "data-unity-slot": "table-root", children: /* @__PURE__ */ i(
-      "div",
-      {
-        className: d(),
-        "data-unity-slot": "table-scroller",
-        style: {
-          "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${u})`,
-          "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${c})`
-        },
-        children: e
-      }
-    ) });
-  }
-);
-A.displayName = "TableRoot";
-const K = N({
-  slots: {
-    wrapper: [
-      "uy-flex-1 uy-h-full uy-bg-surface-neutral",
-      "uy-overflow-auto",
-      "uy-w-full"
-    ],
-    table: [
-      "uy-min-w-full",
-      "uy-w-max",
-      "uy-text-left uy-typography-body uy-text-content-neutral uy-border-collapse",
-      "focus:uy-outline-2 focus:uy-outline-utility-focus-ring focus:uy-outline-offset-[-2px]"
-    ]
-  }
-}), U = R((u, c) => {
-  const { children: e, label: o, description: a, ...d } = u, n = k(null), { height: h = 0 } = D({
-    ref: n,
-    box: "border-box"
-  }), { rowCount: l, columnCount: b } = H(() => {
-    let y = 0, f = 0;
-    return r.Children.forEach(e, (m) => {
-      if (!r.isValidElement(m)) return;
-      const s = r.Children.toArray(
-        m.props.children
-      ).filter((t) => r.isValidElement(t));
-      f += s.length, s.forEach((t) => {
-        if (!r.isValidElement(t)) return;
-        const p = r.Children.toArray(
-          t.props.children
-        ).filter((w) => r.isValidElement(w));
-        y = Math.max(y, p.length);
-      });
-    }), { rowCount: f, columnCount: y };
-  }, [e]);
-  return V(c, () => ({
-    scrollToTop: () => {
-      n.current && n.current.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  })), /* @__PURE__ */ i(M, { rowCount: l, columnCount: b, children: /* @__PURE__ */ i(
-    E,
-    {
-      scrollContainerRef: n,
-      containerHeight: h,
-      rowCount: l,
-      columnCount: b,
-      label: o,
-      description: a,
-      ...d,
-      children: e
-    }
-  ) });
-});
-U.displayName = "Table";
-const E = (u) => {
-  var x, g, C;
-  const {
-    children: c,
-    label: e,
-    description: o,
-    scrollContainerRef: a,
-    containerHeight: d,
-    rowCount: n,
-    columnCount: h,
-    onKeyDown: l,
-    ...b
-  } = u, { wrapper: y, table: f } = K(), { keyboardNavigation: m } = P(), { tableRef: s, handleTableKeyDown: t } = m, p = $(
-    (v) => {
-      v.key !== "Tab" && (t(v), l == null || l(v));
-    },
-    [t, l]
-  ), w = (((x = a.current) == null ? void 0 : x.scrollHeight) ?? 0) > Math.floor(d);
-  return /* @__PURE__ */ T(
-    "div",
-    {
-      className: y(),
-      ref: a,
-      style: {
-        "--uy-table-is-scrollable": w ? "1" : "0"
-      },
-      children: [
-        /* @__PURE__ */ T(
-          "table",
-          {
-            ref: s,
-            className: f(),
-            role: "grid",
-            "aria-rowcount": n,
-            "aria-colcount": h,
-            "aria-label": e,
-            "aria-describedby": o ? `table-desc-${(g = s.current) == null ? void 0 : g.id}` : void 0,
-            onKeyDown: p,
-            ...b,
-            children: [
-              c,
-              o && /* @__PURE__ */ i(
-                "caption",
-                {
-                  id: `table-desc-${(C = s.current) == null ? void 0 : C.id}`,
-                  className: "uy-sr-only",
-                  children: o
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: "uy-sr-only", "aria-live": "polite", children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows." })
-      ]
-    }
-  );
-};
-E.displayName = "TableContent";
-export {
-  U as Table,
-  A as TableRoot
-};