@deframe-sdk/components 0.1.11 → 0.1.13

package/dist/index.d.ts

@@ -5,6 +5,18 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 /** Primary UI component for user interaction */
 declare function ActionButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+interface CloseButtonProps {
+    /** Click handler for the close button */
+    onClick?: () => void;
+    /** Test ID for testing purposes */
+    testId?: string;
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+declare const CloseButton: React__default.FC<CloseButtonProps>;
+
 /** Primary UI component for user interaction */
 declare function PercentageButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -492,655 +504,6 @@ interface DeframeComponentsProviderProps {
 }
 declare function DeframeComponentsProvider({ className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
 
-type StatCardValueTone = 'default' | 'positive' | 'negative' | 'warning' | 'brand';
-type StatCardTrendDirection = 'up' | 'down' | 'neutral';
-interface StatCardProps extends ComponentProps<'article'> {
-}
-interface StatCardHeaderProps extends ComponentProps<'div'> {
-}
-interface StatCardLabelProps extends ComponentProps<'p'> {
-}
-interface StatCardValueProps extends ComponentProps<'p'> {
-    /** Controls the text colour of the value */
-    tone?: StatCardValueTone;
-    /** Adjusts the font-size scale */
-    size?: 'sm' | 'md' | 'lg';
-}
-interface StatCardDescriptionProps extends ComponentProps<'p'> {
-}
-interface StatCardTrendProps extends ComponentProps<'span'> {
-    /** Arrow direction to display */
-    direction: StatCardTrendDirection;
-    /** Formatted trend string, e.g. "+12.5% (24h)" */
-    value: string;
-}
-interface StatCardBadgeProps extends ComponentProps<'span'> {
-    tone?: 'default' | 'positive' | 'negative' | 'warning' | 'brand';
-}
-interface StatCardDividerProps extends ComponentProps<'hr'> {
-}
-interface StatCardRowProps extends ComponentProps<'div'> {
-}
-interface StatCardIconProps extends ComponentProps<'div'> {
-}
-/**
- * Root container for a stat/metric card.
- *
- * Compose with sub-components:
- * ```tsx
- * <StatCard>
- * <StatCardHeader>
- * <StatCardLabel>TOTAL DA CARTEIRA</StatCardLabel>
- * <StatCardBadge tone="positive">LIVE</StatCardBadge>
- * </StatCardHeader>
- * <StatCardValue tone="positive">$714,100.00</StatCardValue>
- * <StatCardTrend direction="up" value="+12.5% (24h)" />
- * <StatCardDescription>Soma do saldo por token (em USD).</StatCardDescription>
- * </StatCard>
- * ```
- */
-declare function StatCard({ className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
-/**
- * Flex row for placing a label and a badge/icon side-by-side.
- */
-declare function StatCardHeader({ className, ...props }: StatCardHeaderProps): react_jsx_runtime.JSX.Element;
-/**
- * Small uppercase muted label — e.g. "TOTAL DA CARTEIRA (USD)".
- */
-declare function StatCardLabel({ className, ...props }: StatCardLabelProps): react_jsx_runtime.JSX.Element;
-/**
- * Primary value display — supports size and tone variants.
- *
- * | tone | colour |
- * |------------|---------------------------|
- * | `default` | `--deframe-widget-color-text-primary` |
- * | `positive` | `--deframe-widget-color-brand-primary` |
- * | `negative` | `--deframe-widget-color-state-error` |
- * | `warning` | `--deframe-widget-color-state-warning` |
- * | `brand` | `--deframe-widget-color-brand-secondary` |
- */
-declare function StatCardValue({ tone, size, className, ...props }: StatCardValueProps): react_jsx_runtime.JSX.Element;
-/**
- * Secondary small text — subtitle, footnote, or help text.
- */
-declare function StatCardDescription({ className, ...props }: StatCardDescriptionProps): react_jsx_runtime.JSX.Element;
-/**
- * Inline trend indicator with a directional arrow.
- *
- * ```tsx
- * <StatCardTrend direction="up" value="+12.5% (24h)" />
- * <StatCardTrend direction="down" value="-3.2% (7d)" />
- * ```
- */
-declare function StatCardTrend({ direction, value, className, ...props }: StatCardTrendProps): react_jsx_runtime.JSX.Element;
-/**
- * Small pill badge — use for status labels like "LIVE", "NEW", "ATIVO".
- *
- * | tone | style |
- * |------------|-------------------------------------------|
- * | `default` | subtle border + muted text |
- * | `positive` | green dim bg + brand border + green text |
- * | `negative` | red dim bg + red border + red text |
- * | `warning` | amber dim bg + amber border + amber text |
- * | `brand` | brand tint bg + brand border + brand text |
- */
-declare function StatCardBadge({ tone, className, ...props }: StatCardBadgeProps): react_jsx_runtime.JSX.Element;
-/**
- * Horizontal rule separator between card sections.
- */
-declare function StatCardDivider({ className, ...props }: StatCardDividerProps): react_jsx_runtime.JSX.Element;
-/**
- * Flex row for displaying a key-value pair side by side.
- * Useful for transaction detail lines inside a card.
- *
- * ```tsx
- * <StatCardRow>
- * <StatCardDescription>Taxa de rede</StatCardDescription>
- * <StatCardDescription>~$0.50</StatCardDescription>
- * </StatCardRow>
- * ```
- */
-declare function StatCardRow({ className, ...props }: StatCardRowProps): react_jsx_runtime.JSX.Element;
-/**
- * Square icon container with brand-dim background.
- * Pass any SVG or icon element as children.
- *
- * ```tsx
- * <StatCardIcon aria-label="Portfolio">
- * <svg>...</svg>
- * </StatCardIcon>
- * ```
- */
-declare function StatCardIcon({ className, ...props }: StatCardIconProps): react_jsx_runtime.JSX.Element;
-
-interface SegmentOption<V extends string = string> {
-    value: V;
-    label: string;
-    icon?: React$1.ReactNode;
-}
-interface SegmentedControlProps<V extends string = string> {
-    options: SegmentOption<V>[];
-    value: V;
-    onChange: (value: V) => void;
-    variant?: 'outlined' | 'ghost';
-    size?: 'sm' | 'md';
-    fullWidth?: boolean;
-}
-declare function SegmentedControl<V extends string = string>({ options, value, onChange, variant, size, fullWidth, }: SegmentedControlProps<V>): react_jsx_runtime.JSX.Element;
-
-interface IconCircleProps {
-    item: {
-        name: string;
-        color: string;
-        iconUrl?: string;
-    };
-    size?: number;
-    className?: string;
-}
-/**
- * Renders a circular icon — uses `iconUrl` if available, falls back to
- * a colored circle with the first 2 letters of `name`.
- */
-declare function IconCircle({ item, size, className }: IconCircleProps): react_jsx_runtime.JSX.Element;
-
-interface CloseButtonProps extends React$1.ComponentProps<'button'> {
-    onClick: () => void;
-    testId?: string;
-}
-/** Icon-only × button — used in the modal/sheet header. */
-declare function CloseButton({ onClick, className, testId, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
-
-interface Asset {
-    id: string;
-    symbol: string;
-    name: string;
-    color: string;
-    iconUrl?: string;
-    balance?: string;
-    balanceUsd?: string;
-    category: 'crypto' | 'stock';
-    tags?: string[];
-}
-interface Chain {
-    id: string;
-    name: string;
-    color: string;
-    iconUrl?: string;
-    balanceUsd?: string;
-}
-/** A pill item in the FilterGroupBar — drives semantic asset filtering. */
-interface FilterGroupItem {
-    id: string;
-    label: string;
-}
-interface BlockchainAssetSelectorProps {
-    chains: Chain[];
-    assets: Record<string, Asset[]>;
-    onSelect: (chain: Chain, asset: Asset) => void;
-    onClose: () => void;
-    /** @deprecated No longer drives chain selection UI; kept for backward compatibility. */
-    defaultChain?: string;
-    defaultTab?: 'crypto' | 'stock';
-    /** Filter group pills shown above the asset list. Defaults to [All, Most Used, Stablecoins]. */
-    filterGroups?: FilterGroupItem[];
-}
-
-interface ChainRowProps {
-    chain: Chain;
-    selected: boolean;
-    onClick: () => void;
-    onKeyDown: (e: React$1.KeyboardEvent) => void;
-    index: number;
-}
-/** Desktop sidebar row — shows chain icon, name, and optional balance. */
-declare function ChainRow({ chain, selected, onClick, onKeyDown, index }: ChainRowProps): react_jsx_runtime.JSX.Element;
-
-interface ChainChipProps {
-    chain: Chain;
-    selected: boolean;
-    onClick: () => void;
-}
-/** Mobile horizontal scrollable chain chip. */
-declare function ChainChip({ chain, selected, onClick }: ChainChipProps): react_jsx_runtime.JSX.Element;
-
-interface AssetRowProps {
-    asset: Asset;
-    /** Highlight as the top/default selection */
-    first: boolean;
-    onClick: () => void;
-    onKeyDown: (e: React$1.KeyboardEvent) => void;
-    index: number;
-    /** Optional chain attribution shown below asset name (e.g. "via Solana") */
-    chainName?: string;
-    /** Dot colour for chain attribution — data-driven, kept as style */
-    chainColor?: string;
-}
-/** Single row in the asset list — icon, name, symbol, optional balance, and optional chain attribution. */
-declare function AssetRow({ asset, first, onClick, onKeyDown, index, chainName, chainColor }: AssetRowProps): react_jsx_runtime.JSX.Element;
-
-interface FilterGroupBarProps {
-    groups: FilterGroupItem[];
-    /** `id` of the currently active group */
-    selected: string;
-    onSelect: (id: string) => void;
-}
-/**
- * Horizontal scrollable row of text-only filter pills.
- *
- * Replaces the chain chip selector in BlockchainAssetSelector — lets the user
- * filter assets by semantic category (All, Most Used, Stablecoins, …) rather
- * than by blockchain network.
- */
-declare function FilterGroupBar({ groups, selected, onSelect }: FilterGroupBarProps): react_jsx_runtime.JSX.Element;
-
-declare function BlockchainAssetSelector({ chains, assets, onSelect, onClose, defaultChain, defaultTab, filterGroups, }: BlockchainAssetSelectorProps): react_jsx_runtime.JSX.Element;
-
-type AssetTrendDirection = 'up' | 'down' | 'neutral';
-interface AssetFilterOption {
-    id: string;
-    label: string;
-}
-interface AssetListProps extends React$1.ComponentProps<'div'> {
-}
-interface AssetListHeaderProps extends React$1.ComponentProps<'div'> {
-    /** Optional right-side action slot (e.g. icon button) */
-    action?: React$1.ReactNode;
-}
-interface AssetListFilterProps {
-    /** Filter options — e.g. [{ id: 'all', label: 'Todos' }, ...] */
-    filters: AssetFilterOption[];
-    /** Currently selected filter id */
-    selected: string;
-    /** Called when a filter pill is clicked */
-    onSelect: (id: string) => void;
-    className?: string;
-}
-interface AssetListColumnsProps extends React$1.ComponentProps<'div'> {
-    /** Override the three column labels. Defaults to ['ATIVO', 'TENDÊNCIA', 'SALDO'] */
-    labels?: [string, string, string];
-}
-interface AssetTrendBadgeProps extends React$1.ComponentProps<'span'> {
-    direction: AssetTrendDirection;
-    /** Formatted value shown on the badge, e.g. "+18.2%" */
-    value: string;
-}
-interface AssetListItemProps extends React$1.ComponentProps<'div'> {
-    /** Icon info for the asset */
-    asset: {
-        name: string;
-        color: string;
-        iconUrl?: string;
-    };
-    /** Asset display name, e.g. "Bitcoin" */
-    name: string;
-    /** Ticker symbol, e.g. "BTC" */
-    symbol: string;
-    /** Trend direction */
-    trendDirection: AssetTrendDirection;
-    /** Formatted trend value, e.g. "+18.2%" */
-    trendValue: string;
-    /** Formatted balance with symbol, e.g. "0.03 BTC" */
-    balance: string;
-    /** Formatted USD balance, e.g. "$2,145.00" */
-    balanceUsd: string;
-}
-/**
- * Root container for the "Seus ativos" panel.
- *
- * Compose with sub-components:
- * ```tsx
- * <AssetList>
- * <AssetListHeader action={<HistoryButton />}>Seus ativos</AssetListHeader>
- * <AssetListFilter filters={FILTERS} selected={tab} onSelect={setTab} />
- * <AssetListColumns />
- * <AssetListItem asset={btc} name="Bitcoin" symbol="BTC" ... />
- * </AssetList>
- * ```
- */
-declare function AssetList({ className, ...props }: AssetListProps): react_jsx_runtime.JSX.Element;
-/**
- * Panel header — renders a title and an optional action slot on the right.
- */
-declare function AssetListHeader({ action, children, className, ...props }: AssetListHeaderProps): react_jsx_runtime.JSX.Element;
-/**
- * Horizontal scrollable pill filter — e.g. "Todos | Criptomoedas | Ações".
- *
- * Active pill uses brand-dim background and border; inactive is transparent.
- */
-declare function AssetListFilter({ filters, selected, onSelect, className }: AssetListFilterProps): react_jsx_runtime.JSX.Element;
-/**
- * Column header row for the asset table.
- * Default labels: ATIVO | TENDÊNCIA | SALDO
- */
-declare function AssetListColumns({ labels, className, ...props }: AssetListColumnsProps): react_jsx_runtime.JSX.Element;
-/**
- * Compact trend badge pill with directional arrow.
- *
- * | direction | style |
- * |-----------|-----------------|
- * | `up` | green bg + text |
- * | `down` | red bg + text |
- * | `neutral` | muted bg + text |
- */
-declare function AssetTrendBadge({ direction, value, className, ...props }: AssetTrendBadgeProps): react_jsx_runtime.JSX.Element;
-/**
- * Single asset row — icon + name/symbol | trend badge | balance.
- *
- * Uses a three-column grid matching `AssetListColumns` layout.
- */
-declare function AssetListItem({ asset, name, symbol, trendDirection, trendValue, balance, balanceUsd, className, ...props }: AssetListItemProps): react_jsx_runtime.JSX.Element;
-
-type StrategyRisk = 'low' | 'medium' | 'high';
-interface StrategyListProps extends React$1.ComponentProps<'div'> {
-}
-interface StrategyListHeaderProps extends React$1.ComponentProps<'div'> {
-    /** Optional back-navigation handler — renders a back chevron button */
-    onBack?: () => void;
-    /** Subtitle shown below the main title */
-    subtitle?: string;
-}
-interface StrategyRiskBadgeProps extends React$1.ComponentProps<'span'> {
-    risk: StrategyRisk;
-    /** Override the default label for this risk level */
-    label?: string;
-}
-interface StrategyListItemProps extends React$1.ComponentProps<'div'> {
-    /** Strategy icon info passed to IconCircle */
-    strategy: {
-        name: string;
-        color: string;
-        iconUrl?: string;
-    };
-    /** Strategy display name, e.g. "Caixinha Dólar" */
-    name: string;
-    /** Network or sub-label, e.g. "Ethereum" */
-    network?: string;
-    /** Formatted yield value, e.g. "6.3%" */
-    rendimento: string;
-    /** Risk level shown as a badge */
-    risk?: StrategyRisk;
-    /** Called when the "Investir" button is clicked */
-    onInvestir?: () => void;
-    /** Called when the "Sacar" button is clicked */
-    onSacar?: () => void;
-    /** Whether to show the "Sacar" button (default: true) */
-    showSacar?: boolean;
-}
-/**
- * Root container for the "Caixinhas" strategy list.
- *
- * Compose with sub-components:
- * ```tsx
- * <StrategyList>
- * <StrategyListHeader subtitle="Escolha onde investir" onBack={handleBack}>
- * Caixinhas
- * </StrategyListHeader>
- * <StrategyListItem
- * strategy={dollarIcon}
- * name="Caixinha Dólar"
- * network="Ethereum"
- * rendimento="6.3%"
- * risk="low"
- * onInvestir={handleInvestir}
- * />
- * </StrategyList>
- * ```
- */
-declare function StrategyList({ className, ...props }: StrategyListProps): react_jsx_runtime.JSX.Element;
-/**
- * Header section — title, optional subtitle, and optional back-chevron button.
- */
-declare function StrategyListHeader({ onBack, subtitle, children, className, ...props }: StrategyListHeaderProps): react_jsx_runtime.JSX.Element;
-/**
- * Risk level badge pill.
- *
- * | risk | colour |
- * |----------|--------|
- * | `low` | green |
- * | `medium` | amber |
- * | `high` | red |
- */
-declare function StrategyRiskBadge({ risk, label, className, ...props }: StrategyRiskBadgeProps): react_jsx_runtime.JSX.Element;
-/**
- * Single strategy card — icon + name + network, rendimento %, risk badge,
- * and "Investir" / "Sacar" action buttons.
- */
-declare function StrategyListItem({ strategy, name, network, rendimento, risk, onInvestir, onSacar, showSacar, className, ...props }: StrategyListItemProps): react_jsx_runtime.JSX.Element;
-
-interface TokenIconProps {
-    token: {
-        name: string;
-        color: string;
-        iconUrl?: string;
-    };
-    size?: number;
-    badge?: {
-        name: string;
-        color: string;
-        iconUrl?: string;
-    };
-    badgeSize?: number;
-    className?: string;
-}
-/**
- * Token icon with an optional network badge overlaid at the bottom-right.
- * Wraps IconCircle — falls back to colored circle with initials when no iconUrl.
- */
-declare function TokenIcon({ token, size, badge, badgeSize, className }: TokenIconProps): react_jsx_runtime.JSX.Element;
-
-interface PercentageChipsProps {
-    /** Percentage values — last item uses maxLabel. Default: [25, 50, 75, 100] */
-    options?: number[];
-    /** Label shown for the last (100 %) chip. Default: 'Máx.' */
-    maxLabel?: string;
-    /** Currently active percentage (null = none selected) */
-    selected?: number | null;
-    onSelect: (pct: number) => void;
-}
-/**
- * Row of percentage shortcut pills for the "from" token input.
- * Designed to be revealed via Framer Motion AnimatePresence in SwapPanel.
- */
-declare function PercentageChips({ options, maxLabel, selected, onSelect, }: PercentageChipsProps): react_jsx_runtime.JSX.Element;
-
-type NotifVariant = 'info' | 'warning' | 'error' | 'success';
-interface InlineNotificationProps {
-    variant: NotifVariant;
-    message: string;
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-    onDismiss?: () => void;
-}
-/**
- * Compact inline message bar with a 3 px left accent stripe.
- * Use inside TokenInputCard or any card surface — not a floating toast.
- */
-declare function InlineNotification({ variant, message, action, onDismiss, }: InlineNotificationProps): react_jsx_runtime.JSX.Element;
-
-interface TokenSelectorToken {
-    name: string;
-    symbol: string;
-    color: string;
-    iconUrl?: string;
-    network: string;
-    networkColor?: string;
-    networkIconUrl?: string;
-}
-interface TokenSelectorProps {
-    token: TokenSelectorToken;
-    onClick?: () => void;
-    disabled?: boolean;
-}
-/**
- * Clickable area showing the selected token — icon, name, network label, and a
- * downward chevron. Occupies the left half of a TokenInputCard.
- */
-declare function TokenSelector({ token, onClick, disabled }: TokenSelectorProps): react_jsx_runtime.JSX.Element;
-
-interface AmountInputProps {
-    value: string;
-    onChange: (v: string) => void;
-    /** e.g. '≈ $0.00' — shown below the amount in muted text */
-    conversionUsd?: string;
-    /** "to" field — shows a computed amount with no editing */
-    readOnly?: boolean;
-    disabled?: boolean;
-}
-/**
- * Large amount input occupying the right half of a TokenInputCard.
- * - 36 px semibold number, right-aligned
- * - Muted colour when value is empty / '0', primary otherwise
- * - USD conversion label appears below when provided
- * - inputMode="decimal" for mobile numeric pad
- */
-declare function AmountInput({ value, onChange, conversionUsd, readOnly, disabled, }: AmountInputProps): react_jsx_runtime.JSX.Element;
-
-interface SwapDirectionButtonProps {
-    onClick?: () => void;
-    disabled?: boolean;
-}
-/**
- * The ↓ button placed between the two TokenInputCards.
- * Hovers with a Framer Motion rotate-180 animation to indicate direction swap.
- * Negatively offset by the parent so it visually overlaps both cards.
- */
-declare function SwapDirectionButton({ onClick, disabled }: SwapDirectionButtonProps): react_jsx_runtime.JSX.Element;
-
-interface TokenInputCardProps {
-    token: TokenSelectorToken;
-    amount: string;
-    onAmountChange?: (v: string) => void;
-    /** e.g. '0' or '41' — shown as "Saldo: X SYMBOL" */
-    balance?: string;
-    balanceSymbol?: string;
-    /** e.g. '≈ $0.00' — forwarded to AmountInput */
-    conversionUsd?: string;
-    /** Opens the BlockchainAssetSelector */
-    onTokenSelect?: () => void;
-    /** True for the "to" card — amount is read-only */
-    readOnly?: boolean;
-    error?: 'insufficient_balance' | null;
-    /** Signals SwapPanel to show/hide PercentageChips */
-    onHoverChange?: (hovering: boolean) => void;
-    /** Optional slot rendered inside the card, below the balance row */
-    chipsSlot?: React$1.ReactNode;
-}
-/**
- * Full input card: TokenSelector on the left + AmountInput on the right +
- * balance row below. Turns red in the error='insufficient_balance' state and
- * shows an InlineNotification with a "Adicionar via PIX" action.
- */
-declare function TokenInputCard({ token, amount, onAmountChange, balance, balanceSymbol, conversionUsd, onTokenSelect, readOnly, error, onHoverChange, chipsSlot, }: TokenInputCardProps): react_jsx_runtime.JSX.Element;
-
-type SwapFeedbackVariant = 'loading' | 'success' | 'error';
-
-interface SwapToken {
-    id: string;
-    name: string;
-    symbol: string;
-    color: string;
-    iconUrl?: string;
-    network: string;
-    networkColor?: string;
-    networkIconUrl?: string;
-}
-interface SwapPanelProps {
-    fromToken: SwapToken;
-    toToken: SwapToken;
-    fromAmount: string;
-    /** Computed / read-only amount shown in the "to" card */
-    toAmount: string;
-    onFromAmountChange: (v: string) => void;
-    /** Optional exact percentage callback for host integrations that need precise balance math */
-    onFromPercentageSelect?: (pct: number) => void;
-    onFromTokenSelect?: () => void;
-    onToTokenSelect?: () => void;
-    /** Called when the user clicks the direction-swap button */
-    onSwapTokens?: () => void;
-    fromBalance?: string;
-    fromBalanceSymbol?: string;
-    toBalance?: string;
-    toBalanceSymbol?: string;
-    fromConversionUsd?: string;
-    toConversionUsd?: string;
-    onSubmit?: () => void;
-    /** Default: 'Revisar Troca' */
-    submitLabel?: string;
-    /** Forces the submit CTA into a disabled state for host-driven validation */
-    submitDisabled?: boolean;
-    /** Clock icon — opens history */
-    onHistory?: () => void;
-    /** Opens advanced settings */
-    onAdvanced?: () => void;
-    loading?: boolean;
-    error?: 'insufficient_balance' | null;
-    /** When set, renders a glass-blur feedback overlay (loading / success / error) */
-    feedback?: {
-        variant: SwapFeedbackVariant;
-        title?: string;
-        subtitle?: string;
-    } | null;
-}
-
-/**
- * Full token swap form orchestrator.
- *
- * Built-in behaviour:
- * - Hovering the "from" card reveals PercentageChips as an absolutely-positioned
- * tooltip above the card (no layout shift). A 150 ms hide-delay lets the
- * cursor travel from the card to the chips without them flickering away.
- * - Clicking a % chip sets fromAmount = balance × pct / 100
- * - SwapDirectionButton calls onSwapTokens
- * - Submit button is disabled when amount is empty / '0' or loading is true
- * - Submit button shows a spinner while loading
- * - History button sits top-left, styled as CloseButton (icon-only, hover bg)
- * - "Avançado" pill sits top-right with green outline; calls onAdvanced
- */
-declare function SwapPanel({ fromToken, toToken, fromAmount, toAmount, onFromAmountChange, onFromPercentageSelect, onFromTokenSelect, onToTokenSelect, onSwapTokens, fromBalance, fromBalanceSymbol, toBalance, toBalanceSymbol, fromConversionUsd, toConversionUsd, onSubmit, submitLabel, submitDisabled, onHistory, onAdvanced, loading, error, feedback, }: SwapPanelProps): react_jsx_runtime.JSX.Element;
-
-interface TransactionDetailRowProps {
-    /** Uppercase label — e.g. 'VALIDADE', 'SLIPPAGE' */
-    label: string;
-    /** Formatted value — e.g. '30 min', '0.5%' */
-    value: string;
-    /** Optional value colour override — data-driven hex, kept as style */
-    valueColor?: string;
-    /** Show a horizontal divider below this row (default false) */
-    divider?: boolean;
-}
-/**
- * Single label + value row used inside TransactionDetails.
- *
- * Label: small, uppercase, letter-spaced, muted
- * Value: semibold, primary colour (or custom override)
- */
-declare function TransactionDetailRow({ label, value, valueColor, divider, }: TransactionDetailRowProps): react_jsx_runtime.JSX.Element;
-
-interface TransactionDetailItem {
-    /** Row label — displayed uppercase, muted */
-    label: string;
-    /** Formatted value string */
-    value: string;
-    /** Optional colour override for value text */
-    valueColor?: string;
-}
-interface TransactionDetailsProps {
-    /** Panel heading — default: 'Detalhes da transação' */
-    title?: string;
-    /** Conversion subtitle, e.g. '9.682785 USDC = 0.003873 ETH' */
-    subtitle?: string;
-    /** List of detail rows */
-    items: TransactionDetailItem[];
-    /** Called when the ✕ button is pressed */
-    onClose?: () => void;
-}
-/**
- * Transaction detail panel — sits beside the SwapPanel when "Avançado" is pressed.
- */
-declare function TransactionDetails({ title, subtitle, items, onClose, }: TransactionDetailsProps): react_jsx_runtime.JSX.Element;
-
 interface InfoRowProps {
     children: React__default.ReactNode;
     borderBottom?: boolean;
@@ -1646,6 +1009,14 @@ interface SwapProcessingViewProps {
 }
 declare const SwapProcessingView: React__default.FC<SwapProcessingViewProps>;
 
+/**
+ * Visual variant of SwapProcessingView.
+ * Design identical to the SwapPanel ProcessingOverlay:
+ * glass-blur transparent background, rotating sync icon,
+ * uppercase green title + muted subtitle. No chrome, no transaction details.
+ */
+declare const SwapProcessingViewSimple: React__default.FC<Partial<SwapProcessingViewProps>>;
+
 interface SwapCrossChainProcessingViewProps {
     fromTokenSymbol: string;
     fromTokenIcon: string;
@@ -1694,12 +1065,12 @@ interface SwapSignatureWarningViewProps {
 declare const SwapSignatureWarningView: React__default.FC<SwapSignatureWarningViewProps>;
 
 interface SwapSuccessLabels {
-    title: string;
-    descriptionPrefix: string;
-    descriptionMiddle: string;
-    descriptionSuffix: string;
-    walletLinkText: string;
-    startNewSwapButton: string;
+    title?: string;
+    descriptionPrefix?: string;
+    descriptionMiddle?: string;
+    descriptionSuffix?: string;
+    walletLinkText?: string;
+    startNewSwapButton?: string;
 }
 
 interface SwapSuccessViewProps {
@@ -1720,6 +1091,14 @@ interface SwapSuccessViewProps {
 }
 declare const SwapSuccessView: React__default.FC<SwapSuccessViewProps>;
 
+/**
+ * Visual variant of SwapSuccessView.
+ * Design identical to the SwapPanel SuccessOverlay:
+ * glass-blur transparent background, centered icon + title + subtitle.
+ * No chrome, no transaction details.
+ */
+declare const SwapSuccessViewSimple: React__default.FC<Partial<SwapSuccessViewProps>>;
+
 interface SwapTransactionFailedViewProps {
     fromTokenSymbol: string;
     fromTokenIcon: string;
@@ -1743,6 +1122,14 @@ interface SwapTransactionFailedViewProps {
 }
 declare const SwapTransactionFailedView: React__default.FC<SwapTransactionFailedViewProps>;
 
+/**
+ * Visual variant of SwapTransactionFailedView.
+ * Design identical to the SwapPanel ErrorOverlay:
+ * glass-blur transparent background, spring-in red circle with animated X,
+ * bold title + muted subtitle. No chrome, no transaction details.
+ */
+declare const SwapTransactionFailedViewSimple: React__default.FC<Partial<SwapTransactionFailedViewProps>>;
+
 interface ChooseAnAssetSwapLabels {
     title: string;
     searchPlaceholder: string;
@@ -1969,4 +1356,4 @@ interface DeframeTheme {
     colors?: DeframeThemeColors;
 }
 
-export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, AmountInput, type AmountInputProps, type Asset, type AssetFilterOption, AssetList, AssetListColumns, type AssetListColumnsProps, AssetListFilter, type AssetListFilterProps, AssetListHeader, type AssetListHeaderProps, AssetListItem, type AssetListItemProps, type AssetListProps, AssetRow, AssetTrendBadge, type AssetTrendBadgeProps, type AssetTrendDirection, BackgroundContainer, type BackgroundContainerProps, type BalanceDomain, BannerNotification, type BannerNotificationProps, BlockchainAssetSelector, type BlockchainAssetSelectorProps, type ButtonProps, type Chain, ChainChip, ChainRow, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, type ChooseAnAssetSwapLabels, ChooseAnAssetSwapView, type ChooseAnAssetSwapViewProps, CloseButton, CollapsibleInfoRow, type CollapsibleInfoRowProps, CollapsibleSection, type CollapsibleSectionProps, type ConfirmSwapButtonLabels, ConfirmSwapButtonView, type ConfirmSwapButtonViewProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FilterGroupBar, type FilterGroupBarProps, type FilterGroupItem, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, IconCircle, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, InlineNotification, type InlineNotificationProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LoadingDots, type LoadingDotsProps, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, type NotifVariant, PercentageButton, PercentageChips, type PercentageChipsProps, PrimaryButton, ProgressIndicator, type ProgressIndicatorProps, ScrollableContent, type ScrollableContentProps, SearchEmptyState, type SearchEmptyStateProps, SearchInput, type SearchInputProps, SecondaryButton, SectionCard, type SectionCardProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StatCard, StatCardBadge, type StatCardBadgeProps, StatCardDescription, type StatCardDescriptionProps, StatCardDivider, type StatCardDividerProps, StatCardHeader, type StatCardHeaderProps, StatCardIcon, type StatCardIconProps, StatCardLabel, type StatCardLabelProps, type StatCardProps, StatCardRow, type StatCardRowProps, StatCardTrend, type StatCardTrendDirection, type StatCardTrendProps, StatCardValue, type StatCardValueProps, type StatCardValueTone, StepDisplay, type StepDisplayProps, StepStatusIcon, type StepStatusIconProps, StepStatusText, type StepStatusTextProps, StrategyDetailsView, type StrategyDetailsViewProps, StrategyList, StrategyListHeader, type StrategyListHeaderProps, StrategyListItem, type StrategyListItemProps, type StrategyListProps, type StrategyRisk, StrategyRiskBadge, type StrategyRiskBadgeProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAdvancedSettingsView, type SwapAdvancedSettingsViewProps, SwapAmountInputView, type SwapAmountInputViewProps, type SwapCardLabels, SwapCrossChainProcessingView, type SwapCrossChainProcessingViewProps, SwapDirectionButton, type SwapDirectionButtonProps, type SwapFormLabels, SwapFormView, type SwapFormViewProps, SwapFromCardView, type SwapFromCardViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapPanel, type SwapPanelProps, SwapProcessingView, type SwapProcessingViewProps, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, type SwapQuoteDetailsLabels, SwapQuoteDetailsView, type SwapQuoteDetailsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSignatureWarningView, type SwapSignatureWarningViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, type SwapSuccessLabels, SwapSuccessView, type SwapSuccessViewProps, SwapToCardView, type SwapToCardViewProps, type SwapToken, SwapTokenSelectorView, type SwapTokenSelectorViewProps, SwapTransactionFailedView, type SwapTransactionFailedViewProps, type SwapValidationCode, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, Title, type TokenData, TokenIcon, type TokenIconProps, TokenInputCard, type TokenInputCardProps, TokenSelector, type TokenSelectorProps, type TokenSelectorToken, TokenWithChainBadge, type TokenWithChainBadgeProps, type TransactionDetailItem, TransactionDetailRow, type TransactionDetailRowProps, TransactionDetails, type TransactionDetailsProps, TransactionProcessingDetails, type TransactionProcessingDetailsLabels, type TransactionProcessingDetailsProps, TransactionScreen, TransactionScreenIcon, type TransactionScreenIconProps, TransactionScreenInvestmentCard, type TransactionScreenInvestmentCardProps, type TransactionScreenProps, type TransactionStep, type TransactionStepStatus, WalletConnectPanel, type WalletConnectPanelProps, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type WalletOption };
+export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, BackgroundContainer, type BackgroundContainerProps, type BalanceDomain, BannerNotification, type BannerNotificationProps, type ButtonProps, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, type ChooseAnAssetSwapLabels, ChooseAnAssetSwapView, type ChooseAnAssetSwapViewProps, CloseButton, CollapsibleInfoRow, type CollapsibleInfoRowProps, CollapsibleSection, type CollapsibleSectionProps, type ConfirmSwapButtonLabels, ConfirmSwapButtonView, type ConfirmSwapButtonViewProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LoadingDots, type LoadingDotsProps, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, PercentageButton, PrimaryButton, ProgressIndicator, type ProgressIndicatorProps, ScrollableContent, type ScrollableContentProps, SearchEmptyState, type SearchEmptyStateProps, SearchInput, type SearchInputProps, SecondaryButton, SectionCard, type SectionCardProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StepDisplay, type StepDisplayProps, StepStatusIcon, type StepStatusIconProps, StepStatusText, type StepStatusTextProps, StrategyDetailsView, type StrategyDetailsViewProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAdvancedSettingsView, type SwapAdvancedSettingsViewProps, SwapAmountInputView, type SwapAmountInputViewProps, type SwapCardLabels, SwapCrossChainProcessingView, type SwapCrossChainProcessingViewProps, type SwapFormLabels, SwapFormView, type SwapFormViewProps, SwapFromCardView, type SwapFromCardViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapProcessingView, type SwapProcessingViewProps, SwapProcessingViewSimple, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, type SwapQuoteDetailsLabels, SwapQuoteDetailsView, type SwapQuoteDetailsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSignatureWarningView, type SwapSignatureWarningViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, type SwapSuccessLabels, SwapSuccessView, type SwapSuccessViewProps, SwapSuccessViewSimple, SwapToCardView, type SwapToCardViewProps, SwapTokenSelectorView, type SwapTokenSelectorViewProps, SwapTransactionFailedView, type SwapTransactionFailedViewProps, SwapTransactionFailedViewSimple, type SwapValidationCode, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, Title, type TokenData, TokenWithChainBadge, type TokenWithChainBadgeProps, TransactionProcessingDetails, type TransactionProcessingDetailsLabels, type TransactionProcessingDetailsProps, TransactionScreen, TransactionScreenIcon, type TransactionScreenIconProps, TransactionScreenInvestmentCard, type TransactionScreenInvestmentCardProps, type TransactionScreenProps, type TransactionStep, type TransactionStepStatus, WalletConnectPanel, type WalletConnectPanelProps, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type WalletOption };