@anker-in/headless-ui 0.0.25 → 0.0.27-alpha.0

package/src/biz-components/ShelfDisplay/index.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { cn } from '../../helpers/utils'
+import Picture from '../../components/picture'
+import Button from '../../components/button'
+export interface ShelfDisplayItem {
+  /** 产品图片*/
+  img: string
+  /** 折扣后价格*/
+  price: string
+  title: string
+  /** 折扣前价格*/
+  basePrice: string
+  subTitle: string
+  /** 标签*/
+  tagItems: string[]
+}
+
+export interface ShelfDisplayProps {
+  products: ShelfDisplayItem[]
+  /** 卡片形状 */
+  itemShape?: 'round' | 'square'
+  className?: string
+  /** 主题色*/
+  theme?: 'light' | 'dark'
+  /** 按钮形状 */
+  shape?: 'round' | 'square'
+  /** 主按钮配置 */
+  primaryButton?: string
+  /** 副按钮配置 */
+  secondaryButton?: string
+  /** 按钮事件*/
+  event?: {
+    primaryButton?: {
+      onClick: (v: any) => void
+    },
+    secondaryButton?: {
+      onClick: (v: any) => void
+    }
+  },
+}
+
+const ShelfDisplay: React.FC<ShelfDisplayProps> = ({
+  className = '',
+  shape = 'square',
+  itemShape = 'square',
+  products = [],
+  primaryButton,
+  secondaryButton,
+  event
+}) => {
+
+  const onPrimaryButton = (params: ShelfDisplayItem) => {
+    event?.primaryButton?.onClick?.(params)
+  }
+
+  const onSecondaryButton = (params: ShelfDisplayItem) => {
+    event?.secondaryButton?.onClick(params)
+  }
+
+  return (
+    <>
+      <div className={cn('w-full', className)}>
+        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
+          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
+            {products?.map((item, index) => {
+              return (
+                <div
+                  key={index}
+                  className={cn(
+                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px]',
+                    'md:min-w-[316px] md:max-w-[316px] lg:min-w-[404px] lg:max-w-[404px] lg:pt-4 lg:px-6 lg:pb-6',
+                    itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'
+                  )}
+                >
+                  <div className={cn('h-[137px] overflow-hidden relative inline-block mb-2', 'lg:mb-3 lg:h-[195px]')}>
+                    <Picture
+                      source={item?.img || ''}
+                      className="h-full [&_img]:w-auto object-cover flex justify-center"
+                    />
+                  </div>
+                  <div className="mb-1 flex gap-1 flex-wrap lg:mb-2">
+                    {item?.tagItems?.map((tag, index) => {
+                      return (
+                        <div
+                          key={index}
+                          className="border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold rounded-3xl text-[#00BEFA] lg:text-base"
+                        >
+                          {tag}
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <p className="flex-1 font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] lg:text-2xl">
+                    {item?.title || ''}
+                  </p>
+                  <h3 className="mt-1 mb-5 text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] lg:mt-2 lg:mb-6 lg:text-lg">
+                    {item?.subTitle || ''}
+                  </h3>
+                  <div className="mb-2 flex items-center">
+                    <div className="font-bold text-xl text-[#1D1D1F] lg:text-2xl">
+                      {item?.price || ''}
+                    </div>
+                    <div className="ml-1 font-bold text-xl text-[#86868C] lg:text-2xl">
+                      {item?.basePrice || ''}
+                    </div>
+                  </div>
+                  {/* 按钮组 */}
+                  <div className="flex items-center gap-3">
+                    <Button
+                      variant="primary"
+                      onClick={() => onPrimaryButton(item)}
+                      className={`
+                        flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs md:text-sm lg:text-base
+                        px-4 md:px-6 lg:px-7 hover:bg-transparent hover:text-black py-2 md:py-2.5 lg:py-3 tracking-[-0.04em]
+                        ${shape === 'round' ? 'rounded-[20px] lg:rounded-3xl' : ''}
+                      `}
+                    >
+                      {primaryButton || ''}
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      onClick={() => onSecondaryButton(item)}
+                      className={`
+                        flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs md:text-sm lg:text-base
+                        px-4 md:px-6 lg:px-7 py-2 md:py-2.5 lg:py-3 tracking-[-0.04em]
+                        ${shape === 'round' ? 'rounded-[20px] lg:rounded-3xl' : ''}
+                      `}
+                    >
+                      {secondaryButton || ''}
+                    </Button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ShelfDisplay

package/src/biz-components/Slogan/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { cn } from '../../helpers/utils.js'
+import { Heading, Text } from '../../components/index.js'
+import { withStyles } from '../../shared/Styles.js'
+import type { SloganProps } from './types.js'
+
+const Slogan = React.forwardRef<HTMLDivElement, SloganProps>(
+  ({ title, features, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-start md:flex-row md:items-end justify-center md:justify-between text-center w-full',
+          'px-4 sm:px-6 md:px-8 lg:px-16 xl:px-32',
+          'gap-8 py-8 sm:py-10 md:py-12 lg:py-16 xl:py-20',
+          className
+        )}
+      >
+        <Heading
+          as="h2"
+          size={2}
+          weight={"bold"}
+          align={"left"}
+          className='slogan-title text-[#1D1D1F] !leading-none text-[40px] md:text-[40px] lg:text-[48px] xl:text-[64px]'
+        >
+          {title}
+        </Heading>
+        {features && features.length > 0 && (
+          <div className="flex flex-row w-full gap-3 max-w-[423px] items-center">
+            {features.slice(0, 3).map((feature, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && (
+                  <div className="self-stretch w-px bg-[#D9D9D9]" />
+                )}
+                <div className="flex-1">
+                  <Text 
+                    align="left" 
+                    className="slogan-feature-text font-medium line-clamp-3 md:line-clamp-2 text-[#1D1D1F] text-[12px] leading-[1.4] sm:text-[13px] md:text-[14px]" 
+                    html={feature}
+                  />
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+Slogan.displayName = 'Slogan'
+
+export default withStyles(Slogan)

package/src/biz-components/Slogan/types.ts

@@ -0,0 +1,25 @@
+export interface Feature {
+    /**
+     * 特性标题
+     */
+    title: string
+    /**
+     * 特性描述
+     */
+    description: string
+  }
+  
+  export interface SloganProps {
+    /**
+     * 主标题
+     */
+    title: string
+    /**
+     * 特性列表，最多支持3个
+     */
+    features?: string[]
+    /**
+     * 自定义类名
+     */
+    className?: string
+  }

package/src/biz-components/index.ts

@@ -0,0 +1,11 @@
+export { default as Shelf } from './Shelf/index.js'
+export { default as BrandEquity } from './BrandEquity/index.js'
+export { default as MemberEquity } from './MemberEquity/index.js'
+export { default as Slogan } from './Slogan/index.js'
+export { default as ShelfDisplay } from './ShelfDisplay/index.js'
+export { default as Evaluate } from './Evaluate/index.js'
+export { default as Category } from './Category/index.js'
+export { default as HeroBanner } from './HeroBanner/index.js'
+
+
+export * from './Marquee'

package/src/components/alert.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../helpers/index.js'
+
+const alertVariants = cva(
+  '[&>svg:first-child]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>:first-child]:absolute [&>svg:first-child+div]:translate-y-[-3px] [&>svg:first-child]:left-4 [&>svg:first-child]:top-2 [&>svg:first-child~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg:first-child]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const Close = () => (
+  <svg
+    className="close absolute right-4 top-2 size-6 cursor-pointer !pl-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.3452 16.4762L12.1377 13.2687L8.92973 16.4767C8.61712 16.7893 8.11029 16.7891 7.79766 16.4765C7.48505 16.1638 7.4848 15.657 7.79741 15.3444L11.0054 12.1364L7.79791 8.92891C7.48503 8.61603 7.48503 8.10946 7.79765 7.79683C8.11015 7.48433 8.61688 7.48424 8.92973 7.79709L12.1372 11.0046L15.3452 7.79658C15.6577 7.48408 16.1646 7.48421 16.4772 7.79683C16.7899 8.10946 16.79 8.61641 16.4775 8.9289L13.2695 12.1369L16.477 15.3444C16.7899 15.6572 16.7898 16.1639 16.4773 16.4764C16.1647 16.789 15.6581 16.789 15.3452 16.4762L15.3452 16.4762Z"
+      fill="#1D1D1F"
+    />
+  </svg>
+)
+
+const IconMap = {
+  info: (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10.5" fill="#00BEFA" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
+        fill="white"
+      />
+    </svg>
+  ),
+  success: (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12.5" cy="12.5" r="10.5" fill="#30D158" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.3976 8.6772C18.0468 8.32635 17.478 8.32635 17.1271 8.6772L11.5586 14.2457L8.15843 10.8456C7.80758 10.4947 7.23874 10.4947 6.88789 10.8456C6.53704 11.1964 6.53704 11.7653 6.88789 12.1161L10.849 16.0772C10.8632 16.0914 10.8778 16.1051 10.8928 16.1182C10.9028 16.1293 10.9132 16.1402 10.9239 16.1509C11.2748 16.5018 11.8436 16.5018 12.1945 16.1509L18.3976 9.94773C18.7485 9.59688 18.7485 9.02805 18.3976 8.6772Z"
+        fill="white"
+      />
+    </svg>
+  ),
+  warning: (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10.5" fill="#FFC24D" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
+        fill="white"
+      />
+    </svg>
+  ),
+  error: (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10.5" fill="#FF4D4D" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.1249 7.13281C13.1249 6.51149 12.6213 6.00781 11.9999 6.00781C11.3786 6.00781 10.8749 6.51149 10.8749 7.13281V13.1328C10.8749 13.7541 11.3786 14.2578 11.9999 14.2578C12.6213 14.2578 13.1249 13.7541 13.1249 13.1328V7.13281ZM13.3499 16.6342C13.3499 15.8886 12.7455 15.2842 11.9999 15.2842C11.2543 15.2842 10.6499 15.8886 10.6499 16.6342C10.6499 17.3798 11.2543 17.9842 11.9999 17.9842C12.7455 17.9842 13.3499 17.3798 13.3499 16.6342Z"
+        fill="white"
+      />
+    </svg>
+  ),
+}
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof alertVariants> & {
+      /**
+       * 状态
+       */
+      status?: 'success' | 'error' | 'warning' | 'info'
+      /**
+       * 是否可以关闭
+       */
+      closable?: boolean
+    }
+>(({ className, variant, status, closable = false, children, ...props }, ref) => {
+  const icon = status ? IconMap[status] : null
+
+  return (
+    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
+      {icon}
+      {children}
+      {closable && <Close />}
+    </div>
+  )
+})
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  )
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-[#86868C] [&_p]:leading-relaxed', className)} {...props} />
+  )
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/avatar.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import React, { useEffect, useRef, forwardRef } from 'react'
+import fitty from 'fitty'
+import type { FittyInstance } from 'fitty'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { cn } from '../helpers/index.js'
+
+// 定义 avatar 的样式变体
+const avatarVariants = cva('tracking transition-colors', {
+  variants: {
+    size: {
+      small: 'size-6', // 小
+      medium: 'size-12', // 中
+      large: 'size-[72px]', // 大
+    },
+  },
+})
+
+type AvatarProps = {
+  /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
+  asChild?: boolean
+  /** 类名*/
+  className?: string
+  /** 样式*/
+  style?: React.CSSProperties
+  /** 点击事件*/
+  onClick?: Function
+  /** 文本自适应*/
+  isAdaptation?: boolean
+  /** 文本自适应最小字体, 开启时生效*/
+  minSize?: number
+  /** 文本自适应最大字体, 开启时生效*/
+  maxSize?: number
+  /** 文本自适应的类, 开启时生效*/
+  textClassName?: string
+} & VariantProps<typeof avatarVariants> &
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+
+const Avatar = forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
+  (
+    {
+      className,
+      textClassName,
+      isAdaptation = false,
+      minSize = 4,
+      maxSize = 16,
+      children,
+      style,
+      size = 'small',
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const textRef = useRef<HTMLDivElement>(null)
+    // 点击事件
+    const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      onClick?.(e)
+    }
+
+    useEffect(() => {
+      let fittyInstance: FittyInstance
+      if (isAdaptation && textRef.current) {
+        fittyInstance = fitty?.(textRef.current, {
+          minSize,
+          maxSize,
+        })
+      }
+      return () => fittyInstance?.unsubscribe?.()
+    }, [])
+
+    return (
+      <AvatarPrimitive.Root
+        ref={ref}
+        onClick={handleClick}
+        className={cn(
+          avatarVariants({ size }),
+          'bg-bg-2 relative flex shrink-0 overflow-hidden rounded-full',
+          className
+        )}
+        {...(style ? { style: style } : null)}
+        {...props}
+      >
+        {isAdaptation ? (
+          <span className="bg-muted flex size-full items-center justify-center rounded-full">
+            <span ref={textRef} className={cn('px-2', textClassName)}>
+              {children}
+            </span>
+          </span>
+        ) : (
+          children
+        )}
+      </AvatarPrimitive.Root>
+    )
+  }
+)
+
+Avatar.displayName = 'Avatar'
+
+const AvatarImage = forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full', className)} {...props} />
+))
+
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+      {...props}
+    />
+  )
+})
+
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/badge.tsx

@@ -4,26 +4,24 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../helpers/index.js'
 
 const badgeVariants = cva(
-  'ai-inline-flex ai-items-center ai-font-medium ai-rounded-[20px] ai-border ai-px-[10px] ai-py-1 ai-text-xs ai-transition-colors focus:ai-outline-none',
+  'inline-flex justify-center text-btn-primary border-btn-primary items-center font-medium rounded-[20px] border px-[10px] py-1 text-xs transition-colors focus:outline-none',
   {
     variants: {
-      variant: {
-        default: 'ai-bg-badge ai-text-badge-foreground ai-border-transparent',
-        secondary: 'ai-bg-secondary ai-text-secondary-foreground ai-border-transparent',
-        destructive: 'ai-bg-destructive ai-text-destructive-foreground ai-border-transparent',
-        outline: 'ai-text-foreground',
-      },
+      size: {
+        sm: 'text-xs',
+        base: 'text-sm',
+      }
     },
     defaultVariants: {
-      variant: 'default',
+      size: 'base',
     },
   }
 )
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> { }
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+function Badge({ className, size, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ size }), className)} {...props} />
 }
 
 export default Badge

package/src/components/button.tsx

@@ -11,21 +11,22 @@ import { cn } from '../helpers/index.js'
  * Button Variants
  */
 const buttonVariants = cva(
-  'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none',
+  'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',
   {
     variants: {
       variant: {
-        primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',
+        nature: 'border border-solid border-black',
+        primary: 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active',
         secondary:
-          'ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground',
-        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
-        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
+          'bg-btn-secondary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',
+        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',
       },
       size: {
-        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',
-        base: 'ai-h-10 ai-px-[2.625rem] ai-py-[0.625rem] ai-text-[14px]',
-        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',
-        icon: 'ai-size-10 ai-rounded-full',
+        sm: 'px-3 py-2 text-[12px]  leading-tight',
+        base: 'px-5 pt-[11px] pb-[10px] text-[14px]  leading-tight',
+        lg: 'px-7 pt-[15px] pb-[14px] text-[16px]  leading-tight',
+        icon: 'size-10 rounded-full  leading-tight',
       },
       /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
       hoverEffect: {
@@ -34,44 +35,56 @@ const buttonVariants = cva(
       },
       state: {
         default: '',
-        disabled: '!ai-cursor-not-allowed !ai-pointer-events-auto',
+        disabled: '',
         loading: '',
       },
+      theme: {
+        dark: '',
+        light: '',
+      },
     },
     compoundVariants: [
       {
         variant: 'primary',
         hoverEffect: 'slide',
         class:
-          'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0  before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0',
+          'z-[1] before:-z-[1] before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
       },
       {
         variant: 'secondary',
         hoverEffect: 'slide',
         class:
-          'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0  before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0',
+          'z-[1] before:-z-[1] before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
       },
       {
         variant: 'primary',
         state: 'loading',
-        class: 'ai-bg-btn-primary',
+        class: 'bg-btn-primary',
       },
       {
         variant: 'secondary',
         state: 'loading',
-        class:
-          'ai-bg-btn-secondary-active  disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground',
+        class: 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',
       },
       {
         variant: 'primary',
         state: 'disabled',
-        class: 'disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',
+        class: 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',
       },
       {
         variant: 'secondary',
         state: 'disabled',
-        class:
-          'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor',
+        class: 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',
+      },
+      {
+        variant: 'nature',
+        theme: 'dark',
+        class: 'bg-transparent text-black',
+      },
+      {
+        variant: 'nature',
+        theme: 'light',
+        class: 'bg-black text-white',
       },
     ],
     defaultVariants: {
@@ -79,6 +92,7 @@ const buttonVariants = cva(
       size: 'base',
       hoverEffect: 'none',
       state: 'default',
+      theme: 'light',
     },
   }
 )
@@ -86,10 +100,11 @@ const buttonVariants = cva(
 const loadingSvgVariants = cva('', {
   variants: {
     variant: {
-      primary: 'ai-stroke-btn-primary-foreground',
-      secondary: 'ai-stroke-btn-secondary',
-      link: 'ai-stroke-primary',
-      ghost: 'ai-stroke-primary',
+      nature: 'stroke-btn-primary-foreground',
+      primary: 'stroke-btn-primary-foreground',
+      secondary: 'stroke-btn-secondary-foreground',
+      link: 'stroke-primary',
+      ghost: 'stroke-primary',
     },
   },
   defaultVariants: {
@@ -99,7 +114,7 @@ const loadingSvgVariants = cva('', {
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   /** 设置按钮载入状态  */
   loading?: boolean
   /** 设置按钮失效状态  */
@@ -117,6 +132,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       size = 'base',
       children,
       variant,
+      theme = 'light',
       hoverEffect = 'none',
       className,
       disabled = false,
@@ -133,7 +149,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Comp
         disabled={isInactive}
-        className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}
+        className={cn(buttonVariants({ variant, size, hoverEffect, state, theme }), className)}
         ref={ref}
         {...props}
       >
@@ -142,7 +158,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
               {children}
             </span>
-            <span className="ai-absolute">
+            <span className="absolute">
               {spinner ? (
                 spinner
               ) : (