@funkit/connect 8.2.0 → 8.2.1-next.2

package/dist/components/Dialog/Dialog.d.ts

@@ -19,11 +19,13 @@ interface DialogProps {
     /** Whether the transition animation should be used on open/close */
     withTransition?: boolean;
     testId?: string;
+    /** Whether to use the fanatics bottom sheet style on mobile */
+    isFanaticsBottomSheet?: boolean;
 }
 /**
  * Dialog components (title, content, bottom bar) must be rendered as direct children of Dialog for correct scrolling behavior
  */
-export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withoutBottomPadding, withTransition, testId, }: DialogProps): React.ReactPortal | null;
+export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withoutBottomPadding, withTransition, testId, isFanaticsBottomSheet, }: DialogProps): React.ReactPortal | null;
 export declare namespace Dialog {
     var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, className, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, paddingLeft, paddingBottom, paddingTop, className, withTopDivider, withBottomDivider, id, withoutInternalPadding, ...boxProps }: DialogContentProps) => React.JSX.Element;

package/dist/components/Dialog/DialogContent.css.d.ts

@@ -12,6 +12,15 @@ export declare const dialogWide: string;
 export declare const withoutSidePadding: string;
 export declare const withoutBottomPadding: string;
 export declare const dialogMobile: string;
+/**
+ * Fanatics-specific bottom sheet style for mobile
+ * - No margins from sides/bottom (full width)
+ * - No border radius on bottom corners (only top)
+ * - Side paddings 20px instead of 24
+ * - Max height 80% of viewport
+ * - Internal scrolling when content exceeds height
+ */
+export declare const dialogFanaticsBottomSheet: string;
 export declare const scrollContent: string;
 export declare const scrollbarHidden: string;
 export declare const fullHeightContent: string;

package/dist/components/FunCheckoutHistory/FunDirectExecutionHistoryBottomBar.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { FunButtonProps } from '../../components/FunButton/FunButton';
+interface FunDirectExecutionHistoryBottomBarProps {
+    isProcessing: boolean;
+    isLoaded: boolean;
+    onClose?: () => void;
+    actionButtonProps?: FunButtonProps;
+}
+export declare const FunDirectExecutionHistoryBottomBar: FC<FunDirectExecutionHistoryBottomBarProps>;
+export {};

package/dist/components/FunInput/FunInput.d.ts

@@ -33,6 +33,10 @@ export interface FunInputProps<T = HTMLInputElement | HTMLTextAreaElement> {
     allowMultiline?: T extends HTMLInputElement ? false : true;
     /** Remove default transitions from the input wrapper and base styles. Defaults to false. */
     ignoreBaseTransitions?: boolean;
+    /** Color for decimal digits. When specified, decimal portion will be rendered in this color. */
+    decimalsColor?: BoxProps['color'];
+    /** Decimal separator character based on locale (e.g., '.' for en-US, ',' for de-DE). Required for decimalsColor to work. */
+    decimalSeparator?: string;
     testId?: string;
 }
 export type FunInputChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;

package/dist/components/FunOptionBox/FunOptionBox.css.d.ts

@@ -1 +1 @@
-export declare const funOptionBoxStyle: Record<"baseStyle" | "compactListStyle" | "defaultBorder" | "transparentBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "activeBackground" | "uninteractiveBackground", string>;
+export declare const funOptionBoxStyle: Record<"activeBackground" | "baseStyle" | "compactListStyle" | "defaultBorder" | "transparentBorder" | "activeBorder" | "disabledOptionBorder" | "defaultBackground" | "uninteractiveBackground", string>;

package/dist/components/FunPayments/FunPaymentMethods.d.ts

@@ -1,5 +1,12 @@
 import React, { type ReactNode } from 'react';
+import { type FunkitPaymentMethodIconsConfig } from '../../providers/FunkitConfigContext';
 import { PaymentMethod, type PaymentMethodBrokerageInfo, type PaymentMethodVirtualBankInfo } from '../../domains/paymentMethods';
+/**
+ * Get a custom icon passed in from UI customization config
+ * These icons are passed in from client to support enhanced branding+design
+ * Called "value icon" in the context of FunPaymentMethodItem
+ */
+export declare function getIconFromUiConfig(paymentMethod: PaymentMethod, iconConfig: FunkitPaymentMethodIconsConfig | undefined, defaultIconSize?: number): ReactNode | undefined;
 export declare const getDynamicValueIconComponent: () => React.JSX.Element;
 export declare function SupportedChainList({ chainIdList, iconSize, style, }: {
     chainIdList: string[];

package/dist/components/FunSelectBrokerage/FunBrokerageItem.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { type TextProps } from '../Text/Text';
 export interface FunBrokerageItemProps {
     exchangeName: string;
     exchangeIcon: React.ReactNode;
     hasActiveConnection: boolean;
     badgeText?: string;
     disabled?: boolean;
+    fontSize?: TextProps['size'];
+    fontWeight?: TextProps['weight'];
 }
-export declare const FunBrokerageItem: ({ exchangeName, exchangeIcon, hasActiveConnection, badgeText, disabled, }: FunBrokerageItemProps) => React.JSX.Element;
+export declare const FunBrokerageItem: ({ exchangeName, exchangeIcon, hasActiveConnection, badgeText, disabled, fontSize, fontWeight, }: FunBrokerageItemProps) => React.JSX.Element;

package/dist/components/FunSkeletonLoader/FunSkeletonBlock.d.ts

@@ -5,9 +5,14 @@ type FunSkeletonBlockProps = {
     marginBottom?: BoxProps['marginBottom'];
     marginTop?: BoxProps['marginTop'];
     style?: BoxProps['style'];
-    height: string;
     /** Defaults to full width */
     width?: BoxProps['width'];
-};
-export declare function FunSkeletonBlock({ width, borderRadius, height, ...props }: FunSkeletonBlockProps): React.JSX.Element;
+} & ({
+    fontSize?: never;
+    height: Exclude<BoxProps['height'], undefined> | `${number}px`;
+} | {
+    fontSize: Exclude<BoxProps['fontSize'], undefined | 'inherit'>;
+    height?: never;
+});
+export declare function FunSkeletonBlock({ borderRadius, fontSize, height, width, ...props }: FunSkeletonBlockProps): React.JSX.Element;
 export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type BoxProps } from '../Box/Box';
 export declare function FunTxSummaryBox({ children, ...otherProps }: BoxProps): React.JSX.Element;
+export declare function FunTxSummaryDivider(): React.JSX.Element;
 export declare function FunTxSummaryLineItem({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItemKeyText({ text }: {
     text: string;

package/dist/components/HelpAlert/HelpAlert.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 interface HelpAlertProps {
     onHelp: () => void;
 }
+export declare const HelpText: ({ onHelp }: HelpAlertProps) => React.JSX.Element;
 export declare const HelpAlert: ({ onHelp }: HelpAlertProps) => React.JSX.Element;
 export {};

package/dist/components/Icons/ApplePayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ApplePayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/FanaticsCreditCardIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FanaticsCreditCardIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/GooglePayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const GooglePayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/RevolutPayIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RevolutPayIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/SepaBankIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SepaBankIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/VenmoIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const VenmoIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -9,13 +9,13 @@ export type TabsProps = {
     tabs: Tab[];
     activeTab: number;
     onTabChange: (tab: number) => void;
-    /** Custom background color for the active tab highlight */
-    activeBackgroundColor?: string;
     /** Custom background color for the container */
     containerBackgroundColor?: BoxProps['background'];
     /** Custom vertical padding for tab buttons */
     tabPaddingY?: BoxProps['paddingY'];
     fontWeight?: BoxProps['fontWeight'];
     fontSize?: BoxProps['fontSize'];
+    activeTabStyles?: React.CSSProperties;
+    containerStyles?: React.CSSProperties;
 };
 export declare const Tabs: React.FC<TabsProps>;

package/dist/components/Text/Text.d.ts

@@ -12,6 +12,7 @@ export type TextProps = {
     className?: string;
     tabIndex?: number;
     textAlign?: BoxProps['textAlign'];
+    textTransform?: BoxProps['textTransform'];
     display?: BoxProps['display'];
     testId?: string;
     title?: string;

package/dist/components/TransactionStatus/AnimatedSpinner/AnimatedSpinner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CheckoutProgressStep } from '../../../providers/FunkitCheckoutContext';
+import type { TransactionStatusProps } from '../TransactionStatus';
+interface AnimatedSpinnerProps {
+    currentStatus: TransactionStatusProps['status'];
+    initialStatus: TransactionStatusProps['status'];
+    initialStep: CheckoutProgressStep;
+}
+export declare const AnimatedSpinner: React.FC<AnimatedSpinnerProps>;
+export {};

package/dist/components/TransactionStatus/AnimatedSpinner/AnimatedSpinnerLoading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TransactionStatusProps } from '../TransactionStatus';
+export interface AnimatedSpinnerLoadingProps {
+    status: TransactionStatusProps['status'];
+}
+export declare const AnimatedSpinnerLoading: React.FC<AnimatedSpinnerLoadingProps>;

package/dist/components/TransactionStatus/AnimatedText.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type TextProps } from '../Text/Text';
+export interface AnimatedTextProps extends TextProps {
+    animationDelay?: number;
+    animationDuration?: number;
+    animationMaxBlur?: number;
+    animationMaxDistance?: number;
+    textKey: number | string;
+}
+export declare const AnimatedText: FC<AnimatedTextProps>;

package/dist/components/TransactionStatus/DotsDivider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DotsDivider: React.FC;

package/dist/components/TransactionStatus/StepSpinner.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CheckoutProgressStep } from '../../providers/FunkitCheckoutContext';
+export declare const STEP_SPINNER_MORPH_DEGREES = 45;
+export declare const STEP_SPINNER_MORPH_MAX_OFFSET = 4;
+export declare const STEP_SPINNER_SIZE_BIG_SCALE = 1;
+export declare const STEP_SPINNER_SIZE_SMALL_SCALE: number;
+/**
+ * Returns SVG path for a circle that expands or retracts on one side.
+ * @param deg In degrees - Span of morphing arcs *on each side* (e.g. 90° would be morphing an entire half) - 90° at most
+ * @param offset In pixels - Positive offset expands, negative offset retracts
+ * @param side Which side are we morphing - "left" or "right"
+ */
+export declare function getCircleMorphPath(deg: number, offset: number, side: 'left' | 'right'): string;
+export declare function StepSpinner({ initialStep, step, }: {
+    initialStep: CheckoutProgressStep;
+    step: CheckoutProgressStep;
+}): React.JSX.Element;

package/dist/components/TransactionStatus/TransactionStatus.d.ts

@@ -1,7 +1,8 @@
 import type { TFunction } from 'i18next';
 import React, { type ReactNode } from 'react';
 import type { CheckoutProgressStep } from '../../providers/FunkitCheckoutContext';
-interface TransactionStatusProps {
+import { type FunkitTextCustomizationsConfig } from '../../providers/FunkitConfigContext';
+export interface TransactionStatusProps {
     isSlowTransaction: boolean;
     isWithdrawal: boolean;
     textConfigStatus?: TextConfigStatus;
@@ -24,13 +25,10 @@ export type TextConfigContext = {
     durationUnits: string;
     isWithdrawal: boolean;
     finalizeVerb: string;
+    textCustomizations: FunkitTextCustomizationsConfig;
 };
 export type TextConfigStatus = Record<Exclude<TransactionStatusProps['status'], 'progress'> | 'progress_delayed', TextConfig | ((context: TextConfigContext) => TextConfig)>;
-export declare const getDefaultTextConfigStatus: (t: TFunction) => TextConfigStatus;
 export type TextConfigSteps = Record<CheckoutProgressStep, TextConfig | ((context: TextConfigContext) => TextConfig)>;
+export declare const getDefaultTextConfigStatus: (t: TFunction) => TextConfigStatus;
 export declare const getDefaultTextConfigSteps: (t: TFunction) => TextConfigSteps;
-export declare function TransactionStatusLoading({ expectedStatus, }: {
-    expectedStatus: TransactionStatusProps['status'];
-}): React.JSX.Element;
-export declare function TransactionStatus({ isSlowTransaction, isWithdrawal, status, step, textConfigStatus, textConfigSteps, }: TransactionStatusProps): React.JSX.Element;
-export {};
+export declare const TransactionStatus: React.FC<TransactionStatusProps>;

package/dist/components/TransactionStatus/TransactionStatusLoading.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+import type { TransactionStatusProps } from './TransactionStatus';
+export interface TransactionStatusLoadingProps {
+    expectedStatus: TransactionStatusProps['status'];
+}
+export declare const TransactionStatusLoading: FC<TransactionStatusLoadingProps>;