@deframe-sdk/components 0.1.11 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -492,655 +492,6 @@ interface DeframeComponentsProviderProps {
492
492
  }
493
493
  declare function DeframeComponentsProvider({ className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
494
494
 
495
- type StatCardValueTone = 'default' | 'positive' | 'negative' | 'warning' | 'brand';
496
- type StatCardTrendDirection = 'up' | 'down' | 'neutral';
497
- interface StatCardProps extends ComponentProps<'article'> {
498
- }
499
- interface StatCardHeaderProps extends ComponentProps<'div'> {
500
- }
501
- interface StatCardLabelProps extends ComponentProps<'p'> {
502
- }
503
- interface StatCardValueProps extends ComponentProps<'p'> {
504
- /** Controls the text colour of the value */
505
- tone?: StatCardValueTone;
506
- /** Adjusts the font-size scale */
507
- size?: 'sm' | 'md' | 'lg';
508
- }
509
- interface StatCardDescriptionProps extends ComponentProps<'p'> {
510
- }
511
- interface StatCardTrendProps extends ComponentProps<'span'> {
512
- /** Arrow direction to display */
513
- direction: StatCardTrendDirection;
514
- /** Formatted trend string, e.g. "+12.5% (24h)" */
515
- value: string;
516
- }
517
- interface StatCardBadgeProps extends ComponentProps<'span'> {
518
- tone?: 'default' | 'positive' | 'negative' | 'warning' | 'brand';
519
- }
520
- interface StatCardDividerProps extends ComponentProps<'hr'> {
521
- }
522
- interface StatCardRowProps extends ComponentProps<'div'> {
523
- }
524
- interface StatCardIconProps extends ComponentProps<'div'> {
525
- }
526
- /**
527
- * Root container for a stat/metric card.
528
- *
529
- * Compose with sub-components:
530
- * ```tsx
531
- * <StatCard>
532
- * <StatCardHeader>
533
- * <StatCardLabel>TOTAL DA CARTEIRA</StatCardLabel>
534
- * <StatCardBadge tone="positive">LIVE</StatCardBadge>
535
- * </StatCardHeader>
536
- * <StatCardValue tone="positive">$714,100.00</StatCardValue>
537
- * <StatCardTrend direction="up" value="+12.5% (24h)" />
538
- * <StatCardDescription>Soma do saldo por token (em USD).</StatCardDescription>
539
- * </StatCard>
540
- * ```
541
- */
542
- declare function StatCard({ className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
543
- /**
544
- * Flex row for placing a label and a badge/icon side-by-side.
545
- */
546
- declare function StatCardHeader({ className, ...props }: StatCardHeaderProps): react_jsx_runtime.JSX.Element;
547
- /**
548
- * Small uppercase muted label — e.g. "TOTAL DA CARTEIRA (USD)".
549
- */
550
- declare function StatCardLabel({ className, ...props }: StatCardLabelProps): react_jsx_runtime.JSX.Element;
551
- /**
552
- * Primary value display — supports size and tone variants.
553
- *
554
- * | tone | colour |
555
- * |------------|---------------------------|
556
- * | `default` | `--deframe-widget-color-text-primary` |
557
- * | `positive` | `--deframe-widget-color-brand-primary` |
558
- * | `negative` | `--deframe-widget-color-state-error` |
559
- * | `warning` | `--deframe-widget-color-state-warning` |
560
- * | `brand` | `--deframe-widget-color-brand-secondary` |
561
- */
562
- declare function StatCardValue({ tone, size, className, ...props }: StatCardValueProps): react_jsx_runtime.JSX.Element;
563
- /**
564
- * Secondary small text — subtitle, footnote, or help text.
565
- */
566
- declare function StatCardDescription({ className, ...props }: StatCardDescriptionProps): react_jsx_runtime.JSX.Element;
567
- /**
568
- * Inline trend indicator with a directional arrow.
569
- *
570
- * ```tsx
571
- * <StatCardTrend direction="up" value="+12.5% (24h)" />
572
- * <StatCardTrend direction="down" value="-3.2% (7d)" />
573
- * ```
574
- */
575
- declare function StatCardTrend({ direction, value, className, ...props }: StatCardTrendProps): react_jsx_runtime.JSX.Element;
576
- /**
577
- * Small pill badge — use for status labels like "LIVE", "NEW", "ATIVO".
578
- *
579
- * | tone | style |
580
- * |------------|-------------------------------------------|
581
- * | `default` | subtle border + muted text |
582
- * | `positive` | green dim bg + brand border + green text |
583
- * | `negative` | red dim bg + red border + red text |
584
- * | `warning` | amber dim bg + amber border + amber text |
585
- * | `brand` | brand tint bg + brand border + brand text |
586
- */
587
- declare function StatCardBadge({ tone, className, ...props }: StatCardBadgeProps): react_jsx_runtime.JSX.Element;
588
- /**
589
- * Horizontal rule separator between card sections.
590
- */
591
- declare function StatCardDivider({ className, ...props }: StatCardDividerProps): react_jsx_runtime.JSX.Element;
592
- /**
593
- * Flex row for displaying a key-value pair side by side.
594
- * Useful for transaction detail lines inside a card.
595
- *
596
- * ```tsx
597
- * <StatCardRow>
598
- * <StatCardDescription>Taxa de rede</StatCardDescription>
599
- * <StatCardDescription>~$0.50</StatCardDescription>
600
- * </StatCardRow>
601
- * ```
602
- */
603
- declare function StatCardRow({ className, ...props }: StatCardRowProps): react_jsx_runtime.JSX.Element;
604
- /**
605
- * Square icon container with brand-dim background.
606
- * Pass any SVG or icon element as children.
607
- *
608
- * ```tsx
609
- * <StatCardIcon aria-label="Portfolio">
610
- * <svg>...</svg>
611
- * </StatCardIcon>
612
- * ```
613
- */
614
- declare function StatCardIcon({ className, ...props }: StatCardIconProps): react_jsx_runtime.JSX.Element;
615
-
616
- interface SegmentOption<V extends string = string> {
617
- value: V;
618
- label: string;
619
- icon?: React$1.ReactNode;
620
- }
621
- interface SegmentedControlProps<V extends string = string> {
622
- options: SegmentOption<V>[];
623
- value: V;
624
- onChange: (value: V) => void;
625
- variant?: 'outlined' | 'ghost';
626
- size?: 'sm' | 'md';
627
- fullWidth?: boolean;
628
- }
629
- declare function SegmentedControl<V extends string = string>({ options, value, onChange, variant, size, fullWidth, }: SegmentedControlProps<V>): react_jsx_runtime.JSX.Element;
630
-
631
- interface IconCircleProps {
632
- item: {
633
- name: string;
634
- color: string;
635
- iconUrl?: string;
636
- };
637
- size?: number;
638
- className?: string;
639
- }
640
- /**
641
- * Renders a circular icon — uses `iconUrl` if available, falls back to
642
- * a colored circle with the first 2 letters of `name`.
643
- */
644
- declare function IconCircle({ item, size, className }: IconCircleProps): react_jsx_runtime.JSX.Element;
645
-
646
- interface CloseButtonProps extends React$1.ComponentProps<'button'> {
647
- onClick: () => void;
648
- testId?: string;
649
- }
650
- /** Icon-only × button — used in the modal/sheet header. */
651
- declare function CloseButton({ onClick, className, testId, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
652
-
653
- interface Asset {
654
- id: string;
655
- symbol: string;
656
- name: string;
657
- color: string;
658
- iconUrl?: string;
659
- balance?: string;
660
- balanceUsd?: string;
661
- category: 'crypto' | 'stock';
662
- tags?: string[];
663
- }
664
- interface Chain {
665
- id: string;
666
- name: string;
667
- color: string;
668
- iconUrl?: string;
669
- balanceUsd?: string;
670
- }
671
- /** A pill item in the FilterGroupBar — drives semantic asset filtering. */
672
- interface FilterGroupItem {
673
- id: string;
674
- label: string;
675
- }
676
- interface BlockchainAssetSelectorProps {
677
- chains: Chain[];
678
- assets: Record<string, Asset[]>;
679
- onSelect: (chain: Chain, asset: Asset) => void;
680
- onClose: () => void;
681
- /** @deprecated No longer drives chain selection UI; kept for backward compatibility. */
682
- defaultChain?: string;
683
- defaultTab?: 'crypto' | 'stock';
684
- /** Filter group pills shown above the asset list. Defaults to [All, Most Used, Stablecoins]. */
685
- filterGroups?: FilterGroupItem[];
686
- }
687
-
688
- interface ChainRowProps {
689
- chain: Chain;
690
- selected: boolean;
691
- onClick: () => void;
692
- onKeyDown: (e: React$1.KeyboardEvent) => void;
693
- index: number;
694
- }
695
- /** Desktop sidebar row — shows chain icon, name, and optional balance. */
696
- declare function ChainRow({ chain, selected, onClick, onKeyDown, index }: ChainRowProps): react_jsx_runtime.JSX.Element;
697
-
698
- interface ChainChipProps {
699
- chain: Chain;
700
- selected: boolean;
701
- onClick: () => void;
702
- }
703
- /** Mobile horizontal scrollable chain chip. */
704
- declare function ChainChip({ chain, selected, onClick }: ChainChipProps): react_jsx_runtime.JSX.Element;
705
-
706
- interface AssetRowProps {
707
- asset: Asset;
708
- /** Highlight as the top/default selection */
709
- first: boolean;
710
- onClick: () => void;
711
- onKeyDown: (e: React$1.KeyboardEvent) => void;
712
- index: number;
713
- /** Optional chain attribution shown below asset name (e.g. "via Solana") */
714
- chainName?: string;
715
- /** Dot colour for chain attribution — data-driven, kept as style */
716
- chainColor?: string;
717
- }
718
- /** Single row in the asset list — icon, name, symbol, optional balance, and optional chain attribution. */
719
- declare function AssetRow({ asset, first, onClick, onKeyDown, index, chainName, chainColor }: AssetRowProps): react_jsx_runtime.JSX.Element;
720
-
721
- interface FilterGroupBarProps {
722
- groups: FilterGroupItem[];
723
- /** `id` of the currently active group */
724
- selected: string;
725
- onSelect: (id: string) => void;
726
- }
727
- /**
728
- * Horizontal scrollable row of text-only filter pills.
729
- *
730
- * Replaces the chain chip selector in BlockchainAssetSelector — lets the user
731
- * filter assets by semantic category (All, Most Used, Stablecoins, …) rather
732
- * than by blockchain network.
733
- */
734
- declare function FilterGroupBar({ groups, selected, onSelect }: FilterGroupBarProps): react_jsx_runtime.JSX.Element;
735
-
736
- declare function BlockchainAssetSelector({ chains, assets, onSelect, onClose, defaultChain, defaultTab, filterGroups, }: BlockchainAssetSelectorProps): react_jsx_runtime.JSX.Element;
737
-
738
- type AssetTrendDirection = 'up' | 'down' | 'neutral';
739
- interface AssetFilterOption {
740
- id: string;
741
- label: string;
742
- }
743
- interface AssetListProps extends React$1.ComponentProps<'div'> {
744
- }
745
- interface AssetListHeaderProps extends React$1.ComponentProps<'div'> {
746
- /** Optional right-side action slot (e.g. icon button) */
747
- action?: React$1.ReactNode;
748
- }
749
- interface AssetListFilterProps {
750
- /** Filter options — e.g. [{ id: 'all', label: 'Todos' }, ...] */
751
- filters: AssetFilterOption[];
752
- /** Currently selected filter id */
753
- selected: string;
754
- /** Called when a filter pill is clicked */
755
- onSelect: (id: string) => void;
756
- className?: string;
757
- }
758
- interface AssetListColumnsProps extends React$1.ComponentProps<'div'> {
759
- /** Override the three column labels. Defaults to ['ATIVO', 'TENDÊNCIA', 'SALDO'] */
760
- labels?: [string, string, string];
761
- }
762
- interface AssetTrendBadgeProps extends React$1.ComponentProps<'span'> {
763
- direction: AssetTrendDirection;
764
- /** Formatted value shown on the badge, e.g. "+18.2%" */
765
- value: string;
766
- }
767
- interface AssetListItemProps extends React$1.ComponentProps<'div'> {
768
- /** Icon info for the asset */
769
- asset: {
770
- name: string;
771
- color: string;
772
- iconUrl?: string;
773
- };
774
- /** Asset display name, e.g. "Bitcoin" */
775
- name: string;
776
- /** Ticker symbol, e.g. "BTC" */
777
- symbol: string;
778
- /** Trend direction */
779
- trendDirection: AssetTrendDirection;
780
- /** Formatted trend value, e.g. "+18.2%" */
781
- trendValue: string;
782
- /** Formatted balance with symbol, e.g. "0.03 BTC" */
783
- balance: string;
784
- /** Formatted USD balance, e.g. "$2,145.00" */
785
- balanceUsd: string;
786
- }
787
- /**
788
- * Root container for the "Seus ativos" panel.
789
- *
790
- * Compose with sub-components:
791
- * ```tsx
792
- * <AssetList>
793
- * <AssetListHeader action={<HistoryButton />}>Seus ativos</AssetListHeader>
794
- * <AssetListFilter filters={FILTERS} selected={tab} onSelect={setTab} />
795
- * <AssetListColumns />
796
- * <AssetListItem asset={btc} name="Bitcoin" symbol="BTC" ... />
797
- * </AssetList>
798
- * ```
799
- */
800
- declare function AssetList({ className, ...props }: AssetListProps): react_jsx_runtime.JSX.Element;
801
- /**
802
- * Panel header — renders a title and an optional action slot on the right.
803
- */
804
- declare function AssetListHeader({ action, children, className, ...props }: AssetListHeaderProps): react_jsx_runtime.JSX.Element;
805
- /**
806
- * Horizontal scrollable pill filter — e.g. "Todos | Criptomoedas | Ações".
807
- *
808
- * Active pill uses brand-dim background and border; inactive is transparent.
809
- */
810
- declare function AssetListFilter({ filters, selected, onSelect, className }: AssetListFilterProps): react_jsx_runtime.JSX.Element;
811
- /**
812
- * Column header row for the asset table.
813
- * Default labels: ATIVO | TENDÊNCIA | SALDO
814
- */
815
- declare function AssetListColumns({ labels, className, ...props }: AssetListColumnsProps): react_jsx_runtime.JSX.Element;
816
- /**
817
- * Compact trend badge pill with directional arrow.
818
- *
819
- * | direction | style |
820
- * |-----------|-----------------|
821
- * | `up` | green bg + text |
822
- * | `down` | red bg + text |
823
- * | `neutral` | muted bg + text |
824
- */
825
- declare function AssetTrendBadge({ direction, value, className, ...props }: AssetTrendBadgeProps): react_jsx_runtime.JSX.Element;
826
- /**
827
- * Single asset row — icon + name/symbol | trend badge | balance.
828
- *
829
- * Uses a three-column grid matching `AssetListColumns` layout.
830
- */
831
- declare function AssetListItem({ asset, name, symbol, trendDirection, trendValue, balance, balanceUsd, className, ...props }: AssetListItemProps): react_jsx_runtime.JSX.Element;
832
-
833
- type StrategyRisk = 'low' | 'medium' | 'high';
834
- interface StrategyListProps extends React$1.ComponentProps<'div'> {
835
- }
836
- interface StrategyListHeaderProps extends React$1.ComponentProps<'div'> {
837
- /** Optional back-navigation handler — renders a back chevron button */
838
- onBack?: () => void;
839
- /** Subtitle shown below the main title */
840
- subtitle?: string;
841
- }
842
- interface StrategyRiskBadgeProps extends React$1.ComponentProps<'span'> {
843
- risk: StrategyRisk;
844
- /** Override the default label for this risk level */
845
- label?: string;
846
- }
847
- interface StrategyListItemProps extends React$1.ComponentProps<'div'> {
848
- /** Strategy icon info passed to IconCircle */
849
- strategy: {
850
- name: string;
851
- color: string;
852
- iconUrl?: string;
853
- };
854
- /** Strategy display name, e.g. "Caixinha Dólar" */
855
- name: string;
856
- /** Network or sub-label, e.g. "Ethereum" */
857
- network?: string;
858
- /** Formatted yield value, e.g. "6.3%" */
859
- rendimento: string;
860
- /** Risk level shown as a badge */
861
- risk?: StrategyRisk;
862
- /** Called when the "Investir" button is clicked */
863
- onInvestir?: () => void;
864
- /** Called when the "Sacar" button is clicked */
865
- onSacar?: () => void;
866
- /** Whether to show the "Sacar" button (default: true) */
867
- showSacar?: boolean;
868
- }
869
- /**
870
- * Root container for the "Caixinhas" strategy list.
871
- *
872
- * Compose with sub-components:
873
- * ```tsx
874
- * <StrategyList>
875
- * <StrategyListHeader subtitle="Escolha onde investir" onBack={handleBack}>
876
- * Caixinhas
877
- * </StrategyListHeader>
878
- * <StrategyListItem
879
- * strategy={dollarIcon}
880
- * name="Caixinha Dólar"
881
- * network="Ethereum"
882
- * rendimento="6.3%"
883
- * risk="low"
884
- * onInvestir={handleInvestir}
885
- * />
886
- * </StrategyList>
887
- * ```
888
- */
889
- declare function StrategyList({ className, ...props }: StrategyListProps): react_jsx_runtime.JSX.Element;
890
- /**
891
- * Header section — title, optional subtitle, and optional back-chevron button.
892
- */
893
- declare function StrategyListHeader({ onBack, subtitle, children, className, ...props }: StrategyListHeaderProps): react_jsx_runtime.JSX.Element;
894
- /**
895
- * Risk level badge pill.
896
- *
897
- * | risk | colour |
898
- * |----------|--------|
899
- * | `low` | green |
900
- * | `medium` | amber |
901
- * | `high` | red |
902
- */
903
- declare function StrategyRiskBadge({ risk, label, className, ...props }: StrategyRiskBadgeProps): react_jsx_runtime.JSX.Element;
904
- /**
905
- * Single strategy card — icon + name + network, rendimento %, risk badge,
906
- * and "Investir" / "Sacar" action buttons.
907
- */
908
- declare function StrategyListItem({ strategy, name, network, rendimento, risk, onInvestir, onSacar, showSacar, className, ...props }: StrategyListItemProps): react_jsx_runtime.JSX.Element;
909
-
910
- interface TokenIconProps {
911
- token: {
912
- name: string;
913
- color: string;
914
- iconUrl?: string;
915
- };
916
- size?: number;
917
- badge?: {
918
- name: string;
919
- color: string;
920
- iconUrl?: string;
921
- };
922
- badgeSize?: number;
923
- className?: string;
924
- }
925
- /**
926
- * Token icon with an optional network badge overlaid at the bottom-right.
927
- * Wraps IconCircle — falls back to colored circle with initials when no iconUrl.
928
- */
929
- declare function TokenIcon({ token, size, badge, badgeSize, className }: TokenIconProps): react_jsx_runtime.JSX.Element;
930
-
931
- interface PercentageChipsProps {
932
- /** Percentage values — last item uses maxLabel. Default: [25, 50, 75, 100] */
933
- options?: number[];
934
- /** Label shown for the last (100 %) chip. Default: 'Máx.' */
935
- maxLabel?: string;
936
- /** Currently active percentage (null = none selected) */
937
- selected?: number | null;
938
- onSelect: (pct: number) => void;
939
- }
940
- /**
941
- * Row of percentage shortcut pills for the "from" token input.
942
- * Designed to be revealed via Framer Motion AnimatePresence in SwapPanel.
943
- */
944
- declare function PercentageChips({ options, maxLabel, selected, onSelect, }: PercentageChipsProps): react_jsx_runtime.JSX.Element;
945
-
946
- type NotifVariant = 'info' | 'warning' | 'error' | 'success';
947
- interface InlineNotificationProps {
948
- variant: NotifVariant;
949
- message: string;
950
- action?: {
951
- label: string;
952
- onClick: () => void;
953
- };
954
- onDismiss?: () => void;
955
- }
956
- /**
957
- * Compact inline message bar with a 3 px left accent stripe.
958
- * Use inside TokenInputCard or any card surface — not a floating toast.
959
- */
960
- declare function InlineNotification({ variant, message, action, onDismiss, }: InlineNotificationProps): react_jsx_runtime.JSX.Element;
961
-
962
- interface TokenSelectorToken {
963
- name: string;
964
- symbol: string;
965
- color: string;
966
- iconUrl?: string;
967
- network: string;
968
- networkColor?: string;
969
- networkIconUrl?: string;
970
- }
971
- interface TokenSelectorProps {
972
- token: TokenSelectorToken;
973
- onClick?: () => void;
974
- disabled?: boolean;
975
- }
976
- /**
977
- * Clickable area showing the selected token — icon, name, network label, and a
978
- * downward chevron. Occupies the left half of a TokenInputCard.
979
- */
980
- declare function TokenSelector({ token, onClick, disabled }: TokenSelectorProps): react_jsx_runtime.JSX.Element;
981
-
982
- interface AmountInputProps {
983
- value: string;
984
- onChange: (v: string) => void;
985
- /** e.g. '≈ $0.00' — shown below the amount in muted text */
986
- conversionUsd?: string;
987
- /** "to" field — shows a computed amount with no editing */
988
- readOnly?: boolean;
989
- disabled?: boolean;
990
- }
991
- /**
992
- * Large amount input occupying the right half of a TokenInputCard.
993
- * - 36 px semibold number, right-aligned
994
- * - Muted colour when value is empty / '0', primary otherwise
995
- * - USD conversion label appears below when provided
996
- * - inputMode="decimal" for mobile numeric pad
997
- */
998
- declare function AmountInput({ value, onChange, conversionUsd, readOnly, disabled, }: AmountInputProps): react_jsx_runtime.JSX.Element;
999
-
1000
- interface SwapDirectionButtonProps {
1001
- onClick?: () => void;
1002
- disabled?: boolean;
1003
- }
1004
- /**
1005
- * The ↓ button placed between the two TokenInputCards.
1006
- * Hovers with a Framer Motion rotate-180 animation to indicate direction swap.
1007
- * Negatively offset by the parent so it visually overlaps both cards.
1008
- */
1009
- declare function SwapDirectionButton({ onClick, disabled }: SwapDirectionButtonProps): react_jsx_runtime.JSX.Element;
1010
-
1011
- interface TokenInputCardProps {
1012
- token: TokenSelectorToken;
1013
- amount: string;
1014
- onAmountChange?: (v: string) => void;
1015
- /** e.g. '0' or '41' — shown as "Saldo: X SYMBOL" */
1016
- balance?: string;
1017
- balanceSymbol?: string;
1018
- /** e.g. '≈ $0.00' — forwarded to AmountInput */
1019
- conversionUsd?: string;
1020
- /** Opens the BlockchainAssetSelector */
1021
- onTokenSelect?: () => void;
1022
- /** True for the "to" card — amount is read-only */
1023
- readOnly?: boolean;
1024
- error?: 'insufficient_balance' | null;
1025
- /** Signals SwapPanel to show/hide PercentageChips */
1026
- onHoverChange?: (hovering: boolean) => void;
1027
- /** Optional slot rendered inside the card, below the balance row */
1028
- chipsSlot?: React$1.ReactNode;
1029
- }
1030
- /**
1031
- * Full input card: TokenSelector on the left + AmountInput on the right +
1032
- * balance row below. Turns red in the error='insufficient_balance' state and
1033
- * shows an InlineNotification with a "Adicionar via PIX" action.
1034
- */
1035
- declare function TokenInputCard({ token, amount, onAmountChange, balance, balanceSymbol, conversionUsd, onTokenSelect, readOnly, error, onHoverChange, chipsSlot, }: TokenInputCardProps): react_jsx_runtime.JSX.Element;
1036
-
1037
- type SwapFeedbackVariant = 'loading' | 'success' | 'error';
1038
-
1039
- interface SwapToken {
1040
- id: string;
1041
- name: string;
1042
- symbol: string;
1043
- color: string;
1044
- iconUrl?: string;
1045
- network: string;
1046
- networkColor?: string;
1047
- networkIconUrl?: string;
1048
- }
1049
- interface SwapPanelProps {
1050
- fromToken: SwapToken;
1051
- toToken: SwapToken;
1052
- fromAmount: string;
1053
- /** Computed / read-only amount shown in the "to" card */
1054
- toAmount: string;
1055
- onFromAmountChange: (v: string) => void;
1056
- /** Optional exact percentage callback for host integrations that need precise balance math */
1057
- onFromPercentageSelect?: (pct: number) => void;
1058
- onFromTokenSelect?: () => void;
1059
- onToTokenSelect?: () => void;
1060
- /** Called when the user clicks the direction-swap button */
1061
- onSwapTokens?: () => void;
1062
- fromBalance?: string;
1063
- fromBalanceSymbol?: string;
1064
- toBalance?: string;
1065
- toBalanceSymbol?: string;
1066
- fromConversionUsd?: string;
1067
- toConversionUsd?: string;
1068
- onSubmit?: () => void;
1069
- /** Default: 'Revisar Troca' */
1070
- submitLabel?: string;
1071
- /** Forces the submit CTA into a disabled state for host-driven validation */
1072
- submitDisabled?: boolean;
1073
- /** Clock icon — opens history */
1074
- onHistory?: () => void;
1075
- /** Opens advanced settings */
1076
- onAdvanced?: () => void;
1077
- loading?: boolean;
1078
- error?: 'insufficient_balance' | null;
1079
- /** When set, renders a glass-blur feedback overlay (loading / success / error) */
1080
- feedback?: {
1081
- variant: SwapFeedbackVariant;
1082
- title?: string;
1083
- subtitle?: string;
1084
- } | null;
1085
- }
1086
-
1087
- /**
1088
- * Full token swap form orchestrator.
1089
- *
1090
- * Built-in behaviour:
1091
- * - Hovering the "from" card reveals PercentageChips as an absolutely-positioned
1092
- * tooltip above the card (no layout shift). A 150 ms hide-delay lets the
1093
- * cursor travel from the card to the chips without them flickering away.
1094
- * - Clicking a % chip sets fromAmount = balance × pct / 100
1095
- * - SwapDirectionButton calls onSwapTokens
1096
- * - Submit button is disabled when amount is empty / '0' or loading is true
1097
- * - Submit button shows a spinner while loading
1098
- * - History button sits top-left, styled as CloseButton (icon-only, hover bg)
1099
- * - "Avançado" pill sits top-right with green outline; calls onAdvanced
1100
- */
1101
- 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;
1102
-
1103
- interface TransactionDetailRowProps {
1104
- /** Uppercase label — e.g. 'VALIDADE', 'SLIPPAGE' */
1105
- label: string;
1106
- /** Formatted value — e.g. '30 min', '0.5%' */
1107
- value: string;
1108
- /** Optional value colour override — data-driven hex, kept as style */
1109
- valueColor?: string;
1110
- /** Show a horizontal divider below this row (default false) */
1111
- divider?: boolean;
1112
- }
1113
- /**
1114
- * Single label + value row used inside TransactionDetails.
1115
- *
1116
- * Label: small, uppercase, letter-spaced, muted
1117
- * Value: semibold, primary colour (or custom override)
1118
- */
1119
- declare function TransactionDetailRow({ label, value, valueColor, divider, }: TransactionDetailRowProps): react_jsx_runtime.JSX.Element;
1120
-
1121
- interface TransactionDetailItem {
1122
- /** Row label — displayed uppercase, muted */
1123
- label: string;
1124
- /** Formatted value string */
1125
- value: string;
1126
- /** Optional colour override for value text */
1127
- valueColor?: string;
1128
- }
1129
- interface TransactionDetailsProps {
1130
- /** Panel heading — default: 'Detalhes da transação' */
1131
- title?: string;
1132
- /** Conversion subtitle, e.g. '9.682785 USDC = 0.003873 ETH' */
1133
- subtitle?: string;
1134
- /** List of detail rows */
1135
- items: TransactionDetailItem[];
1136
- /** Called when the ✕ button is pressed */
1137
- onClose?: () => void;
1138
- }
1139
- /**
1140
- * Transaction detail panel — sits beside the SwapPanel when "Avançado" is pressed.
1141
- */
1142
- declare function TransactionDetails({ title, subtitle, items, onClose, }: TransactionDetailsProps): react_jsx_runtime.JSX.Element;
1143
-
1144
495
  interface InfoRowProps {
1145
496
  children: React__default.ReactNode;
1146
497
  borderBottom?: boolean;
@@ -1969,4 +1320,4 @@ interface DeframeTheme {
1969
1320
  colors?: DeframeThemeColors;
1970
1321
  }
1971
1322
 
1972
- 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 };
1323
+ 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, 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, 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, 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, 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 };