@anker-in/headless-ui 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/src/components/badge.tsx

@@ -4,14 +4,14 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../helpers/index.js'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-[20px] border px-[10px] py-1 text-xs font-medium transition-colors focus:outline-none',
+  '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',
   {
     variants: {
       variant: {
-        default: 'bg-badge text-badge-foreground border-transparent',
-        secondary: 'bg-secondary text-secondary-foreground border-transparent',
-        destructive: 'bg-destructive text-destructive-foreground border-transparent',
-        outline: 'text-foreground',
+        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',
       },
     },
     defaultVariants: {

package/src/components/button.tsx

@@ -11,22 +11,22 @@ import { cn } from '../helpers/index.js'
  * Button Variants
  */
 const buttonVariants = cva(
-  'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap 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 disabled:ai-opacity-50',
   {
     variants: {
       variant: {
         primary:
-          'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',
+          'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',
         secondary:
-          'bg-btn-secondary border-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground border border-solid',
-        link: 'text-primary underline-offset-4 hover:underline',
-        ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',
+          'ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid',
+        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
+        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
       },
       size: {
-        sm: 'h-8 px-3 py-1',
-        base: 'h-10 px-4 py-2',
-        lg: 'h-11 px-8',
-        icon: 'size-10 rounded-full',
+        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',
+        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',
+        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',
+        icon: 'ai-size-10 ai-rounded-full',
       },
       /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
       hoverEffect: {
@@ -39,13 +39,13 @@ const buttonVariants = cva(
         variant: 'primary',
         hoverEffect: 'slide',
         class:
-          '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',
+          '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',
       },
       {
         variant: 'secondary',
         hoverEffect: 'slide',
         class:
-          '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',
+          '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',
       },
     ],
     defaultVariants: {
@@ -90,7 +90,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(
           buttonVariants({ variant, size, hoverEffect }),
           {
-            'cursor-not-allowed': disabled,
+            'ai-cursor-not-allowed': disabled,
           },
           className
         )}
@@ -102,13 +102,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
               {children}
             </span>
-            <span className="absolute">
+            <span className="ai-absolute">
               <Spinner />
             </span>
             <VisuallyHidden>{children}</VisuallyHidden>
           </>
         ) : (
-          <span className="z-[1]">{children}</span>
+          children
         )}
       </Comp>
     )

package/src/components/checkbox.tsx

@@ -5,24 +5,40 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { CheckIcon } from '@radix-ui/react-icons'
 
 import { cn } from '../helpers/index.js'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-      <CheckIcon className="size-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+const checkboxVariants = cva(
+  'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-size-5',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, size, ...props }, ref) => (
+    <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ size }), className)} {...props}>
+      <CheckboxPrimitive.Indicator
+        className={cn('ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full')}
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+)
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export default Checkbox
+export type { CheckboxProps }

package/src/components/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+      'data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0  ai-fixed ai-inset-0 ai-z-50 ai-bg-black/80',
       className
     )}
     {...props}
@@ -38,15 +38,15 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        'ai-bg-background data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 data-[state=closed]:ai-zoom-out-95 data-[state=open]:ai-zoom-in-95 data-[state=closed]:ai-slide-out-to-left-1/2 data-[state=closed]:ai-slide-out-to-top-[48%] data-[state=open]:ai-slide-in-from-left-1/2 data-[state=open]:ai-slide-in-from-top-[48%] ai-fixed ai-left-1/2 ai-top-1/2 ai-z-50 ai-grid ai-w-full ai-max-w-lg -ai-translate-x-1/2 -ai-translate-y-1/2 ai-gap-4 ai-border ai-p-6 ai-shadow-lg ai-duration-200 sm:ai-rounded-lg',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
+      <DialogPrimitive.Close className="ai-ring-offset-background focus:ai-ring-ring data-[state=open]:ai-bg-accent data-[state=open]:ai-text-muted-foreground ai-absolute ai-right-4 ai-top-4 ai-rounded-sm ai-opacity-70 ai-transition-opacity hover:ai-opacity-100 focus:ai-outline-none focus:ai-ring-2 focus:ai-ring-offset-2 disabled:ai-pointer-events-none">
+        <Cross2Icon className="ai-size-4" />
+        <span className="ai-sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
@@ -54,12 +54,15 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+  <div className={cn('ai-flex ai-flex-col ai-space-y-1.5 ai-text-center sm:ai-text-left', className)} {...props} />
 )
 DialogHeader.displayName = 'DialogHeader'
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+  <div
+    className={cn('ai-flex ai-flex-col-reverse sm:ai-flex-row sm:ai-justify-end sm:ai-space-x-2', className)}
+    {...props}
+  />
 )
 DialogFooter.displayName = 'DialogFooter'
 
@@ -69,7 +72,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    className={cn('ai-text-lg ai-font-semibold ai-leading-none ai-tracking-tight', className)}
     {...props}
   />
 ))
@@ -79,7 +82,7 @@ const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  <DialogPrimitive.Description ref={ref} className={cn('ai-text-muted-foreground ai-text-sm', className)} {...props} />
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 

package/src/components/heading.tsx

@@ -1,19 +1,73 @@
 import { cn } from '../helpers/index.js'
 import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
 import React from 'react'
 
+const headingVariants = cva('', {
+  variants: {
+    size: {
+      1: 'ai-text-xs',
+      2: 'ai-text-sm',
+      3: 'ai-text-base',
+      4: 'ai-text-lg',
+      5: 'ai-text-xl',
+      6: 'ai-text-2xl',
+      7: 'ai-text-3xl',
+      8: 'ai-text-4xl',
+      9: 'ai-text-5xl',
+    },
+    weights: {
+      light: 'ai-font-light',
+      normal: 'ai-font-normal',
+      medium: 'ai-font-medium',
+      bold: 'ai-font-bold',
+    },
+  },
+  defaultVariants: {
+    size: 3,
+    weights: 'normal',
+  },
+})
+
 type HeadingElement = React.ElementRef<'h1'>
 
-interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
+interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
   asChild?: boolean
+  color?: string
+  html?: string
 }
 
 const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, asChild, as: Tag = 'h1', color, ...headingProps } = props
+  const { children, className, size, weights, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : null
+
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
   return (
-    <Slot data-accent-color={color || undefined} {...headingProps} ref={forwardedRef} className={cn('', className)}>
-      {asChild ? children : <Tag>{children}</Tag>}
+    <Slot
+      {...headingProps}
+      ref={forwardedRef}
+      className={cn(
+        headingVariants({
+          size,
+          weights,
+        }),
+        className
+      )}
+      {...htmlContentProps}
+      {...styleProps}
+    >
+      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>
   )
 })
@@ -21,3 +75,4 @@ const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwarded
 Heading.displayName = 'Heading'
 
 export { Heading }
+export type { HeadingProps }

package/src/components/index.ts

@@ -14,4 +14,5 @@ export * from './popover.js'
 export * from './radio.js'
 export * from './dialog.js'
 export * from './text.js'
+export * from './heading.js'
 export { default as Theme } from './theme.js'

package/src/components/input.tsx

@@ -2,17 +2,17 @@
 
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
-import type { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const inputVariants = cva(
-  'border-input bg-background focus-visible:ring-ring ring-offset-background flex h-2 flex-row items-center overflow-hidden rounded-md border px-3 focus-visible:ring-2 focus-visible:ring-offset-2',
+  'ai-border-input ai-bg-background focus-visible:ai-ring-ring ai-ring-offset-background ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border ai-px-3 focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2',
   {
     variants: {
       size: {
-        sm: 'h-8',
-        base: 'h-10',
-        lg: 'h-12',
+        sm: 'ai-h-8',
+        base: 'ai-h-10',
+        lg: 'ai-h-12',
       },
     },
     defaultVariants: {
@@ -42,9 +42,9 @@ const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, for
     <div
       ref={forwardedRef}
       {...slotProps}
-      className={cn('flex h-full items-center px-2', className, {
-        '-order-1 pl-0': side === 'left',
-        'order-2 pr-0': side === 'right',
+      className={cn('ai-flex ai-h-full ai-items-center ai-px-2', className, {
+        '-ai-order-1 ai-pl-0': side === 'left',
+        'ai-order-2 ai-pr-0': side === 'right',
       })}
     >
       {children}
@@ -59,7 +59,7 @@ const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
         <input
           type={type}
           className={cn(
-            'placeholder:text-muted-foreground flex size-full text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+            'placeholder:ai-text-muted-foreground ai-flex ai-size-full ai-text-sm file:ai-border-0 file:ai-bg-transparent file:ai-text-sm file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50'
           )}
           ref={ref}
           {...props}

package/src/components/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        'ai-bg-popover ai-text-popover-foreground data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 data-[state=closed]:ai-zoom-out-95 data-[state=open]:ai-zoom-in-95 data-[side=bottom]:ai-slide-in-from-top-2 data-[side=left]:ai-slide-in-from-right-2 data-[side=right]:ai-slide-in-from-left-2 data-[side=top]:ai-slide-in-from-bottom-2 ai-z-50 ai-w-72 ai-rounded-md ai-border ai-p-4 ai-shadow-md ai-outline-none',
         className
       )}
       {...props}

package/src/components/radio.tsx

@@ -3,36 +3,71 @@
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { CheckIcon } from '@radix-ui/react-icons'
-
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../helpers/index.js'
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
+const RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({
+  size: 'base',
 })
+
+const radioGroupVariants = cva(
+  'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-size-5',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /** 尺寸 */
+  size?: 'sm' | 'base' | 'lg'
+}
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ className, children, size, ...props }, ref) => {
+    return (
+      <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref}>
+        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>
+      </RadioGroupPrimitive.Root>
+    )
+  }
+)
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="text-primary size-2.5 fill-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
+interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof radioGroupVariants> {}
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
+  ({ className, size, ...props }, ref) => {
+    const { size: sizeFromParent } = React.useContext(RadioContext)
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          radioGroupVariants({
+            size: size ?? sizeFromParent,
+          }),
+          className
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full">
+          <CheckIcon />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    )
+  }
+)
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
 export { RadioGroup, RadioGroupItem }
+export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -1,10 +1,41 @@
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
+import { Slot } from '@radix-ui/react-slot'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('bg-skeleton size-12 animate-pulse', className)} {...props} />
+type SkeletonElement = React.ElementRef<'span'>
+
+interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
+  /** 是否正在加载 */
+  loading?: boolean
 }
 
+const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, className, loading = true, ...skeletonProps } = props
+
+  if (!loading) return children
+  const Tag = React.isValidElement(children) ? Slot : 'span'
+
+  return (
+    <Tag
+      ref={forwardedRef}
+      className={cn(
+        `ai-bg-skeleton ai-animate-pulse empty:ai-block data-[inline-skeleton=true]:ai-leading-[0] !ai-bg-none !ai-bg-clip-border !ai-border-none !ai-shadow-none 
+        !ai-text-transparent !ai-outline-none !ai-select-none !ai-cursor-default !ai-pointer-events-none !ai-decoration-clone
+        after:!ai-invisible before:!ai-invisible [&>*]:!ai-invisible
+        `,
+        className
+      )}
+      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
+      tabIndex={-1}
+      {...skeletonProps}
+    >
+      {children}
+    </Tag>
+  )
+})
+
 Skeleton.displayName = 'Skeleton'
 
 export default Skeleton
+export type { SkeletonProps }

package/src/components/text.tsx

@@ -6,41 +6,70 @@ import { type VariantProps, cva } from 'class-variance-authority'
 const textVariants = cva('', {
   variants: {
     size: {
-      1: 'text-xs',
-      2: 'text-sm',
-      3: 'text-base',
-      4: 'text-lg',
-      5: 'text-xl',
-      6: 'text-2xl',
-      7: 'text-3xl',
-      8: 'text-4xl',
-      9: 'text-5xl',
+      1: 'ai-text-xs',
+      2: 'ai-text-sm',
+      3: 'ai-text-base',
+      4: 'ai-text-lg',
+      5: 'ai-text-xl',
+      6: 'ai-text-2xl',
+      7: 'ai-text-3xl',
+      8: 'ai-text-4xl',
+      9: 'ai-text-5xl',
     },
+    weights: {
+      light: 'ai-font-light',
+      normal: 'ai-font-normal',
+      medium: 'ai-font-medium',
+      bold: 'ai-font-bold',
+    },
+  },
+  defaultVariants: {
+    size: 3,
+    weights: 'normal',
   },
 })
 
 type TextElement = React.ElementRef<'span'>
-interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
+interface TextProps extends React.ComponentPropsWithoutRef<'span'>, VariantProps<typeof textVariants> {
   as?: 'div' | 'label' | 'p' | 'span' | undefined
   asChild?: boolean
   color?: string
+  /** 相当于 dangerouslySetInnerHTML */
+  html?: string
 }
 
-const Text = React.forwardRef<TextElement, TextProps & VariantProps<typeof textVariants>>((props, forwardedRef) => {
-  const { children, size, className, asChild, as: Tag = 'span', color, ...textProps } = props
+const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
+  const { children, size, weights, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
+
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : null
+
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
+
   return (
     <Slot
       {...textProps}
       ref={forwardedRef}
       className={cn(
         textVariants({
-          size: size,
+          size,
+          weights,
         }),
-        className,
-        color
+        className
       )}
+      {...htmlContentProps}
+      {...styleProps}
     >
-      {asChild ? children : <Tag>{children}</Tag>}
+      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>
   )
 })

package/src/icons/spinner.tsx

@@ -8,7 +8,7 @@ export interface SpinnerProps {
 const Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {
   return (
     <svg
-      className="animate-spin"
+      className="ai-animate-spin"
       width="20"
       height="20"
       viewBox="0 0 20 20"

package/src/stories/badge.stories.tsx

@@ -33,7 +33,7 @@ export const Default: Story = {}
 export const Examples: Story = {
   render() {
     return (
-      <div className="flex flex-col space-y-4">
+      <div className="ai-flex ai-flex-col ai-space-y-4">
         <Badge variant="default">Default</Badge>
         <Badge variant="secondary">Secondary</Badge>
         <Badge variant="destructive">Destructive</Badge>

package/src/stories/button.stories.tsx

@@ -83,7 +83,7 @@ export const WithIcon: Story = {
     size: 'lg',
     children: (
       <>
-        WithIcon <SearchIcon className="ml-2" />
+        WithIcon <SearchIcon className="ai-ml-2" />
       </>
     ),
   },