@b3dotfun/sdk 0.0.1-alpha.1

package/dist/esm/global-account/react/components/Transak/TransakModal.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useB3 } from "../../../../global-account";
+import { TextShimmer } from "../../../../global-account/react/components/ui/text-shimmer";
+import { useAccountWallet } from "../../../../global-account/react/hooks/useAccountWallet";
+import { useModalStore } from "../../../../global-account/react/stores/useModalStore";
+import debug from "../../../../shared/utils/debug";
+import { Transak } from "@transak/transak-sdk";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+export default function TransakModal() {
+    const [isLoading, setIsLoading] = useState(true);
+    const [_error, setError] = useState(null);
+    const account = useAccountWallet();
+    const { environment } = useB3();
+    console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
+    const transakConfig = useMemo(() => {
+        return {
+            apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
+            // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
+            environment: environment === "development" ? Transak.ENVIRONMENTS.STAGING : Transak.ENVIRONMENTS.PRODUCTION, // (Required)
+            containerId: "transakMount", // Id of the element where you want to initialize the iframe
+            themeColor: "0c68e9",
+            widgetHeight: "650px",
+            productsAvailed: "BUY",
+            hideMenu: true,
+            colorMode: "DARK",
+            backgroundColors: "000000", // TODO: figure out why this doesn't work
+            exchangeScreenTitle: "Buy ETH on B3",
+            isFeeCalculationHidden: true,
+            cryptoCurrencyCode: "ETH",
+            network: "b3"
+        };
+    }, [environment]);
+    const { ready } = useB3();
+    const modalOptions = useModalStore(state => state.contentType);
+    const isOnRamp = modalOptions?.type === "transak";
+    const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
+    const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
+    const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
+    const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
+    const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
+    useEffect(() => {
+        if (!ready || !isOnRamp)
+            return;
+        const config = {
+            ...transakConfig,
+            walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
+            defaultCryptoAmount,
+            disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
+            fiatAmount: fiatAmount,
+            countryCode: countryCode
+        };
+        const transak = new Transak(config);
+        try {
+            transak.init();
+            // Add event listeners
+            Transak.on("*", data => {
+                debug("@@transak", data);
+            });
+            Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
+                setIsLoading(false);
+                debug("@@transak", "Transak SDK closed!");
+            });
+            Transak.on(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
+                debug("@@transak", "Transak SDK initialized!");
+                setIsLoading(false);
+            });
+            Transak.on(Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
+                debug("@@transak", orderData);
+                toast.error("Oh no! Something went wrong. Please try again.");
+            });
+            Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
+                debug("@@transak", orderData);
+                toast.success("Successfully purchased ETH with credit card!");
+                onSuccess?.();
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
+            toast.error("Oh no! Something went wrong. Please try again.");
+            setIsLoading(false);
+        }
+        // Cleanup code
+        return () => {
+            transak.close();
+        };
+    }, [
+        ready,
+        account?.address,
+        destinationWalletAddress,
+        defaultCryptoAmount,
+        isOnRamp,
+        onSuccess,
+        fiatAmount,
+        transakConfig,
+        countryCode
+    ]);
+    return (_jsxs(_Fragment, { children: [isLoading && (_jsxs("div", { className: "flex h-full min-h-[650px] flex-col items-center justify-center gap-4", children: [_jsx(Loader2, { className: "h-24 w-24 animate-spin opacity-10" }), _jsx(TextShimmer, { children: "Powering up our credit card processor..." })] })), _jsx("div", { id: "transakMount", style: {
+                    display: isLoading ? "none" : "block",
+                    width: "100%",
+                    height: "650px",
+                    borderRadius: "25px",
+                    overflow: "hidden"
+                } })] }));
+}

package/dist/esm/global-account/react/components/custom/Button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "b3" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+    className?: string;
+}
+export declare function Button({ variant, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { buttonVariants };

package/dist/esm/global-account/react/components/custom/Button.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils";
+import { cva } from "class-variance-authority";
+const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-b3-react-ring disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        // TODO: these variats aren't working atm maybe since TW isn't properly installed on react sdk
+        variant: {
+            default: "bg-b3-react-primary text-b3-react-primary-foreground shadow hover:bg-b3-react-primary/90",
+            destructive: "bg-destructive text-destructive-b3-react-foreground shadow-sm hover:bg-destructive/90",
+            outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-b3-react-foreground",
+            secondary: "bg-secondary text-secondary-b3-react-foreground shadow-sm hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-b3-react-foreground",
+            link: "text-b3-react-primary underline-offset-4 hover:underline",
+            b3: "bg-[#3368ef] text-white hover:bg-[#3368ef]/90"
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-9 w-9"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+export function Button({ variant = "default", className, ...props }) {
+    return (_jsx("button", { className: cn("flex items-center justify-center rounded-lg px-4 py-2 font-medium transition-colors", variant === "default" && "bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/90", variant === "outline" &&
+            "border-input bg-b3-react-background hover:bg-accent hover:text-accent-b3-react-foreground border", className), ...props }));
+}
+export { buttonVariants };

package/dist/esm/global-account/react/components/custom/ClientOnly.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ClientOnlyProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+export default function ClientOnly({ children, fallback }: ClientOnlyProps): React.ReactNode;
+export {};

package/dist/esm/global-account/react/components/custom/ClientOnly.js

@@ -0,0 +1,10 @@
+"use client";
+import { useHasMounted } from "../../../../global-account/react/hooks/useHasMounted";
+export default function ClientOnly({ children, fallback }) {
+    const hasMounted = useHasMounted();
+    // During SSR and initial client render, show fallback
+    if (!hasMounted) {
+        return fallback || null;
+    }
+    return children;
+}

package/dist/esm/global-account/react/components/custom/CopyToClipboard.d.ts

@@ -0,0 +1,7 @@
+interface CopyToClipboardProps {
+    text?: string;
+    onCopy?: () => void;
+    children?: React.ReactNode;
+}
+export declare function CopyToClipboard({ text, onCopy, children }: CopyToClipboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/custom/CopyToClipboard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+export function CopyToClipboard({ text, onCopy, children }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        if (!text)
+            return;
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 2000);
+    };
+    if (children) {
+        return (_jsx("div", { onClick: handleCopy, className: "cursor-pointer", children: children }));
+    }
+    return (_jsx("div", { onClick: handleCopy, className: "text-b3-react-muted-foreground hover:text-b3-react-foreground flex cursor-pointer items-center gap-1 text-xs transition-all duration-200", children: copied ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), _jsx("span", { children: "Copied" })] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-4 w-4" }), _jsx("span", { children: "Copy" })] })) }));
+}

package/dist/esm/global-account/react/components/custom/StaggeredFadeLoader.d.ts

@@ -0,0 +1,4 @@
+export default function StaggeredFadeLoader({ className, size }: {
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/custom/StaggeredFadeLoader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+export default function StaggeredFadeLoader({ className = "bg-white/50", size = 4 }) {
+    const circleVariants = {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1 }
+    };
+    const sizeClass = {
+        1: "h-1 w-1",
+        2: "h-2 w-2",
+        3: "h-3 w-3",
+        4: "h-4 w-4",
+        5: "h-5 w-5"
+    }?.[size] || "h-4 w-4";
+    return (_jsx("div", { className: `flex items-center justify-center ${size <= 2 ? "space-x-1" : "space-x-2"}`, children: [...Array(3)].map((_, index) => (_jsx(motion.div, { className: `${sizeClass} rounded-full ${className}`, variants: circleVariants, initial: "hidden", animate: "visible", transition: {
+                duration: 0.9,
+                delay: index * 0.2,
+                repeat: Infinity,
+                repeatType: "reverse"
+            } }, index))) }));
+}

package/dist/esm/global-account/react/components/custom/WalletConnectorIcon.d.ts

@@ -0,0 +1,4 @@
+export default function WalletConnectorIcon({ connectorType, size }: {
+    connectorType: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/custom/WalletConnectorIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRabby, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
+import { Wallet } from "lucide-react";
+const getWalletIcon = (connectorType, size = 24) => {
+    switch (connectorType?.toLowerCase()) {
+        case "metamask":
+            return _jsx(WalletMetamask, { width: size, height: size });
+        case "coinbase":
+            return _jsx(WalletCoinbase, { width: size, height: size });
+        case "phantom":
+            return _jsx(WalletPhantom, { width: size, height: size });
+        case "walletconnect":
+            return _jsx(WalletWalletConnect, { width: size, height: size });
+        case "rabby":
+            return _jsx(WalletRabby, { width: size, height: size });
+        case "rainbow":
+            return _jsx(WalletRainbow, { width: size, height: size });
+        default:
+            return _jsx(Wallet, { width: size, height: size });
+    }
+};
+export default function WalletConnectorIcon({ connectorType, size = 24 }) {
+    return getWalletIcon(connectorType, size);
+}

package/dist/esm/global-account/react/components/magicui/AnimatedLottie.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface AnimatedLottieProps {
+    src: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    delay?: number;
+    animateBounce?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    reverse?: boolean;
+}
+declare const AnimatedLottie: React.FC<AnimatedLottieProps>;
+export default AnimatedLottie;

package/dist/esm/global-account/react/components/magicui/AnimatedLottie.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { motion } from "framer-motion";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+const AnimatedLottie = React.memo(({ src, autoplay = false, loop = false, delay = 0, animateBounce = true, className, style, reverse = false }) => {
+    const [dotLottie, setDotLottie] = useState(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const onComplete = useCallback(() => {
+        if (!isHovered && dotLottie) {
+            try {
+                dotLottie.pause();
+            }
+            catch (error) {
+                console.error("Failed to pause animation:", error);
+            }
+        }
+    }, [isHovered, dotLottie]);
+    useEffect(() => {
+        if (dotLottie) {
+            dotLottie.addEventListener("complete", onComplete);
+            return () => {
+                dotLottie.removeEventListener("complete", onComplete);
+            };
+        }
+    }, [dotLottie, onComplete]);
+    const dotLottieRefCallback = useCallback((instance) => {
+        setDotLottie(instance);
+        if (autoplay && instance) {
+            setTimeout(() => {
+                try {
+                    instance.play();
+                }
+                catch (error) {
+                    console.error("Failed to play animation:", error);
+                }
+            }, delay ? delay * 1000 : 0);
+        }
+    }, [autoplay, delay]);
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+        try {
+            dotLottie?.play();
+        }
+        catch (error) {
+            console.error("Failed to play animation:", error);
+        }
+    }, [dotLottie]);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const animateProps = useMemo(() => ({
+        scale: animateBounce ? [1, 0.95, 1.05, 1] : 1
+    }), [animateBounce]);
+    return (_jsx(motion.div, { whileHover: { scale: 1.05 }, initial: { scale: 1 }, animate: animateProps, transition: { duration: 0.3, ease: "easeInOut" }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx(DotLottieReact, { src: src, dotLottieRefCallback: dotLottieRefCallback, style: style, autoplay: autoplay, loop: loop, mode: reverse ? "reverse" : "forward" }) }));
+});
+AnimatedLottie.displayName = "AnimatedLottie";
+export default AnimatedLottie;

package/dist/esm/global-account/react/components/ui/Loading.d.ts

@@ -0,0 +1,7 @@
+interface LoadingProps {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "white";
+}
+export declare function Loading({ className, size, variant }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/ui/Loading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils";
+import { Loader2 } from "lucide-react";
+export function Loading({ className, size = "md", variant = "white" }) {
+    const sizeClass = {
+        sm: "h-6 w-6",
+        md: "h-8 w-8",
+        lg: "h-12 w-12"
+    }[size];
+    const variantClass = {
+        primary: "text-b3-react-primary",
+        white: "text-white opacity-50"
+    }[variant];
+    return (_jsx("div", { className: cn("relative", sizeClass, className), children: _jsx(Loader2, { className: cn("animate-spin", sizeClass, variantClass) }) }));
+}

package/dist/esm/global-account/react/components/ui/ShinyButton.d.ts

@@ -0,0 +1,14 @@
+declare const ShinyButton: ({ text, accentColor, animatedPulse, className, children, onClick, onClickCapture, disabled, textColor, textClassName, type }: {
+    text?: string;
+    accentColor?: string;
+    animatedPulse?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    onClickCapture?: () => void;
+    disabled?: boolean;
+    textColor?: string;
+    textClassName?: string;
+    type?: "button" | "submit" | "reset";
+}) => import("react/jsx-runtime").JSX.Element;
+export default ShinyButton;

package/dist/esm/global-account/react/components/ui/ShinyButton.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import StaggeredFadeLoader from "../../../../global-account/react/components/custom/StaggeredFadeLoader";
+import { cn } from "../../../../shared/utils";
+import { isLightColor } from "../../../../shared/utils/colors";
+import { useInView } from "react-intersection-observer";
+const ShinyButton = ({ text = "shiny-button", accentColor, animatedPulse = true, className = "", children, onClick, onClickCapture, disabled, textColor = "", textClassName = "", type = "button" }) => {
+    const { ref, inView } = useInView({
+        triggerOnce: false,
+        threshold: 0.1
+    });
+    const computedTextColor = textColor ||
+        (accentColor?.startsWith("hsl")
+            ? "text-[rgb(0,0,0,65%)] dark:text-[rgb(255,255,255,90%)]"
+            : accentColor && isLightColor(accentColor)
+                ? "text-black/90"
+                : "text-white");
+    return (_jsxs("button", { ref: ref, className: cn(`shiny-button relative min-h-fit rounded-2xl border border-black/10 px-6 py-3 tracking-wide backdrop-blur-xl transition-all duration-300 ease-in-out dark:bg-[radial-gradient(ellipse_at_50%_0%,hsl(var(--b3-react-primary)/25%)_0%,transparent_70%)] ${className}`, disabled
+            ? "grayscale-20 cursor-not-allowed opacity-60"
+            : "hover:border-black/30 hover:shadow-[0_0_20px_rgb(0,0,0,20%)]", animatedPulse && inView && "animated-pulse"), style: {
+            backgroundColor: disabled ? "#94A3B8" : accentColor
+        }, onClick: !disabled ? onClick : undefined, onClickCapture: onClickCapture, disabled: disabled, type: type, children: [_jsx("div", { className: "absolute inset-0 bottom-0 left-0 right-0 top-0 rounded-2xl border border-white/10" }), _jsx("span", { className: cn("font-sf-rounded relative block h-full w-full text-lg font-semibold tracking-wide", computedTextColor), children: _jsxs("div", { className: cn("flex items-center justify-center gap-2", textClassName), children: [children || text, text === "Loading" && _jsx(StaggeredFadeLoader, { size: 2 })] }) }), _jsx("span", { className: "shiny-overlay" })] }));
+};
+export default ShinyButton;

package/dist/esm/global-account/react/components/ui/TabSystem.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+interface TabsRootProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Tabs({ value, onValueChange, children, className }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+interface TabsListProps {
+    children: ReactNode;
+    className?: string;
+    hideGradient?: boolean;
+}
+export declare function TabsList({ children, className, hideGradient }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+interface TabTriggerProps {
+    value: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export declare function TabTrigger({ value, children, icon, disabled }: TabTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+}
+export declare function TabsContent({ value, children }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TabsTransitionWrapper({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/ui/TabSystem.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TransitionPanel } from "../../../../global-account/react/components/ui/transition-panel";
+import { cn } from "../../../../shared/utils/cn";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { createContext, useContext } from "react";
+const TabsContext = createContext(undefined);
+export function Tabs({ value, onValueChange, children, className = "" }) {
+    return (_jsx(TabsContext.Provider, { value: { selectedTab: value, onTabChange: onValueChange }, children: _jsx("div", { className: className, children: children }) }));
+}
+export function TabsList({ children, className = "", hideGradient = false }) {
+    return (_jsxs("div", { className: "relative w-full", children: [_jsx("div", { role: "tablist", className: cn("no-scrollbar relative mb-4 flex items-center gap-2 whitespace-nowrap", className), children: children }), _jsx(AnimatePresence, { mode: "wait", children: !hideGradient && (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, delay: 0.2 }, children: [_jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 top-0 z-10 w-8 bg-gradient-to-r from-[#15121c] to-transparent md:hidden" }), _jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 top-0 z-10 w-8 bg-gradient-to-l from-[#15121c] to-transparent md:hidden" })] }, "gradients-container")) })] }));
+}
+export function TabTrigger({ value, children, icon, disabled = false }) {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error("TabTrigger must be used within Tabs");
+    const { selectedTab, onTabChange } = context;
+    const isSelected = selectedTab === value;
+    return (_jsxs("button", { role: "tab", "aria-selected": isSelected, "aria-controls": `panel-${value}`, id: `tab-${value}`, onClick: () => onTabChange(value), className: `relative rounded-full px-4 py-2 text-sm text-white transition-all duration-200 hover:text-white focus:outline-none`, disabled: disabled, children: [_jsxs("span", { className: `${isSelected ? "opacity-100" : "opacity-50"} relative z-10 flex items-center gap-2 font-semibold uppercase`, children: [children, icon] }), isSelected && (_jsx(motion.span, { layoutId: "activeTab", transition: { type: "spring", duration: 0.4 }, className: "from-as-light-brand to-as-brand/10 border-as-brand/30 absolute inset-0 z-0 rounded-full border border-t-white/15 bg-gradient-to-b shadow-lg" }))] }));
+}
+export function TabsContent({ value, children }) {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error("TabsContent must be used within Tabs");
+    const { selectedTab } = context;
+    const isSelected = selectedTab === value;
+    if (!isSelected)
+        return null;
+    return (_jsx("div", { role: "tabpanel", id: `panel-${value}`, "aria-labelledby": `tab-${value}`, tabIndex: 0, className: "focus:outline-none", children: children }));
+}
+export function TabsTransitionWrapper({ children }) {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error("TabsTransitionWrapper must be used within Tabs");
+    // Find the index of the selected tab among the children
+    const childrenArray = React.Children.toArray(children);
+    const activeIndex = childrenArray.findIndex(child => React.isValidElement(child) &&
+        "value" in child.props &&
+        child.props.value === context.selectedTab);
+    return (_jsx(TransitionPanel, { activeIndex: activeIndex, className: "w-full", transition: { type: "spring", stiffness: 300, damping: 30 }, variants: {
+            enter: { opacity: 0, filter: "blur(10px)", x: 20 },
+            center: { opacity: 1, filter: "blur(0px)", x: 0 },
+            exit: { opacity: 0, filter: "blur(10px)", x: -20 }
+        }, children: childrenArray }));
+}

package/dist/esm/global-account/react/components/ui/Tabs.d.ts

@@ -0,0 +1,9 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export declare const Tabs: ({ defaultValue, onValueChange, children }: {
+    defaultValue: string;
+    onValueChange?: (value: string) => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare function TabTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/ui/Tabs.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export const Tabs = ({ defaultValue, onValueChange, children }) => (_jsx(TabsPrimitive.Root, { defaultValue: defaultValue, onValueChange: onValueChange, children: children }));
+export function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { className: cn("border-b3-react-border bg-b3-react-background inline-flex h-12 w-full items-center justify-center rounded-lg border", className), ...props }));
+}
+export function TabTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { className: cn("inline-flex h-full items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all", "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-b3-react-subtle data-[state=active]:text-b3-react-primary data-[state=active]:font-bold", "border-b3-react-border hover:text-b3-react-foreground data-[state=inactive]:border-b3-react-border data-[state=inactive]:text-b3-react-muted-foreground", "flex-1 border-r", className), ...props }));
+}
+export function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { className: cn("ring-offset-b3-react-background focus-visible:ring-b3-react-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", className), ...props }));
+}

package/dist/esm/global-account/react/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/esm/global-account/react/components/ui/badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../../shared/utils";
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-b3-react-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-b3-react-foreground hover:bg-secondary/80",
+            destructive: "border-destructive bg-destructive/50 text-destructive-b3-react-foreground hover:bg-destructive/80",
+            outline: "text-b3-react-foreground"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function Badge({ className, variant, ...props }) {
+    return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export { Badge, badgeVariants };

package/dist/esm/global-account/react/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/esm/global-account/react/components/ui/button.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../../../shared/utils";
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-b3-react-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-b3-react-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            default: "bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/90",
+            destructive: "bg-destructive text-destructive-b3-react-foreground hover:bg-destructive/90 bg-red-600/80 border border-red-500/80 backdrop-blur-sm hover:bg-red-500 transition-colors",
+            outline: "border border-input bg-b3-react-background hover:bg-accent hover:text-accent-b3-react-foreground",
+            secondary: "bg-secondary text-secondary-b3-react-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-b3-react-foreground",
+            link: "text-b3-react-primary underline-offset-4 hover:underline"
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
+    }
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    if (asChild) {
+        return (_jsx(Slot, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+    }
+    return _jsx("button", { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props });
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };