@deframe-sdk/components 0.1.10 → 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 +91 -113
- package/dist/index.d.ts +91 -113
- package/dist/index.js +672 -747
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +674 -745
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1041 -934
- package/package.json +4 -1
package/dist/index.d.mts
CHANGED
|
@@ -51,27 +51,31 @@ interface WalletOption$1 {
|
|
|
51
51
|
id: string;
|
|
52
52
|
/** Display name of the wallet */
|
|
53
53
|
name: string;
|
|
54
|
-
/** Wallet icon
|
|
55
|
-
icon: string |
|
|
54
|
+
/** Wallet icon — image URL or React node */
|
|
55
|
+
icon: string | React__default.ReactNode;
|
|
56
56
|
/** Click handler for wallet selection */
|
|
57
57
|
onClick?: () => void;
|
|
58
58
|
}
|
|
59
59
|
interface ConnectWalletListProps$1 {
|
|
60
60
|
/** List of wallet options */
|
|
61
61
|
wallets: WalletOption$1[];
|
|
62
|
-
/**
|
|
62
|
+
/** Optional title shown above the list */
|
|
63
63
|
title?: string;
|
|
64
|
-
/**
|
|
64
|
+
/** Optional subtitle shown below the title */
|
|
65
65
|
subtitle?: string;
|
|
66
66
|
/** Additional CSS class names */
|
|
67
67
|
className?: string;
|
|
68
68
|
}
|
|
69
69
|
/**
|
|
70
|
-
* ConnectWalletList
|
|
71
|
-
*
|
|
70
|
+
* ConnectWalletList — headless list of wallet options with optional title and subtitle.
|
|
71
|
+
* No outer panel/card styling — embed inside your own container or use WalletConnectPanel.
|
|
72
72
|
*/
|
|
73
|
-
declare function ConnectWalletList({ wallets, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
|
|
73
|
+
declare function ConnectWalletList({ wallets, title, subtitle, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
|
|
74
74
|
|
|
75
|
+
/**
|
|
76
|
+
* WalletItem — individual tappable wallet row.
|
|
77
|
+
* Rounded-square icon + wallet name + chevron, themed with Hash design tokens.
|
|
78
|
+
*/
|
|
75
79
|
declare function WalletItem({ id, name, icon, onClick, className, }: WalletItemProps): react_jsx_runtime.JSX.Element;
|
|
76
80
|
|
|
77
81
|
interface WalletListContainerProps$1 {
|
|
@@ -81,11 +85,34 @@ interface WalletListContainerProps$1 {
|
|
|
81
85
|
className?: string;
|
|
82
86
|
}
|
|
83
87
|
/**
|
|
84
|
-
* WalletListContainer
|
|
85
|
-
* Provides consistent spacing and layout for wallet options
|
|
88
|
+
* WalletListContainer — vertical flex wrapper with consistent gap between wallet items.
|
|
86
89
|
*/
|
|
87
90
|
declare function WalletListContainer({ children, className, }: WalletListContainerProps$1): react_jsx_runtime.JSX.Element;
|
|
88
91
|
|
|
92
|
+
interface WalletConnectPanelProps {
|
|
93
|
+
/** List of wallet options to display */
|
|
94
|
+
wallets: WalletOption$1[];
|
|
95
|
+
/** Panel title. Defaults to "Conectar Carteira" */
|
|
96
|
+
title?: string;
|
|
97
|
+
/** Subtitle below the title. Defaults to the standard connect message */
|
|
98
|
+
subtitle?: string;
|
|
99
|
+
/** When provided, a "Sair" button appears in the header and calls this on click */
|
|
100
|
+
onClose?: () => void;
|
|
101
|
+
/** Additional CSS class names */
|
|
102
|
+
className?: string;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* WalletConnectPanel — "Conectar Carteira" macro compound component.
|
|
106
|
+
*
|
|
107
|
+
* Self-contained dark panel with:
|
|
108
|
+
* - Title + optional "Sair" close button
|
|
109
|
+
* - Muted subtitle
|
|
110
|
+
* - Vertical list of tappable WalletItem cards
|
|
111
|
+
*
|
|
112
|
+
* Themed via Hash design tokens (CSS vars).
|
|
113
|
+
*/
|
|
114
|
+
declare function WalletConnectPanel({ wallets, title, subtitle, onClose, className, }: WalletConnectPanelProps): react_jsx_runtime.JSX.Element;
|
|
115
|
+
|
|
89
116
|
interface ListItemProps extends ComponentProps<'li'> {
|
|
90
117
|
containerClassName?: string;
|
|
91
118
|
onClick?: () => void;
|
|
@@ -212,7 +239,7 @@ interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
212
239
|
as?: keyof React$1.JSX.IntrinsicElements;
|
|
213
240
|
}
|
|
214
241
|
interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
215
|
-
variant?: 'text-large' | 'text-medium' | 'text-small';
|
|
242
|
+
variant?: '[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]' | '[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]' | '[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]' | 'text-large' | 'text-medium' | 'text-small';
|
|
216
243
|
as?: keyof React$1.JSX.IntrinsicElements;
|
|
217
244
|
}
|
|
218
245
|
interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
@@ -304,10 +331,29 @@ interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
304
331
|
}
|
|
305
332
|
declare const Skeleton: React$1.FC<SkeletonProps>;
|
|
306
333
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
334
|
+
interface BannerNotificationProps$1 extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
335
|
+
/** Type of notification - inline (default) or toast */
|
|
336
|
+
type?: 'inline' | 'toast';
|
|
337
|
+
/** Variant type that determines colors and icon */
|
|
338
|
+
variant?: 'info' | 'warning' | 'error' | 'success';
|
|
339
|
+
/** The title of the banner */
|
|
340
|
+
title?: string;
|
|
341
|
+
/** The message to display in the banner */
|
|
342
|
+
message: string;
|
|
343
|
+
/** Position for toast notifications */
|
|
344
|
+
position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
345
|
+
/** Auto hide duration in milliseconds (default: 5000, set to 0 to disable) */
|
|
346
|
+
autoHideDuration?: number;
|
|
347
|
+
/** Control visibility for toast notifications */
|
|
348
|
+
show?: boolean;
|
|
349
|
+
/** Callback when notification is closed */
|
|
350
|
+
onClose?: () => void;
|
|
351
|
+
/** Whether to show the icon (default: true) */
|
|
352
|
+
showIcon?: boolean;
|
|
353
|
+
/** Custom icon to display */
|
|
354
|
+
icon?: React$1.ReactNode;
|
|
310
355
|
}
|
|
356
|
+
declare const BannerNotification: React$1.FC<BannerNotificationProps$1>;
|
|
311
357
|
|
|
312
358
|
interface BannerNotificationProps extends ComponentProps<'div'> {
|
|
313
359
|
type?: 'inline' | 'toast';
|
|
@@ -423,108 +469,28 @@ interface ActionSheetProps {
|
|
|
423
469
|
*
|
|
424
470
|
* @example
|
|
425
471
|
* <ActionSheet
|
|
426
|
-
*
|
|
427
|
-
*
|
|
428
|
-
*
|
|
429
|
-
*
|
|
430
|
-
*
|
|
472
|
+
* id="token-selector"
|
|
473
|
+
* currentActionSheetId={currentId}
|
|
474
|
+
* isOpen={isOpen}
|
|
475
|
+
* height="full"
|
|
476
|
+
* onClose={handleClose}
|
|
431
477
|
* >
|
|
432
|
-
*
|
|
433
|
-
*
|
|
434
|
-
*
|
|
435
|
-
*
|
|
436
|
-
*
|
|
478
|
+
* <div className="flex flex-col h-full bg-[var(--deframe-widget-color-bg-primary)] px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]">
|
|
479
|
+
* <h2>Select Token</h2>
|
|
480
|
+
* <Input placeholder="Search here..." />
|
|
481
|
+
* <ListItem>...</ListItem>
|
|
482
|
+
* </div>
|
|
437
483
|
* </ActionSheet>
|
|
438
484
|
*/
|
|
439
485
|
declare const ActionSheet: React$1.FC<ActionSheetProps>;
|
|
440
486
|
|
|
441
|
-
/**
|
|
442
|
-
* Theme color configuration for Deframe components
|
|
443
|
-
*/
|
|
444
|
-
interface DeframeThemeColors {
|
|
445
|
-
/** Primary brand color - used for buttons, links, accents */
|
|
446
|
-
brandPrimary?: string;
|
|
447
|
-
/** Secondary brand color - used for secondary accents */
|
|
448
|
-
brandSecondary?: string;
|
|
449
|
-
/** Main background color */
|
|
450
|
-
bgDefault?: string;
|
|
451
|
-
/** Subtle background color */
|
|
452
|
-
bgSubtle?: string;
|
|
453
|
-
/** Muted/disabled background color */
|
|
454
|
-
bgMuted?: string;
|
|
455
|
-
/** Primary text color */
|
|
456
|
-
textPrimary?: string;
|
|
457
|
-
/** Secondary text color */
|
|
458
|
-
textSecondary?: string;
|
|
459
|
-
/** Disabled text color */
|
|
460
|
-
textDisabled?: string;
|
|
461
|
-
/** Text color for dark backgrounds */
|
|
462
|
-
textInverse?: string;
|
|
463
|
-
/** Success state color */
|
|
464
|
-
stateSuccess?: string;
|
|
465
|
-
/** Error state color */
|
|
466
|
-
stateError?: string;
|
|
467
|
-
/** Warning state color */
|
|
468
|
-
stateWarning?: string;
|
|
469
|
-
}
|
|
470
|
-
/**
|
|
471
|
-
* Complete theme configuration for Deframe components
|
|
472
|
-
*/
|
|
473
|
-
interface DeframeTheme {
|
|
474
|
-
colors?: DeframeThemeColors;
|
|
475
|
-
}
|
|
476
|
-
/**
|
|
477
|
-
* Theme mode - controls light/dark appearance
|
|
478
|
-
*/
|
|
479
|
-
type ThemeMode = 'light' | 'dark' | 'auto';
|
|
480
|
-
/**
|
|
481
|
-
* Theme preset - predefined color schemes
|
|
482
|
-
*/
|
|
483
|
-
type ThemePreset = 'default' | 'cryptocontrol';
|
|
484
|
-
/**
|
|
485
|
-
* Structured theme configuration with mode, preset, and overrides
|
|
486
|
-
*/
|
|
487
|
-
interface DeframeThemeConfig {
|
|
488
|
-
/** Theme mode: 'light', 'dark', or 'auto' (follows system preference) */
|
|
489
|
-
mode?: ThemeMode;
|
|
490
|
-
/** Theme preset: 'default' or 'cryptocontrol' */
|
|
491
|
-
preset?: ThemePreset;
|
|
492
|
-
/** Custom color overrides for each mode */
|
|
493
|
-
overrides?: {
|
|
494
|
-
light?: DeframeTheme;
|
|
495
|
-
dark?: DeframeTheme;
|
|
496
|
-
};
|
|
497
|
-
}
|
|
498
|
-
/**
|
|
499
|
-
* Default theme values - these serve as fallbacks when no custom theme is provided
|
|
500
|
-
*/
|
|
501
|
-
declare const defaultThemeColors: Required<DeframeThemeColors>;
|
|
502
|
-
/**
|
|
503
|
-
* Dark mode theme values
|
|
504
|
-
*/
|
|
505
|
-
declare const darkThemeColors: Required<DeframeThemeColors>;
|
|
506
|
-
/**
|
|
507
|
-
* Cryptocontrol theme values
|
|
508
|
-
*/
|
|
509
|
-
declare const cryptocontrolThemeColors: Required<DeframeThemeColors>;
|
|
510
|
-
/**
|
|
511
|
-
* Convert theme colors to CSS variable style object
|
|
512
|
-
*/
|
|
513
|
-
declare function themeToCSS(theme?: DeframeTheme): React.CSSProperties;
|
|
514
|
-
|
|
515
487
|
interface DeframeComponentsProviderProps {
|
|
516
|
-
/** Theme preset: 'light' | 'dark' | 'cryptocontrol' (legacy) */
|
|
517
|
-
theme?: string;
|
|
518
|
-
/** Structured theme configuration (preferred) */
|
|
519
|
-
themeConfig?: DeframeThemeConfig;
|
|
520
|
-
/** Custom theme colors that override the preset */
|
|
521
|
-
customTheme?: DeframeTheme;
|
|
522
488
|
/** Optional extra className applied to the `.deframe-widget` root */
|
|
523
489
|
className?: string;
|
|
524
490
|
/** Child components */
|
|
525
491
|
children: React.ReactNode;
|
|
526
492
|
}
|
|
527
|
-
declare function DeframeComponentsProvider({
|
|
493
|
+
declare function DeframeComponentsProvider({ className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
|
|
528
494
|
|
|
529
495
|
interface InfoRowProps {
|
|
530
496
|
children: React__default.ReactNode;
|
|
@@ -622,14 +588,6 @@ interface DetailsHeaderProps {
|
|
|
622
588
|
}
|
|
623
589
|
declare const DetailsHeader: React__default.FC<DetailsHeaderProps>;
|
|
624
590
|
|
|
625
|
-
interface CloseButtonProps {
|
|
626
|
-
onClick?: () => void;
|
|
627
|
-
testId?: string;
|
|
628
|
-
ariaLabel?: string;
|
|
629
|
-
className?: string;
|
|
630
|
-
}
|
|
631
|
-
declare const CloseButton: React__default.FC<CloseButtonProps>;
|
|
632
|
-
|
|
633
591
|
interface HighRiskBadgeProps {
|
|
634
592
|
className?: string;
|
|
635
593
|
label?: string;
|
|
@@ -1342,4 +1300,24 @@ declare const ConfirmSwapButtonView: React__default.FC<ConfirmSwapButtonViewProp
|
|
|
1342
1300
|
|
|
1343
1301
|
type SwapValidationCode = 'NO_WALLET' | 'NO_CHAIN' | 'NO_TOKEN' | 'INVALID_TOKEN' | 'NO_AMOUNT' | 'AMOUNT_BELOW_MINIMUM' | 'INSUFFICIENT_BALANCE' | 'INVALID_AMOUNT' | 'VALID_SWAP';
|
|
1344
1302
|
|
|
1345
|
-
|
|
1303
|
+
interface DeframeThemeColors {
|
|
1304
|
+
brandPrimary?: string;
|
|
1305
|
+
brandSecondary?: string;
|
|
1306
|
+
bgDefault?: string;
|
|
1307
|
+
bgSubtle?: string;
|
|
1308
|
+
bgMuted?: string;
|
|
1309
|
+
bgRaised?: string;
|
|
1310
|
+
bgInverse?: string;
|
|
1311
|
+
textPrimary?: string;
|
|
1312
|
+
textSecondary?: string;
|
|
1313
|
+
textDisabled?: string;
|
|
1314
|
+
textInverse?: string;
|
|
1315
|
+
stateSuccess?: string;
|
|
1316
|
+
stateError?: string;
|
|
1317
|
+
stateWarning?: string;
|
|
1318
|
+
}
|
|
1319
|
+
interface DeframeTheme {
|
|
1320
|
+
colors?: DeframeThemeColors;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -51,27 +51,31 @@ interface WalletOption$1 {
|
|
|
51
51
|
id: string;
|
|
52
52
|
/** Display name of the wallet */
|
|
53
53
|
name: string;
|
|
54
|
-
/** Wallet icon
|
|
55
|
-
icon: string |
|
|
54
|
+
/** Wallet icon — image URL or React node */
|
|
55
|
+
icon: string | React__default.ReactNode;
|
|
56
56
|
/** Click handler for wallet selection */
|
|
57
57
|
onClick?: () => void;
|
|
58
58
|
}
|
|
59
59
|
interface ConnectWalletListProps$1 {
|
|
60
60
|
/** List of wallet options */
|
|
61
61
|
wallets: WalletOption$1[];
|
|
62
|
-
/**
|
|
62
|
+
/** Optional title shown above the list */
|
|
63
63
|
title?: string;
|
|
64
|
-
/**
|
|
64
|
+
/** Optional subtitle shown below the title */
|
|
65
65
|
subtitle?: string;
|
|
66
66
|
/** Additional CSS class names */
|
|
67
67
|
className?: string;
|
|
68
68
|
}
|
|
69
69
|
/**
|
|
70
|
-
* ConnectWalletList
|
|
71
|
-
*
|
|
70
|
+
* ConnectWalletList — headless list of wallet options with optional title and subtitle.
|
|
71
|
+
* No outer panel/card styling — embed inside your own container or use WalletConnectPanel.
|
|
72
72
|
*/
|
|
73
|
-
declare function ConnectWalletList({ wallets, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
|
|
73
|
+
declare function ConnectWalletList({ wallets, title, subtitle, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
|
|
74
74
|
|
|
75
|
+
/**
|
|
76
|
+
* WalletItem — individual tappable wallet row.
|
|
77
|
+
* Rounded-square icon + wallet name + chevron, themed with Hash design tokens.
|
|
78
|
+
*/
|
|
75
79
|
declare function WalletItem({ id, name, icon, onClick, className, }: WalletItemProps): react_jsx_runtime.JSX.Element;
|
|
76
80
|
|
|
77
81
|
interface WalletListContainerProps$1 {
|
|
@@ -81,11 +85,34 @@ interface WalletListContainerProps$1 {
|
|
|
81
85
|
className?: string;
|
|
82
86
|
}
|
|
83
87
|
/**
|
|
84
|
-
* WalletListContainer
|
|
85
|
-
* Provides consistent spacing and layout for wallet options
|
|
88
|
+
* WalletListContainer — vertical flex wrapper with consistent gap between wallet items.
|
|
86
89
|
*/
|
|
87
90
|
declare function WalletListContainer({ children, className, }: WalletListContainerProps$1): react_jsx_runtime.JSX.Element;
|
|
88
91
|
|
|
92
|
+
interface WalletConnectPanelProps {
|
|
93
|
+
/** List of wallet options to display */
|
|
94
|
+
wallets: WalletOption$1[];
|
|
95
|
+
/** Panel title. Defaults to "Conectar Carteira" */
|
|
96
|
+
title?: string;
|
|
97
|
+
/** Subtitle below the title. Defaults to the standard connect message */
|
|
98
|
+
subtitle?: string;
|
|
99
|
+
/** When provided, a "Sair" button appears in the header and calls this on click */
|
|
100
|
+
onClose?: () => void;
|
|
101
|
+
/** Additional CSS class names */
|
|
102
|
+
className?: string;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* WalletConnectPanel — "Conectar Carteira" macro compound component.
|
|
106
|
+
*
|
|
107
|
+
* Self-contained dark panel with:
|
|
108
|
+
* - Title + optional "Sair" close button
|
|
109
|
+
* - Muted subtitle
|
|
110
|
+
* - Vertical list of tappable WalletItem cards
|
|
111
|
+
*
|
|
112
|
+
* Themed via Hash design tokens (CSS vars).
|
|
113
|
+
*/
|
|
114
|
+
declare function WalletConnectPanel({ wallets, title, subtitle, onClose, className, }: WalletConnectPanelProps): react_jsx_runtime.JSX.Element;
|
|
115
|
+
|
|
89
116
|
interface ListItemProps extends ComponentProps<'li'> {
|
|
90
117
|
containerClassName?: string;
|
|
91
118
|
onClick?: () => void;
|
|
@@ -212,7 +239,7 @@ interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
212
239
|
as?: keyof React$1.JSX.IntrinsicElements;
|
|
213
240
|
}
|
|
214
241
|
interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
215
|
-
variant?: 'text-large' | 'text-medium' | 'text-small';
|
|
242
|
+
variant?: '[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]' | '[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]' | '[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]' | 'text-large' | 'text-medium' | 'text-small';
|
|
216
243
|
as?: keyof React$1.JSX.IntrinsicElements;
|
|
217
244
|
}
|
|
218
245
|
interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
@@ -304,10 +331,29 @@ interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
304
331
|
}
|
|
305
332
|
declare const Skeleton: React$1.FC<SkeletonProps>;
|
|
306
333
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
334
|
+
interface BannerNotificationProps$1 extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
335
|
+
/** Type of notification - inline (default) or toast */
|
|
336
|
+
type?: 'inline' | 'toast';
|
|
337
|
+
/** Variant type that determines colors and icon */
|
|
338
|
+
variant?: 'info' | 'warning' | 'error' | 'success';
|
|
339
|
+
/** The title of the banner */
|
|
340
|
+
title?: string;
|
|
341
|
+
/** The message to display in the banner */
|
|
342
|
+
message: string;
|
|
343
|
+
/** Position for toast notifications */
|
|
344
|
+
position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
345
|
+
/** Auto hide duration in milliseconds (default: 5000, set to 0 to disable) */
|
|
346
|
+
autoHideDuration?: number;
|
|
347
|
+
/** Control visibility for toast notifications */
|
|
348
|
+
show?: boolean;
|
|
349
|
+
/** Callback when notification is closed */
|
|
350
|
+
onClose?: () => void;
|
|
351
|
+
/** Whether to show the icon (default: true) */
|
|
352
|
+
showIcon?: boolean;
|
|
353
|
+
/** Custom icon to display */
|
|
354
|
+
icon?: React$1.ReactNode;
|
|
310
355
|
}
|
|
356
|
+
declare const BannerNotification: React$1.FC<BannerNotificationProps$1>;
|
|
311
357
|
|
|
312
358
|
interface BannerNotificationProps extends ComponentProps<'div'> {
|
|
313
359
|
type?: 'inline' | 'toast';
|
|
@@ -423,108 +469,28 @@ interface ActionSheetProps {
|
|
|
423
469
|
*
|
|
424
470
|
* @example
|
|
425
471
|
* <ActionSheet
|
|
426
|
-
*
|
|
427
|
-
*
|
|
428
|
-
*
|
|
429
|
-
*
|
|
430
|
-
*
|
|
472
|
+
* id="token-selector"
|
|
473
|
+
* currentActionSheetId={currentId}
|
|
474
|
+
* isOpen={isOpen}
|
|
475
|
+
* height="full"
|
|
476
|
+
* onClose={handleClose}
|
|
431
477
|
* >
|
|
432
|
-
*
|
|
433
|
-
*
|
|
434
|
-
*
|
|
435
|
-
*
|
|
436
|
-
*
|
|
478
|
+
* <div className="flex flex-col h-full bg-[var(--deframe-widget-color-bg-primary)] px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]">
|
|
479
|
+
* <h2>Select Token</h2>
|
|
480
|
+
* <Input placeholder="Search here..." />
|
|
481
|
+
* <ListItem>...</ListItem>
|
|
482
|
+
* </div>
|
|
437
483
|
* </ActionSheet>
|
|
438
484
|
*/
|
|
439
485
|
declare const ActionSheet: React$1.FC<ActionSheetProps>;
|
|
440
486
|
|
|
441
|
-
/**
|
|
442
|
-
* Theme color configuration for Deframe components
|
|
443
|
-
*/
|
|
444
|
-
interface DeframeThemeColors {
|
|
445
|
-
/** Primary brand color - used for buttons, links, accents */
|
|
446
|
-
brandPrimary?: string;
|
|
447
|
-
/** Secondary brand color - used for secondary accents */
|
|
448
|
-
brandSecondary?: string;
|
|
449
|
-
/** Main background color */
|
|
450
|
-
bgDefault?: string;
|
|
451
|
-
/** Subtle background color */
|
|
452
|
-
bgSubtle?: string;
|
|
453
|
-
/** Muted/disabled background color */
|
|
454
|
-
bgMuted?: string;
|
|
455
|
-
/** Primary text color */
|
|
456
|
-
textPrimary?: string;
|
|
457
|
-
/** Secondary text color */
|
|
458
|
-
textSecondary?: string;
|
|
459
|
-
/** Disabled text color */
|
|
460
|
-
textDisabled?: string;
|
|
461
|
-
/** Text color for dark backgrounds */
|
|
462
|
-
textInverse?: string;
|
|
463
|
-
/** Success state color */
|
|
464
|
-
stateSuccess?: string;
|
|
465
|
-
/** Error state color */
|
|
466
|
-
stateError?: string;
|
|
467
|
-
/** Warning state color */
|
|
468
|
-
stateWarning?: string;
|
|
469
|
-
}
|
|
470
|
-
/**
|
|
471
|
-
* Complete theme configuration for Deframe components
|
|
472
|
-
*/
|
|
473
|
-
interface DeframeTheme {
|
|
474
|
-
colors?: DeframeThemeColors;
|
|
475
|
-
}
|
|
476
|
-
/**
|
|
477
|
-
* Theme mode - controls light/dark appearance
|
|
478
|
-
*/
|
|
479
|
-
type ThemeMode = 'light' | 'dark' | 'auto';
|
|
480
|
-
/**
|
|
481
|
-
* Theme preset - predefined color schemes
|
|
482
|
-
*/
|
|
483
|
-
type ThemePreset = 'default' | 'cryptocontrol';
|
|
484
|
-
/**
|
|
485
|
-
* Structured theme configuration with mode, preset, and overrides
|
|
486
|
-
*/
|
|
487
|
-
interface DeframeThemeConfig {
|
|
488
|
-
/** Theme mode: 'light', 'dark', or 'auto' (follows system preference) */
|
|
489
|
-
mode?: ThemeMode;
|
|
490
|
-
/** Theme preset: 'default' or 'cryptocontrol' */
|
|
491
|
-
preset?: ThemePreset;
|
|
492
|
-
/** Custom color overrides for each mode */
|
|
493
|
-
overrides?: {
|
|
494
|
-
light?: DeframeTheme;
|
|
495
|
-
dark?: DeframeTheme;
|
|
496
|
-
};
|
|
497
|
-
}
|
|
498
|
-
/**
|
|
499
|
-
* Default theme values - these serve as fallbacks when no custom theme is provided
|
|
500
|
-
*/
|
|
501
|
-
declare const defaultThemeColors: Required<DeframeThemeColors>;
|
|
502
|
-
/**
|
|
503
|
-
* Dark mode theme values
|
|
504
|
-
*/
|
|
505
|
-
declare const darkThemeColors: Required<DeframeThemeColors>;
|
|
506
|
-
/**
|
|
507
|
-
* Cryptocontrol theme values
|
|
508
|
-
*/
|
|
509
|
-
declare const cryptocontrolThemeColors: Required<DeframeThemeColors>;
|
|
510
|
-
/**
|
|
511
|
-
* Convert theme colors to CSS variable style object
|
|
512
|
-
*/
|
|
513
|
-
declare function themeToCSS(theme?: DeframeTheme): React.CSSProperties;
|
|
514
|
-
|
|
515
487
|
interface DeframeComponentsProviderProps {
|
|
516
|
-
/** Theme preset: 'light' | 'dark' | 'cryptocontrol' (legacy) */
|
|
517
|
-
theme?: string;
|
|
518
|
-
/** Structured theme configuration (preferred) */
|
|
519
|
-
themeConfig?: DeframeThemeConfig;
|
|
520
|
-
/** Custom theme colors that override the preset */
|
|
521
|
-
customTheme?: DeframeTheme;
|
|
522
488
|
/** Optional extra className applied to the `.deframe-widget` root */
|
|
523
489
|
className?: string;
|
|
524
490
|
/** Child components */
|
|
525
491
|
children: React.ReactNode;
|
|
526
492
|
}
|
|
527
|
-
declare function DeframeComponentsProvider({
|
|
493
|
+
declare function DeframeComponentsProvider({ className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
|
|
528
494
|
|
|
529
495
|
interface InfoRowProps {
|
|
530
496
|
children: React__default.ReactNode;
|
|
@@ -622,14 +588,6 @@ interface DetailsHeaderProps {
|
|
|
622
588
|
}
|
|
623
589
|
declare const DetailsHeader: React__default.FC<DetailsHeaderProps>;
|
|
624
590
|
|
|
625
|
-
interface CloseButtonProps {
|
|
626
|
-
onClick?: () => void;
|
|
627
|
-
testId?: string;
|
|
628
|
-
ariaLabel?: string;
|
|
629
|
-
className?: string;
|
|
630
|
-
}
|
|
631
|
-
declare const CloseButton: React__default.FC<CloseButtonProps>;
|
|
632
|
-
|
|
633
591
|
interface HighRiskBadgeProps {
|
|
634
592
|
className?: string;
|
|
635
593
|
label?: string;
|
|
@@ -1342,4 +1300,24 @@ declare const ConfirmSwapButtonView: React__default.FC<ConfirmSwapButtonViewProp
|
|
|
1342
1300
|
|
|
1343
1301
|
type SwapValidationCode = 'NO_WALLET' | 'NO_CHAIN' | 'NO_TOKEN' | 'INVALID_TOKEN' | 'NO_AMOUNT' | 'AMOUNT_BELOW_MINIMUM' | 'INSUFFICIENT_BALANCE' | 'INVALID_AMOUNT' | 'VALID_SWAP';
|
|
1344
1302
|
|
|
1345
|
-
|
|
1303
|
+
interface DeframeThemeColors {
|
|
1304
|
+
brandPrimary?: string;
|
|
1305
|
+
brandSecondary?: string;
|
|
1306
|
+
bgDefault?: string;
|
|
1307
|
+
bgSubtle?: string;
|
|
1308
|
+
bgMuted?: string;
|
|
1309
|
+
bgRaised?: string;
|
|
1310
|
+
bgInverse?: string;
|
|
1311
|
+
textPrimary?: string;
|
|
1312
|
+
textSecondary?: string;
|
|
1313
|
+
textDisabled?: string;
|
|
1314
|
+
textInverse?: string;
|
|
1315
|
+
stateSuccess?: string;
|
|
1316
|
+
stateError?: string;
|
|
1317
|
+
stateWarning?: string;
|
|
1318
|
+
}
|
|
1319
|
+
interface DeframeTheme {
|
|
1320
|
+
colors?: DeframeThemeColors;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
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 };
|