@gearbox-protocol/permissionless-ui 1.2.30 → 1.2.32

package/dist/cjs/components/buttons/external-button.js

@@ -51,7 +51,7 @@ const ExternalButton = React.forwardRef(
     );
   }
 );
-ExternalButton.displayName = "CopyButton";
+ExternalButton.displayName = "ExternalButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ExternalButton

package/dist/cjs/components/cards/expandable-call.js

@@ -0,0 +1,81 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var expandable_call_exports = {};
+__export(expandable_call_exports, {
+  ExpandablCall: () => ExpandablCall
+});
+module.exports = __toCommonJS(expandable_call_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"));
+var import_utils = __toESM(require('../../utils/index.js'));
+function ExpandablCall({
+  header,
+  children,
+  index,
+  isExpandable = true
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded bg-gray-900/50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `flex ${isExpandable ? "cursor-pointer" : ""} items-center gap-2 p-3`,
+        onClick: () => {
+          if (isExpandable) {
+            setIsExpanded(!isExpanded);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground", children: [
+            "#",
+            index
+          ] }),
+          header,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.ChevronDown,
+            {
+              className: (0, import_utils.default)(
+                "ml-auto h-4 w-4 text-muted-foreground",
+                isExpanded ? "rotate-180" : "",
+                "transition-transform duration-200 ease-in-out"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-gray-800 p-4 space-y-2", children })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ExpandablCall
+});

package/dist/cjs/components/cards/expandable-card.js

@@ -48,7 +48,8 @@ function ExpandableCard({
       "div",
       {
         className: (0, import_utils.default)(
-          "flex items-center justify-between gap-4 p-4 rounded-t-xl cursor-pointer hover:bg-accent/50",
+          "flex items-center justify-between gap-4 p-4 rounded-t-xl",
+          alwaysExpanded ? "" : "cursor-pointer hover:bg-accent/50",
           isExpanded ? "" : "rounded-b-xl"
         ),
         onClick: () => {

package/dist/cjs/components/cards/index.js

@@ -17,10 +17,12 @@ var cards_exports = {};
 module.exports = __toCommonJS(cards_exports);
 __reExport(cards_exports, require('./card.js'), module.exports);
 __reExport(cards_exports, require('./danger-zone.js'), module.exports);
+__reExport(cards_exports, require('./expandable-call.js'), module.exports);
 __reExport(cards_exports, require('./expandable-card.js'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require('./card.js'),
   ...require('./danger-zone.js'),
+  ...require('./expandable-call.js'),
   ...require('./expandable-card.js')
 });

package/dist/esm/components/buttons/external-button.js

@@ -18,7 +18,7 @@ const ExternalButton = React.forwardRef(
     );
   }
 );
-ExternalButton.displayName = "CopyButton";
+ExternalButton.displayName = "ExternalButton";
 export {
   ExternalButton
 };

package/dist/esm/components/cards/expandable-call.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import cn from "../../utils/index.js";
+function ExpandablCall({
+  header,
+  children,
+  index,
+  isExpandable = true
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded bg-gray-900/50", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex ${isExpandable ? "cursor-pointer" : ""} items-center gap-2 p-3`,
+        onClick: () => {
+          if (isExpandable) {
+            setIsExpanded(!isExpanded);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            "#",
+            index
+          ] }),
+          header,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "ml-auto h-4 w-4 text-muted-foreground",
+                isExpanded ? "rotate-180" : "",
+                "transition-transform duration-200 ease-in-out"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-800 p-4 space-y-2", children })
+  ] });
+}
+export {
+  ExpandablCall
+};

package/dist/esm/components/cards/expandable-card.js

@@ -15,7 +15,8 @@ function ExpandableCard({
       "div",
       {
         className: cn(
-          "flex items-center justify-between gap-4 p-4 rounded-t-xl cursor-pointer hover:bg-accent/50",
+          "flex items-center justify-between gap-4 p-4 rounded-t-xl",
+          alwaysExpanded ? "" : "cursor-pointer hover:bg-accent/50",
           isExpanded ? "" : "rounded-b-xl"
         ),
         onClick: () => {

package/dist/esm/components/cards/index.js

@@ -1,3 +1,4 @@
 export * from "./card.js";
 export * from "./danger-zone.js";
+export * from "./expandable-call.js";
 export * from "./expandable-card.js";

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

@@ -1,5 +1,32 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
+/**
+ * AlertDialog — alert dialog component and its subcomponents.
+ *
+ * @usage
+ * Use AlertDialog to display critical alerts and confirmations:
+ * confirmation dialogs, warning dialogs, error alerts, destructive action confirmations.
+ *
+ * AlertDialog Components:
+ * - `AlertDialog` — root component (AlertDialogPrimitive.Root).
+ * - `AlertDialogTrigger` — trigger button that opens the dialog.
+ * - `AlertDialogContent` — dialog content container.
+ * - `AlertDialogHeader` — header section for title and description.
+ * - `AlertDialogFooter` — footer section for actions.
+ * - `AlertDialogTitle` — dialog title.
+ * - `AlertDialogDescription` — dialog description text.
+ * - `AlertDialogAction` — primary action button.
+ * - `AlertDialogCancel` — cancel/close button.
+ * - `AlertDialogOverlay` — backdrop overlay.
+ * - `AlertDialogPortal` — portal for rendering dialog.
+ *
+ * Note: All components are based on Radix UI AlertDialog primitive.
+ * Prefer using these components instead of @radix-ui/react-alert-dialog directly.
+ *
+ * Do NOT use AlertDialog:
+ * - for non-critical information (use Dialog component).
+ * - for complex forms or content (use Dialog component).
+ */
 declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;

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

@@ -1,6 +1,31 @@
 import type { ReactNode } from "react";
 import type { Address } from "viem";
 import { type TabButtonProps } from "../buttons";
+/**
+ * SignInRequired — component that requires SIWE authentication to display content.
+ *
+ * @usage
+ * Use SignInRequired to protect content that requires authentication:
+ * action buttons, editable content, owner-specific features, authenticated actions.
+ *
+ * Props:
+ * - `owner` — optional address that must match signed-in address to display content.
+ * - `children` — content displayed when authenticated (required).
+ * - `skipSignIn` — if true, skips authentication requirement (defaults to false).
+ * - All Button props are supported (variant, size, className, onClick, etc.).
+ *
+ * Behavior:
+ * - If `skipSignIn={true}` or user is signed in: renders children (or "You are not the author" if owner mismatch).
+ * - If wallet connected but not signed in: shows "Sign In as {address}" button or "Try Again" if rejected.
+ * - If wallet not connected: shows "Connect Wallet" button.
+ *
+ * Note: Uses TabButton by default, but switches to Button if custom props are provided.
+ * Button text changes based on authentication state and loading status.
+ *
+ * Do NOT use SignInRequired:
+ * - for public content that doesn't require authentication (render content directly).
+ * - when you need different authentication flow (use appropriate authentication components).
+ */
 export interface SignInRequiredProps extends TabButtonProps {
     owner?: Address;
     children: ReactNode;

package/dist/types/components/auth/siwe-provider.d.ts

@@ -1,3 +1,26 @@
+/**
+ * SIWEClientProvider — provider component for Sign-In With Ethereum (SIWE) authentication.
+ *
+ * @usage
+ * Use SIWEClientProvider to wrap your application and enable SIWE authentication:
+ * app root, authentication context, wallet-based authentication.
+ *
+ * Props:
+ * - `apiRoutePrefix` — API route prefix for SIWE endpoints (required):
+ *   - `/api/nonce` — endpoint for fetching nonce.
+ *   - `/api/signin` — endpoint for verifying signature.
+ *   - `/api/session` — endpoint for getting current session.
+ *   - `/api/logout` — endpoint for signing out.
+ * - `statement` — optional custom statement for SIWE message (defaults to "Sign In With Ethereum.").
+ * - `children` — application content wrapped by provider (required).
+ *
+ * Note: SIWEClientProvider wraps ConnectKit's SIWEProvider with custom API integration.
+ * Handles nonce generation, message creation, signature verification, session management, and sign out.
+ * Automatically refreshes router on sign in/out.
+ *
+ * Do NOT use SIWEClientProvider:
+ * - when you don't need SIWE authentication (use regular ConnectKit providers).
+ */
 interface SIWEProviderProps {
     apiRoutePrefix: string;
     statement?: string;

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

@@ -3,6 +3,25 @@ import type * as React from "react";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/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;

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

@@ -1,8 +1,25 @@
-interface BackButtonProps {
+export interface BackButtonProps {
     href: string;
     text?: string;
     onClick?: () => void;
     className?: string;
 }
+/**
+ * BackButton — component for navigation back to previous page.
+ *
+ * @usage
+ * Use BackButton to provide users with a way to return to the previous page or section:
+ * breadcrumb navigation, detail pages, multi-step forms, nested views.
+ * Mostly used in PageLayout component.
+ *
+ * Props:
+ * - `href` — destination URL for navigation (required).
+ * - `text` — custom text label (defaults to "Back" if not provided).
+ * - `onClick` — optional callback function executed on click.
+ * - `className` — additional CSS classes for styling.
+ *
+ * Do NOT use BackButton:
+ * - for primary navigation menus (use NavigationButton or dedicated navigation components).
+ * - for actions that don't navigate to a different page (use regular Button instead).
+ */
 export declare function BackButton({ href, text, onClick, className, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -7,5 +7,35 @@ declare const buttonVariants: (props?: ({
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     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).
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -4,5 +4,22 @@ export interface CopyButtonProps extends ButtonProps {
     text: string;
     name?: string;
 }
+/**
+ * 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".
+ * - `size` — size of the copy icon, defaults to "3.5".
+ * - All standard Button props are supported (variant, className, etc.).
+ *
+ * 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/external-button.d.ts

@@ -3,5 +3,22 @@ import { type ButtonProps } from "./button";
 export interface ExternalButtonProps extends ButtonProps {
     url: string;
 }
+/**
+ * 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).
+ * - `size` — size of the copy 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/navigation-button.d.ts

@@ -4,5 +4,23 @@ export interface NavigationButtonProps {
     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/tab-button.d.ts

@@ -4,5 +4,21 @@ 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/cards/card.d.ts

@@ -6,10 +6,53 @@ declare const cardVariants: (props?: ({
 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/danger-zone.d.ts

@@ -1,5 +1,22 @@
 interface DangerZoneProps {
     children: React.ReactNode;
 }
+/**
+ * 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 }: DangerZoneProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/cards/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-card.d.ts

@@ -4,5 +4,25 @@ export interface ExpandableCardProps {
     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/index.d.ts

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

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

@@ -1,4 +1,22 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
+/**
+ * Checkbox — checkbox input component.
+ *
+ * @usage
+ * Use Checkbox for binary selection:
+ * form checkboxes, option toggles, agreement checkboxes, multi-select options.
+ *
+ * Props:
+ * - All standard Radix UI Checkbox props are supported (checked, onCheckedChange, disabled, etc.).
+ *
+ * Note: Supports focus states and disabled states.
+ * Based on Radix UI Checkbox primitive.
+ * Prefer using this component instead of @radix-ui/react-checkbox directly.
+ *
+ * Do NOT use Checkbox:
+ * - for radio button selection (use RadioGroup or Select component).
+ * - for toggle switches (use Switch component if available).
+ */
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };