@windrun-huaiin/third-ui 15.1.0 → 16.0.0

package/src/main/credit/credit-overview-client.tsx

@@ -2,7 +2,15 @@
 
 import { useClerk } from '@clerk/nextjs';
 import { GradientButton } from '@third-ui/fuma/mdx/gradient-button';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import {
+  BellIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CircleQuestionMarkIcon,
+  GemIcon,
+  Settings2Icon,
+  ShoppingCartIcon,
+} from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { redirectToCustomerPortal } from '../money-price/customer-portal';
@@ -369,7 +377,7 @@ export function CreditOverviewClient({
       <header className="relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6">
         <div className="flex flex-col gap-2 sm:gap-3">
           <div className="flex items-center justify-start rounded-full ">
-            <icons.Gem aria-hidden className="mr-2 h-6 w-6 sm:h-8 sm:w-8" />
+            <GemIcon aria-hidden className="mr-2 h-6 w-6 sm:h-8 sm:w-8" />
             <span className="text-base sm:text-lg">{translations.totalLabel}</span>
           </div>
           <div className="flex justify-center text-3xl font-semibold leading-tight sm:text-4xl">
@@ -387,7 +395,7 @@ export function CreditOverviewClient({
             <GradientButton
               title={subscription ? translations.subscriptionManage : translations.subscribePay}
               align="center"
-              icon={subscription ? <icons.Settings2 /> : <icons.Bell />}
+              icon={subscription ? <Settings2Icon /> : <BellIcon />}
               openInNewTab={false}
               className="w-full"
               onClick={subscription ? handleManageAction : handleSubscribeAction}
@@ -417,9 +425,9 @@ export function CreditOverviewClient({
               className="flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]"
             >
               {bucketExpanded ? (
-                <icons.ChevronUp className="h-4 w-4" />
+                <ChevronUpIcon className="h-4 w-4" />
               ) : (
-                <icons.ChevronDown className="h-4 w-4" />
+                <ChevronDownIcon className="h-4 w-4" />
               )}
             </button>
           ) : null}
@@ -476,7 +484,7 @@ export function CreditOverviewClient({
         )}
         <GradientButton
           title={translations.onetimeBuy}
-          icon={<icons.ShoppingCart />}
+          icon={<ShoppingCartIcon />}
           align="center"
           className="w-full text-sm sm:text-base"
           onClick={handleOnetimeAction}
@@ -537,7 +545,7 @@ function HoverInfo({ description, variant = 'default' }: HoverInfoProps) {
             : 'border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] hover:text-purple-700 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]',
         )}
       >
-        <icons.CircleQuestionMark className="h-3.5 w-3.5" />
+        <CircleQuestionMarkIcon className="h-3.5 w-3.5" />
       </button>
       <span
         role="tooltip"

package/src/main/features.tsx

@@ -1,11 +1,13 @@
 import { getTranslations } from 'next-intl/server';
 import { getGlobalIcon } from '@windrun-huaiin/base-ui/components/server';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import type { globalLucideIcons } from '@windrun-huaiin/base-ui/icons';
 import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert';
 import { responsiveSection } from './section-layout';
 
+type GlobalIconKey = Extract<keyof typeof globalLucideIcons, string>;
+
 interface FeaturesData {
   title: string;
   eyesOn: string;
@@ -14,7 +16,7 @@ interface FeaturesData {
     id: string;
     title: string;
     description: string;
-    iconKey: keyof typeof icons;
+    iconKey: GlobalIconKey;
   }>;
 }
 
@@ -31,7 +33,7 @@ export async function Features({
   const featureItems = t.raw('items') as Array<{
     title: string;
     description: string;
-    iconKey: keyof typeof icons;
+    iconKey: GlobalIconKey;
   }>;
   
   const data: FeaturesData = {

package/src/main/footer.tsx

@@ -1,5 +1,5 @@
 import { getTranslations } from 'next-intl/server';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { MailIcon, ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-ui/icons';
 import Link from "next/link";
 import { FooterEmail } from './footer-email';
 import { safeT } from '../lib/t-intl';
@@ -47,15 +47,15 @@ export async function Footer({ locale, localePrefixAsNeeded = true, defaultLocal
         <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
           <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6">
             <Link href={getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
-              <icons.ReceiptText className="h-3.5 w-3.5"/>
+              <ReceiptTextIcon className="h-3.5 w-3.5"/>
               <span>{data.terms}</span>
             </Link>
             <Link href={getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
-              <icons.ShieldUser className="h-3.5 w-3.5"/>
+              <ShieldUserIcon className="h-3.5 w-3.5"/>
               <span>{data.privacy}</span>
             </Link>
             <FooterEmail email={data.email} clickToCopyText={data.clickToCopyText} copiedText={data.copiedText}>
-              <icons.Mail className="h-3.5 w-3.5"/>
+              <MailIcon className="h-3.5 w-3.5"/>
               <span>{data.contactUs}</span>
             </FooterEmail>
           </div>
@@ -67,4 +67,3 @@ export async function Footer({ locale, localePrefixAsNeeded = true, defaultLocal
     </div>
   );
 }
-

package/src/main/go-to-top.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { ArrowUpIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 
 export function GoToTop() {
@@ -37,7 +37,7 @@ export function GoToTop() {
           className={`fixed bottom-6 right-6 p-3 ${themeButtonGradientClass} ${themeButtonGradientHoverClass} text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50`}
           aria-label="Go to top"
         >
-          <icons.ArrowUp size={20} className="text-white" />
+          <ArrowUpIcon size={20} className="text-white" />
         </button>
       )}
     </>

package/src/main/hero-media.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { DelayedImg } from "./delayed-img";
+import { cn } from '@windrun-huaiin/lib/utils';
+
+interface HeroMediaProps {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  sizes?: string;
+  maxWidthClassName?: string;
+  wrapperClassName?: string;
+  imageClassName?: string;
+  placeholderClassName?: string;
+  preload?: boolean;
+}
+
+export function HeroMedia({
+  src,
+  alt,
+  width,
+  height,
+  sizes = "(max-width: 768px) 90vw, (max-width: 1200px) 45vw, 35vw",
+  maxWidthClassName = "max-w-[500px]",
+  wrapperClassName,
+  imageClassName,
+  placeholderClassName,
+  preload = true,
+}: HeroMediaProps) {
+  return (
+    <div className={cn("w-full", maxWidthClassName)}>
+      <div
+        className={cn(
+          "group relative overflow-hidden rounded-lg shadow-purple-500/20",
+          wrapperClassName,
+        )}
+        style={{ aspectRatio: `${width} / ${height}` }}
+      >
+        <DelayedImg
+          src={src}
+          alt={alt}
+          fill
+          preload={preload}
+          sizes={sizes}
+          className={cn("rounded-lg object-cover group-hover:scale-105", imageClassName)}
+          wrapperClassName="h-full w-full"
+          placeholderClassName={cn("rounded-lg", placeholderClassName)}
+        />
+      </div>
+    </div>
+  );
+}

package/src/main/hero-section.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+interface HeroSectionProps {
+  content: ReactNode;
+  media: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  mediaClassName?: string;
+}
+
+export function HeroSection({
+  content,
+  media,
+  className,
+  contentClassName,
+  mediaClassName,
+}: HeroSectionProps) {
+  return (
+    <section
+      className={cn(
+        "mx-auto mt-12 flex max-w-6xl flex-col gap-10 px-6 py-8 md:min-w-[calc(100vw-22rem)] md:px-4 md:flex-row md:items-center md:gap-12",
+        className,
+      )}
+    >
+      <div className={cn("flex-1 space-y-6", contentClassName)}>
+        {content}
+      </div>
+      <div className={cn("relative flex flex-1 justify-center md:justify-end", mediaClassName)}>
+        {media}
+      </div>
+    </section>
+  );
+}

package/src/main/index.ts

@@ -21,3 +21,8 @@ export { MoneyPriceButton } from './money-price/money-price-button';
 
 export { CreditOverviewClient } from './credit/credit-overview-client';
 export { CreditNavButton } from './credit/credit-nav-button';
+
+export { HeroMedia } from './hero-media';
+export { HeroSection } from './hero-section';
+
+export { InfoTooltip } from './info-tooltip';

package/src/main/info-tooltip.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { CircleQuestionMarkIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeBorderColor, themeIconColor, themeRingColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+type InfoTooltipProps = {
+  content: string;
+  className?: string;
+  align?: 'start' | 'end';
+  desktopSide?: 'right' | 'bottom';
+};
+
+export function InfoTooltip({
+  content,
+  className,
+  align = 'end',
+  desktopSide = 'right',
+}: InfoTooltipProps) {
+  const normalizedContent = content.trim();
+  const containerRef = useRef<HTMLSpanElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent | TouchEvent) {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const target = event.target;
+      if (target instanceof Node && !containerRef.current.contains(target)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('touchstart', handlePointerDown);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('touchstart', handlePointerDown);
+    };
+  }, []);
+
+  if (!normalizedContent) {
+    return null;
+  }
+
+  return (
+    <span
+      ref={containerRef}
+      className={cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <button
+        type="button"
+        onMouseEnter={() => setOpen(true)}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen((value) => !value);
+        }}
+        className={cn(
+          'inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition',
+          'hover:bg-black/5 hover:dark:bg-white/5',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950',
+          'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white',
+          themeIconColor,
+          themeRingColor,
+        )}
+        aria-label={normalizedContent}
+        aria-expanded={open}
+      >
+        <CircleQuestionMarkIcon className="h-4 w-4" />
+      </button>
+      <span
+        className={cn(
+          'pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300',
+          align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto',
+          desktopSide === 'right'
+            ? align === 'start'
+              ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+              : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+            : align === 'start'
+              ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
+              : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0',
+          open ? 'block' : 'hidden',
+          themeBorderColor,
+        )}
+        role="tooltip"
+      >
+        {normalizedContent}
+      </span>
+    </span>
+  );
+}

package/src/main/language-detector.tsx

@@ -1,14 +1,14 @@
 /**
  * @license
  * MIT License
- * Copyright (c) 2025 D8ger
+ * Copyright (c) 2026 D8ger
  * 
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 'use client'
 
-import { globalLucideIcons as icons } from "@windrun-huaiin/base-ui/components/server"
+import { XIcon } from "@windrun-huaiin/base-ui/icons"
 import { useLocale, useTranslations } from 'next-intl'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -149,7 +149,7 @@ export function LanguageDetector({ i18nConfig }: LanguageDetectorProps) {
                 onClick={handleClose}
                 className="text-gray-500 hover:text-gray-700"
               >
-                <icons.X className="h-5 w-5" />
+                <XIcon className="h-5 w-5" />
               </button>
             </div>
             <div className="flex items-center gap-3">
@@ -172,4 +172,4 @@ export function LanguageDetector({ i18nConfig }: LanguageDetectorProps) {
       </div>
     </div>
   )
-} 
+} 

package/src/main/pill-select/x-pill-select.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeBgColor, themeBorderColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
@@ -285,7 +285,7 @@ export function XPillSelect(props: XPillSelectProps) {
             </span>
           )}
         </div>
-        <icons.ChevronDown
+        <ChevronDownIcon
           className={cn(
             compact ? 'h-3.5 w-3.5' : 'h-4 w-4',
             'shrink-0 text-slate-500 transition-transform dark:text-slate-400',

package/src/main/pill-select/x-token-input.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useState } from 'react';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { XIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeBgColor, themeBorderColor, themeIconColor, themeRingColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
@@ -118,7 +118,7 @@ export function XTokenInput({
                         disabled && 'cursor-not-allowed'
                       )}
                     >
-                      <icons.X className={cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5')} />
+                      <XIcon className={cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5')} />
                     </button>
                   </span>
                 </li>

package/src/main/x-button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useRef, useEffect, ReactNode } from 'react'
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server'
+import { ChevronDownIcon, Loader2Icon } from '@windrun-huaiin/base-ui/icons'
 import { themeBgColor, themeBorderColor, themeIconColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib'
 import { cn } from '@windrun-huaiin/lib/utils'
 
@@ -175,7 +175,7 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className={loadingIconClass} />
+            <Loader2Icon className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
@@ -221,7 +221,7 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className={loadingIconClass} />
+            <Loader2Icon className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
@@ -244,7 +244,7 @@ export function XButton(props: xButtonProps) {
         aria-label="More actions"
         aria-expanded={menuOpen}
       >
-        <icons.ChevronDown className={chevronIconClass} />
+        <ChevronDownIcon className={chevronIconClass} />
       </button>
 
       {/* dropdown menu */}