@windrun-huaiin/third-ui 11.0.1 → 11.0.3

package/dist/clerk/clerk-user-client.d.ts

@@ -1,6 +1,8 @@
 interface ClerkUserData {
     signIn: string;
     signUp: string;
+    signUpBonus?: string;
+    signUpBonusTooltip?: string;
     terms: string;
     privacy: string;
     locale: string;

package/dist/clerk/clerk-user-client.js

@@ -2,12 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var nextjs = require('@clerk/nextjs');
 var server = require('@windrun-huaiin/base-ui/components/server');
 var signupButtonWithFingerprintClient = require('./signup-button-with-fingerprint-client.js');
 
 function ClerkUserClient({ data }) {
-    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [data.showSignUp && (jsxRuntime.jsxs("div", { className: "relative inline-flex z-10", children: [jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: "absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default", children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsxRuntime.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none", children: data.signUpBonusTooltip }))] }))] })), jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) })] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/clerk/clerk-user-client.mjs

@@ -1,11 +1,13 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { ClerkLoading, ClerkLoaded, SignedOut, SignInButton, SignedIn, UserButton } from '@clerk/nextjs';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client.mjs';
 
 function ClerkUserClient({ data }) {
-    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
+    const [showTooltip, setShowTooltip] = useState(false);
+    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [data.showSignUp && (jsxs("div", { className: "relative inline-flex z-10", children: [jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxs(Fragment, { children: [jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: "absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default", children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none", children: data.signUpBonusTooltip }))] }))] })), jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) })] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/clerk/clerk-user.js

@@ -12,6 +12,8 @@ function ClerkUser(_a) {
         const data = {
             signIn: t('signIn'),
             signUp: t('signUp'),
+            signUpBonus: t('signUpBonus'),
+            signUpBonusTooltip: t('signUpBonusTooltip'),
             terms: t2('terms'),
             privacy: t2('privacy'),
             locale,

package/dist/clerk/clerk-user.mjs

@@ -10,6 +10,8 @@ function ClerkUser(_a) {
         const data = {
             signIn: t('signIn'),
             signUp: t('signUp'),
+            signUpBonus: t('signUpBonus'),
+            signUpBonusTooltip: t('signUpBonusTooltip'),
             terms: t2('terms'),
             privacy: t2('privacy'),
             locale,

package/dist/fuma/fuma-banner-suit.js

@@ -11,7 +11,7 @@ function FumaBannerSuit(_a) {
         const heightValue = showBanner ? 3 : 0.5;
         const height = `${heightValue}rem`;
         const bannerText = t('banner');
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBanner ? (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-xl", children: bannerText }) })) : (jsxRuntime.jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBanner ? (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsxRuntime.jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
                     position: floating ? 'fixed' : 'relative',
                     top: floating ? 0 : undefined,
                     left: floating ? 0 : undefined,

package/dist/fuma/fuma-banner-suit.mjs

@@ -9,7 +9,7 @@ function FumaBannerSuit(_a) {
         const heightValue = showBanner ? 3 : 0.5;
         const height = `${heightValue}rem`;
         const bannerText = t('banner');
-        return (jsx(Fragment, { children: showBanner ? (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-xl", children: bannerText }) })) : (jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
+        return (jsx(Fragment, { children: showBanner ? (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
                     position: floating ? 'fixed' : 'relative',
                     top: floating ? 0 : undefined,
                     left: floating ? 0 : undefined,

package/dist/fuma/mdx/gradient-button.js

@@ -74,7 +74,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
         : align === 'center'
             ? 'justify-center'
             : 'justify-start';
-    const buttonClassName = utils.cn('bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const buttonClassName = utils.cn('bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsxRuntime.jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsxRuntime.jsx(ui.Button, { size: "lg", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/fuma/mdx/gradient-button.mjs

@@ -72,7 +72,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
         : align === 'center'
             ? 'justify-center'
             : 'justify-start';
-    const buttonClassName = cn('bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const buttonClassName = cn('bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsx(Button, { size: "lg", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/main/money-price/money-price-interactive.js

@@ -313,7 +313,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsxRuntime.jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
-                            ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                            ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setBillingType(option.key), children: option.name })] }, option.key));

package/dist/main/money-price/money-price-interactive.mjs

@@ -311,7 +311,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
-                            ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                            ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setBillingType(option.key), children: option.name })] }, option.key));

package/dist/main/price-plan-interactive.js

@@ -172,7 +172,7 @@ function PricePlanInteractive({ data }) {
         const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
         if (monthlyButton) {
             if (newBillingKey === 'monthly') {
-                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
+                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
             }
             else {
                 monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
@@ -180,7 +180,7 @@ function PricePlanInteractive({ data }) {
         }
         if (yearlyButton) {
             if (newBillingKey === 'yearly') {
-                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
+                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
             }
             else {
                 yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');

package/dist/main/price-plan-interactive.mjs

@@ -170,7 +170,7 @@ function PricePlanInteractive({ data }) {
         const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
         if (monthlyButton) {
             if (newBillingKey === 'monthly') {
-                monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
+                monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
             }
             else {
                 monthlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
@@ -178,7 +178,7 @@ function PricePlanInteractive({ data }) {
         }
         if (yearlyButton) {
             if (newBillingKey === 'yearly') {
-                yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
+                yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm');
             }
             else {
                 yearlyButton.className = cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/clerk/clerk-user-client.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { ClerkLoaded, ClerkLoading, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client';
@@ -7,6 +8,8 @@ import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-cl
 interface ClerkUserData {
   signIn: string;
   signUp: string;
+  signUpBonus?: string;
+  signUpBonusTooltip?: string;
   terms: string;
   privacy: string;
   locale: string;
@@ -15,6 +18,8 @@ interface ClerkUserData {
 }
 
 export function ClerkUserClient({ data }: { data: ClerkUserData }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
   return (
     <div className="flex items-center gap-2 h-10 mr-3 sm:mr-2">
       <ClerkLoading>
@@ -22,12 +27,32 @@ export function ClerkUserClient({ data }: { data: ClerkUserData }) {
       </ClerkLoading>
       <ClerkLoaded>
         <SignedOut>
+          {data.showSignUp && (
+            <div className="relative inline-flex z-10">
+              <SignUpButtonWithFingerprint mode={data.clerkAuthInModal ? 'modal' : 'redirect'} signUp={data.signUp}/>
+              {data.signUpBonus && (
+                <>
+                  <span
+                    onMouseEnter={() => setShowTooltip(true)}
+                    onMouseLeave={() => setShowTooltip(false)}
+                    className="absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default"
+                  >
+                    {data.signUpBonus}
+                  </span>
+                  {showTooltip && data.signUpBonusTooltip && (
+                    <div className="absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none">
+                      {data.signUpBonusTooltip}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
           <SignInButton mode={data.clerkAuthInModal ? 'modal' : 'redirect'}>
-          <button className="w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap">
+            <button className="w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap">
               {data.signIn}
             </button>
           </SignInButton>
-          {data.showSignUp && ( <SignUpButtonWithFingerprint mode={data.clerkAuthInModal ? 'modal' : 'redirect'} signUp={data.signUp}/> )}
         </SignedOut>
         <SignedIn>
           <UserButton
@@ -56,4 +81,4 @@ export function ClerkUserClient({ data }: { data: ClerkUserData }) {
       </ClerkLoaded>
     </div>
   );
-}
+}

package/src/clerk/clerk-user.tsx

@@ -11,6 +11,8 @@ interface ClerkUserProps {
 interface ClerkUserData {
   signIn: string;
   signUp: string;
+  signUpBonus: string;
+  signUpBonusTooltip: string;
   terms: string;
   privacy: string;
   locale: string;
@@ -29,6 +31,8 @@ export async function ClerkUser({
   const data: ClerkUserData = {
     signIn: t('signIn'),
     signUp: t('signUp'),
+    signUpBonus: t('signUpBonus'),
+    signUpBonusTooltip: t('signUpBonusTooltip'),
     terms: t2('terms'),
     privacy: t2('privacy'),
     locale,

package/src/fuma/fuma-banner-suit.tsx

@@ -23,7 +23,7 @@ export async function FumaBannerSuit({
           height={heightValue}
           floating={floating}
         >
-          <p className="text-xl">{bannerText}</p>
+          <p className="text-sm sm:text-xl md:text-xl">{bannerText}</p>
         </Banner>
       ) : (
         <div

package/src/fuma/mdx/gradient-button.tsx

@@ -124,7 +124,7 @@ export function GradientButton({
       : 'justify-start';
 
   const buttonClassName = cn(
-    'bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full',
+    'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full',
     alignmentClass,
     isDisabled && 'opacity-50 cursor-not-allowed',
     className,

package/src/main/money-price/money-price-interactive.tsx

@@ -400,7 +400,7 @@ export function MoneyPriceInteractive({
           {billingOptions.map(option => {
             const isActive = option.key === billingType;
             const buttonClasses = isActive
-              ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+              ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
               : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
             const showBadge = option.key === billingType && !!discountBadgeText;
 

package/src/main/price-plan-interactive.tsx

@@ -221,7 +221,7 @@ export function PricePlanInteractive({ data }: { data: PricePlanData }) {
       if (newBillingKey === 'monthly') {
         monthlyButton.className = cn(
           'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
-          'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+          'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
         );
       } else {
         monthlyButton.className = cn(
@@ -235,7 +235,7 @@ export function PricePlanInteractive({ data }: { data: PricePlanData }) {
       if (newBillingKey === 'yearly') {
         yearlyButton.className = cn(
           'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
-          'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+          'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
         );
       } else {
         yearlyButton.className = cn(