@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/types/components/stat-badge.d.ts

@@ -0,0 +1,169 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const statBadgeVariants: (props?: ({
+    variant?: "primary" | "filled" | "elevated" | "outlined" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const statBadgeTitleVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const statBadgeContentVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DeltaProps {
+    /**
+     * Label to show before the delta value
+     */
+    label?: string;
+    /**
+     * Delta value (percentage or number)
+     */
+    value: number;
+    /**
+     * Tooltip content for the delta
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * Custom icon for positive delta
+     */
+    positiveIcon?: React.ReactNode;
+    /**
+     * Custom icon for negative delta
+     */
+    negativeIcon?: React.ReactNode;
+}
+export interface StatBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof statBadgeVariants> {
+    /**
+     * Title/label of the stat
+     */
+    title: React.ReactNode;
+    /**
+     * Main value to display
+     */
+    value: React.ReactNode;
+    /**
+     * Optional description for the value
+     */
+    valueDescription?: React.ReactNode;
+    /**
+     * Optional delta configuration
+     */
+    delta?: DeltaProps;
+}
+/**
+ * StatBadge component for displaying statistics and metrics with optional delta indicators
+ *
+ * **Note:** If using delta tooltips, wrap your app with `<TooltipProvider>` from the tooltip component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <StatBadge
+ *   title="Total Value"
+ *   value="$1,234.56"
+ * />
+ *
+ * // With description
+ * <StatBadge
+ *   title="APY"
+ *   value="12.5"
+ *   valueDescription="%"
+ * />
+ *
+ * // With delta (positive change)
+ * <StatBadge
+ *   title="Revenue"
+ *   value="$10,000"
+ *   delta={{
+ *     label: "+15.5%",
+ *     value: 15.5,
+ *   }}
+ * />
+ *
+ * // With delta and tooltip (requires TooltipProvider)
+ * <TooltipProvider>
+ *   <StatBadge
+ *     title="Revenue"
+ *     value="$10,000"
+ *     delta={{
+ *       label: "+15.5%",
+ *       value: 15.5,
+ *       tooltip: "15.5% increase from last month"
+ *     }}
+ *   />
+ * </TooltipProvider>
+ *
+ * // Small size with outlined variant
+ * <StatBadge
+ *   title="Users"
+ *   value="1,234"
+ *   size="sm"
+ *   variant="outlined"
+ * />
+ *
+ * // Primary variant
+ * <StatBadge
+ *   title="Active Sessions"
+ *   value="42"
+ *   variant="primary"
+ * />
+ *
+ * // Negative delta
+ * <StatBadge
+ *   title="Errors"
+ *   value="12"
+ *   delta={{
+ *     label: "-25%",
+ *     value: -25,
+ *   }}
+ * />
+ * ```
+ */
+export declare const StatBadge: React.ForwardRefExoticComponent<StatBadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const statBadgeGridVariants: (props?: ({
+    cols?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
+    gap?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StatBadgeGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statBadgeGridVariants> {
+    /**
+     * Number of columns in the grid (responsive breakpoints applied automatically)
+     */
+    cols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Gap size between grid items
+     */
+    gap?: "sm" | "default" | "lg" | "xl";
+}
+/**
+ * StatBadgeGrid component for displaying multiple stat badges in a responsive grid layout
+ *
+ * @example
+ * ```tsx
+ * // Default 4 columns (1 on mobile, 2 on tablet, 3 on desktop, 4 on xl)
+ * <StatBadgeGrid>
+ *   <StatBadge title="Total Value" value="$1,234.56" />
+ *   <StatBadge title="APY" value="12.5%" />
+ *   <StatBadge title="Users" value="1,234" />
+ * </StatBadgeGrid>
+ *
+ * // 3 columns layout
+ * <StatBadgeGrid cols={3}>
+ *   <StatBadge title="Revenue" value="$10,000" />
+ *   <StatBadge title="Users" value="1,234" />
+ *   <StatBadge title="Sessions" value="42" />
+ * </StatBadgeGrid>
+ *
+ * // 2 columns with large gap
+ * <StatBadgeGrid cols={2} gap="lg">
+ *   <StatBadge title="Active" value="123" />
+ *   <StatBadge title="Inactive" value="45" />
+ * </StatBadgeGrid>
+ *
+ * // Single column
+ * <StatBadgeGrid cols={1}>
+ *   <StatBadge title="Total" value="$1,000" />
+ * </StatBadgeGrid>
+ * ```
+ */
+export declare const StatBadgeGrid: React.ForwardRefExoticComponent<StatBadgeGridProps & React.RefAttributes<HTMLDivElement>>;
+export { statBadgeVariants, statBadgeTitleVariants, statBadgeContentVariants, statBadgeGridVariants, };

package/dist/types/components/tab-control.d.ts

@@ -0,0 +1,39 @@
+export interface TabControl<T extends string> {
+    item: React.ReactNode;
+    id: T;
+    disabled?: boolean;
+}
+export interface TabControlProps<T extends string> {
+    tabs: Array<TabControl<T>>;
+    state: UseTabControlReturnType<T>;
+    showBorder?: boolean;
+    variant?: "equal" | "auto";
+    tabItemWrapPadding?: string;
+}
+export declare function TabControl<T extends string>({ tabs, state: controlState, variant, showBorder, tabItemWrapPadding, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TabItemProps {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    amount?: number;
+    selected: boolean;
+    textSize?: "default" | "unset";
+}
+export declare function TabItem({ icon, label, selected, textSize, amount, }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+interface UseTabControlReturnType<T extends string> {
+    id: T;
+    index: number;
+    handleTabChange: (id: T, index: number) => void;
+}
+export declare function useTabControl<T extends string>(initialId: T, initialIndex?: number): UseTabControlReturnType<T>;
+export interface LocationHashItem<T extends string> {
+    id: T;
+}
+type UsePathTabsReturnType<T extends string> = Partial<Omit<UseTabControlReturnType<T>, "handleTabChange">> & Pick<UseTabControlReturnType<T>, "handleTabChange">;
+export declare function useHashTabs<T extends string>(tabs: Array<LocationHashItem<T>>): UsePathTabsReturnType<T>;
+interface UseSectionTabProps<T extends string> {
+    defaultTabs: Array<TabControl<T>>;
+    pathRoot: string;
+    selectedSection: string;
+}
+export declare function useSectionTab<T extends string>({ defaultTabs, pathRoot, selectedSection, }: UseSectionTabProps<T>): UsePathTabsReturnType<T>;
+export {};

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

@@ -0,0 +1,120 @@
+import type { Address } from "viem";
+/**
+ * GridTableCellAssetProps — props for GridTableCellAsset component.
+ */
+interface GridTableCellAssetProps {
+    assetAddress: Address;
+    symbol: string;
+    comment?: string;
+    explorerUrl?: string;
+    iconSymbol?: string;
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+}
+/**
+ * GridTableCellAsset — grid table cell component for displaying asset information.
+ *
+ * @usage
+ * Use GridTableCellAsset to display asset data in grid table cells:
+ * token symbols, asset addresses with icons, explorer links.
+ *
+ * Props:
+ * - `assetAddress` — asset contract address (required).
+ * - `symbol` — asset symbol/ticker (required).
+ * - `comment` — optional comment displayed next to symbol.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
+ * - `span` — number of columns to span (defaults to 1).
+ *
+ * Note: Displays token icon, symbol, optional comment, and optional explorer link in a grid cell.
+ */
+export declare function GridTableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, span, }: GridTableCellAssetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * GridTableCellUpdatableProps — props for GridTableCellUpdatable component.
+ */
+export interface GridTableCellUpdatableProps {
+    oldValue?: string;
+    newValue: string;
+    onEdit?: () => void;
+    isEditable?: boolean;
+    className?: string;
+    customButton?: React.ReactNode;
+    align?: "left" | "right" | "center";
+    postfix?: string;
+    disabled?: boolean;
+    nowrap?: boolean;
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+}
+/**
+ * GridTableCellUpdatable — grid table cell component for displaying editable values with old/new value comparison.
+ *
+ * @usage
+ * Use GridTableCellUpdatable to display values that can be edited in grid table cells:
+ * editable parameters, configurable settings, updatable data with change indication.
+ *
+ * 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).
+ * - `className` — additional CSS classes for styling.
+ * - `customButton` — custom React node to replace default edit button.
+ * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
+ * - `postfix` — optional text displayed after the value.
+ * - `disabled` — if true, edit button is disabled.
+ * - `nowrap` — if true, prevents text wrapping.
+ * - `span` — number of columns to span (defaults to 1).
+ *
+ * Note: Uses UpdatedValue component internally to display old/new values with edit functionality.
+ */
+export declare function GridTableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, span, }: GridTableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * GridTableEditableAction — action button configuration for GridTableEditable.
+ */
+export interface GridTableEditableAction {
+    text: string;
+    onClick: () => void;
+    loadingText?: string;
+    isLoading?: boolean;
+}
+/**
+ * GridTableEditableProps — props for GridTableEditable component.
+ */
+interface GridTableEditableProps {
+    title: string;
+    onNew?: () => void;
+    newButtonText?: string;
+    isLoading?: boolean;
+    buttonLoadingText?: string;
+    actions?: GridTableEditableAction[];
+    children: React.ReactNode;
+    disabled?: boolean;
+    skipSignIn?: boolean;
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+}
+/**
+ * GridTableEditable — grid table component with header, action buttons, and editable content.
+ *
+ * @usage
+ * Use GridTableEditable to create grid tables with editable content and action buttons:
+ * data management tables, configuration tables, editable parameter lists with grid layout.
+ *
+ * Props:
+ * - `title` — table title displayed in header (required).
+ * - `onNew` — callback function for "New" button action.
+ * - `newButtonText` — text for "New" button (defaults to "New").
+ * - `isLoading` — if true, "New" button shows loading state.
+ * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
+ * - `actions` — array of additional action buttons (GridTableEditableAction[]).
+ * - `children` — table content (GridTable rows/cells) (required).
+ * - `disabled` — if true, all action buttons are disabled (defaults to false).
+ * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
+ * - `cols` — number of columns (1-12) or custom CSS grid template (defaults to 12).
+ *
+ * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling. Table is wrapped in rounded border container.
+ *
+ * Do NOT use GridTableEditable:
+ * - for read-only tables without editing capabilities (use regular GridTable component).
+ * - when you don't need action buttons or title (use regular GridTable component).
+ */
+export declare function GridTableEditable({ title, onNew, newButtonText, buttonLoadingText, isLoading, actions, children, disabled, skipSignIn, cols, }: GridTableEditableProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+import type * as React from "react";
+/**
+ * GridErrorLineProps — props for GridErrorLine component.
+ */
+export interface GridErrorLineProps {
+    err: Error;
+    btnTitle?: React.ReactNode;
+    onClick?: () => void;
+    /**
+     * Whether this is the last row (no bottom border)
+     * @default true
+     */
+    last?: boolean;
+    /**
+     * Row height
+     * @default "75px"
+     */
+    height?: string;
+}
+/**
+ * GridErrorLine — error message display component for grid tables.
+ *
+ * @usage
+ * Use GridErrorLine to display error messages in grid table rows:
+ * error states, failed data loading, table error handling with retry button.
+ *
+ * Props:
+ * - `err` — Error object to display (required).
+ * - `btnTitle` — text for action button.
+ * - `onClick` — callback function for button action.
+ * - `last` — whether this is the last row, affects border (defaults to true).
+ * - `height` — row height (defaults to "75px").
+ *
+ * Note: Displays centered error message with optional action button. Uses FormattedMessage for internationalization.
+ *
+ * @example
+ * ```tsx
+ * <GridTable cols={12}>
+ *   <GridTableBody>
+ *     <GridErrorLine
+ *       err={new Error("Something went wrong")}
+ *       btnTitle="Reload"
+ *       onClick={() => window.location.reload()}
+ *     />
+ *   </GridTableBody>
+ * </GridTable>
+ * ```
+ */
+export declare function GridErrorLine({ err, btnTitle, onClick, last, height, }: GridErrorLineProps): React.ReactElement;

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

@@ -0,0 +1,36 @@
+import type * as React from "react";
+/**
+ * GridLoadingLineProps — props for GridLoadingLine component.
+ */
+export interface GridLoadingLineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Height of the loading line in pixels
+     * @default "70px"
+     */
+    height?: string;
+    /**
+     * Number of skeleton columns to show
+     * @default 6
+     */
+    columns?: number;
+}
+/**
+ * GridLoadingLine — loading skeleton row component for grid tables.
+ *
+ * @usage
+ * Use GridLoadingLine to display loading state in grid tables:
+ * skeleton rows, table data loading indicators, placeholder content while fetching.
+ *
+ * Props:
+ * - `height` — height of the loading line (defaults to "70px").
+ * - `columns` — number of skeleton columns to show (defaults to 6).
+ *
+ * Note: Displays multiple skeleton cells matching the table structure with borders and padding.
+ *
+ * @example
+ * ```tsx
+ * <GridLoadingLine height="80px" columns={5} />
+ * <GridLoadingLine /> // Uses defaults
+ * ```
+ */
+export declare function GridLoadingLine({ height, columns, className, ...props }: GridLoadingLineProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * GridTableLoaderProps — props for GridTableLoader component.
+ */
+interface GridTableLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns to span (uses col-span-full by default)
+     */
+    colSpan?: number;
+}
+/**
+ * GridTableLoader — loader component for infinite scroll in GridTable.
+ *
+ * @usage
+ * Use GridTableLoader to display loading state at the bottom of grid tables:
+ * infinite scroll loading indicators, table data fetching states.
+ *
+ * Props:
+ * - `colSpan` — number of columns to span (uses col-span-full by default).
+ *
+ * Note: Displays centered spinner at the bottom of the table while loading more data.
+ */
+declare const GridTableLoader: React.ForwardRefExoticComponent<GridTableLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { GridTableLoader };
+export type { GridTableLoaderProps };

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

@@ -0,0 +1,158 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { type ColProps } from "../layout/col";
+import { type GridProps } from "../layout/grid";
+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;
+}
+/**
+ * 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 {
+}
+/**
+ * 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).
+ *
+ * Note: Automatically applies bottom border, hover effects, and selected state styling to all child elements.
+ */
+declare const GridTableRow: React.ForwardRefExoticComponent<GridTableRowProps & React.RefAttributes<HTMLDivElement>>;
+declare const gridTableHeadVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    justify?: "end" | "center" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GridTableHeadProps extends ColProps, VariantProps<typeof gridTableHeadVariants> {
+}
+/**
+ * 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").
+ *
+ * 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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GridTableCellProps extends ColProps, VariantProps<typeof gridTableCellVariants> {
+}
+/**
+ * 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").
+ *
+ * Note: Automatically applies appropriate padding based on size variant.
+ */
+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>>;
+export { GridTable, GridTableBody, GridTableCaption, GridTableCell, GridTableFooter, GridTableHead, GridTableHeader, GridTableRow, gridTableVariants, gridTableHeadVariants, gridTableCellVariants, };
+export type { GridTableProps, GridTableHeadProps, GridTableCellProps, GridTableRowProps, };

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

@@ -0,0 +1,13 @@
+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 "./sortable-head-cell";
+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/sortable-head-cell.d.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+import type { SortType } from "../../utils/sort";
+/**
+ * SortableHeadCellProps — props for SortableHeadCell component.
+ */
+export interface SortableHeadCellProps {
+    title: React.ReactNode;
+    sortType?: SortType;
+    onSort: () => void;
+    className?: string;
+}
+/**
+ * SortableHeadCell — sortable table header cell component with sort indicators.
+ *
+ * @usage
+ * Use SortableHeadCell to create clickable, sortable table column headers:
+ * sortable data tables, sortable lists, interactive table headers with sort direction indicators.
+ *
+ * Props:
+ * - `title` — header content/title (required).
+ * - `sortType` — current sort type: "asc", "desc", or undefined (no sort).
+ * - `onSort` — callback function to toggle sort (required).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Displays ArrowUp for ascending, ArrowDown for descending, or ArrowUpDown (faded) when not sorted. Clicking toggles sort direction.
+ *
+ * @example
+ * ```tsx
+ * <SortableHeadCell
+ *   title="Name"
+ *   sortType={getSortForField("name", currentSort)}
+ *   onSort={() => setSortField("name")}
+ * />
+ * ```
+ */
+export declare function SortableHeadCell({ title, sortType, onSort, className, }: SortableHeadCellProps): React.ReactElement;