@anker-in/headless-ui 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "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

@@ -13,13 +13,13 @@ const Checkbox = React.forwardRef<
   <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',
+      '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-size-4 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',
       className
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-      <CheckIcon className="size-4" />
+    <CheckboxPrimitive.Indicator className={cn('ai-flex ai-items-center ai-justify-center ai-text-current')}>
+      <CheckIcon className="ai-size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

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/input.tsx

@@ -6,13 +6,13 @@ import type { ComponentPropsWithout, RemovedProps } from '@/helpers/component-pr
 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

@@ -22,13 +22,13 @@ const RadioGroupItem = React.forwardRef<
     <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',
+        'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-size-4 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',
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="text-primary size-2.5 fill-current" />
+      <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center">
+        <CheckIcon className="ai-text-primary ai-size-2.5 ai-fill-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

package/src/components/skeleton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { cn } from '../helpers/index.js'
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('bg-skeleton size-12 animate-pulse', className)} {...props} />
+  return <div className={cn('ai-bg-skeleton ai-size-12 ai-animate-pulse', className)} {...props} />
 }
 
 Skeleton.displayName = 'Skeleton'

package/src/components/text.tsx

@@ -6,28 +6,47 @@ 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, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
+
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : null
+
   return (
     <Slot
       {...textProps}
@@ -37,10 +56,11 @@ const Text = React.forwardRef<TextElement, TextProps & VariantProps<typeof textV
           size: size,
         }),
         className,
-        color
+        `text-[${color}]`
       )}
+      {...htmlContentProps}
     >
-      {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" />
       </>
     ),
   },

package/src/stories/checkbox.stories.tsx

@@ -4,11 +4,11 @@ import React from 'react'
 export default { title: 'Components/Checkbox' }
 
 export const Default = () => (
-  <div className="flex items-center space-x-2">
+  <div className="ai-flex ai-items-center ai-space-x-2">
     <Checkbox id="terms" />
     <label
       htmlFor="terms"
-      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
     >
       Accept terms and conditions
     </label>

package/src/stories/dialog.stories.tsx

@@ -18,23 +18,23 @@ export const Default = () => (
     <DialogTrigger asChild>
       <button>Edit Profile</button>
     </DialogTrigger>
-    <DialogContent className="sm:max-w-[425px]">
+    <DialogContent className="sm:ai-max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Edit profile</DialogTitle>
         <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
       </DialogHeader>
-      <div className="grid gap-4 py-4">
-        <div className="grid grid-cols-4 items-center gap-4">
-          <label htmlFor="name" className="text-right">
+      <div className="ai-grid ai-gap-4 ai-py-4">
+        <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
+          <label htmlFor="name" className="ai-text-right">
             Name
           </label>
-          <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+          <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
         </div>
-        <div className="grid grid-cols-4 items-center gap-4">
-          <label htmlFor="username" className="text-right">
+        <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
+          <label htmlFor="username" className="ai-text-right">
             Username
           </label>
-          <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+          <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
         </div>
       </div>
       <DialogFooter>

package/src/stories/input.stories.tsx

@@ -36,9 +36,9 @@ export const Default: Story = {
 export const WithButton: Story = {
   render() {
     return (
-      <Input className="rounded-3xl pr-0" placeholder="Enter your email" type="text">
+      <Input className="ai-rounded-3xl ai-pr-0" placeholder="Enter your email" type="text">
         <InputSlot side="right">
-          <Button className="h-full rounded-none" size="sm">
+          <Button className="ai-h-full ai-rounded-none" size="sm">
             subscribe
           </Button>
         </InputSlot>

package/src/stories/popover.stories.tsx

@@ -8,8 +8,8 @@ export const Default = () => (
     <PopoverTrigger asChild>
       <button>Open popover</button>
     </PopoverTrigger>
-    <PopoverContent className="w-80">
-      <div className="grid gap-4">
+    <PopoverContent className="ai-w-80">
+      <div className="ai-grid ai-gap-4">
         <p>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
           standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to

package/src/stories/radio.stories.tsx

@@ -4,13 +4,13 @@ import React from 'react'
 export default { title: 'Components/Radio' }
 
 export const Default = () => (
-  <div className="flex h-40 w-48 items-center justify-center">
-    <RadioGroup defaultValue="option-one">
-      <div className="flex items-center space-x-2">
+  <div className="ai-flex ai-h-40 ai-w-48 ai-items-center ai-justify-center">
+    <RadioGroup defaultValue="ai-option-one">
+      <div className="ai-flex ai-items-center ai-space-x-2">
         <RadioGroupItem value="option-one" id="option-one" />
         <label htmlFor="option-one">Option One</label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div className="ai-flex ai-items-center ai-space-x-2">
         <RadioGroupItem value="option-two" id="option-two" />
         <label htmlFor="option-two">Option Two</label>
       </div>

package/src/stories/skeleton.stories.tsx

@@ -21,12 +21,12 @@ export const Default: Story = {}
 export const Example: Story = {
   render() {
     return (
-      <div className="flex flex-col items-center justify-center">
-        <div className="flex w-full justify-between">
-          <Skeleton className="size-12 rounded-full" />
-          <Skeleton className="h-12 w-[70%] " />
+      <div className="ai-flex ai-flex-col ai-items-center ai-justify-center">
+        <div className="ai-flex ai-w-full ai-justify-between">
+          <Skeleton className="ai-size-12 ai-rounded-full" />
+          <Skeleton className="ai-h-12 ai-w-[70%] " />
         </div>
-        <Skeleton className="mt-2 h-40 w-[200px]" />
+        <Skeleton className="ai-mt-2 ai-h-40 ai-w-[200px]" />
       </div>
     )
   },

package/src/stories/text.stories.tsx

@@ -10,6 +10,29 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+    },
+    weights: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'normal', 'medium', 'bold'],
+    },
+    html: {
+      type: 'string',
+      description: '相当于 dangerouslySetInnerHTML',
+    },
+  },
+  args: {
+    size: 3,
+    weights: 'normal',
+    html: '',
+  },
 } satisfies Meta<typeof Text>
 
 export default meta
@@ -18,10 +41,12 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
+    size: 3,
+    weights: 'normal',
   },
 }
 
-const sizes = new Array(10).fill(0).map((_, i) => i + 1)
+const sizes = new Array(9).fill(0).map((_, i) => i + 1)
 export const All: Story = {
   render() {
     return (