@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/types/components/table/grid-table.d.ts

@@ -0,0 +1,264 @@
+import { VariantProps } from 'class-variance-authority';
+import { ColProps } from '../layout/col';
+import { GridProps } from '../layout/grid';
+import * as React from "react";
+declare const gridTableVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface GridTableProps extends Omit<GridProps, "cols">, VariantProps<typeof gridTableVariants> {
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+    children?: React.ReactNode;
+    className?: string;
+    wrapperClassName?: string;
+}
+/**
+ * GridTable — table-like layout component using CSS Grid.
+ *
+ * @usage
+ * Use GridTable to create responsive grid-based tables:
+ * data tables with flexible column layouts, tables with custom column widths.
+ *
+ * Props:
+ * - `cols` — number of columns (1-12) or custom CSS grid template string (defaults to 12).
+ * - `gap` — gap between grid items (defaults to 0).
+ * - `size` — text size variant: "sm", "default", "lg" (defaults to "default").
+ *
+ * Note: Supports both numeric columns (e.g., 3) and custom CSS grid templates (e.g., "130px 120px 1.5fr repeat(3, 1fr)").
+ *
+ * @example
+ * ```tsx
+ * // Using numeric columns
+ * <GridTable cols={3}>
+ *   <GridTableHeader>
+ *     <GridTableRow>
+ *       <GridTableHead>Column 1</GridTableHead>
+ *       <GridTableHead>Column 2</GridTableHead>
+ *       <GridTableHead>Column 3</GridTableHead>
+ *     </GridTableRow>
+ *   </GridTableHeader>
+ *   <GridTableBody>
+ *     <GridTableRow>
+ *       <GridTableCell>Data 1</GridTableCell>
+ *       <GridTableCell>Data 2</GridTableCell>
+ *       <GridTableCell>Data 3</GridTableCell>
+ *     </GridTableRow>
+ *   </GridTableBody>
+ * </GridTable>
+ *
+ * // Using custom CSS grid columns
+ * <GridTable cols="130px 120px 1.5fr repeat(3, 1fr)">
+ *   <GridTableHeader>
+ *     <GridTableRow>
+ *       <GridTableHead>Fixed 130px</GridTableHead>
+ *       <GridTableHead>Fixed 120px</GridTableHead>
+ *       <GridTableHead>1.5fr</GridTableHead>
+ *       <GridTableHead>1fr</GridTableHead>
+ *       <GridTableHead>1fr</GridTableHead>
+ *       <GridTableHead>1fr</GridTableHead>
+ *     </GridTableRow>
+ *   </GridTableHeader>
+ * </GridTable>
+ * ```
+ */
+declare const GridTable: React.ForwardRefExoticComponent<GridTableProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * GridTableHeader — header section of a GridTable.
+ *
+ * @usage
+ * Use GridTableHeader to wrap column headers in grid tables:
+ * table headers, column titles with bottom border.
+ *
+ * Note: Automatically applies bottom border to all child elements.
+ */
+declare const GridTableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * GridTableBody — body section of a GridTable.
+ *
+ * @usage
+ * Use GridTableBody to wrap table rows with data in grid tables:
+ * table content rows, data entries.
+ *
+ * Note: Automatically removes border from last row's children.
+ */
+declare const GridTableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * GridTableFooter — footer section of a GridTable.
+ *
+ * @usage
+ * Use GridTableFooter to display summary or totals at the bottom of grid tables:
+ * table summaries, total rows, footer information.
+ *
+ * Note: Automatically applies top border, muted background, and medium font weight to all child elements.
+ */
+declare const GridTableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface GridTableRowProps extends GridProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Whether this is the last row (removes bottom border)
+     */
+    last?: boolean;
+    /**
+     * Custom height for the row
+     */
+    height?: string | number;
+    /**
+     * Whether to hide value cells (for loading states)
+     */
+    hideValue?: boolean;
+    /**
+     * Whether to disable hover effect (useful for header rows)
+     */
+    noHover?: boolean;
+    /**
+     * Whether to disable rounded corners on hover (useful for stacked rows like in AssetLine)
+     */
+    noRound?: boolean;
+    /**
+     * Click handler for the row.
+     * When provided, the entire row becomes clickable.
+     * Interactive elements inside (links, buttons, inputs) are excluded from row click.
+     */
+    onRowClick?: (e: React.MouseEvent) => void;
+    /**
+     * URL for the row link.
+     * When provided, the row is rendered via BaseLink
+     * (react-router Link for internal paths, native `<a>` for external URLs).
+     * Supports Ctrl/Cmd+Click, right-click context menu, etc.
+     * Compatible with `onRowClick` for custom navigation logic.
+     */
+    href?: string;
+    /**
+     * Link target (e.g., "_blank"). Only used when `href` is provided.
+     */
+    target?: React.HTMLAttributeAnchorTarget;
+    /**
+     * Link rel attribute. Only used when `href` is provided.
+     * @default "noopener noreferrer" when target="_blank"
+     */
+    rel?: string;
+}
+/**
+ * GridTableRow — row component of a GridTable.
+ *
+ * @usage
+ * Use GridTableRow to create table rows in grid tables:
+ * data rows, table entries with hover effects and borders.
+ *
+ * Props:
+ * - `cols` — number of columns or custom grid template.
+ * - `gap` — gap between cells (defaults to 0).
+ * - `last` — whether this is the last row (removes bottom border).
+ * - `height` — custom height for the row (string or number in pixels).
+ * - `hideValue` — whether to hide value cells (for loading states).
+ * - `onRowClick` — click handler for the row (makes entire row clickable).
+ * - `href` — URL for the row link (renders as `<a>`, supports native link behavior).
+ * - `target` — link target (e.g., "_blank"). Only used with `href`.
+ * - `rel` — link rel attribute. Only used with `href`.
+ *
+ * Note: Automatically applies bottom border, hover effects, and selected state styling to all child elements.
+ *
+ * @example
+ * ```tsx
+ * <GridTableRow>
+ *   <GridTableCell>Data</GridTableCell>
+ * </GridTableRow>
+ *
+ * // Last row (no bottom border)
+ * <GridTableRow last>
+ *   <GridTableCell>Last row</GridTableCell>
+ * </GridTableRow>
+ *
+ * // Custom height
+ * <GridTableRow height="50px">
+ *   <GridTableCell>Tall row</GridTableCell>
+ * </GridTableRow>
+ *
+ * // Clickable row
+ * <GridTableRow onRowClick={() => navigate('/details/123')}>
+ *   <GridTableCell>Clickable row</GridTableCell>
+ * </GridTableRow>
+ *
+ * // Link row (native <a> element)
+ * <GridTableRow href="/pools/0x1234">
+ *   <GridTableCell>Linked row</GridTableCell>
+ * </GridTableRow>
+ *
+ * // External link row
+ * <GridTableRow href="https://etherscan.io" target="_blank">
+ *   <GridTableCell>External link row</GridTableCell>
+ * </GridTableRow>
+ * ```
+ */
+declare const GridTableRow: React.ForwardRefExoticComponent<GridTableRowProps & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+declare const gridTableHeadVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    justify?: "center" | "start" | "end" | null | undefined;
+    gapBefore?: "none" | "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface GridTableHeadProps extends ColProps, VariantProps<typeof gridTableHeadVariants> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * GridTableHead — header cell component of a GridTable.
+ *
+ * @usage
+ * Use GridTableHead to create column headers in grid tables:
+ * column titles, sortable headers, table head cells.
+ *
+ * Props:
+ * - `span` — number of columns to span (defaults to 1).
+ * - `size` — cell size variant: "sm", "default", "lg" (defaults to "default").
+ * - `justify` — content alignment: "start", "center", "end" (defaults to "start").
+ * - `gapBefore` — extra left padding for visual separation ("sm" | "md" | "none"). Uses padding so hover covers the gap.
+ *
+ * Note: Automatically applies border, muted text color, and medium font weight.
+ */
+declare const GridTableHead: React.ForwardRefExoticComponent<GridTableHeadProps & React.RefAttributes<HTMLDivElement>>;
+declare const gridTableCellVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    textAlign?: "left" | "center" | "right" | null | undefined;
+    gapBefore?: "none" | "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface GridTableCellProps extends ColProps, VariantProps<typeof gridTableCellVariants> {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * GridTableCell — data cell component of a GridTable.
+ *
+ * @usage
+ * Use GridTableCell to create data cells in grid table rows:
+ * table data, cell content, table entries.
+ *
+ * Props:
+ * - `span` — number of columns to span (defaults to 1).
+ * - `size` — cell size variant: "sm", "default", "lg" (defaults to "default").
+ * - `textAlign` — text alignment: "left", "center", "right".
+ * - `gapBefore` — extra left padding for visual separation ("sm" | "md" | "none"). Uses padding so hover covers the gap.
+ *
+ * Note: Automatically applies appropriate padding based on size variant.
+ *
+ * @example
+ * ```tsx
+ * <GridTableCell>Left aligned (default)</GridTableCell>
+ * <GridTableCell textAlign="center">Centered</GridTableCell>
+ * <GridTableCell textAlign="right">Right aligned</GridTableCell>
+ * ```
+ */
+declare const GridTableCell: React.ForwardRefExoticComponent<GridTableCellProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * GridTableCaption — caption component of a GridTable.
+ *
+ * @usage
+ * Use GridTableCaption to display table description or summary:
+ * table captions, descriptions, summary text below the table.
+ *
+ * Note: Spans full width and displays with muted text color below the table.
+ */
+declare const GridTableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Td: React.ForwardRefExoticComponent<GridTableCellProps & React.RefAttributes<HTMLDivElement>>;
+declare const Th: React.ForwardRefExoticComponent<GridTableHeadProps & React.RefAttributes<HTMLDivElement>>;
+export { GridTable, GridTableBody, GridTableCaption, GridTableCell, GridTableFooter, GridTableHead, GridTableHeader, GridTableRow, gridTableVariants, gridTableHeadVariants, gridTableCellVariants, Td, Th, };
+export type { GridTableProps, GridTableHeadProps, GridTableCellProps, GridTableRowProps, };

package/dist/types/components/table/index.d.ts

@@ -0,0 +1,12 @@
+export * from './edit-button';
+export * from './editable-grid-table';
+export * from './editable-table';
+export * from './grid-error-line';
+export * from './grid-loading-line';
+export * from './grid-table';
+export * from './grid-table-loader';
+export * from './table';
+export * from './table-loader';
+export * from './table-loader-guard';
+export * from './table-sm';
+export * from './updated-value';

package/dist/types/components/table/table-loader-guard.d.ts

@@ -0,0 +1,45 @@
+import { TableLoaderProps } from './table-loader';
+import type * as React from "react";
+/**
+ * TableLoaderGuardProps — props for TableLoaderGuard component.
+ */
+export interface TableLoaderGuardProps extends TableLoaderProps {
+    showGuard: boolean;
+    children: React.ReactNode;
+}
+/**
+ * TableLoaderGuard — guard component that displays table skeleton while data is being loaded.
+ *
+ * @usage
+ * Use TableLoaderGuard to conditionally show loading state in tables:
+ * loading guards, conditional skeleton display, table data loading protection.
+ *
+ * Props:
+ * - `showGuard` — if true, displays loading skeleton instead of children (required).
+ * - `children` — content to display when not loading (required).
+ * - `height` — height of each loading line (defaults to "70px").
+ * - `columns` — number of skeleton columns (defaults to 6).
+ * - `rows` — number of skeleton rows (defaults to 5).
+ *
+ * Note: Combines Guard with TableLoader for convenient conditional rendering in tables.
+ *
+ * @example
+ * ```tsx
+ * <GridTable cols={6}>
+ *   <GridTableHeader>
+ *     <Head />
+ *   </GridTableHeader>
+ *   <TableLoaderGuard
+ *     showGuard={isLoading}
+ *     rows={5}
+ *     columns={6}
+ *     height="70px"
+ *   >
+ *     <GridTableBody>
+ *       {data.map(item => <Line key={item.id} data={item} />)}
+ *     </GridTableBody>
+ *   </TableLoaderGuard>
+ * </GridTable>
+ * ```
+ */
+export declare function TableLoaderGuard({ showGuard, children, height, columns, rows, ...props }: TableLoaderGuardProps): React.ReactElement;

package/dist/types/components/table/table-loader.d.ts

@@ -0,0 +1,50 @@
+import type * as React from "react";
+/**
+ * TableLoaderProps — props for TableLoader component.
+ */
+export interface TableLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Height of each loading line in pixels
+     * @default "70px"
+     */
+    height?: string;
+    /**
+     * Number of skeleton columns to show
+     * @default 6
+     */
+    columns?: number;
+    /**
+     * Number of skeleton rows to show
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * Custom class name for each cell in loading lines
+     */
+    cellClassName?: string;
+}
+/**
+ * TableLoader — loading skeleton component for tables.
+ *
+ * @usage
+ * Use TableLoader to display loading state in tables:
+ * skeleton rows, table data loading indicators, placeholder content while fetching data.
+ *
+ * Props:
+ * - `height` — height of each loading line (defaults to "70px").
+ * - `columns` — number of skeleton columns to show (defaults to 6).
+ * - `rows` — number of skeleton rows to show (defaults to 5).
+ *
+ * Note: Renders multiple GridLoadingLine components wrapped in GridTableBody to match the table structure.
+ *
+ * @example
+ * ```tsx
+ * <GridTable cols={6}>
+ *   <GridTableHeader>
+ *     <Head />
+ *   </GridTableHeader>
+ *   <TableLoader rows={5} columns={6} height="70px" />
+ * </GridTable>
+ * ```
+ */
+export declare function TableLoader({ height, columns, rows, cellClassName, className, ...props }: TableLoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/table/table-sm.d.ts

@@ -0,0 +1,94 @@
+import type * as React from "react";
+/**
+ * TableCellSmProps — props for TableCellSm component.
+ */
+export interface TableCellSmProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Title/label for the cell (displayed above the content on mobile)
+     */
+    title?: React.ReactNode;
+}
+/**
+ * TableCellSm — mobile table cell component with title label.
+ *
+ * @usage
+ * Use TableCellSm to create responsive mobile table cells:
+ * mobile-friendly table cells, labeled data display, responsive table layouts.
+ *
+ * Props:
+ * - `title` — title/label displayed above the content.
+ * - `children` — cell content (required).
+ *
+ * Note: Displays title in muted text above the main content, useful for mobile table views.
+ *
+ * @example
+ * ```tsx
+ * <TableCellSm title="Name">
+ *   John Doe
+ * </TableCellSm>
+ * ```
+ */
+export declare function TableCellSm({ title, className, children, ...props }: TableCellSmProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableLineSmProps — props for TableLineSm component.
+ */
+export interface TableLineSmProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Title/header content for the mobile table row
+     */
+    title?: React.ReactNode;
+    /**
+     * Number of columns for base screens (< 640px)
+     * @default 1
+     */
+    columnsXs?: number;
+    /**
+     * Number of columns for small screens (≥ 640px)
+     * Falls back to columnsXs if not specified
+     */
+    columnsSm?: number;
+    /**
+     * Number of columns for medium screens (≥ 768px)
+     * Falls back to columnsSm if not specified
+     */
+    columnsMd?: number;
+    /**
+     * Number of columns for large screens (≥ 1024px)
+     * Falls back to columnsMd if not specified
+     */
+    columns?: number;
+}
+/**
+ * TableLineSm — mobile table row component with responsive grid layout.
+ *
+ * @usage
+ * Use TableLineSm to create responsive mobile table rows:
+ * mobile-friendly table rows, responsive grid layouts, breakpoint-based column layouts.
+ *
+ * Props:
+ * - `title` — title/header displayed at the top of the row.
+ * - `columnsXs` — number of columns for base screens < 640px (defaults to 1).
+ * - `columnsSm` — number of columns for screens ≥ 640px (falls back to columnsXs).
+ * - `columnsMd` — number of columns for screens ≥ 768px (falls back to columnsSm).
+ * - `columns` — number of columns for screens ≥ 1024px (falls back to columnsMd).
+ * - `children` — cell content (TableCellSm components) (required).
+ *
+ * Note: Uses responsive grid with CSS custom properties for breakpoint-based column layouts. Each breakpoint falls back to the previous one if not specified.
+ *
+ * @example
+ * ```tsx
+ * // Simple: 1 column on XS, 2 on SM+, 3 on MD+, 4 on LG+
+ * <TableLineSm columnsXs={1} columnsSm={2} columnsMd={3} columns={4}>
+ *   <TableCellSm title="Balance">1.5 ETH</TableCellSm>
+ *   <TableCellSm title="Value">$3,000</TableCellSm>
+ *   <TableCellSm title="Change">+5%</TableCellSm>
+ *   <TableCellSm title="APY">12.5%</TableCellSm>
+ * </TableLineSm>
+ *
+ * // With fallback: 2 columns on all screens except LG (4 columns)
+ * <TableLineSm columnsXs={2} columns={4}>
+ *   ...
+ * </TableLineSm>
+ * ```
+ */
+export declare function TableLineSm({ title, columnsXs, columnsSm, columnsMd, columns, className, children, ...props }: TableLineSmProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,127 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Table — table component and its subcomponents.
+ *
+ * @usage
+ * Use Table to display structured data in rows and columns:
+ * data tables, lists, information grids, structured content.
+ *
+ * Table Components:
+ * - `Table` — root table container with border and rounded corners.
+ * - `TableHeader` — table header section.
+ * - `TableBody` — table body section.
+ * - `TableFooter` — table footer section.
+ * - `TableRow` — table row with hover effects.
+ * - `TableHead` — table header cell.
+ * - `TableCell` — table data cell.
+ * - `TableCaption` — table caption.
+ * - `SortingTableHead` — sortable table header with direction indicator.
+ *
+ * Note: Table provides rounded border container with overflow handling.
+ * SortingTableHead includes tooltip and sort direction indicator.
+ * Prefer using these components instead of native HTML table elements (table, thead, tbody, tfoot, tr, th, td, caption).
+ *
+ * Do NOT use Table:
+ * - for editable content with actions (use TableEditable component).
+ * - for simple lists without structured data (use appropriate list components).
+ */
+declare const tableVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
+    wrapperClassName?: string;
+}
+/**
+ * Table component with size variants
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Column</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Data</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+/**
+ * TableHeader — header section of a Table.
+ * Contains column headers (TableHead components).
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableBody — body section of a Table.
+ * Contains table rows (TableRow components) with data.
+ */
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableFooter — footer section of a Table.
+ * Typically contains summary information or totals.
+ */
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableRow — row component of a Table.
+ * Contains table cells (TableCell or TableHead components) with hover effects.
+ */
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const tableHeadVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement>, VariantProps<typeof tableHeadVariants> {
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const tableCellVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement>, VariantProps<typeof tableCellVariants> {
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * TableCaption — caption component of a Table.
+ * Displays table description or summary below the table.
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+/**
+ * SortTableHeadProps — props for sortable table header.
+ */
+export interface SortTableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    title: string;
+    isSorted: boolean;
+    direction: "asc" | "desc";
+    setSort: (direction: "asc" | "desc") => void;
+    placement?: "left" | "right";
+}
+/**
+ * SortingTableHead — sortable table header component with direction indicator and tooltip.
+ *
+ * @usage
+ * Use SortingTableHead to create clickable, sortable table column headers:
+ * sortable data tables, sortable lists, interactive table headers.
+ *
+ * Props:
+ * - `title` — title text displayed in tooltip (required).
+ * - `isSorted` — indicates if this column is currently sorted (required).
+ * - `direction` — current sort direction: "asc" or "desc" (required).
+ * - `setSort` — callback function to change sort direction (required).
+ * - `placement` — placement of sort indicator: "left" or "right" (defaults to "right").
+ * - `children` — header content displayed in the cell (required).
+ * - All standard HTML th props are supported (className, etc.).
+ *
+ * Note: Clicking the header toggles sort direction (asc ↔ desc).
+ * Sort indicator (caret up/down, same as HeadCell) is visible when sorted or on header hover.
+ * Includes tooltip showing "Sort by {title}" on hover.
+ *
+ * Do NOT use SortingTableHead:
+ * - for non-sortable table headers (use TableHead component).
+ * - when sorting functionality is not needed (use TableHead component).
+ */
+declare const SortingTableHead: React.ForwardRefExoticComponent<SortTableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+export { SortingTableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableVariants, tableHeadVariants, tableCellVariants, };

package/dist/types/components/table/updated-value.d.ts

@@ -0,0 +1,34 @@
+/**
+ * UpdatedValueProps — props for UpdatedValue component.
+ */
+interface UpdatedValueProps {
+    oldValue?: string | number;
+    newValue: string | number;
+    onEdit?: () => void;
+    isEditable?: boolean;
+    disabled?: boolean;
+    nowrap?: boolean;
+    customButton?: React.ReactNode;
+    postfix?: string;
+}
+/**
+ * UpdatedValue — component for displaying old and new values with edit functionality.
+ *
+ * @usage
+ * Use UpdatedValue to show value changes with visual indication:
+ * old value with strikethrough, new value, edit button for modifications.
+ *
+ * Props:
+ * - `oldValue` — previous value displayed with strikethrough when different from newValue.
+ * - `newValue` — current/new value to display (required).
+ * - `onEdit` — callback function executed when edit button is clicked.
+ * - `isEditable` — if false, edit button is not shown (defaults to true).
+ * - `disabled` — if true, edit button is disabled (defaults to false).
+ * - `nowrap` — if true, prevents text wrapping (defaults to false).
+ * - `customButton` — custom React node to replace default edit button.
+ * - `postfix` — optional text displayed after the value.
+ *
+ * Note: When oldValue differs from newValue, old value is shown with strikethrough and arrow (→) separator.
+ */
+export declare function UpdatedValue({ oldValue, newValue, onEdit, isEditable, customButton, postfix, disabled, nowrap, }: UpdatedValueProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/dist/types/components/tabs/tabs.d.ts

@@ -0,0 +1,27 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+/**
+ * Tabs — tab navigation component and its subcomponents.
+ *
+ * @usage
+ * Use Tabs to organize content into multiple panels:
+ * tab navigation, content sections, view switchers, segmented content.
+ *
+ * Tab Components:
+ * - `Tabs` — root component (TabsPrimitive.Root).
+ * - `TabsList` — container for tab triggers.
+ * - `TabsTrigger` — individual tab trigger button.
+ * - `TabsContent` — content panel for each tab.
+ *
+ * Note: All components are based on Radix UI Tabs primitive.
+ * Prefer using these components instead of @radix-ui/react-tabs directly.
+ *
+ * Do NOT use Tabs:
+ * - for navigation between pages (use NavigationButton or Link components).
+ * - for simple content sections (use Card or other container components).
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/types/components/text-button/index.d.ts

@@ -0,0 +1 @@
+export * from './text-button';