@gearbox-protocol/permissionless-ui 1.2.32 → 1.3.0

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;

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

@@ -0,0 +1,45 @@
+import type * as React from "react";
+import { type TableLoaderProps } from "./table-loader";
+/**
+ * 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,46 @@
+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;
+}
+/**
+ * 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, 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.d.ts → table/table.d.ts}

@@ -1,3 +1,4 @@
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 /**
  * Table — table component and its subcomponents.
@@ -25,7 +26,31 @@ import * as React from "react";
  * - for editable content with actions (use TableEditable component).
  * - for simple lists without structured data (use appropriate list components).
  */
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+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> {
+}
+/**
+ * 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).
@@ -46,16 +71,18 @@ declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<
  * Contains table cells (TableCell or TableHead components) with hover effects.
  */
 declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-/**
- * TableHead — header cell component of a Table.
- * Used in TableHeader to display column headers with muted background.
- */
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-/**
- * TableCell — data cell component of a Table.
- * Used in TableBody to display table data.
- */
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+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.
@@ -96,4 +123,4 @@ export interface SortTableHeadProps extends React.ThHTMLAttributes<HTMLTableCell
  * - 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, };
+export { SortingTableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableVariants, tableHeadVariants, tableCellVariants, };

package/dist/types/components/{editable-table → table}/updated-value.d.ts

@@ -1,3 +1,6 @@
+/**
+ * UpdatedValueProps — props for UpdatedValue component.
+ */
 interface UpdatedValueProps {
     oldValue?: string | number;
     newValue: string | number;

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

@@ -1,21 +1,40 @@
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
+declare const textareaVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Textarea — multi-line text input component.
+ * TextareaProps — props for Textarea component.
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+}
+/**
+ * Textarea — multi-line text input component with size variants.
  *
  * @usage
  * Use Textarea for multi-line text input:
- * comments, descriptions, long-form text, message inputs, bytecodes, etc.
+ * comments, descriptions, long-form text, message inputs, bytecodes.
  *
  * Props:
+ * - `size` — textarea size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "error" (defaults to "default").
  * - All standard HTML textarea props are supported (value, onChange, placeholder, rows, etc.).
  *
- * Note: Minimum height of 80px. Uses standard form input styling with focus states.
+ * Note: Minimum height varies by size (60px for sm, 80px for default, 120px for lg).
+ * Uses standard form input styling with focus states.
  * Prefer using this component instead of native HTML textarea element.
  *
  * Do NOT use Textarea:
  * - for single-line text input (use Input component).
  * - for rich text editing (use appropriate rich text editor components).
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Enter description" />
+ * <Textarea size="lg" rows={10} />
+ * <Textarea variant="error" />
+ * ```
  */
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
+export { Textarea, textareaVariants };

package/dist/types/components/theme-provider.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+/**
+ * Theme types
+ */
+export type Theme = "light" | "dark" | "system";
+/**
+ * Theme configuration interface
+ */
+export interface ThemeConfig {
+    defaultTheme?: Theme;
+    storageKey?: string;
+    attribute?: "class" | "data-theme";
+    enableColorScheme?: boolean;
+}
+/**
+ * Theme context
+ */
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    actualTheme: "light" | "dark";
+}
+/**
+ * Hook for using theme
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Theme provider - DefaultGlobalStyle analog
+ * Manages application theme and applies global styles
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, attribute, enableColorScheme, }: ThemeConfig & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/theme-toggle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Theme toggle component
+ * Example usage of ThemeProvider
+ */
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/token-icon.d.ts

@@ -1,7 +1,4 @@
-interface TokenIconProps {
-    symbol: string;
-    size?: number;
-}
+import { type ImageProps } from "./image";
 /**
  * TokenIcon — component for displaying token/asset icons.
  *
@@ -22,5 +19,10 @@ interface TokenIconProps {
  * - for address identifiers (use Identicon component).
  * - for custom images or logos (use Image component).
  */
-export declare function TokenIcon({ symbol, size }: TokenIconProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export interface TokenIconProps {
+    symbol: string;
+    size?: number;
+    className?: string;
+    ImageComponent?: React.ComponentType<ImageProps>;
+}
+export declare function TokenIcon({ symbol, size, className, ImageComponent, }: TokenIconProps): import("react/jsx-runtime").JSX.Element;