@gearbox-protocol/permissionless-ui 1.2.30 → 1.2.32

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

@@ -1,5 +1,27 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
+/**
+ * Dialog — modal dialog component and its subcomponents.
+ *
+ * @usage
+ * Use Dialog to display modal content:
+ * forms, detailed information, complex content, modal overlays.
+ *
+ * Dialog Components:
+ * - `Dialog` — root component (DialogPrimitive.Root).
+ * - `DialogTrigger` — trigger button that opens the dialog.
+ * - `DialogContent` — dialog content container with close button.
+ * - `DialogHeader` — header section for title and description.
+ * - `DialogFooter` — footer section for actions.
+ * - `DialogTitle` — dialog title (large, bold, white text).
+ * - `DialogDescription` — dialog description text.
+ * - `DialogOverlay` — backdrop overlay.
+ * - `DialogPortal` — portal for rendering dialog.
+ *
+ * Note: All components are based on Radix UI Dialog primitive.
+ * Uses large, bold title styling.
+ * Prefer using these components instead of @radix-ui/react-dialog directly.
+ */
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/dropdown-menu.d.ts

@@ -1,5 +1,37 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as React from "react";
+/**
+ * DropdownMenu — dropdown menu component and its subcomponents.
+ *
+ * @usage
+ * Use DropdownMenu to create context menus and dropdowns:
+ * action menus, context menus, option menus, navigation dropdowns.
+ *
+ * DropdownMenu Components:
+ * - `DropdownMenu` — root component (DropdownMenuPrimitive.Root).
+ * - `DropdownMenuTrigger` — trigger button that opens the menu.
+ * - `DropdownMenuContent` — menu content container.
+ * - `DropdownMenuItem` — individual menu item.
+ * - `DropdownMenuCheckboxItem` — checkbox menu item with check indicator.
+ * - `DropdownMenuRadioItem` — radio menu item with circle indicator.
+ * - `DropdownMenuLabel` — menu section label.
+ * - `DropdownMenuSeparator` — visual separator between items.
+ * - `DropdownMenuGroup` — groups related items.
+ * - `DropdownMenuSub` — submenu container.
+ * - `DropdownMenuSubTrigger` — submenu trigger item.
+ * - `DropdownMenuSubContent` — submenu content.
+ * - `DropdownMenuRadioGroup` — radio group for radio items.
+ * - `DropdownMenuShortcut` — keyboard shortcut display.
+ * - `DropdownMenuPortal` — portal for rendering menu.
+ *
+ * Note: All components are based on Radix UI DropdownMenu primitive.
+ * Supports nested submenus, checkboxes, radio groups, and keyboard shortcuts.
+ * Prefer using these components instead of @radix-ui/react-dropdown-menu directly.
+ *
+ * Do NOT use DropdownMenu:
+ * - for simple selects (use Select component).
+ * - for navigation menus (use NavigationButton or appropriate navigation components).
+ */
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/editable-table/edit-button.d.ts

@@ -3,5 +3,19 @@ interface EditButtonProps {
     customButton?: React.ReactNode;
     disabled?: boolean;
 }
+/**
+ * EditButton — button component for triggering edit actions.
+ *
+ * @usage
+ * Use EditButton to provide edit functionality in editable components:
+ * table cells, form fields, editable values.
+ *
+ * Props:
+ * - `onClick` — callback function executed when button is clicked.
+ * - `customButton` — custom React node to replace default edit icon.
+ * - `disabled` — if true, button is disabled.
+ *
+ * Note: Uses ghost variant Button with Edit icon by default. Custom button can be provided for different styling.
+ */
 export declare function EditButton({ onClick, customButton, disabled, }: EditButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/editable-table/editable-table.d.ts

@@ -6,7 +6,40 @@ interface TableCellAssetProps {
     explorerUrl?: string;
     iconSymbol?: string;
 }
+/**
+ * TableCellAsset — table cell component for displaying asset information.
+ *
+ * @usage
+ * Use TableCellAsset to display asset data in table cells:
+ * token symbols, asset addresses, icons, explorer links.
+ *
+ * Props:
+ * - `assetAddress` — asset contract address (required).
+ * - `symbol` — asset symbol/ticker (required).
+ * - `comment` — optional comment displayed next to symbol.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
+ */
 export declare function TableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, }: TableCellAssetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableCellUpdatable — table cell component for displaying editable values with old/new value comparison.
+ *
+ * @usage
+ * Use TableCellUpdatable to display values that can be edited in table cells:
+ * editable parameters, configurable settings, updatable data with change indication.
+ *
+ * Props:
+ * - `oldValue` — previous value displayed with strikethrough when different from newValue.
+ * - `newValue` — current/new value to display (required).
+ * - `onEdit` — callback function executed when edit button is clicked.
+ * - `isEditable` — if false, edit button is not shown (defaults to true).
+ * - `className` — additional CSS classes for styling.
+ * - `customButton` — custom React node to replace default edit button.
+ * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
+ * - `postfix` — optional text displayed after the value.
+ * - `disabled` — if true, edit button is disabled.
+ * - `nowrap` — if true, prevents text wrapping.
+ */
 export interface TableCellUpdatableProps {
     oldValue?: string;
     newValue: string;
@@ -20,12 +53,39 @@ export interface TableCellUpdatableProps {
     nowrap?: boolean;
 }
 export declare function TableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, }: TableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableEditableAction — action button configuration for TableEditable.
+ */
 export interface TableEditableAction {
     text: string;
     onClick: () => void;
     loadingText?: string;
     isLoading?: boolean;
 }
+/**
+ * TableEditable — table component with header, action buttons, and editable content.
+ *
+ * @usage
+ * Use TableEditable to create tables with editable content and action buttons:
+ * data management tables, configuration tables, editable parameter lists.
+ *
+ * Props:
+ * - `title` — table title displayed in header (required).
+ * - `onNew` — callback function for "New" button action.
+ * - `newButtonText` — text for "New" button (defaults to "New").
+ * - `isLoading` — if true, "New" button shows loading state.
+ * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
+ * - `actions` — array of additional action buttons (TableEditableAction[]).
+ * - `children` — table content (Table rows/cells) (required).
+ * - `disabled` — if true, all action buttons are disabled.
+ * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
+ *
+ * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling.
+ *
+ * Do NOT use TableEditable:
+ * - for read-only tables without editing capabilities (use regular Table component).
+ * - when you don't need action buttons or title (use regular Table component).
+ */
 interface TableEditableProps {
     title: string;
     onNew?: () => void;

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

@@ -8,5 +8,24 @@ interface UpdatedValueProps {
     customButton?: React.ReactNode;
     postfix?: string;
 }
+/**
+ * UpdatedValue — component for displaying old and new values with edit functionality.
+ *
+ * @usage
+ * Use UpdatedValue to show value changes with visual indication:
+ * old value with strikethrough, new value, edit button for modifications.
+ *
+ * Props:
+ * - `oldValue` — previous value displayed with strikethrough when different from newValue.
+ * - `newValue` — current/new value to display (required).
+ * - `onEdit` — callback function executed when edit button is clicked.
+ * - `isEditable` — if false, edit button is not shown (defaults to true).
+ * - `disabled` — if true, edit button is disabled (defaults to false).
+ * - `nowrap` — if true, prevents text wrapping (defaults to false).
+ * - `customButton` — custom React node to replace default edit button.
+ * - `postfix` — optional text displayed after the value.
+ *
+ * Note: When oldValue differs from newValue, old value is shown with strikethrough and arrow (→) separator.
+ */
 export declare function UpdatedValue({ oldValue, newValue, onEdit, isEditable, customButton, postfix, disabled, nowrap, }: UpdatedValueProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,24 @@
 import * as React from "react";
+/**
+ * Input — text input component with error handling.
+ *
+ * @usage
+ * Use Input for text input fields in forms:
+ * text inputs, number inputs, email inputs, password inputs, search inputs, etc.
+ *
+ * Props:
+ * - `hasError` — if true, displays error styling (red border).
+ * - `errorMessage` — error message displayed below input when hasError is true and value is not empty.
+ * - All standard HTML input props are supported (type, placeholder, value, onChange, etc.).
+ *
+ * Note: For number inputs, prevents wheel scroll from changing value.
+ * Error message is only shown when hasError is true and value is not empty.
+ * Prefer using this component instead of native HTML input element.
+ *
+ * Do NOT use Input:
+ * - for multi-line text input (use Textarea component).
+ * - for file uploads (use appropriate file input components).
+ */
 interface InputProps extends React.ComponentProps<"input"> {
     hasError?: boolean;
     errorMessage?: string;

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

@@ -1,5 +1,20 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
+/**
+ * Label — component for form field labels.
+ *
+ * @usage
+ * Use Label to label form inputs and controls:
+ * input labels, checkbox labels, select labels, form field labels.
+ *
+ * Note: Uses white text color and large text size. Automatically handles disabled state styling.
+ * All standard Radix UI Label props are supported.
+ * Prefer using this component instead of @radix-ui/react-label directly.
+ *
+ * Do NOT use Label:
+ * - for non-form text labels (use appropriate text components).
+ * - when you need different styling that doesn't match form label semantics.
+ */
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/types/components/layout/app-logo.d.ts

@@ -1,3 +1,20 @@
+/**
+ * AppLogo — application logo component with Gearbox Protocol logo and app name.
+ *
+ * @usage
+ * Use AppLogo to display application branding:
+ * header logo, footer logo, page branding.
+ *
+ * Props:
+ * - `appName` — application name displayed next to logo (required).
+ * - `size` — logo size: "default" or "small" (defaults to "default").
+ *
+ * Note: Uses Gearbox Protocol logo from static CDN. Logo size and text size adjust based on size prop.
+ *
+ * Do NOT use AppLogo:
+ * - for custom logos or branding (use Image component with custom logo).
+ * - when you need different logo styling (use Image component with appropriate styling).
+ */
 export declare function AppLogo({ appName, size, }: {
     appName: string;
     size?: "default" | "small";

package/dist/types/components/layout/footer.d.ts

@@ -1,4 +1,25 @@
 import { type LegalReferences } from "./legal-disclaimer";
+/**
+ * Footer — application footer component with legal links and branding.
+ *
+ * @usage
+ * Use Footer as the main application footer:
+ * legal links, documentation links, app branding, legal disclaimer.
+ *
+ * Props:
+ * - `appName` — application name displayed in logo (required).
+ * - `legalReferences` — object containing legal document URLs (required):
+ *   - `termsOfService` — Terms of Service URL.
+ *   - `privacyNotice` — Privacy Notice URL.
+ *   - `riskDisclosure` — Risk Disclosure URL.
+ *
+ * Note: Footer includes AppLogo, LegalDisclaimer, and predefined link sections for Legal and Developers.
+ * Uses responsive grid layout (1 column on mobile, 2 columns on desktop).
+ *
+ * Do NOT use Footer:
+ * - for page-specific footers.
+ * - for section footers within content (use appropriate container components).
+ */
 export declare function Footer({ appName, legalReferences, }: {
     appName: string;
     legalReferences: LegalReferences;

package/dist/types/components/layout/header.d.ts

@@ -1,4 +1,23 @@
 import { type NavigationButtonProps } from "../buttons";
+/**
+ * Header — application header component with navigation and wallet connection.
+ *
+ * @usage
+ * Use Header as the main application header:
+ * top navigation bar, app logo, navigation menu, wallet connection button.
+ *
+ * Props:
+ * - `appName` — application name displayed next to logo (required).
+ * - `navigation` — array of NavigationButton props for navigation menu (required).
+ * - `connectKitButton` — ConnectKit wallet connection button component (required).
+ *
+ * Note: Header is sticky at the top with z-50. Navigation is hidden on mobile (md:flex).
+ * Uses NavigationButton components for navigation items.
+ *
+ * Do NOT use Header:
+ * - for page-specific headers.
+ * - for section headers within content (use CardHeader or h2/h3 elements).
+ */
 export declare function Header({ appName, navigation, connectKitButton, }: {
     appName: string;
     navigation: NavigationButtonProps[];

package/dist/types/components/layout/legal-disclaimer.d.ts

@@ -1,8 +1,31 @@
+/**
+ * LegalReferences — interface for legal document URLs.
+ */
 export interface LegalReferences {
     termsOfService: string;
     privacyNotice: string;
     riskDisclosure: string;
 }
+/**
+ * LegalDisclaimer — component for displaying legal disclaimer text with links.
+ *
+ * @usage
+ * Use LegalDisclaimer to display legal information and required disclaimers:
+ * footer legal text, terms acceptance notices, risk disclosure statements.
+ *
+ * Props:
+ * - `hrefs` — object containing legal document URLs (required):
+ *   - `termsOfService` — Terms of Service URL.
+ *   - `privacyNotice` — Privacy Notice URL.
+ *   - `riskDisclosure` — Risk Disclosure URL.
+ *
+ * Note: Displays formatted text with links to Terms of Service, Privacy Notice, and Risk Disclosure Statement.
+ * Text uses muted color and small size for footer placement.
+ *
+ * Do NOT use LegalDisclaimer:
+ * - for custom legal text (use appropriate text components with links).
+ * - when different disclaimer format is needed (use custom component).
+ */
 export declare function LegalDisclaimer({ hrefs }: {
     hrefs: LegalReferences;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/page-layout.d.ts

@@ -10,5 +10,30 @@ interface PageLayoutProps {
     };
     actionButton?: JSX.Element;
 }
+/**
+ * PageLayout — main layout component for application pages.
+ *
+ * @usage
+ * Use PageLayout as the root layout wrapper for application pages:
+ * page containers, content pages, detail pages, settings pages.
+ *
+ * Props:
+ * - `children` — page content (required).
+ * - `title` — page title displayed in header (required).
+ * - `description` — optional description element displayed below title.
+ * - `icon` — optional icon element displayed next to title.
+ * - `backButton` — optional back button configuration object:
+ *   - `href` — destination URL for back navigation (required).
+ *   - `text` — custom text label (defaults to "Back" if not provided).
+ *   - `onClick` — optional callback function executed on click.
+ * - `actionButton` — optional action button element displayed next to title.
+ *
+ * Note: PageLayout provides full-screen layout with black background, padding, and overflow handling.
+ * BackButton is rendered when backButton prop is provided.
+ *
+ * Do NOT use PageLayout:
+ * - for modal dialogs or overlays (use Dialog component instead).
+ * - for nested page sections (use Card or other container components).
+ */
 export declare function PageLayout({ children, title, description, icon, backButton, actionButton, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/markdown-viewer.d.ts

@@ -2,4 +2,30 @@ export interface MarkdownViewerProps {
     content: string;
     title?: string;
 }
+/**
+ * MarkdownViewer — component for rendering markdown content with custom styling.
+ *
+ * @usage
+ * Use MarkdownViewer to display markdown-formatted content:
+ * documentation pages, content pages, markdown articles, formatted text.
+ *
+ * Props:
+ * - `content` — markdown content string to render (required).
+ * - `title` — optional page title displayed in PageLayout.
+ *
+ * Features:
+ * - Custom heading IDs with slugification or custom IDs (e.g., "## Heading {#custom-id}").
+ * - Smooth scroll to hash on mount and anchor link clicks.
+ * - Custom styling for all markdown elements (headings, links, lists, code blocks, etc.).
+ * - Support for GitHub Flavored Markdown (GFM) via remark-gfm.
+ * - Internal anchor links with smooth scrolling.
+ * - External links open in new tab.
+ *
+ * Note: Wraps content in PageLayout with back button. Uses prose styling with dark theme.
+ * Automatically handles heading IDs for navigation.
+ *
+ * Do NOT use MarkdownViewer:
+ * - for simple text content (use appropriate text components).
+ * - when you need rich text editing (use appropriate rich text editor components).
+ */
 export declare function MarkdownViewer({ content, title }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,5 +3,24 @@ interface SearchBarProps {
     placeholder?: string;
     className?: string;
 }
+/**
+ * SearchBar — search input component with icon.
+ *
+ * @usage
+ * Use SearchBar to provide search functionality:
+ * search inputs, filter inputs, query inputs, search forms.
+ *
+ * Props:
+ * - `onChange` — callback function called when search query changes (required).
+ * - `placeholder` — placeholder text (defaults to "Search...").
+ * - `className` — additional CSS classes for styling (defaults to "w-64").
+ *
+ * Note: Includes search icon on the left side. Manages internal state for search query.
+ * Calls onChange callback on every input change.
+ *
+ * Do NOT use SearchBar:
+ * - for simple text inputs (use Input component).
+ * - when you don't need search icon (use Input component).
+ */
 export declare function SearchBar({ onChange, placeholder, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,31 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as React from "react";
+/**
+ * Select — dropdown select component and its subcomponents.
+ *
+ * @usage
+ * Use Select to create dropdown selection menus:
+ * form selects, option pickers, filter dropdowns, choice selectors.
+ *
+ * Select Components:
+ * - `Select` — root component (SelectPrimitive.Root).
+ * - `SelectTrigger` — trigger button that opens the select menu.
+ * - `SelectValue` — displays the selected value.
+ * - `SelectContent` — dropdown content container.
+ * - `SelectItem` — individual selectable option.
+ * - `SelectLabel` — label for option groups.
+ * - `SelectGroup` — groups related options.
+ * - `SelectSeparator` — visual separator between options.
+ * - `SelectScrollUpButton` / `SelectScrollDownButton` — scroll buttons for long lists.
+ *
+ * Note: All components are based on Radix UI Select.
+ * Supports keyboard navigation and accessibility features.
+ * Prefer using these components instead of @radix-ui/react-select directly.
+ *
+ * Do NOT use Select:
+ * - for multi-select (use Checkbox or appropriate multi-select components).
+ * - for simple toggle switches (use Checkbox or Switch components).
+ */
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/signatures/confirmation-item.d.ts

@@ -1,4 +1,22 @@
 import type { Address, Hex } from "viem";
+/**
+ * ConfirmationItem — component for displaying transaction confirmation with address.
+ *
+ * @usage
+ * Use ConfirmationItem to display confirmation information in timelines:
+ * signature confirmations, transaction confirmations, address confirmations.
+ *
+ * Props:
+ * - `confirmation` — confirmation address or hash (Address | Hex) (required).
+ * - `note` — optional note text displayed next to address.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ *
+ * Note: Displays Identicon, shortened hash, optional note, and action buttons (Copy, External link).
+ * Action buttons are shown on hover. Used in VerticalTimeline ExtentionStep content.
+ *
+ * Do NOT use ConfirmationItem:
+ * - outside of timeline or confirmation contexts (use appropriate address display components).
+ */
 interface ConfirmationItemProps {
     confirmation: Address | Hex;
     note?: string;

package/dist/types/components/signatures/identicon.d.ts

@@ -1,3 +1,20 @@
+/**
+ * Identicon — component for displaying address identifier icon.
+ *
+ * @usage
+ * Use Identicon to display visual identifier for addresses:
+ * address avatars, confirmation icons, address representations.
+ *
+ * Props:
+ * - `address` — address string to generate identicon from (required).
+ * - `size` — identicon size in pixels (defaults to 32).
+ *
+ * Note: Uses first two hex characters (after 0x) of address as identifier.
+ * Displays as rounded circle with gray background and white text.
+ *
+ * Do NOT use Identicon:
+ * - for token icons or asset images (use TokenIcon component).
+ */
 export declare function Identicon({ address, size, }: {
     address: string;
     size?: number;

package/dist/types/components/signatures/vertical-timeline.d.ts

@@ -1,14 +1,50 @@
+/**
+ * StepCommon — common properties for timeline steps.
+ */
 interface StepCommon {
     status: "success" | "pending" | "not-started" | "error";
 }
+/**
+ * Step — default step type for timeline.
+ */
 interface Step extends StepCommon {
     type: "default";
     title: string;
 }
+/**
+ * ExtentionStep — expandable step type for timeline with collapsible content.
+ */
 interface ExtentionStep extends StepCommon {
     type: "extention";
     children: React.ReactNode;
 }
+/**
+ * VerticalTimeline — component for displaying vertical timeline of steps with status indicators.
+ *
+ * @usage
+ * Use VerticalTimeline to display sequential steps with status:
+ * transaction confirmation steps, multi-step processes, signature workflows, progress tracking.
+ * Commonly used for tracking transaction status: signed, queued,executed, etc.
+ *
+ * Props:
+ * - `steps` — array of step objects (Step | ExtentionStep) (required):
+ *   - Step: `type: "default"`, `title: string`, `status: "success" | "pending" | "not-started" | "error"`.
+ *   - ExtentionStep: `type: "extention"`, `children: React.ReactNode`, `status: "success" | "pending" | "not-started" | "error"`.
+ * - `minWidth` — minimum width of timeline in pixels (defaults to 300).
+ *
+ * Step Statuses:
+ * - `success` — step completed successfully (green circle with checkmark).
+ * - `pending` — step in progress (gray border circle).
+ * - `not-started` — step not yet started (not displayed).
+ * - `error` — step failed (red circle with X).
+ *
+ * Note: ExtentionStep provides expandable content with "Show all" / "Hide all" toggle.
+ * Steps with "not-started" status are not rendered.
+ *
+ * Do NOT use VerticalTimeline:
+ * - for horizontal progress indicators (use appropriate progress components).
+ * - for simple lists without status tracking (use regular list components).
+ */
 interface VerticalTimelineProps {
     steps: (Step | ExtentionStep)[];
     minWidth?: number;

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

@@ -1,2 +1,20 @@
+/**
+ * Skeleton — loading placeholder component.
+ *
+ * @usage
+ * Use Skeleton to display loading placeholders:
+ * content loading states, data fetching indicators, placeholder animations.
+ *
+ * Props:
+ * - All standard HTML div props are supported (className, style, etc.).
+ *
+ * Note: Uses pulse animation and muted background color.
+ * Can be styled with className to match content dimensions.
+ * Prefer using this component instead of native HTML div element for loading placeholders.
+ *
+ * Do NOT use Skeleton:
+ * - for error states (use appropriate error components).
+ * - for empty states (use appropriate empty state components).
+ */
 declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };