@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -25,6 +25,7 @@ interface SIWEProviderProps {
     apiRoutePrefix: string;
     statement?: string;
     children?: React.ReactNode;
+    onRefresh?: () => void;
 }
-export declare function SIWEClientProvider({ apiRoutePrefix, statement, children, ...props }: SIWEProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SIWEClientProvider({ apiRoutePrefix, statement, children, onRefresh, ...props }: SIWEProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { type 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/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Badge — component for displaying labels, tags, or status indicators.
  *

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+export interface BaseLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Renders the link as a child element using Radix Slot
+     * Useful for working with routing libraries like Next.js Link or React Router Link
+     *
+     * @example
+     * ```tsx
+     * // With Next.js Link
+     * <BaseLink asChild>
+     *   <Link href="/path">Link</Link>
+     * </BaseLink>
+     *
+     * // With React Router Link
+     * <BaseLink asChild>
+     *   <Link to="/path">Link</Link>
+     * </BaseLink>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Indicates if this is an external link
+     * Automatically adds target="_blank" and rel="noopener noreferrer"
+     */
+    external?: boolean;
+}
+/**
+ * BaseLink component for creating links with optional external link handling
+ *
+ * This component works in both Next.js and non-Next.js projects:
+ * - In Next.js: use `asChild` prop to wrap Next.js Link component
+ * - In other frameworks: use `href` prop directly or wrap routing library links with `asChild`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (works in any React project)
+ * <BaseLink href="/dashboard">Dashboard</BaseLink>
+ *
+ * // External link
+ * <BaseLink href="https://example.com" external>Example</BaseLink>
+ *
+ * // With Next.js Link (recommended for Next.js projects)
+ * import NextLink from "next/link";
+ *
+ * <BaseLink asChild>
+ *   <NextLink href="/dashboard">Dashboard</NextLink>
+ * </BaseLink>
+ *
+ * // With React Router Link
+ * import { Link as RouterLink } from "react-router-dom";
+ *
+ * <BaseLink asChild>
+ *   <RouterLink to="/dashboard">Dashboard</RouterLink>
+ * </BaseLink>
+ * ```
+ */
+declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { BaseLink };

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

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import type { BlockSyncProps } from "../types/footer";
+/**
+ * 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/breadcrumbs.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+export interface BreadCrumb {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface BreadCrumbsProps {
+    items: Array<BreadCrumb>;
+    className?: string;
+}
+/**
+ * BreadCrumbs - navigation breadcrumbs component
+ *
+ * @example
+ * ```tsx
+ * <BreadCrumbs
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Details" }
+ *   ]}
+ * />
+ * ```
+ */
+export declare function BreadCrumbs({ items, className, }: BreadCrumbsProps): React.ReactElement;

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

@@ -1,25 +1,20 @@
-export interface BackButtonProps {
+import { type 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>;
 }
-/**
- * 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 declare function BackButton({ href, text, onClick, className, variant, size, LinkComponent, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export { backButtonVariants };

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

@@ -1,10 +1,24 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "text" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
-    size?: "default" | "auto" | "xs" | "sm" | "lg" | "icon" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    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;
 }
 /**
@@ -36,6 +50,26 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  * 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/filter-button.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+/**
+ * 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/index.d.ts

@@ -2,5 +2,7 @@ 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/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/card-grid.d.ts

@@ -0,0 +1,25 @@
+import { type 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 | 5 | 4 | 6 | null | undefined;
+    columnsLg?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
+    columnsMd?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
+    columnsSm?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
+    gap?: "none" | "sm" | "lg" | "md" | "xl" | null | undefined;
+    justifyItemContent?: "end" | "center" | "start" | "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.d.ts

@@ -0,0 +1,116 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | "outlined" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CardProps — props for Card component.
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card — container component for grouped content.
+ *
+ * @usage
+ * Use Card to group related content:
+ * content cards, info panels, feature boxes, grouped sections.
+ *
+ * Props:
+ * - `variant` — visual variant: "default", "elevated", "outlined", "ghost" (defaults to "default").
+ *
+ * Note: Supports different visual styles via variant prop.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter for structured layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *   </CardHeader>
+ *   <CardContent>Content here</CardContent>
+ * </Card>
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardHeaderVariants: (props?: ({
+    padding?: "none" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CardHeaderProps — props for CardHeader component.
+ */
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardHeaderVariants> {
+}
+/**
+ * CardHeader — header section of a Card.
+ *
+ * @usage
+ * Use CardHeader to wrap card title and description:
+ * card headers with title and optional description.
+ *
+ * Props:
+ * - `padding` — padding size: "none", "sm", "default", "lg" (defaults to "default").
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardTitle — title component for Card header.
+ *
+ * @usage
+ * Use CardTitle to display card title:
+ * card headlines, card headings.
+ *
+ * Note: Uses large semibold text (2xl) with tight tracking.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardDescription — description component for Card header.
+ *
+ * @usage
+ * Use CardDescription to display card description or subtitle:
+ * card subtitles, card descriptions, additional card information.
+ *
+ * Note: Uses small muted text color.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const cardContentVariants: (props?: ({
+    padding?: "none" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CardContentProps — props for CardContent component.
+ */
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
+}
+/**
+ * CardContent — main content section of a Card.
+ *
+ * @usage
+ * Use CardContent to wrap card main content:
+ * card body, card main text, card details.
+ *
+ * Props:
+ * - `padding` — padding size: "none", "sm", "default", "lg" (defaults to "default").
+ *
+ * Note: Padding-top is always 0 to work seamlessly with CardHeader.
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardFooterVariants: (props?: ({
+    padding?: "none" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CardFooterProps — props for CardFooter component.
+ */
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardFooterVariants> {
+}
+/**
+ * CardFooter — footer section of a Card.
+ *
+ * @usage
+ * Use CardFooter to wrap card actions or footer content:
+ * action buttons, links, additional information at card bottom.
+ *
+ * Props:
+ * - `padding` — padding size: "none", "sm", "default", "lg" (defaults to "default").
+ *
+ * Note: Uses flex layout to align items horizontally. Padding-top is always 0 to work seamlessly with CardContent.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants, cardHeaderVariants, cardContentVariants, cardFooterVariants, };

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

@@ -1,8 +1,8 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const cardVariants: (props?: ({
-    variant?: "default" | "interactive" | "transparent" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    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;
 }

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+/**
+ * Props for CheckboxItem component
+ */
+export interface CheckboxItemProps {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Callback when the checked state changes
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional className
+     */
+    className?: string;
+    /**
+     * Children to render
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Universal CheckboxItem component that works both inside and outside DropdownMenu context
+ *
+ * This component provides a consistent API and styling for checkbox items.
+ * When used inside DropdownMenu, wrap it with DropdownMenuCheckboxItem wrapper.
+ * When used standalone (e.g., in Dialog), use this component directly.
+ *
+ * @example Inside DropdownMenu (via wrapper):
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setChecked}>
+ *       Option 1
+ *     </DropdownMenuCheckboxItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example Standalone (in Dialog):
+ * ```tsx
+ * <Dialog>
+ *   <DialogContent>
+ *     <CheckboxItem checked={isChecked} onCheckedChange={setChecked}>
+ *       Option 1
+ *     </CheckboxItem>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/types/components/compound-apy.d.ts

@@ -0,0 +1,80 @@
+import type { TokenData } from "@gearbox-protocol/sdk";
+import type { LocaleKeys } from "./typed-intl";
+export interface PoolBaseAPY {
+    type: "supplyAPY" | "tokenYield";
+    apy: number;
+}
+export interface ExtraRewardApy {
+    apy: number;
+    rewardToken: string;
+    rewardTokenSymbol: string;
+}
+export interface ExternalAPYData {
+    /**
+     * The total value including external APY
+     */
+    totalValue: number;
+    /**
+     * The external APY value
+     */
+    value: number;
+    /**
+     * Name/label of the external APY source
+     */
+    name: string;
+    /**
+     * Localization key for the external APY tooltip
+     * Will be rendered with FormattedMessageTyped with values: { name, value }
+     */
+    tooltip?: LocaleKeys;
+}
+export interface CompoundAPYProps {
+    /**
+     * Total APY value (already in percent form, e.g., 5 for 5%)
+     */
+    totalAPY: number;
+    /**
+     * Base APY array with different types
+     */
+    baseAPY: Array<PoolBaseAPY>;
+    /**
+     * Extra/rewards APY array
+     */
+    extraAPY: Array<ExtraRewardApy>;
+    /**
+     * External APY data (e.g., from external protocols)
+     */
+    externalAPY?: ExternalAPYData;
+    /**
+     * Token list for displaying token symbols in tooltips
+     */
+    tokensList?: Record<string, TokenData>;
+    /**
+     * Number of decimal places
+     * @default 2
+     */
+    decimals?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+/**
+ * CompoundAPY component for displaying breakdown of APY with base, extra, and external components
+ *
+ * @example
+ * ```tsx
+ * <CompoundAPY
+ *   totalAPY={15}
+ *   baseAPY={[{ type: "supplyAPY", apy: 10 }]}
+ *   extraAPY={[{ apy: 3, rewardToken: "0x...", rewardTokenSymbol: "GEAR" }]}
+ *   externalAPY={{
+ *     totalValue: 15,
+ *     value: 2,
+ *     name: "Curve",
+ *     tooltip: "External APY from Curve"
+ *   }}
+ * />
+ * ```
+ */
+export declare function CompoundAPY({ totalAPY, baseAPY, extraAPY, externalAPY, tokensList, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/credit-session-status.d.ts

@@ -0,0 +1,7 @@
+import type { CreditSessionStatus as CreditSessionStatusType } from "@gearbox-protocol/sdk";
+import type * as React from "react";
+export interface CreditSessionStatusProps {
+    status: CreditSessionStatusType;
+    className?: string;
+}
+export declare function CreditSessionStatus({ status, className, }: CreditSessionStatusProps): React.ReactElement;

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

@@ -0,0 +1,26 @@
+import type * as React from "react";
+/**
+ * DescriptionProps — props for Description component.
+ */
+export interface DescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * Description — component for displaying secondary/muted text.
+ *
+ * @usage
+ * Use Description for secondary information and hints:
+ * subtitles, helper text, additional information, muted descriptions.
+ *
+ * Props:
+ * - All standard HTML span props are supported (className, children, etc.).
+ *
+ * Note: Uses small text size (text-sm) and muted foreground color by default.
+ * Rendered as inline span element.
+ *
+ * @example
+ * ```tsx
+ * <Description>This is a secondary text</Description>
+ * <Description className="text-xs">Small description</Description>
+ * ```
+ */
+export declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;