@deframe-sdk/components 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,556 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
+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;
+
+/** Primary UI component for user interaction */
+declare function PercentageButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Primary UI component for user interaction - uses brand-primary color for theming */
+declare function PrimaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Primary UI component for user interaction */
+declare function SecondaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Primary UI component for user interaction */
+declare function TertiaryButton({ children, disabled, className, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    /**
+     * The content of the button
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Type of the button
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+
+declare function Input({ label, error, placeholder, type, repassword, disabled, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Label for the input (optional, for accessibility)
+     */
+    label?: string;
+    /**
+     * Error message to display below
+     */
+    error?: string;
+    /**
+     * Helper text (non-error)
+     */
+    helperText?: string;
+    /**
+     * Link for repassword
+     */
+    repassword?: string;
+}
+
+interface ListItemProps {
+    children: React__default.ReactNode;
+    /**
+     * Applies to the inner content wrapper
+     */
+    className?: string;
+    /**
+     * Applies to the outer bordered container
+     */
+    containerClassName?: string;
+    onClick?: () => void;
+}
+declare const ListItem: React__default.FC<ListItemProps>;
+declare const ListItemLeftSide: React__default.FC<{
+    children: React__default.ReactNode;
+    className?: string;
+}>;
+declare const ListItemContent: React__default.FC<{
+    children: React__default.ReactNode;
+    className?: string;
+}>;
+declare const ListItemRightSide: React__default.FC<{
+    children: React__default.ReactNode;
+    className?: string;
+}>;
+
+interface WalletOption {
+    /** Unique identifier for the wallet */
+    id: string;
+    /** Display name of the wallet */
+    name: string;
+    /** Wallet icon - can be an image URL or React component */
+    icon: string | React.ReactNode;
+    /** Click handler for wallet selection */
+    onClick?: () => void;
+}
+interface ConnectWalletListProps {
+    /** List of wallet options */
+    wallets: WalletOption[];
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * ConnectWalletList - Displays a list of wallet options for connection
+ * Includes title, subtitle, and clickable wallet items
+ */
+declare function ConnectWalletList({ wallets, className, }: ConnectWalletListProps): react_jsx_runtime.JSX.Element;
+
+interface WalletItemProps {
+    /** Unique identifier for the wallet */
+    id: string;
+    /** Display name of the wallet */
+    name: string;
+    /** Wallet icon - can be an image URL or React component */
+    icon: string | React.ReactNode;
+    /** Click handler for wallet selection */
+    onClick?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * WalletItem - Individual wallet button component
+ * Displays a clickable wallet option with icon, name, and chevron
+ */
+declare function WalletItem({ id, name, icon, onClick, className, }: WalletItemProps): react_jsx_runtime.JSX.Element;
+
+interface WalletListContainerProps {
+    /** Child components (typically WalletItem components) */
+    children: ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * WalletListContainer - Container wrapper for wallet list items
+ * Provides consistent spacing and layout for wallet options
+ */
+declare function WalletListContainer({ children, className, }: WalletListContainerProps): react_jsx_runtime.JSX.Element;
+
+/** Flexible currency display component supporting fiat and crypto */
+declare function Currency(props: CurrencyProps | FiatProps): react_jsx_runtime.JSX.Element;
+
+type CurrencyType = 'USD' | 'BRL' | 'EUR' | 'BTC' | 'ETH' | 'USDC' | 'USDT';
+interface FiatProps {
+    /**
+     * The numeric amount to display
+     */
+    amount: string;
+    /**
+     * The USD value of the amount
+     */
+    usdValue: string;
+    /**
+     * Alignment of the display
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Size variant
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+interface CurrencyProps {
+    /**
+     * The numeric amount to display
+     */
+    amount: string;
+    /**
+     * Currency type
+     */
+    currency?: CurrencyType;
+    /**
+     * Secondary amount (e.g., USD value for crypto)
+     */
+    secondaryAmount?: string;
+    /**
+     * Secondary currency type
+     */
+    secondaryCurrency?: CurrencyType;
+    /**
+     * Alignment of the display
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Size variant
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Show currency symbol
+     */
+    showSymbol?: boolean;
+    /**
+     * Show currency label (e.g., USD, BRL)
+     */
+    showLabel?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+
+interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
+    as?: keyof React$1.JSX.IntrinsicElements;
+    variantClass?: string;
+}
+/**
+ * Base Text component used internally by other text variants.
+ * Handles tag selection, base font, and class merging.
+ */
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const accentVariants: {
+    readonly 'accent-large': "text-[15px] leading-[140%] font-semibold";
+    readonly 'accent-medium': "text-[14px] leading-[140%] font-semibold";
+    readonly 'accent-small': "text-[12px] leading-[140%] font-semibold";
+};
+interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
+    variant?: keyof typeof accentVariants;
+    as?: keyof React$1.JSX.IntrinsicElements;
+}
+declare const TextAccent: React$1.ForwardRefExoticComponent<TextAccentProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const bodyVariants: {
+    readonly 'text-large': "text-[15px] leading-[140%] font-normal";
+    readonly 'text-medium': "text-[14px] leading-[140%] font-normal";
+    readonly 'text-small': "text-[12px] leading-[140%] font-normal";
+};
+interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
+    variant?: keyof typeof bodyVariants;
+    as?: keyof React$1.JSX.IntrinsicElements;
+}
+declare const TextBody: React$1.ForwardRefExoticComponent<TextBodyProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const headingVariants: {
+    readonly 'h-large': "text-[56px] leading-[100%] tracking-[0] font-extrabold";
+    readonly h1: "text-[40px] leading-[110%] font-extrabold";
+    readonly h2: "text-[28px] leading-[130%] font-extrabold";
+    readonly h3: "text-[22px] leading-[120%] font-extrabold";
+    readonly h4: "text-[18px] leading-[120%] font-extrabold";
+    readonly h5: "text-[16px] leading-[120%] font-bold";
+};
+interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
+    variant?: keyof typeof headingVariants;
+    as?: keyof React$1.JSX.IntrinsicElements;
+}
+declare const TextHeading: React$1.ForwardRefExoticComponent<TextHeadingProps & React$1.RefAttributes<HTMLElement>>;
+
+/** Link component for navigation and external links */
+declare function Link({ children, href, className, target, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Title component for headings and page titles
+ * This is an alias for TextHeading with h1 variant as default
+ */
+declare function Title({ variant, ...props }: TextHeadingProps): react_jsx_runtime.JSX.Element;
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * The URL to link to
+     */
+    href: string;
+    /**
+     * The content of the link
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+
+type TabsVariant = 'primary' | 'secondary' | 'default' | 'light' | 'medium' | 'dark' | 'header';
+interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    variant?: TabsVariant;
+}
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface TabsListProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    icon?: React$1.ReactNode;
+}
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare const TabsContent: React$1.ForwardRefExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    children: React$1.ReactNode;
+    className?: string;
+}
+interface SelectTriggerProps {
+    placeholder?: string;
+    className?: string;
+    children?: React$1.ReactNode;
+    _isOpen?: boolean;
+    _disabled?: boolean;
+    _onToggle?: () => void;
+}
+interface SelectContentProps {
+    className?: string;
+    children: React$1.ReactNode;
+    _isOpen?: boolean;
+    _value?: string;
+    _onSelect?: (value: string) => void;
+    _highlightedIndex?: number;
+    _setHighlightedIndex?: (index: number) => void;
+}
+interface SelectItemProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children: React$1.ReactNode;
+    _index?: number;
+    _isSelected?: boolean;
+    _isHighlighted?: boolean;
+    _onSelect?: (value: string) => void;
+    _onHighlight?: (index: number) => void;
+}
+declare const Select: React$1.FC<SelectProps>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLUListElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<HTMLLIElement>>;
+
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Width of the skeleton block (px, %, rem, etc.) */
+    width?: string | number;
+    /** Height of the skeleton block (px, %, rem, etc.) */
+    height?: string | number;
+    /** Shape of the skeleton */
+    variant?: 'rect' | 'circle' | 'text';
+    /** Enables shimmer animation */
+    shimmer?: boolean;
+    /** Custom background color (Tailwind classes) */
+    colorClass?: string;
+}
+declare const Skeleton: React$1.FC<SkeletonProps>;
+
+interface BannerNotificationProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Type of notification - inline (default) or toast */
+    type?: 'inline' | 'toast';
+    /** Variant type that determines colors and icon */
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    /** The title of the banner */
+    title?: string;
+    /** The message to display in the banner */
+    message: string;
+    /** Position for toast notifications */
+    position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /** Auto hide duration in milliseconds (default: 5000, set to 0 to disable) */
+    autoHideDuration?: number;
+    /** Control visibility for toast notifications */
+    show?: boolean;
+    /** Callback when notification is closed */
+    onClose?: () => void;
+}
+declare const BannerNotification: React$1.FC<BannerNotificationProps>;
+
+interface AddressDisplayProps {
+    /** The full address to display */
+    address: string;
+    /** Callback when copy button is clicked */
+    onCopy?: (address: string) => void;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom className for the text */
+    textClassName?: string;
+    /** Show copy button */
+    showCopyButton?: boolean;
+}
+declare const AddressDisplay: React$1.FC<AddressDisplayProps>;
+
+interface DetailItem {
+    /** Label for the detail row */
+    label: string;
+    /** Value to display */
+    value: string | React$1.ReactNode;
+    /** Optional custom className for the value */
+    valueClassName?: string;
+    /** Optional custom className for the label */
+    labelClassName?: string;
+}
+interface SummaryDetailsProps {
+    /** Title displayed in the summary header */
+    title: string;
+    /** Array of detail items to render */
+    items: DetailItem[];
+    /** Whether the details are open by default */
+    defaultOpen?: boolean;
+    /** Custom className for the details container */
+    className?: string;
+    /** Custom className for the summary header */
+    summaryClassName?: string;
+    /** Custom className for the content area */
+    contentClassName?: string;
+    /** Show dividers between items */
+    showDividers?: boolean;
+}
+declare const SummaryDetails: React$1.FC<SummaryDetailsProps>;
+
+interface ActionSheetProps {
+    /** Unique identifier for this action sheet */
+    id: string;
+    /** Current action sheet ID from state */
+    currentActionSheetId: string | null;
+    /** Whether the action sheet is open */
+    isOpen: boolean;
+    /** Function to close the action sheet */
+    onClose: () => void;
+    /** Custom content to render */
+    children: React$1.ReactNode;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom className for the content area */
+    contentClassName?: string;
+    /** Position of the action sheet */
+    position?: 'bottom' | 'center';
+    /** Height of the sheet */
+    height?: 'auto' | 'full' | 'half';
+    /** Whether clicking the backdrop should close the sheet (default: true) */
+    closeOnBackdropClick?: boolean;
+}
+/**
+ * ActionSheet - A flexible bottom sheet / modal component
+ *
+ * Pure custom content mode for maximum flexibility.
+ * Compose your content using existing library components.
+ *
+ * Features:
+ * - Smooth framer-motion animations with spring physics
+ * - Multiple height options (auto, full, half)
+ * - Position options (bottom, center)
+ * - Dark mode support via CSS custom properties
+ * - Keyboard navigation (ESC to close)
+ * - Backdrop click to dismiss
+ * - ARIA labels for accessibility
+ *
+ * @example
+ * <ActionSheet
+ *   id="token-selector"
+ *   currentActionSheetId={currentId}
+ *   isOpen={isOpen}
+ *   height="full"
+ *   onClose={handleClose}
+ * >
+ *   <div className="flex flex-col h-full bg-black p-6">
+ *     <h2>Select Token</h2>
+ *     <Input placeholder="Search here..." />
+ *     <ListItem>...</ListItem>
+ *   </div>
+ * </ActionSheet>
+ */
+declare const ActionSheet: React$1.FC<ActionSheetProps>;
+
+/**
+ * Theme color configuration for Deframe components
+ */
+interface DeframeThemeColors {
+    /** Primary brand color - used for buttons, links, accents */
+    brandPrimary?: string;
+    /** Secondary brand color - used for secondary accents */
+    brandSecondary?: string;
+    /** Main background color */
+    bgDefault?: string;
+    /** Subtle background color */
+    bgSubtle?: string;
+    /** Muted/disabled background color */
+    bgMuted?: string;
+    /** Primary text color */
+    textPrimary?: string;
+    /** Secondary text color */
+    textSecondary?: string;
+    /** Disabled text color */
+    textDisabled?: string;
+    /** Text color for dark backgrounds */
+    textInverse?: string;
+    /** Success state color */
+    stateSuccess?: string;
+    /** Error state color */
+    stateError?: string;
+    /** Warning state color */
+    stateWarning?: string;
+}
+/**
+ * Complete theme configuration for Deframe components
+ */
+interface DeframeTheme {
+    colors?: DeframeThemeColors;
+}
+/**
+ * Theme mode - controls light/dark appearance
+ */
+type ThemeMode = 'light' | 'dark' | 'auto';
+/**
+ * Theme preset - predefined color schemes
+ */
+type ThemePreset = 'default' | 'cryptocontrol';
+/**
+ * Structured theme configuration with mode, preset, and overrides
+ */
+interface DeframeThemeConfig {
+    /** Theme mode: 'light', 'dark', or 'auto' (follows system preference) */
+    mode?: ThemeMode;
+    /** Theme preset: 'default' or 'cryptocontrol' */
+    preset?: ThemePreset;
+    /** Custom color overrides for each mode */
+    overrides?: {
+        light?: DeframeTheme;
+        dark?: DeframeTheme;
+    };
+}
+/**
+ * Default theme values - these serve as fallbacks when no custom theme is provided
+ */
+declare const defaultThemeColors: Required<DeframeThemeColors>;
+/**
+ * Dark mode theme values
+ */
+declare const darkThemeColors: Required<DeframeThemeColors>;
+/**
+ * Cryptocontrol theme values
+ */
+declare const cryptocontrolThemeColors: Required<DeframeThemeColors>;
+/**
+ * Convert theme colors to CSS variable style object
+ */
+declare function themeToCSS(theme?: DeframeTheme): React.CSSProperties;
+
+interface DeframeComponentsProviderProps {
+    /** Theme preset: 'light' | 'dark' | 'cryptocontrol' (legacy) */
+    theme?: string;
+    /** Structured theme configuration (preferred) */
+    themeConfig?: DeframeThemeConfig;
+    /** Custom theme colors that override the preset */
+    customTheme?: DeframeTheme;
+    /** Optional extra className applied to the `.deframe-widget` root */
+    className?: string;
+    /** Child components */
+    children: React.ReactNode;
+}
+declare function DeframeComponentsProvider({ theme, themeConfig, customTheme, className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, BannerNotification, type BannerNotificationProps, type ButtonProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DeframeThemeConfig, type DetailItem, Currency as Fiat, type FiatProps, Input, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, PercentageButton, PrimaryButton, SecondaryButton, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, SummaryDetails, type SummaryDetailsProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, type TextProps, type ThemeMode, type ThemePreset, Title, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type ConnectWalletListProps as WalletListProps, type WalletOption, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };