@cystackapp/ui 1.5.0 → 2.0.1

package/dist/components/searchbox/Searchbox.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+export declare const Searchbox: ({ value, onChange, placeholder }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/searchbox/Searchbox.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { SearchLg as m } from "@untitled-ui/icons-react";
+import { Input as p } from "../input/Input.js";
+const s = ({ value: o, onChange: t, placeholder: e }) => /* @__PURE__ */ r(
+  p,
+  {
+    prefix: /* @__PURE__ */ r(m, { className: "h-4 w-4 shrink-0 text-gray-v2-400" }),
+    value: o,
+    onChange: (a) => t(a.target.value),
+    placeholder: e
+  }
+);
+export {
+  s as Searchbox
+};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,11 @@
+import { DropdownEntry, DropdownItem } from '../dropdown/types';
+interface Props {
+    id?: string;
+    items: DropdownEntry[];
+    selected: string;
+    onSelect: (item: DropdownItem) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const Select: ({ id, items, selected, onSelect, placeholder, disabled, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/select/Select.js

@@ -0,0 +1,44 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { ChevronDown as m } from "@untitled-ui/icons-react";
+import { Dropdown as b } from "../dropdown/Dropdown.js";
+import { flattenItems as u } from "../dropdown/dropdown-utils.js";
+const x = ({
+  id: o,
+  items: r,
+  selected: a,
+  onSelect: s,
+  placeholder: i = "",
+  disabled: l = !1
+}) => {
+  var n;
+  const t = (n = u(r).find(
+    (d) => d.id === a
+  )) == null ? void 0 : n.label;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      items: r,
+      selected: a,
+      onSelect: s,
+      syncWidth: !0,
+      disabled: l,
+      className: "w-full",
+      children: /* @__PURE__ */ c(
+        "button",
+        {
+          id: o,
+          type: "button",
+          disabled: l,
+          className: "w-full flex items-center justify-between gap-2 min-h-10 rounded-lg border border-gray-v2-300 bg-white px-3 py-2 text-sm font-semibold text-left text-gray-v2-700 shadow-xs transition-all outline-2 outline-transparent hover:bg-gray-v2-50 focus:outline-brand-v2-400 disabled:cursor-not-allowed disabled:bg-gray-v2-50 disabled:text-gray-v2-400 disabled:border-gray-v2-200",
+          children: [
+            t ? /* @__PURE__ */ e("span", { className: "truncate", title: t, children: t }) : /* @__PURE__ */ e("span", { className: "truncate text-gray-v2-400", children: i }),
+            /* @__PURE__ */ e(m, { className: "h-4 w-4 shrink-0 text-gray-v2-500" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  x as Select
+};

package/dist/components/sidebar/SidebarSecondMenu.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface SidebarSecondMenuItem {
+    key: string;
+    label: ReactNode;
+    to: string;
+    active?: boolean;
+}
+interface SidebarSecondMenuProps {
+    /** Where the back button navigates to (e.g. the product dashboard). */
+    backTo: string;
+    backLabel: ReactNode;
+    title: ReactNode;
+    items: SidebarSecondMenuItem[];
+    /** Called on every link click — lets a mobile drawer close on navigation. */
+    onNavigate?: () => void;
+    className?: string;
+}
+/**
+ * Contextual second-level sidebar panel — the settings-style menu used by the
+ * CyStack platform when entering an area with its own sub-navigation (account
+ * settings, workspace settings…). Renders a back link, a panel title and a
+ * vertical list of sub-pages. Pair it with a collapsed icon rail on the left.
+ *
+ * @example
+ * ```tsx
+ * <SidebarSecondMenu
+ *   backTo="/"
+ *   backLabel="Dashboard"
+ *   title="Account settings"
+ *   items={[
+ *     { key: "profile", label: "Personal details", to: "/settings/account", active: true },
+ *     { key: "security", label: "Security", to: "/settings/security" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SidebarSecondMenu: ({ backTo, backLabel, title, items, onNavigate, className, }: SidebarSecondMenuProps) => import("react").JSX.Element;
+export {};

package/dist/components/sidebar/SidebarSecondMenu.js

@@ -0,0 +1,50 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { FlipBackward as m } from "@untitled-ui/icons-react";
+import { Link as r } from "react-router-dom";
+import { cn as a } from "../../utils/cn.js";
+const b = ({
+  backTo: n,
+  backLabel: d,
+  title: i,
+  items: s,
+  onNavigate: t,
+  className: c
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: a(
+      "px-4 py-6 flex flex-col gap-4 w-full overflow-y-auto overflow-x-hidden",
+      c
+    ),
+    children: [
+      /* @__PURE__ */ e(r, { to: n, onClick: t, className: "no-underline", children: /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-2 w-fit rounded-lg font-semibold text-md text-brand-v2-700 hover:text-brand-v2-800 whitespace-nowrap",
+          children: [
+            /* @__PURE__ */ e(m, { className: "h-5 w-5 min-w-5" }),
+            d
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-gray-v2-900 whitespace-nowrap", children: i }),
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: s.map((o) => /* @__PURE__ */ e(
+        r,
+        {
+          to: o.to,
+          onClick: t,
+          className: a(
+            "py-2 pl-3 pr-3 my-0.5 no-underline text-md font-semibold rounded-md transition-all",
+            o.active ? "bg-brand-v2-50 text-brand-v2-700" : "hover:bg-gray-v2-50 text-gray-v2-700 hover:text-gray-v2-700"
+          ),
+          children: o.label
+        },
+        o.key
+      )) })
+    ]
+  }
+);
+export {
+  b as SidebarSecondMenu
+};

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    className?: string;
+}
+/**
+ * Loading placeholder block. Size it with width/height utilities:
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-48" />
+ * <Skeleton className="size-10 rounded-full" />
+ * ```
+ */
+export declare const Skeleton: ({ className }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+const n = ({ className: e }) => /* @__PURE__ */ o(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: r("block animate-pulse rounded-md bg-gray-v2-100", e)
+  }
+);
+export {
+  n as Skeleton
+};

package/dist/components/stat-banner-card/StatBannerCard.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type StatBannerColor = "blue" | "success" | "warning" | "error";
+interface StatBannerCardProps {
+    label: ReactNode;
+    /** `null` renders as "--" (no data). */
+    value: number | null;
+    color: StatBannerColor;
+    isPercentage?: boolean;
+    isLoading?: boolean;
+    className?: string;
+}
+/**
+ * Colored stat banner — the tinted hero card with a big number and a small
+ * accent marker on the right edge, used at the top of asset list pages on the
+ * CyStack platform (e.g. "Tổng số tên miền 1839").
+ *
+ * @example
+ * ```tsx
+ * <StatBannerCard label="Total domains" value={1839} color="blue" />
+ * <StatBannerCard label="Vulnerable" value={0} color="success" isPercentage />
+ * ```
+ */
+export declare const StatBannerCard: ({ label, value, color, isPercentage, isLoading, className, }: StatBannerCardProps) => import("react").JSX.Element;
+export {};

package/dist/components/stat-banner-card/StatBannerCard.js

@@ -0,0 +1,49 @@
+import { jsxs as n, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+import { Loader as m } from "../loading-state/Loader.js";
+const d = {
+  blue: "bg-blue-v2-100",
+  success: "bg-success-v2-100",
+  warning: "bg-warning-v2-100",
+  error: "bg-error-v2-100"
+}, g = {
+  blue: "bg-blue-v2",
+  success: "bg-success-v2",
+  warning: "bg-warning-v2",
+  error: "bg-error-v2"
+}, x = ({
+  label: a,
+  value: s,
+  color: r,
+  isPercentage: l = !1,
+  isLoading: i = !1,
+  className: o
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: t(
+      "flex items-center justify-between rounded-xl text-gray-v2-900 transition-colors shadow-xs overflow-hidden relative",
+      d[r],
+      o
+    ),
+    children: [
+      /* @__PURE__ */ e("span", { className: "px-3 lg:px-6 text-lg font-medium", children: a }),
+      /* @__PURE__ */ e("span", { className: "px-3 lg:px-6 py-3 text-display-sm font-semibold", children: i ? /* @__PURE__ */ e("span", { className: "h-9.5 w-9.5 min-w-9.5 flex items-center justify-center", children: /* @__PURE__ */ e(m, { baseSize: 1.25, particleCount: 24 }) }) : s === null ? "--" : /* @__PURE__ */ n(c, { children: [
+        s.toFixed(),
+        l ? /* @__PURE__ */ e("span", { className: "text-display-xs", children: "%" }) : null
+      ] }) }),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: t(
+            "absolute right-0 top-0 bottom-0 my-auto h-10 w-1.5 rounded-l-full",
+            g[r]
+          )
+        }
+      )
+    ]
+  }
+);
+export {
+  x as StatBannerCard
+};

package/dist/components/switch/Switch.d.ts

@@ -3,5 +3,5 @@ interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "
     checked?: boolean;
     onChange?: (checked: boolean) => void;
 }
-export declare const Switch: ({ checked, onChange, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ checked, onChange, className, ...rest }: Props) => import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,32 @@
+import { To } from 'react-router-dom';
+import { ColumnDef, EmptyStateConfig, PaginationState, SelectionState, SortState } from './types';
+interface TableProps<TData> {
+    data: TData[] | undefined;
+    columns: ColumnDef<TData>[];
+    /** Returns the unique key for a row. */
+    rowKey: (row: TData) => string;
+    isLoading?: boolean;
+    selection?: SelectionState;
+    sort?: SortState;
+    pagination?: PaginationState;
+    /** Click handler for an entire row. Mutually exclusive with `getRowHref`. */
+    onRowClick?: (row: TData) => void;
+    /** When provided, rows render as `<Link>` elements navigating to this URL. */
+    getRowHref?: (row: TData) => To;
+    /** Configures the empty-state view. Falls back to a generic message. */
+    emptyState?: EmptyStateConfig;
+    /**
+     * When true, the table body height is calculated so the table never causes
+     * the page to scroll — it fits exactly within the remaining viewport height.
+     */
+    fitPageHeight?: boolean;
+    className?: string;
+}
+/**
+ * Data table with optional sorting, row selection, pagination, and row linking.
+ *
+ * Pass `fitPageHeight` to make the body height fill the remaining viewport
+ * without causing the page to scroll.
+ */
+export declare const Table: <TData>({ data, columns, rowKey, isLoading, selection, sort, pagination, onRowClick, getRowHref, emptyState, fitPageHeight, className, }: TableProps<TData>) => import("react").JSX.Element;
+export {};

package/dist/components/table/Table.js

@@ -0,0 +1,128 @@
+import { jsx as l, jsxs as f, Fragment as J } from "react/jsx-runtime";
+import { useMemo as K } from "react";
+import { useTranslation as L } from "react-i18next";
+import { Checkbox as O } from "../checkbox/Checkbox.js";
+import { EmptyState as Q } from "../empty-state/EmptyState.js";
+import { LoadingState as U } from "../loading-state/LoadingState.js";
+import { cn as p } from "../../utils/cn.js";
+import { TableCell as T } from "./TableCell.js";
+import { TableHeader as V } from "./TableHeader.js";
+import { TablePagination as W } from "./TablePagination.js";
+import { TableRow as X } from "./TableRow.js";
+import { buildGridTemplate as Y } from "./table-utils.js";
+import { useRowSelection as Z } from "./hooks/use-row-selection.js";
+import { useFitPageHeight as _ } from "./hooks/use-fit-page-height.js";
+const nr = ({
+  data: d = [],
+  columns: e,
+  rowKey: h,
+  isLoading: a,
+  selection: o,
+  sort: N,
+  pagination: v,
+  onRowClick: m,
+  getRowHref: s,
+  emptyState: r,
+  fitPageHeight: b,
+  className: t
+}) => {
+  const { t: k } = L("components/table"), { bodyRef: C, paginationRef: j, maxHeight: A } = _(), { isSelected: F, toggleRow: E, selectAllProps: G } = Z({
+    selection: o,
+    data: d,
+    rowKey: h,
+    isLoading: a
+  }), M = K(
+    () => Y(e, { hasSelection: !!o }),
+    [e, o]
+  ), P = a || d.length === 0;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: p(
+        "bg-white border border-gray-v2-200 shadow-xs rounded-xl flex flex-col min-h-0 overflow-hidden",
+        t
+      ),
+      children: P ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: a ? /* @__PURE__ */ l(U, {}) : /* @__PURE__ */ l(
+        Q,
+        {
+          title: (r == null ? void 0 : r.title) ?? k("emptyState"),
+          supportingText: r == null ? void 0 : r.supportingText,
+          type: r == null ? void 0 : r.type,
+          buttons: r == null ? void 0 : r.actions
+        }
+      ) }) : /* @__PURE__ */ f(J, { children: [
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: "grid flex-1 min-h-0 overflow-x-auto",
+            style: { gridTemplateColumns: M },
+            children: [
+              /* @__PURE__ */ l(
+                V,
+                {
+                  columns: e,
+                  sort: N,
+                  selectAll: G
+                }
+              ),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  ref: b ? C : void 0,
+                  className: "grid grid-cols-subgrid col-span-full overflow-x-hidden overflow-y-auto",
+                  style: b ? { maxHeight: A } : void 0,
+                  children: d.map((n, u) => {
+                    var g;
+                    const c = h(n), x = F(c), q = u === d.length - 1, z = !!m || !!s, B = (g = o == null ? void 0 : o.disabledKeys) == null ? void 0 : g.includes(c);
+                    return /* @__PURE__ */ f(
+                      X,
+                      {
+                        href: s == null ? void 0 : s(n),
+                        onClick: m && !s ? () => m(n) : void 0,
+                        className: p(
+                          x && "bg-gray-v2-50",
+                          !q && "border-b border-gray-v2-200",
+                          z && "cursor-pointer"
+                        ),
+                        children: [
+                          o ? /* @__PURE__ */ l(T, { align: "center", children: /* @__PURE__ */ l(
+                            O,
+                            {
+                              checked: x,
+                              disabled: B,
+                              onClick: (i) => E(c, i)
+                            }
+                          ) }) : null,
+                          e.map((i, D) => /* @__PURE__ */ l(
+                            T,
+                            {
+                              align: i.align,
+                              className: i.cellClassName,
+                              children: i.cell(n, u)
+                            },
+                            i.id ? i.id : D
+                          ))
+                        ]
+                      },
+                      c
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        v ? /* @__PURE__ */ l(
+          W,
+          {
+            ref: b ? j : void 0,
+            pagination: v
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+export {
+  nr as Table
+};

package/dist/components/table/TableActionButton.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, SVGProps } from 'react';
+export interface TableActionItem {
+    id: string;
+    label: string;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface Props {
+    items: TableActionItem[];
+    disabled?: boolean;
+}
+export declare const TableActionButton: ({ items, disabled }: Props) => import("react").JSX.Element | null;
+export {};

package/dist/components/table/TableActionButton.js

@@ -0,0 +1,50 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DotsVertical as i } from "@untitled-ui/icons-react";
+import { cn as d } from "../../utils/cn.js";
+import { Dropdown as c } from "../dropdown/Dropdown.js";
+const u = ({ items: n, disabled: r = !1 }) => {
+  const l = n.map((o) => ({
+    id: o.id,
+    label: o.label,
+    icon: o.icon ? /* @__PURE__ */ e(o.icon, { className: "h-5 w-5" }) : void 0,
+    danger: o.danger,
+    disabled: o.disabled
+  }));
+  return n.length === 0 ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      onClick: (o) => {
+        o.stopPropagation(), o.preventDefault();
+      },
+      children: /* @__PURE__ */ e(
+        c,
+        {
+          items: l,
+          onSelect: (o) => {
+            const t = n.find((a) => a.id === o.id);
+            t == null || t.onSelect();
+          },
+          placement: "bottomRight",
+          disabled: r,
+          children: /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Actions",
+              disabled: r,
+              className: d(
+                "inline-flex items-center justify-center rounded-md p-2.5",
+                "text-gray-v2-400 hover:bg-gray-v2-50",
+                "focus:outline-2 focus:outline-brand-v2-400",
+                "disabled:text-gray-v2-300 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ e(i, { className: "h-5 w-5" })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  u as TableActionButton
+};

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ColumnAlign } from './types';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    align?: ColumnAlign;
+    children?: ReactNode;
+}
+export declare const TableCell: ({ align, className, children, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableCell.js

@@ -0,0 +1,26 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const f = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+}, l = ({
+  align: t = "left",
+  className: e,
+  children: r,
+  ...i
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    ...i,
+    className: n(
+      "bg-inherit p-3 text-sm text-gray-v2-600 flex items-center gap-x-2",
+      f[t],
+      e
+    ),
+    children: r
+  }
+);
+export {
+  l as TableCell
+};

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

@@ -0,0 +1,15 @@
+import { ColumnDef, SortState } from './types';
+interface SelectAllProps {
+    checked: boolean;
+    ready: boolean;
+    onChange: () => void;
+}
+interface Props<TData> {
+    columns: ColumnDef<TData>[];
+    sort?: SortState;
+    selectAll?: SelectAllProps;
+    /** Number of empty leading cells to render before the select-all and data columns. */
+    leadingCells?: number;
+}
+export declare const TableHeader: <TData>({ columns, sort, selectAll, leadingCells, }: Props<TData>) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeader.js

@@ -0,0 +1,36 @@
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { Checkbox as l } from "../checkbox/Checkbox.js";
+import { TableHeaderCell as n } from "./TableHeaderCell.js";
+const C = ({
+  columns: o,
+  sort: r,
+  selectAll: a,
+  leadingCells: h = 0
+}) => /* @__PURE__ */ g("div", { className: "grid grid-cols-subgrid col-span-full rounded-t-xl overflow-hidden", children: [
+  Array.from({ length: h }).map((e, s) => /* @__PURE__ */ d(n, {}, `leading-${s}`)),
+  a ? /* @__PURE__ */ d(n, { align: "center", children: a.ready ? /* @__PURE__ */ d(
+    l,
+    {
+      checked: a.checked,
+      onClick: a.onChange
+    }
+  ) : null }) : null,
+  o.map((e, s) => {
+    const i = e.sortKeys && r ? e.sortKeys.asc === r.value ? 1 : e.sortKeys.desc === r.value ? -1 : 0 : void 0, t = () => {
+      !e.sortKeys || !r || (i === 0 ? r.onChange(e.sortKeys.asc) : i === 1 ? r.onChange(e.sortKeys.desc) : i === -1 && r.onChange(""));
+    };
+    return /* @__PURE__ */ d(
+      n,
+      {
+        align: e.align,
+        sort: i,
+        onClick: e.sortKeys && r ? t : void 0,
+        children: e.header
+      },
+      e.id ? e.id : s
+    );
+  })
+] });
+export {
+  C as TableHeader
+};

package/dist/components/table/TableHeaderCell.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ColumnAlign } from './types';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    align?: ColumnAlign;
+    /** -1: desc, 0: not active, 1: asc, undefined: not sortable. */
+    sort?: -1 | 0 | 1;
+    children?: ReactNode;
+}
+export declare const TableHeaderCell: ({ align, sort, className, children, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeaderCell.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { ChevronUp as c, ChevronDown as i, ChevronSelectorVertical as m } from "@untitled-ui/icons-react";
+import { cn as f } from "../../utils/cn.js";
+const x = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+}, v = ({
+  align: s = "left",
+  sort: t,
+  className: n,
+  children: l,
+  ...o
+}) => {
+  const r = t !== void 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...o,
+      className: f(
+        "bg-white text-xs font-semibold text-gray-v2 border-b border-gray-v2-200 p-3 flex items-center gap-1",
+        x[s],
+        r && "cursor-pointer select-none",
+        n
+      ),
+      children: [
+        l,
+        r ? /* @__PURE__ */ e("span", { className: "flex items-center text-gray-v2-400", children: t === 1 ? /* @__PURE__ */ e(c, { className: "h-3.5 w-3.5" }) : t === -1 ? /* @__PURE__ */ e(i, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5" }) }) : null
+      ]
+    }
+  );
+};
+export {
+  v as TableHeaderCell
+};

package/dist/components/table/TablePagination.d.ts

@@ -0,0 +1,6 @@
+import { PaginationState } from './types';
+interface Props {
+    pagination: PaginationState;
+}
+export declare const TablePagination: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};