@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/types/components/percent-indicator.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+export interface PercentIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The percentage value (already in percent form, e.g., 75 for 75%)
+     */
+    percent: number;
+    /**
+     * Number of decimal places to show
+     * @default 2
+     */
+    decimals?: number;
+    /**
+     * Show color indicator based on percentage
+     * @default true
+     */
+    showColor?: boolean;
+}
+/**
+ * PercentIndicator component for displaying percentage values with optional color coding
+ *
+ * @example
+ * ```tsx
+ * <PercentIndicator percent={75} />  // Shows "75.00%"
+ * <PercentIndicator percent={50} decimals={1} />  // Shows "50.0%"
+ * <PercentIndicator percent={95} showColor={false} />  // No color coding
+ * ```
+ */
+export declare function PercentIndicator({ percent, decimals, showColor, className, ...props }: PercentIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/pool-points-indicator.d.ts

@@ -0,0 +1,41 @@
+import type { PropsWithChildren } from "react";
+export type PoolPointsColor = "primary" | "secondary" | "green" | "blue" | "yellow";
+export interface PoolPointsIndicatorProps {
+    /**
+     * Size of the token icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Color of the border and indicator
+     * @default "primary"
+     */
+    color?: PoolPointsColor;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+/**
+ * PoolPointsIndicator component - wrapper that adds a circular border and indicator
+ * around a TokenIcon (or any children) to show pool points
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with TokenIcon
+ * <PoolPointsIndicator size={24}>
+ *   <TokenIcon symbol="ETH" size={24} />
+ * </PoolPointsIndicator>
+ *
+ * // With custom color
+ * <PoolPointsIndicator size={24} color="green">
+ *   <TokenIcon symbol="USDC" size={24} />
+ * </PoolPointsIndicator>
+ *
+ * // Secondary color
+ * <PoolPointsIndicator size={32} color="secondary">
+ *   <TokenIcon symbol="DAI" size={32} />
+ * </PoolPointsIndicator>
+ * ```
+ */
+export declare function PoolPointsIndicator({ size, color, className, children, }: PropsWithChildren<PoolPointsIndicatorProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/search-line.d.ts

@@ -0,0 +1,117 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const searchLineVariants: (props?: ({
+    size?: "full" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const searchLineInputVariants: (props?: ({
+    active?: boolean | null | undefined;
+    theme?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SearchLineState {
+    value: string;
+    handleInput: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (ev: {
+        preventDefault: () => void;
+    }) => void;
+    loading?: boolean;
+}
+export interface SearchLineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit">, VariantProps<typeof searchLineVariants> {
+    /**
+     * Search state object containing value, handlers, and loading state
+     */
+    searchState: SearchLineState;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Theme variant
+     */
+    theme?: "light" | "dark";
+    /**
+     * Whether to show the search icon on the left
+     */
+    showSearchIcon?: boolean;
+    /**
+     * Custom icon to show when active (default: ArrowRight)
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Callback when the search is submitted
+     */
+    onSubmit?: (value: string) => void;
+}
+/**
+ * SearchLine component with animated states and submit functionality
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with search state
+ * const [value, setValue] = useState("");
+ * const searchState = {
+ *   value,
+ *   handleInput: (e) => setValue(e.target.value),
+ *   handleSubmit: (e) => {
+ *     e.preventDefault();
+ *     console.log("Search:", value);
+ *   },
+ *   loading: false,
+ * };
+ *
+ * <SearchLine searchState={searchState} placeholder="Search..." />
+ *
+ * // With loading state
+ * <SearchLine
+ *   searchState={{ ...searchState, loading: true }}
+ *   theme="dark"
+ * />
+ *
+ * // Full width
+ * <SearchLine
+ *   searchState={searchState}
+ *   size="full"
+ *   showSearchIcon
+ * />
+ * ```
+ */
+export declare const SearchLine: React.ForwardRefExoticComponent<SearchLineProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for WithSearchLine component
+ */
+export interface WithSearchLineProps {
+    /**
+     * Search state object
+     */
+    searchState: SearchLineState;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Theme variant
+     */
+    theme?: "light" | "dark";
+    /**
+     * Content to display alongside the search line
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+}
+/**
+ * WithSearchLine component that combines content with a search line
+ *
+ * @example
+ * ```tsx
+ * <WithSearchLine
+ *   searchState={searchState}
+ *   placeholder="Search items..."
+ * >
+ *   <h2>Items List</h2>
+ * </WithSearchLine>
+ * ```
+ */
+export declare const WithSearchLine: React.ForwardRefExoticComponent<WithSearchLineProps & React.RefAttributes<HTMLDivElement>>;
+export { searchLineVariants, searchLineInputVariants };

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

@@ -1,4 +1,5 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 /**
  * Select — dropdown select component and its subcomponents.
@@ -29,11 +30,17 @@ import * as React from "react";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const selectTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants, };

package/dist/types/components/short-string.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+/**
+ * ShortStringProps — props for ShortString component.
+ */
+export interface ShortStringProps {
+    children: string;
+    maxLength?: number;
+    className?: string;
+    showTooltip?: boolean;
+}
+/**
+ * ShortString — component for truncating text with tooltip showing full content.
+ *
+ * @usage
+ * Use ShortString to display long text in limited space:
+ * long addresses, file names, descriptions, text overflow handling.
+ *
+ * Props:
+ * - `children` — text content to display (required).
+ * - `maxLength` — maximum character length before truncation (if not provided, uses CSS text-overflow).
+ * - `className` — additional CSS classes for styling.
+ * - `showTooltip` — whether to show tooltip with full text on hover (defaults to true).
+ *
+ * Note: If maxLength is not provided, uses CSS text-overflow with ellipsis.
+ * If maxLength is provided, truncates text with JavaScript and adds "..." suffix.
+ * Tooltip shows full text content on hover when enabled.
+ *
+ * @example
+ * ```tsx
+ * <ShortString maxLength={20}>
+ *   This is a very long string that will be truncated
+ * </ShortString>
+ *
+ * <ShortString>
+ *   This will be truncated with CSS text-overflow
+ * </ShortString>
+ * ```
+ */
+export declare function ShortString({ children, maxLength, className, showTooltip, }: ShortStringProps): React.ReactElement;

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

@@ -1,11 +1,28 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const skeletonVariants: (props?: ({
+    variant?: "default" | "lighter" | "darker" | null | undefined;
+    speed?: "default" | "slow" | "fast" | null | undefined;
+    width?: "full" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
+    height?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Skeleton — loading placeholder component.
+ * SkeletonProps — props for Skeleton component.
+ */
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+}
+/**
+ * Skeleton — loading placeholder component with pulse animation.
  *
  * @usage
  * Use Skeleton to display loading placeholders:
  * content loading states, data fetching indicators, placeholder animations.
  *
  * Props:
+ * - `variant` — visual variant: "default", "lighter", "darker" (defaults to "default").
+ * - `speed` — animation speed: "slow", "default", "fast" (defaults to "default").
+ * - `width` — width preset: "full", "3/4", "1/2", "1/3", "1/4", "xs", "sm", "md", "lg", "xl", "2xl" (defaults to "full").
+ * - `height` — height preset: "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl" (defaults to "md").
  * - All standard HTML div props are supported (className, style, etc.).
  *
  * Note: Uses pulse animation and muted background color.
@@ -15,6 +32,14 @@
  * Do NOT use Skeleton:
  * - for error states (use appropriate error components).
  * - for empty states (use appropriate empty state components).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton />
+ * <Skeleton width="1/2" height="sm" />
+ * <Skeleton variant="lighter" width="md" height="lg" />
+ * <Skeleton speed="fast" width="sm" height="xl" className="rounded-full" />
+ * ```
  */
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+declare function Skeleton({ className, variant, speed, width, height, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, skeletonVariants };

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;