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

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

@@ -0,0 +1,61 @@
+import type * as React from "react";
+export interface BreadCrumb {
+    label: React.ReactNode;
+    href?: string;
+    step?: string;
+    [key: string]: unknown;
+}
+export interface BreadCrumbsProps<T extends BreadCrumb = BreadCrumb> {
+    /**
+     * Array of breadcrumb items
+     */
+    items: T[];
+    /**
+     * Click handler for breadcrumb item (alternative to href navigation)
+     */
+    onClick?: (item: T, index: number) => void;
+    /**
+     * Current active step index (for wizard-style breadcrumbs)
+     */
+    currentStep?: number;
+    /**
+     * Function to determine if a step is disabled
+     */
+    disabledSteps?: (item: T, index: number) => boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * BreadCrumbs - navigation breadcrumbs component
+ *
+ * Supports two modes:
+ * 1. Navigation mode (with href) - uses Link for navigation
+ * 2. Wizard mode (with onClick, currentStep, disabledSteps) - for step-by-step flows
+ *
+ * @example
+ * ```tsx
+ * // Navigation mode
+ * <BreadCrumbs
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Details" }
+ *   ]}
+ * />
+ *
+ * // Wizard mode
+ * <BreadCrumbs
+ *   items={[
+ *     { label: "Step 1", step: "first" },
+ *     { label: "Step 2", step: "second" },
+ *     { label: "Step 3", step: "third" }
+ *   ]}
+ *   currentStep={1}
+ *   onClick={(item) => goToStep(item.step)}
+ *   disabledSteps={(item) => item.step === "third"}
+ * />
+ * ```
+ */
+export declare function BreadCrumbs<T extends BreadCrumb = BreadCrumb>({ items, onClick, currentStep, disabledSteps, className, }: BreadCrumbsProps<T>): React.ReactElement | null;

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

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

package/dist/types/components/button-checkbox/button-checkbox.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface ButtonCheckboxProps {
+    /** Whether the checkbox is checked (controlled) */
+    checked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Callback when the checked state changes (no arguments, match A API) */
+    onChange?: () => void;
+    /** Label or content inside the button area */
+    children?: React.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ButtonCheckbox — checkbox styled as a clickable label/button with border and outline when checked.
+ *
+ * @usage
+ * Use for toggle options where the whole area is clickable: filters, settings toggles, list selection.
+ *
+ * @example
+ * ```tsx
+ * <ButtonCheckbox checked={active} onChange={() => setActive(!active)}>
+ *   Enable feature
+ * </ButtonCheckbox>
+ * ```
+ */
+declare const ButtonCheckbox: React.ForwardRefExoticComponent<ButtonCheckboxProps & React.RefAttributes<HTMLLabelElement>>;
+export { ButtonCheckbox };

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

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

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,76 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "text" | "default" | "success" | "destructive" | "ghost" | "outline" | "secondary" | "white" | "neutral" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
+    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | null | undefined;
+    width?: "compact" | "wide" | 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,31 @@
+import { ButtonProps } from '../button';
+import * as React from "react";
+export interface CopyButtonProps extends Omit<ButtonProps, "size"> {
+    text: 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";
+    /** Duration to show success checkmark in ms (default: 1500) */
+    successDuration?: number;
+}
+/**
+ * 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).
+ * - `iconSize` — size of the copy icon, defaults to "3.5".
+ * - `successDuration` — duration to show checkmark in ms, defaults to 1500.
+ * - 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

@@ -0,0 +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';

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 * 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/range-buttons/range-buttons.d.ts

@@ -0,0 +1,49 @@
+import type * as React from "react";
+/**
+ * RangeItemProps — props for single range option.
+ */
+export interface RangeItemProps<T> {
+    value: T;
+    label: React.ReactNode;
+}
+/**
+ * RangeButtonsProps — props for RangeButtons component.
+ */
+export interface RangeButtonsProps<T> {
+    range: T;
+    rangeList: Array<RangeItemProps<T>>;
+    setRange: (range: T) => void;
+    className?: string;
+}
+/**
+ * RangeButtons — button group component for selecting from a list of options.
+ *
+ * @usage
+ * Use RangeButtons to create option selectors:
+ * time range selectors, view mode toggles, filter options, segmented controls.
+ *
+ * Props:
+ * - `range` — currently selected value (required).
+ * - `rangeList` — array of selectable options with value and label (required).
+ * - `setRange` — callback function to change selected value (required).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Displays inline button group with active state highlighting.
+ * Supports generic type T for flexible value types.
+ *
+ * @example
+ * ```tsx
+ * const [timeRange, setTimeRange] = useState<"24h" | "7d" | "30d">("24h");
+ *
+ * <RangeButtons
+ *   range={timeRange}
+ *   rangeList={[
+ *     { value: "24h", label: "24H" },
+ *     { value: "7d", label: "7D" },
+ *     { value: "30d", label: "30D" },
+ *   ]}
+ *   setRange={setTimeRange}
+ * />
+ * ```
+ */
+export declare function RangeButtons<T>({ range, rangeList, setRange, className, }: RangeButtonsProps<T>): import("react/jsx-runtime").JSX.Element;

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 };

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

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * CardGrid - responsive grid layout for cards
+ *
+ * @example
+ * ```tsx
+ * <CardGrid columns={3} columnsSm={2} gap="lg">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </CardGrid>
+ * ```
+ */
+declare const cardGridVariants: (props?: ({
+    columns?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsLg?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsMd?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsSm?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xl" | "md" | null | undefined;
+    justifyItemContent?: "center" | "start" | "end" | "stretch" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface CardGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardGridVariants> {
+}
+declare const CardGrid: React.ForwardRefExoticComponent<CardGridProps & React.RefAttributes<HTMLDivElement>>;
+export { CardGrid, cardGridVariants };

package/dist/types/components/card-grid/index.d.ts

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

package/dist/types/components/cards/card/card.d.ts

@@ -0,0 +1,58 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "transparent" | "interactive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    asChild?: boolean;
+}
+/**
+ * Card — container component for grouping related content.
+ *
+ * @usage
+ * Use Card to create visually distinct containers for related content:
+ * information panels, settings sections, content blocks, grouped actions.
+ *
+ * Variants (variant):
+ * - `default` — standard card with background and border.
+ * - `interactive` — clickable card with hover effects.
+ * - `transparent` — card without background (transparent).
+ *
+ * Card Components:
+ * - `CardHeader` — header section with border-bottom, typically contains title and/or description, actions.
+ * - `CardTitle` — title text with semibold font and large size.
+ * - `CardDescription` — description text with muted color and small size.
+ * - `CardContent` — main content area with padding.
+ * - `CardFooter` — footer section with border-top, typically contains actions.
+ *
+ * Do NOT use Card:
+ * - for simple layout containers without visual grouping (use div with appropriate styling).
+ * - when you need a different visual style that doesn't match card semantics.
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardHeader — header section of a Card with border-bottom.
+ * Typically contains CardTitle and/or CardDescription and/or action buttons.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardTitle — title text component for Card header.
+ * Uses semibold font and large text size.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardDescription — description text component for Card header.
+ * Uses muted color and small text size.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardContent — main content area of a Card.
+ * Provides padding for card content.
+ */
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardFooter — footer section of a Card with border-top.
+ * Typically contains action buttons and/or additional information.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };

package/dist/types/components/cards/card/index.d.ts

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

package/dist/types/components/cards/danger-zone/danger-zone.d.ts

@@ -0,0 +1,19 @@
+import { CardProps } from '../card';
+/**
+ * DangerZone — specialized card component for dangerous or destructive actions.
+ *
+ * @usage
+ * Use DangerZone to visually group and highlight dangerous or irreversible actions:
+ * account deletion, data removal, critical settings changes, destructive operations.
+ *
+ * Props:
+ * - `children` — content containing dangerous actions (required).
+ *
+ * Note: DangerZone uses destructive red styling (border and title color) to indicate danger.
+ *
+ * Do NOT use DangerZone:
+ * - for regular actions or settings (use regular Card instead).
+ * - for warnings or informational content (use regular Card with appropriate styling).
+ * - when actions are not actually dangerous or destructive.
+ */
+export declare function DangerZone({ children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/cards/danger-zone/index.d.ts

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

package/dist/types/components/cards/expandable-call/expandable-call.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface ExpandablCallProps {
+    header: React.ReactNode;
+    children: React.ReactNode;
+    index: string | number;
+    isExpandable?: boolean;
+}
+/**
+ * ExpandablCall — component for displaying calls within transactions.
+ *
+ * @usage
+ * Use ExpandablCall to display individual function calls inside transaction cards (ExpandableCard):
+ * contract method calls, function invocations, call details within transaction data.
+ *
+ * Props:
+ * - `header` — content displayed in the always-visible header section (required).
+ * - `children` — content shown when expanded (required).
+ * - `index` — call index number displayed as "#{index}" in the header (required).
+ * - `isExpandable` — if false, call cannot be expanded/collapsed (defaults to true).
+ *
+ * Note: Uses rounded background (bg-gray-900/50) and border-top for expanded content to distinguish from transaction card.
+ *
+ * Do NOT use ExpandablCall:
+ * - for displaying transactions themselves (use ExpandableCard instead).
+ * - outside of transaction context (use ExpandableCard or regular Card instead).
+ */
+declare function ExpandablCall({ header, children, index, isExpandable, }: ExpandablCallProps): import("react/jsx-runtime").JSX.Element;
+export { ExpandablCall };

package/dist/types/components/cards/expandable-call/index.d.ts

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

package/dist/types/components/cards/expandable-card/expandable-card.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface ExpandableCardProps {
+    header: React.ReactNode;
+    children: React.ReactNode;
+    alwaysExpanded?: boolean;
+}
+/**
+ * ExpandableCard — card component with collapsible content section.
+ *
+ * @usage
+ * Use ExpandableCard to show/hide content sections:
+ * collapsible information panels, expandable details, accordion-style content.
+ * Exclusively used for displaying transactions (even with `alwaysExpanded={true}`).
+ *
+ * Props:
+ * - `header` — content displayed in the always-visible header section (required).
+ * - `children` — content shown when expanded (required).
+ * - `alwaysExpanded` — if true, card is always expanded and not collapsible (defaults to false).
+ *
+ * Note: Expanded content uses a slightly different background color (bg-gray-900/30) to distinguish it from the header.
+ *
+ * Do NOT use ExpandableCard:
+ * - for navigation menus or dropdowns (use appropriate navigation components).
+ * - when you need multiple independent expandable sections (consider using Tabs or separate ExpandableCards).
+ * - for non-transaction content when a regular Card would suffice.
+ */
+declare function ExpandableCard({ header, children, alwaysExpanded, }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
+export { ExpandableCard };

package/dist/types/components/cards/expandable-card/index.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './card';
+export * from './danger-zone';
+export * from './expandable-call';
+export * from './expandable-card';