@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/globals.css

@@ -6,32 +6,44 @@
   :root {
     color-scheme: light dark;
 
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --background: 225 15% 98%;
+    --foreground: 240 5% 12%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 5% 12%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 330 98% 48%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 89.8%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 330 100% 59%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 100% 65%;
-    --destructive-foreground: 0 0% 98%;
-    --success: 143 100% 78%;
-    --warning: 44 100% 69%;
-    --input: 0 0% 89.8%;
-    --ring: 330 98% 48%;
+    --popover-foreground: 240 5% 12%;
+    --primary: 328 65% 42%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 225 12% 92%;
+    --secondary-foreground: 240 5% 12%;
+    --muted: 225 10% 90%;
+    --muted-foreground: 225 6% 40%;
+    --accent: 330 100% 50%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 85% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 143 70% 35%;
+    --warning: 38 95% 45%;
+    --liquidation: 274 67% 48%;
+    --input: 225 10% 88%;
+    --ring: 330 100% 50%;
     --radius: 0.75rem;
-    --text-secondary: 0 0% 60%;
-    --dropdown-dark-button: 0 0% 20%;
+    --gray-10: 225 12% 95%;
+    --gray-20: 225 10% 92%;
+    --gray-30: 225 9% 88%;
+    --gray-40: 225 8% 82%;
+    --gray-50: 225 7% 75%;
+    --gray-60: 225 6% 65%;
+    --gray-70: 225 6% 55%;
+    --gray-80: 225 6% 45%;
+    --gray-90: 225 6% 35%;
+    --gray-100: 225 7% 28%;
+    --gray-110: 225 8% 20%;
+    --text-secondary: 225 6% 45%;
+    --dropdown-dark-button: 225 8% 25%;
     --white: 0 0% 100%;
     --black: 0 0% 0%;
-    --border: 0 0% 89.8%;
+    --border: 225 10% 88%;
   }
 
   .dark {
@@ -77,6 +89,51 @@
   }
 }
 
+/* Theme configuration for Tailwind v4 */
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-success: hsl(var(--success));
+  --color-warning: hsl(var(--warning));
+  --color-liquidation: hsl(var(--liquidation));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-text-secondary: hsl(var(--text-secondary));
+  --color-dropdown-dark-button: hsl(var(--dropdown-dark-button));
+  --color-white: hsl(var(--white));
+  --color-black: hsl(var(--black));
+  --color-gray-10: hsl(var(--gray-10));
+  --color-gray-20: hsl(var(--gray-20));
+  --color-gray-30: hsl(var(--gray-30));
+  --color-gray-40: hsl(var(--gray-40));
+  --color-gray-50: hsl(var(--gray-50));
+  --color-gray-60: hsl(var(--gray-60));
+  --color-gray-70: hsl(var(--gray-70));
+  --color-gray-80: hsl(var(--gray-80));
+  --color-gray-90: hsl(var(--gray-90));
+  --color-gray-100: hsl(var(--gray-100));
+  --color-gray-110: hsl(var(--gray-110));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
 @layer base {
   body {
     margin: 0;

package/dist/types/components/alert-dialog/index.d.ts

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

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

@@ -0,0 +1,59 @@
+import { NetworkType, TokenData } from '@gearbox-protocol/sdk';
+import * as React from "react";
+type Sizes = "default" | "sm" | "md" | "lg";
+/**
+ * AssetLineBaseProps — base props for AssetLine component.
+ */
+export interface AssetLineBaseProps {
+    symbolMaxLength?: number;
+    descriptionMaxLength?: number;
+    size?: Sizes;
+    iconSize?: Sizes;
+    gapSize?: Sizes;
+    hideValue?: boolean;
+}
+/**
+ * AssetLineProps — props for AssetLine component.
+ */
+export interface AssetLineProps extends AssetLineBaseProps {
+    token: TokenData | undefined;
+    tokenLabel?: string;
+    tokenDescription?: React.ReactNode;
+    chainId?: number;
+    network?: NetworkType;
+    value: React.ReactNode;
+    valueDescription?: React.ReactNode;
+    last: boolean;
+    onSelect?: () => void;
+    className?: string;
+}
+/**
+ * AssetLine — component for displaying asset information in a table row format.
+ *
+ * @usage
+ * Use AssetLine to display asset data in tables:
+ * token lists, asset rows, portfolio tables, asset selection lists.
+ *
+ * Props:
+ * - `token` — token data object (TokenData).
+ * - `tokenLabel` — custom label for token (overrides token.title).
+ * - `tokenDescription` — additional description displayed below token symbol.
+ * - `chainId` — chain ID for token network.
+ * - `network` — network type for token.
+ * - `value` — value to display in right column (required).
+ * - `valueDescription` — additional description displayed below value.
+ * - `last` — if true, removes bottom border (required).
+ * - `onSelect` — callback function for row selection (makes row clickable).
+ * - `size` — row size: "default", "sm", "md", "lg" (defaults to "default").
+ * - `iconSize` — icon size override (defaults to size).
+ * - `gapSize` — gap size between elements (defaults to size).
+ * - `symbolMaxLength` — max length for symbol truncation.
+ * - `descriptionMaxLength` — max length for description truncation.
+ * - `hideValue` — if true, hides the value column (defaults to false).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Uses GridTableRow and GridTableCell internally. Displays token icon, symbol, and value in a two-column layout.
+ * When onSelect is provided, row becomes clickable with cursor pointer.
+ */
+export declare const AssetLine: React.ForwardRefExoticComponent<AssetLineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/asset-line/index.d.ts

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

package/dist/types/components/assets-list-cell/assets-list-cell.d.ts

@@ -0,0 +1,48 @@
+import { Address } from 'viem';
+export interface AssetsListCellProps {
+    /**
+     * The asset address
+     */
+    assetAddress: Address;
+    /**
+     * The asset symbol
+     */
+    symbol: string;
+    /**
+     * Optional comment/description to display next to the symbol
+     */
+    comment?: string;
+    /**
+     * Optional explorer URL for the asset
+     */
+    explorerUrl?: string;
+    /**
+     * Icon symbol to use if it doesn't match the asset symbol
+     * e.g., pool tokens don't have their own symbol and use underlying symbol
+     */
+    iconSymbol?: string;
+    /**
+     * Size of the token icon
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * AssetsListCell component for displaying asset information in list views
+ * Similar to TableCellAsset but without table cell wrapper, suitable for list/grid layouts
+ *
+ * @example
+ * ```tsx
+ * <AssetsListCell
+ *   assetAddress="0x1234..."
+ *   symbol="ETH"
+ *   comment="Ethereum"
+ *   explorerUrl="https://etherscan.io"
+ * />
+ * ```
+ */
+export declare function AssetsListCell({ assetAddress, symbol, iconSymbol, comment, explorerUrl, iconSize, className, }: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/assets-list-cell/index.d.ts

@@ -0,0 +1 @@
+export * from './assets-list-cell';

package/dist/types/components/assets-ratio/assets-ratio.d.ts

@@ -0,0 +1,9 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import * as React from "react";
+export interface AssetsRatioProps {
+    assets: Array<Asset & {
+        balanceInUSD: bigint;
+    }>;
+    className?: string;
+}
+export declare function AssetsRatio({ assets, className, }: AssetsRatioProps): React.ReactElement;

package/dist/types/components/assets-ratio/index.d.ts

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

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

@@ -1,2 +1,2 @@
-export * from "./signin-required";
-export * from "./siwe-provider";
+export * from './signin-required';
+export * from './siwe-provider';

package/dist/types/components/auth/signin-required.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
-import type { Address } from "viem";
-import { type TabButtonProps } from "../buttons";
+import { ReactNode } from 'react';
+import { Address } from 'viem';
+import { TabButtonProps } from '../buttons';
 /**
  * SignInRequired — component that requires SIWE authentication to display content.
  *
@@ -31,4 +31,4 @@ export interface SignInRequiredProps extends TabButtonProps {
     children: ReactNode;
     skipSignIn?: boolean;
 }
-export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Badge — component for displaying labels, tags, or status indicators.
+ *
+ * @usage
+ * Use Badge to display labels, tags, or status indicators:
+ * status badges, category tags, count indicators, metadata labels.
+ *
+ * Variants (variant):
+ * - `default` — primary badge with background and shadow.
+ * - `secondary` — secondary badge with muted background.
+ * - `destructive` — destructive badge with red background for errors/warnings.
+ * - `outline` — outlined badge with border only.
+ *
+ * Note: Prefer using this component instead of native HTML div element for badges.
+ *
+ * Do NOT use Badge:
+ * - for interactive elements (use Button instead).
+ * - for large text content (use appropriate text components).
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

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

package/dist/types/components/base-link/index.d.ts

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

package/dist/types/components/block-sync/block-sync.d.ts

@@ -0,0 +1,8 @@
+import { BlockSyncProps } from '../../types/footer';
+import type * as React from "react";
+/**
+ * BlockSync component - displays network synchronization status
+ * Shows a colored indicator that reflects the time since last block update
+ * On hover, displays detailed information about synced blocks for each chain
+ */
+export declare function BlockSync({ blockByChain, explorerAddresses, networkById, }: BlockSyncProps): React.ReactElement;

package/dist/types/components/block-sync/index.d.ts

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

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

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

package/dist/types/components/buttons/back-button/back-button.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+declare const backButtonVariants: (props?: ({
+    variant?: "default" | "primary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface LinkComponentProps {
+    href: string;
+    className?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+export interface BackButtonProps extends VariantProps<typeof backButtonVariants> {
+    href: string;
+    text?: string;
+    onClick?: () => void;
+    className?: string;
+    LinkComponent?: React.ComponentType<LinkComponentProps>;
+}
+export declare function BackButton({ href, text, onClick, className, variant, size, LinkComponent, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export { backButtonVariants };

package/dist/types/components/buttons/back-button/index.d.ts

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

package/dist/types/components/buttons/button/button.d.ts

@@ -0,0 +1,75 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "text" | "default" | "ghost" | "destructive" | "outline" | "secondary" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "auto" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Button component props
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * Renders the button as a child element using Radix Slot
+     * Useful for creating link buttons or custom interactive elements
+     *
+     * @example
+     * ```tsx
+     * <Button asChild>
+     *   <Link href="/path">Link Button</Link>
+     * </Button>
+     * ```
+     */
+    asChild?: boolean;
+}
+/**
+ * Button — universal component for user actions.
+ *
+ * @usage
+ * Use Button for most clickable actions that represent a clearly defined intent:
+ * submitting a form, creating an entity, confirming an operation, navigating the interface.
+ *
+ * Variants (variant):
+ * - `default` — main action on a page (submit, create, confirm).
+ * - `secondary` — alternative actions next to the primary one.
+ * - `outline` — actions with border, medium priority, mostly used.
+ * - `ghost` — low-emphasis actions (filters, "View details", icon-only actions).
+ * - `destructive` — dangerous or irreversible actions (deleting entities, closing positions, liquidations).
+ * - `link` — actions styled as a text link.
+ * - `text` — text actions with muted color.
+ * - `pink` / `pink-outline` — special variants with pink theme.
+ * - `blue` / `blue-outline` — special variants with blue theme.
+ *
+ * Sizes (size):
+ * - `auto` — automatic height without padding.
+ * - `xs` — extra small (rounded-full, px-3, text-xs).
+ * - `sm` — small (h-8, px-3, text-xs).
+ * - `default` — standard (h-9, px-4, py-2).
+ * - `lg` — large (h-10, px-8).
+ * - `icon` — square button for icons (h-9 w-9).
+ *
+ * Do NOT use Button:
+ * - for passive labels or decorative UI elements.
+ * - for elements that don't perform actions (use appropriate semantic elements instead).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants
+ * <Button variant="destructive">Delete</Button>
+ * <Button variant="outline" size="sm">Small Button</Button>
+ *
+ * // As a link
+ * <Button asChild>
+ *   <Link href="/dashboard">Go to Dashboard</Link>
+ * </Button>
+ *
+ * // Icon button
+ * <Button size="icon" variant="ghost">
+ *   <Icon />
+ * </Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/types/components/buttons/button/index.d.ts

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

package/dist/types/components/buttons/copy-button/copy-button.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from '../button';
+import * as React from "react";
+export interface CopyButtonProps extends Omit<ButtonProps, "size"> {
+    text: string;
+    name?: string;
+    /**
+     * Size of the copy icon in Tailwind size units (e.g., "3", "3.5", "4", "5").
+     * Defaults to "3.5".
+     */
+    iconSize?: "3" | "3.5" | "4" | "5" | "6";
+}
+/**
+ * CopyButton — component for copying text to clipboard.
+ *
+ * @usage
+ * Use CopyButton to allow users to quickly copy text content to their clipboard:
+ * addresses, transaction hashes, API keys, code snippets, shareable links.
+ *
+ * Props:
+ * - `text` — text content to copy to clipboard (required).
+ * - `name` — optional name/description shown in copy notification, defaults to "Address".
+ * - `iconSize` — size of the copy icon, defaults to "3.5".
+ * - All standard Button props are supported (variant, className, etc.), except `size`.
+ *
+ * Do NOT use CopyButton:
+ * - when the text to copy is not clearly visible or accessible to the user.
+ * - as a primary action button (use regular Button with copy functionality if needed).
+ */
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { CopyButton };

package/dist/types/components/buttons/copy-button/index.d.ts

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

package/dist/types/components/buttons/external-button/external-button.d.ts

@@ -0,0 +1,29 @@
+import { ButtonProps } from '../button';
+import * as React from "react";
+export interface ExternalButtonProps extends ButtonProps {
+    url: string;
+    /**
+     * Size of the external link icon in Tailwind size units (e.g., "3", "3.5", "4", "5").
+     * Defaults to "3.5".
+     */
+    iconSize?: "3" | "3.5" | "4" | "5" | "6";
+}
+/**
+ * ExternalButton — component for opening external links in a new tab.
+ *
+ * @usage
+ * Use ExternalButton to open external URLs in a new browser tab:
+ * documentation links, external services, social media profiles, third-party tools.
+ *
+ * Props:
+ * - `url` — external URL to open (required).
+ * - `iconSize` — size of the external link icon, defaults to "3.5".
+ * - All standard Button props are supported (variant, className, etc.).
+ *
+ * Do NOT use ExternalButton:
+ * - for internal navigation within the application (use Link or NavigationButton).
+ * - when you want to open links in the same tab (use regular Link component).
+ * - for actions that don't involve opening URLs (use regular Button instead).
+ */
+declare const ExternalButton: React.ForwardRefExoticComponent<ExternalButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { ExternalButton };

package/dist/types/components/buttons/external-button/index.d.ts

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

package/dist/types/components/buttons/filter-button/filter-button.d.ts

@@ -0,0 +1,52 @@
+import { ButtonProps } from '../button';
+import * as React from "react";
+/**
+ * FilterButtonProps — props for FilterButton component.
+ */
+export interface FilterButtonProps extends ButtonProps {
+    /**
+     * Custom label for the filter button
+     * @default "Filter"
+     */
+    label?: string;
+    /**
+     * Whether to show the filter icon
+     * @default true
+     */
+    showIcon?: boolean;
+}
+/**
+ * FilterButton — button component with filter icon for triggering filter actions.
+ *
+ * @usage
+ * Use FilterButton to trigger filter dialogs or modals:
+ * filter triggers, search filters, table filters, list filters.
+ *
+ * Props:
+ * - `label` — custom button text (defaults to "Filter").
+ * - `showIcon` — whether to display filter icon (defaults to true).
+ * - `variant` — button variant (defaults to "outline").
+ * - `size` — button size (defaults to "default").
+ * - All standard Button props are supported (onClick, className, etc.).
+ *
+ * Note: Commonly used with WithFilterButton HOC or FilterModal component.
+ * Displays Filter icon from lucide-react by default.
+ *
+ * Do NOT use FilterButton:
+ * - for direct filtering without opening a dialog (use regular Button with filter logic).
+ * - when filter icon doesn't make sense visually (use regular Button instead).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FilterButton onClick={() => console.log("Filter clicked")} />
+ *
+ * // With custom label
+ * <FilterButton label="Apply Filters" variant="outline" size="sm" />
+ *
+ * // Without icon
+ * <FilterButton showIcon={false} label="Filters" />
+ * ```
+ */
+declare const FilterButton: React.ForwardRefExoticComponent<FilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { FilterButton };

package/dist/types/components/buttons/filter-button/index.d.ts

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

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

@@ -1,8 +1,8 @@
-export * from "./back-button";
-export * from "./button";
-export * from "./copy-button";
-export * from "./external-button";
-export * from "./filter-button";
-export * from "./navigation-button";
-export * from "./range-buttons";
-export * from "./tab-button";
+export * from './back-button';
+export * from './button';
+export * from './copy-button';
+export * from './external-button';
+export * from './filter-button';
+export * from './navigation-button';
+export * from './range-buttons';
+export * from './tab-button';

package/dist/types/components/buttons/navigation-button/index.d.ts

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

package/dist/types/components/buttons/navigation-button/navigation-button.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface NavigationButtonProps {
+    href: string;
+    text: string;
+    isActive: boolean;
+}
+/**
+ * NavigationButton — component for internal navigation with active state indication.
+ *
+ * @usage
+ * Use NavigationButton for navigation within the application that requires active state:
+ * main navigation menus, tab navigation, sidebar navigation, breadcrumb navigation.
+ * Used in Header component.
+ *
+ * Props:
+ * - `href` — destination URL for navigation (required).
+ * - `text` — button label text (required).
+ * - `isActive` — indicates if the current route matches this button's destination (required).
+ *
+ * Do NOT use NavigationButton:
+ * - for external links (use ExternalButton instead).
+ * - for actions that don't navigate (use regular Button instead).
+ * - when active state indication is not needed (use regular Link component).
+ */
+declare const NavigationButton: React.ForwardRefExoticComponent<NavigationButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavigationButton };

package/dist/types/components/buttons/range-buttons/index.d.ts

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

package/dist/types/components/buttons/tab-button/index.d.ts

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

package/dist/types/components/buttons/tab-button/tab-button.d.ts

@@ -0,0 +1,24 @@
+import { ButtonProps } from '../button';
+import * as React from "react";
+export interface TabButtonProps extends ButtonProps {
+    size?: "sm" | "lg" | "default";
+    children: React.ReactNode;
+}
+/**
+ * TabButton — styled "sm" "outline" button variant commonly used with Tabs, Table, or Card components.
+ *
+ * @usage
+ * Use TabButton as a styled action button in contexts where it pairs well with other UI components:
+ * action buttons in EditableTable, buttons in Card headers, actions alongside Tabs.
+ * Commonly used as main subpage action.
+ *
+ * Props:
+ * - All standard Button props are supported (variant, className, onClick, etc.).
+ *
+ * Do NOT use TabButton:
+ * - for primary page actions (use regular Button with appropriate variant instead).
+ * - for navigation between different pages (use NavigationButton or Link).
+ * - when you need different styling that doesn't match the dark theme outline variant.
+ */
+declare const TabButton: React.ForwardRefExoticComponent<TabButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { TabButton };