@anker-in/headless-ui 0.0.17 → 0.0.19

package/dist/cjs/components/button.d.ts

@@ -5,7 +5,7 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "ghost" | null | undefined;
-    size?: "sm" | "lg" | "base" | "icon" | null | undefined;
+    size?: "sm" | "base" | "lg" | "icon" | null | undefined;
     hoverEffect?: "none" | "slide" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -15,6 +15,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     disabled?: boolean;
     /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
     asChild?: boolean;
+    /** 自定义loading  */
+    spinner?: React.ReactNode;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/cjs/components/button.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var P=(e,a)=>{for(var i in a)n(e,i,{get:a[i],enumerable:!0})},d=(e,a,i,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of z(a))!H.call(e,t)&&t!==i&&n(e,t,{get:()=>a[t],enumerable:!(o=V(a,t))||o.enumerable});return e};var f=(e,a,i)=>(i=e!=null?B(E(e)):{},d(a||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),C=e=>d(n({},"__esModule",{value:!0}),e);var R={};P(R,{default:()=>N});module.exports=C(R);var r=require("react/jsx-runtime"),L=f(require("react")),p=require("@radix-ui/react-slot"),u=require("@radix-ui/react-visually-hidden"),c=require("class-variance-authority"),m=f(require("../icons/spinner.js")),y=require("../helpers/index.js");const M=(0,c.cva)("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:"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:"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:"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"},hoverEffect:{none:"",slide:""}},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'},{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'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),l=L.forwardRef(({asChild:e=!1,size:a="base",children:i,variant:o,hoverEffect:t="none",className:v,disabled:g=!1,loading:s=!1,...x},h)=>{const w=e?p.Slot:"button",b=g||s;return(0,r.jsx)(w,{disabled:b,className:(0,y.cn)(M({variant:o,size:a,hoverEffect:t}),{"ai-cursor-not-allowed":b},v),ref:h,...x,children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:i}),(0,r.jsx)("span",{className:"ai-absolute",children:(0,r.jsx)(m.default,{})}),(0,r.jsx)(u.VisuallyHidden,{children:i})]}):i})});l.displayName="Button";var N=l;
+"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var N=(e,a)=>{for(var i in a)n(e,i,{get:a[i],enumerable:!0})},l=(e,a,i,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of z(a))!H.call(e,t)&&t!==i&&n(e,t,{get:()=>a[t],enumerable:!(o=k(a,t))||o.enumerable});return e};var p=(e,a,i)=>(i=e!=null?B(E(e)):{},l(a||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>l(n({},"__esModule",{value:!0}),e);var S={};N(S,{default:()=>M});module.exports=P(S);var r=require("react/jsx-runtime"),R=p(require("react")),u=require("@radix-ui/react-slot"),m=require("@radix-ui/react-visually-hidden"),s=require("class-variance-authority"),y=p(require("../icons/spinner.js")),v=require("../helpers/index.js");const C=(0,s.cva)("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:"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:"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:"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"},hoverEffect:{none:"",slide:""}},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'},{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'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),L=(0,s.cva)("",{variants:{variant:{primary:"ai-stroke-btn-primary-foreground",secondary:"ai-stroke-btn-secondary-foreground",link:"ai-stroke-primary",ghost:"ai-stroke-primary"}}}),c=R.forwardRef(({asChild:e=!1,size:a="base",children:i,variant:o,hoverEffect:t="none",className:g,disabled:x=!1,loading:b=!1,spinner:d,...h},V)=>{const w=e?u.Slot:"button",f=x||b;return(0,r.jsx)(w,{disabled:f,className:(0,v.cn)(C({variant:o,size:a,hoverEffect:t}),{"ai-cursor-not-allowed":f},g),ref:V,...h,children:b?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:i}),(0,r.jsx)("span",{className:"ai-absolute",children:d||(0,r.jsx)(y.default,{className:L({variant:o})})}),(0,r.jsx)(m.VisuallyHidden,{children:i})]}):i})});c.displayName="Button";var M=c;
 //# sourceMappingURL=button.js.map

package/dist/cjs/components/button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/button.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        primary:\n          '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',\n        secondary:\n          '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',\n        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',\n        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',\n        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',\n        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',\n        icon: 'ai-size-10 ai-rounded-full',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      hoverEffect: 'none',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'base',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(\n          buttonVariants({ variant, size, hoverEffect }),\n          {\n            'ai-cursor-not-allowed': isInactive,\n          },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"ai-absolute\">\n              <Spinner />\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGU,IAAAI,EAAA,6BAnGVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAKnB,MAAMC,KAAiB,OACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAaMC,EAASP,EAAM,WACnB,CACE,CACE,QAAAQ,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAU,OAAO,SACxBW,EAAaL,GAAYC,EAE/B,SACE,OAACG,EAAA,CACC,SAAUC,EACV,aAAW,MACTb,EAAe,CAAE,QAAAK,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBO,CAC3B,EACAN,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,cACd,mBAAC,EAAAU,QAAA,EAAQ,EACX,KACA,OAAC,kBAAgB,SAAAV,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOV,EAAQU",
-  "names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "buttonVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Comp", "isInactive", "Spinner"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        primary:\n          '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',\n        secondary:\n          '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',\n        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',\n        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',\n        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',\n        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',\n        icon: 'ai-size-10 ai-rounded-full',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      hoverEffect: 'none',\n    },\n  }\n)\n\nconst loadingSvgVariants = cva('', {\n  variants: {\n    variant: {\n      primary: 'ai-stroke-btn-primary-foreground',\n      secondary: 'ai-stroke-btn-secondary-foreground',\n      link: 'ai-stroke-primary',\n      ghost: 'ai-stroke-primary',\n    },\n  },\n})\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u81EA\u5B9A\u4E49loading  */\n  spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'base',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      spinner,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(\n          buttonVariants({ variant, size, hoverEffect }),\n          {\n            'ai-cursor-not-allowed': isInactive,\n          },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"ai-absolute\">\n              {spinner ? (\n                spinner\n              ) : (\n                <Spinner\n                  className={loadingSvgVariants({\n                    variant,\n                  })}\n                />\n              )}\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmHU,IAAAI,EAAA,6BAjHVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAKnB,MAAMC,KAAiB,OACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,mCACT,UAAW,qCACX,KAAM,oBACN,MAAO,mBACT,CACF,CACF,CAAC,EAeKC,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOX,EAAU,OAAO,SACxBY,EAAaN,GAAYC,EAE/B,SACE,OAACI,EAAA,CACC,SAAUC,EACV,aAAW,MACTf,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBQ,CAC3B,EACAP,CACF,EACA,IAAKK,EACJ,GAAGD,EAEH,SAAAF,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,cACb,SAAAM,MAGC,OAAC,EAAAK,QAAA,CACC,UAAWf,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOX,EAAQW",
+  "names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "Comp", "isInactive", "Spinner"]
 }

package/dist/cjs/components/checkbox.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { type VariantProps } from 'class-variance-authority';
 declare const checkboxVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
 }

package/dist/cjs/components/heading.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import React from 'react';
 declare const headingVariants: (props?: ({
-    size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;

package/dist/cjs/components/input.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {
 }

package/dist/cjs/components/radio.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type VariantProps } from 'class-variance-authority';
 declare const radioGroupVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
     /** 尺寸 */

package/dist/cjs/components/text.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 declare const textVariants: (props?: ({
-    size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;

package/dist/cjs/icons/spinner.d.ts

@@ -1,7 +1,5 @@
 export interface SpinnerProps {
-    /** loading 图标大小 */
-    size?: 'sm' | 'md' | 'lg';
-    color?: string;
+    className?: string;
 }
-declare const Spinner: ({ size, color }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/dist/cjs/icons/spinner.js

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var i in e)r(s,i,{get:e[i],enumerable:!0})},l=(s,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of f(e))!a.call(s,n)&&n!==i&&r(s,n,{get:()=>e[n],enumerable:!(o=p(e,n))||o.enumerable});return s};var d=s=>l(r({},"__esModule",{value:!0}),s);var m={};g(m,{default:()=>w});module.exports=d(m);var t=require("react/jsx-runtime");const h=({size:s="sm",color:e="#ffffff"})=>(0,t.jsx)("svg",{className:"ai-animate-spin",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3",stroke:e,strokeWidth:"1.6",strokeLinecap:"round"})});var w=h;
+"use strict";var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(e,n)=>{for(var r in n)t(e,r,{get:n[r],enumerable:!0})},h=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of l(n))!c.call(e,s)&&s!==r&&t(e,s,{get:()=>n[s],enumerable:!(o=p(n,s))||o.enumerable});return e};var m=e=>h(t({},"__esModule",{value:!0}),e);var f={};g(f,{default:()=>d});module.exports=m(f);var i=require("react/jsx-runtime"),a=require("../helpers");const w=e=>(0,i.jsx)("svg",{className:(0,a.cn)("ai-animate-spin",e.className),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)("path",{d:"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3",strokeWidth:"1.6",strokeLinecap:"round"})});var d=w;
 //# sourceMappingURL=spinner.js.map

package/dist/cjs/icons/spinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/icons/spinner.tsx"],
-  "sourcesContent": ["export interface SpinnerProps {\n  /** loading \u56FE\u6807\u5927\u5C0F */\n  size?: 'sm' | 'md' | 'lg'\n  color?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {\n  return (\n    <svg\n      className=\"ai-animate-spin\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3\"\n        stroke={color}\n        strokeWidth=\"1.6\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport default Spinner\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiBM,IAAAI,EAAA,6BAVN,MAAMC,EAAU,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,SAAU,OAE9C,OAAC,OACC,UAAU,kBACV,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,mBAAC,QACC,EAAE,qFACF,OAAQA,EACR,YAAY,MACZ,cAAc,QAChB,EACF,EAIJ,IAAOL,EAAQG",
-  "names": ["spinner_exports", "__export", "spinner_default", "__toCommonJS", "import_jsx_runtime", "Spinner", "size", "color"]
+  "sourcesContent": ["import { cn } from '../helpers'\n\nexport interface SpinnerProps {\n  className?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = (props: SpinnerProps) => {\n  return (\n    <svg\n      className={cn('ai-animate-spin', props.className)}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3\"\n        strokeWidth=\"1.6\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport default Spinner\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiBM,IAAAI,EAAA,6BAjBNC,EAAmB,sBAOnB,MAAMC,EAAWC,MAEb,OAAC,OACC,aAAW,MAAG,kBAAmBA,EAAM,SAAS,EAChD,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,mBAAC,QACC,EAAE,qFACF,YAAY,MACZ,cAAc,QAChB,EACF,EAIJ,IAAOL,EAAQI",
+  "names": ["spinner_exports", "__export", "spinner_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "Spinner", "props"]
 }

package/dist/cjs/stories/button.stories.d.ts

@@ -45,3 +45,4 @@ export declare const Secondary: Story;
 export declare const Link: Story;
 export declare const WithIcon: Story;
 export declare const Aschild: Story;
+export declare const Spinner: Story;

package/dist/cjs/stories/button.stories.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var d=(o,t)=>{for(var a in t)s(o,a,{get:t[a],enumerable:!0})},m=(o,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!y.call(o,r)&&r!==a&&s(o,r,{get:()=>t[r],enumerable:!(n=l(t,r))||n.enumerable});return o};var h=o=>m(s({},"__esModule",{value:!0}),o);var x={};d(x,{Aschild:()=>b,Link:()=>u,Primary:()=>S,Secondary:()=>v,WithIcon:()=>z,default:()=>f});module.exports=h(x);var e=require("react/jsx-runtime"),i=require("@storybook/icons"),c=require("../components/index"),B=require("react");const g={title:"Components/Button",component:c.Button,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["primary","secondary","link","ghost"]},size:{control:{type:"select"},options:["sm","base","lg","icon"]},hoverEffect:{description:"hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548",control:{type:"select"},options:["none","slide"]}},args:{variant:"primary",size:"base",children:"Button",asChild:!1,disabled:!1,loading:!1,hoverEffect:"none"}};var f=g;const S={args:{size:"lg",children:"Primary"}},v={args:{size:"lg",variant:"secondary",children:"Secondary"}},u={args:{size:"lg",variant:"link",children:"Link"}},z={args:{size:"lg",children:(0,e.jsxs)(e.Fragment,{children:["WithIcon ",(0,e.jsx)(i.SearchIcon,{className:"ai-ml-2"})]})}},b={args:{size:"lg",asChild:!0,children:(0,e.jsx)("a",{href:"http://example.com",children:"as a a tag"})}};
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var d=(o,t)=>{for(var a in t)n(o,a,{get:t[a],enumerable:!0})},m=(o,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!y.call(o,r)&&r!==a&&n(o,r,{get:()=>t[r],enumerable:!(s=c(t,r))||s.enumerable});return o};var g=o=>m(n({},"__esModule",{value:!0}),o);var k={};d(k,{Aschild:()=>z,Link:()=>v,Primary:()=>S,Secondary:()=>u,Spinner:()=>b,WithIcon:()=>x,default:()=>f});module.exports=g(k);var e=require("react/jsx-runtime"),i=require("@storybook/icons"),l=require("../components/index"),C=require("react");const h={title:"Components/Button",component:l.Button,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["primary","secondary","link","ghost"]},size:{control:{type:"select"},options:["sm","base","lg","icon"]},hoverEffect:{description:"hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548",control:{type:"select"},options:["none","slide"]}},args:{variant:"primary",size:"base",children:"Button",asChild:!1,disabled:!1,loading:!1,hoverEffect:"none"}};var f=h;const S={args:{size:"lg",children:"Primary"}},u={args:{size:"lg",variant:"secondary",children:"Secondary"}},v={args:{size:"lg",variant:"link",children:"Link"}},x={args:{size:"lg",children:(0,e.jsxs)(e.Fragment,{children:["WithIcon ",(0,e.jsx)(i.SearchIcon,{className:"ai-ml-2"})]})}},z={args:{size:"lg",asChild:!0,children:(0,e.jsx)("a",{href:"http://example.com",children:"as a a tag"})}},b={args:{size:"lg",loading:!0,spinner:(0,e.jsx)("span",{className:" ai-text-neutral-900 ai-animate-pulse ai-font-bold",children:"loading..."})}};
 //# sourceMappingURL=button.stories.js.map

package/dist/cjs/stories/button.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/button.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    asChild: false,\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ai-ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,YAAAC,EAAA,cAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAoFM,IAAAS,EAAA,6BAnFNC,EAA2B,4BAE3BC,EAAuB,+BACvBC,EAAkB,iBAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAW,SACX,WAAY,CAEV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,CACnD,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,CACtC,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAON,EAAQM,EAOR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaF,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaG,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,YACE,oBAAE,yBACS,OAAC,cAAW,UAAU,UAAU,GAC3C,CAEJ,CACF,EAEaJ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,YAAU,OAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF",
-  "names": ["button_stories_exports", "__export", "Aschild", "Link", "Primary", "Secondary", "WithIcon", "button_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_components", "import_react", "meta"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    asChild: false,\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ai-ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n\nexport const Spinner: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n    spinner: <span className=\" ai-text-neutral-900 ai-animate-pulse ai-font-bold\">loading...</span>,\n  },\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,YAAAC,EAAA,cAAAC,EAAA,YAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GAoFM,IAAAU,EAAA,6BAnFNC,EAA2B,4BAE3BC,EAAuB,+BACvBC,EAAkB,iBAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAW,SACX,WAAY,CAEV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,CACnD,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,CACtC,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAON,EAAQM,EAOR,MAAMV,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaF,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaI,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,YACE,oBAAE,yBACS,OAAC,cAAW,UAAU,UAAU,GAC3C,CAEJ,CACF,EAEaL,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,YAAU,OAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF,EAEaI,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,WAAS,OAAC,QAAK,UAAU,qDAAqD,sBAAU,CAC1F,CACF",
+  "names": ["button_stories_exports", "__export", "Aschild", "Link", "Primary", "Secondary", "Spinner", "WithIcon", "button_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_components", "import_react", "meta"]
 }

package/dist/esm/components/button.d.ts

@@ -5,7 +5,7 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "ghost" | null | undefined;
-    size?: "sm" | "lg" | "base" | "icon" | null | undefined;
+    size?: "sm" | "base" | "lg" | "icon" | null | undefined;
     hoverEffect?: "none" | "slide" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -15,6 +15,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     disabled?: boolean;
     /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
     asChild?: boolean;
+    /** 自定义loading  */
+    spinner?: React.ReactNode;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/esm/components/button.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as w,jsx as e,jsxs as B}from"react/jsx-runtime";import*as c from"react";import{Slot as m}from"@radix-ui/react-slot";import{VisuallyHidden as y}from"@radix-ui/react-visually-hidden";import{cva as v}from"class-variance-authority";import g from"../icons/spinner.js";import{cn as x}from"../helpers/index.js";const h=v("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:"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:"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:"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"},hoverEffect:{none:"",slide:""}},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'},{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'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),t=c.forwardRef(({asChild:o=!1,size:n="base",children:a,variant:s,hoverEffect:b="none",className:d,disabled:f=!1,loading:i=!1,...l},p)=>{const u=o?m:"button",r=f||i;return e(u,{disabled:r,className:x(h({variant:s,size:n,hoverEffect:b}),{"ai-cursor-not-allowed":r},d),ref:p,...l,children:i?B(w,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:a}),e("span",{className:"ai-absolute",children:e(g,{})}),e(y,{children:a})]}):a})});t.displayName="Button";var C=t;export{C as default};
+"use client";import{Fragment as B,jsx as e,jsxs as k}from"react/jsx-runtime";import*as y from"react";import{Slot as v}from"@radix-ui/react-slot";import{VisuallyHidden as g}from"@radix-ui/react-visually-hidden";import{cva as n}from"class-variance-authority";import x from"../icons/spinner.js";import{cn as h}from"../helpers/index.js";const V=n("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:"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:"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:"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"},hoverEffect:{none:"",slide:""}},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'},{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'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),w=n("",{variants:{variant:{primary:"ai-stroke-btn-primary-foreground",secondary:"ai-stroke-btn-secondary-foreground",link:"ai-stroke-primary",ghost:"ai-stroke-primary"}}}),s=y.forwardRef(({asChild:b=!1,size:d="base",children:a,variant:i,hoverEffect:f="none",className:l,disabled:p=!1,loading:r=!1,spinner:t,...c},u)=>{const m=b?v:"button",o=p||r;return e(m,{disabled:o,className:h(V({variant:i,size:d,hoverEffect:f}),{"ai-cursor-not-allowed":o},l),ref:u,...c,children:r?k(B,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:a}),e("span",{className:"ai-absolute",children:t||e(x,{className:w({variant:i})})}),e(g,{children:a})]}):a})});s.displayName="Button";var R=s;export{R as default};
 //# sourceMappingURL=button.js.map

package/dist/esm/components/button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/button.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        primary:\n          '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',\n        secondary:\n          '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',\n        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',\n        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',\n        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',\n        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',\n        icon: 'ai-size-10 ai-rounded-full',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      hoverEffect: 'none',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'base',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(\n          buttonVariants({ variant, size, hoverEffect }),\n          {\n            'ai-cursor-not-allowed': isInactive,\n          },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"ai-absolute\">\n              <Spinner />\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
-  "mappings": "aAqGU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAnGV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAKnB,MAAMC,EAAiBH,EACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAaMI,EAASP,EAAM,WACnB,CACE,CACE,QAAAQ,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAUP,EAAO,SACxBkB,EAAaL,GAAYC,EAE/B,OACEjB,EAACoB,EAAA,CACC,SAAUC,EACV,UAAWd,EACTC,EAAe,CAAE,QAAAK,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBO,CAC3B,EACAN,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,EACChB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAY,EACH,EACAZ,EAAC,QAAK,UAAU,cACd,SAAAA,EAACM,EAAA,EAAQ,EACX,EACAN,EAACI,EAAA,CAAgB,SAAAQ,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOa,EAAQb",
-  "names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Comp", "isInactive", "button_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        primary:\n          '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',\n        secondary:\n          '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',\n        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',\n        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',\n        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',\n        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',\n        icon: 'ai-size-10 ai-rounded-full',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          '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',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      hoverEffect: 'none',\n    },\n  }\n)\n\nconst loadingSvgVariants = cva('', {\n  variants: {\n    variant: {\n      primary: 'ai-stroke-btn-primary-foreground',\n      secondary: 'ai-stroke-btn-secondary-foreground',\n      link: 'ai-stroke-primary',\n      ghost: 'ai-stroke-primary',\n    },\n  },\n})\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u81EA\u5B9A\u4E49loading  */\n  spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'base',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      spinner,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(\n          buttonVariants({ variant, size, hoverEffect }),\n          {\n            'ai-cursor-not-allowed': isInactive,\n          },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"ai-absolute\">\n              {spinner ? (\n                spinner\n              ) : (\n                <Spinner\n                  className={loadingSvgVariants({\n                    variant,\n                  })}\n                />\n              )}\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
+  "mappings": "aAmHU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAjHV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAKnB,MAAMC,EAAiBH,EACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAEMI,EAAqBJ,EAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,mCACT,UAAW,qCACX,KAAM,oBACN,MAAO,mBACT,CACF,CACF,CAAC,EAeKK,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOX,EAAUR,EAAO,SACxBoB,EAAaN,GAAYC,EAE/B,OACElB,EAACsB,EAAA,CACC,SAAUC,EACV,UAAWhB,EACTC,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBQ,CAC3B,EACAP,CACF,EACA,IAAKK,EACJ,GAAGD,EAEH,SAAAF,EACCjB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAa,EACH,EACAb,EAAC,QAAK,UAAU,cACb,SAAAmB,GAGCnB,EAACM,EAAA,CACC,UAAWG,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EAEJ,EACAd,EAACI,EAAA,CAAgB,SAAAS,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOc,EAAQd",
+  "names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "Comp", "isInactive", "button_default"]
 }

package/dist/esm/components/checkbox.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { type VariantProps } from 'class-variance-authority';
 declare const checkboxVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
 }

package/dist/esm/components/heading.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import React from 'react';
 declare const headingVariants: (props?: ({
-    size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;

package/dist/esm/components/input.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {
 }

package/dist/esm/components/radio.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type VariantProps } from 'class-variance-authority';
 declare const radioGroupVariants: (props?: ({
-    size?: "sm" | "lg" | "base" | null | undefined;
+    size?: "sm" | "base" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
     /** 尺寸 */

package/dist/esm/components/text.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 declare const textVariants: (props?: ({
-    size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;

package/dist/esm/icons/spinner.d.ts

@@ -1,7 +1,5 @@
 export interface SpinnerProps {
-    /** loading 图标大小 */
-    size?: 'sm' | 'md' | 'lg';
-    color?: string;
+    className?: string;
 }
-declare const Spinner: ({ size, color }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/dist/esm/icons/spinner.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";const n=({size:i="sm",color:s="#ffffff"})=>e("svg",{className:"ai-animate-spin",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3",stroke:s,strokeWidth:"1.6",strokeLinecap:"round"})});var r=n;export{r as default};
+import{jsx as e}from"react/jsx-runtime";import{cn as s}from"../helpers";const r=n=>e("svg",{className:s("ai-animate-spin",n.className),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3",strokeWidth:"1.6",strokeLinecap:"round"})});var i=r;export{i as default};
 //# sourceMappingURL=spinner.js.map

package/dist/esm/icons/spinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/icons/spinner.tsx"],
-  "sourcesContent": ["export interface SpinnerProps {\n  /** loading \u56FE\u6807\u5927\u5C0F */\n  size?: 'sm' | 'md' | 'lg'\n  color?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {\n  return (\n    <svg\n      className=\"ai-animate-spin\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3\"\n        stroke={color}\n        strokeWidth=\"1.6\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport default Spinner\n"],
-  "mappings": "AAiBM,cAAAA,MAAA,oBAVN,MAAMC,EAAU,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,SAAU,IAE9CH,EAAC,OACC,UAAU,kBACV,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAA,EAAC,QACC,EAAE,qFACF,OAAQG,EACR,YAAY,MACZ,cAAc,QAChB,EACF,EAIJ,IAAOC,EAAQH",
-  "names": ["jsx", "Spinner", "size", "color", "spinner_default"]
+  "sourcesContent": ["import { cn } from '../helpers'\n\nexport interface SpinnerProps {\n  className?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = (props: SpinnerProps) => {\n  return (\n    <svg\n      className={cn('ai-animate-spin', props.className)}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3\"\n        strokeWidth=\"1.6\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport default Spinner\n"],
+  "mappings": "AAiBM,cAAAA,MAAA,oBAjBN,OAAS,MAAAC,MAAU,aAOnB,MAAMC,EAAWC,GAEbH,EAAC,OACC,UAAWC,EAAG,kBAAmBE,EAAM,SAAS,EAChD,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAH,EAAC,QACC,EAAE,qFACF,YAAY,MACZ,cAAc,QAChB,EACF,EAIJ,IAAOI,EAAQF",
+  "names": ["jsx", "cn", "Spinner", "props", "spinner_default"]
 }

package/dist/esm/stories/button.stories.d.ts

@@ -45,3 +45,4 @@ export declare const Secondary: Story;
 export declare const Link: Story;
 export declare const WithIcon: Story;
 export declare const Aschild: Story;
+export declare const Spinner: Story;

package/dist/esm/stories/button.stories.js

@@ -1,2 +1,2 @@
-import{Fragment as a,jsx as t,jsxs as s}from"react/jsx-runtime";import{SearchIcon as o}from"@storybook/icons";import{Button as e}from"../components/index";import"react";const r={title:"Components/Button",component:e,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["primary","secondary","link","ghost"]},size:{control:{type:"select"},options:["sm","base","lg","icon"]},hoverEffect:{description:"hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548",control:{type:"select"},options:["none","slide"]}},args:{variant:"primary",size:"base",children:"Button",asChild:!1,disabled:!1,loading:!1,hoverEffect:"none"}};var p=r;const y={args:{size:"lg",children:"Primary"}},d={args:{size:"lg",variant:"secondary",children:"Secondary"}},m={args:{size:"lg",variant:"link",children:"Link"}},h={args:{size:"lg",children:s(a,{children:["WithIcon ",t(o,{className:"ai-ml-2"})]})}},g={args:{size:"lg",asChild:!0,children:t("a",{href:"http://example.com",children:"as a a tag"})}};export{g as Aschild,m as Link,y as Primary,d as Secondary,h as WithIcon,p as default};
+import{Fragment as a,jsx as t,jsxs as n}from"react/jsx-runtime";import{SearchIcon as e}from"@storybook/icons";import{Button as o}from"../components/index";import"react";const r={title:"Components/Button",component:o,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["primary","secondary","link","ghost"]},size:{control:{type:"select"},options:["sm","base","lg","icon"]},hoverEffect:{description:"hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548",control:{type:"select"},options:["none","slide"]}},args:{variant:"primary",size:"base",children:"Button",asChild:!1,disabled:!1,loading:!1,hoverEffect:"none"}};var p=r;const y={args:{size:"lg",children:"Primary"}},d={args:{size:"lg",variant:"secondary",children:"Secondary"}},m={args:{size:"lg",variant:"link",children:"Link"}},g={args:{size:"lg",children:n(a,{children:["WithIcon ",t(e,{className:"ai-ml-2"})]})}},h={args:{size:"lg",asChild:!0,children:t("a",{href:"http://example.com",children:"as a a tag"})}},f={args:{size:"lg",loading:!0,spinner:t("span",{className:" ai-text-neutral-900 ai-animate-pulse ai-font-bold",children:"loading..."})}};export{h as Aschild,m as Link,y as Primary,d as Secondary,f as Spinner,g as WithIcon,p as default};
 //# sourceMappingURL=button.stories.js.map

package/dist/esm/stories/button.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/button.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    asChild: false,\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ai-ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n"],
-  "mappings": "AAoFM,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAnFN,OAAS,cAAAC,MAAkB,mBAE3B,OAAS,UAAAC,MAAc,sBACvB,MAAkB,QAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAWD,EACX,WAAY,CAEV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,CACnD,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,CACtC,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAOE,EAAQD,EAOR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaC,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaC,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,SACER,EAAAF,EAAA,CAAE,sBACSC,EAACE,EAAA,CAAW,UAAU,UAAU,GAC3C,CAEJ,CACF,EAEaQ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,SAAUV,EAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF",
-  "names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    asChild: false,\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ai-ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n\nexport const Spinner: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n    spinner: <span className=\" ai-text-neutral-900 ai-animate-pulse ai-font-bold\">loading...</span>,\n  },\n}\n"],
+  "mappings": "AAoFM,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAnFN,OAAS,cAAAC,MAAkB,mBAE3B,OAAS,UAAAC,MAAc,sBACvB,MAAkB,QAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAWD,EACX,WAAY,CAEV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,CACnD,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,CACtC,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAOE,EAAQD,EAOR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaC,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaC,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,SACER,EAAAF,EAAA,CAAE,sBACSC,EAACE,EAAA,CAAW,UAAU,UAAU,GAC3C,CAEJ,CACF,EAEaQ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,SAAUV,EAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF,EAEaW,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,QAASX,EAAC,QAAK,UAAU,qDAAqD,sBAAU,CAC1F,CACF",
+  "names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild", "Spinner"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -27,6 +27,23 @@
     "README.md",
     "CONTRIBUTING.md"
   ],
+  "scripts": {
+    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
+    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
+    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
+    "dev:js:esm": "node esbuild-esm.mjs watch=true",
+    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
+    "dev:css": "postcss src/styles/global.css -o style.css --watch",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
+    "build:js:cjs": "node esbuild-cjs.mjs",
+    "build:js:cjs:types": "tsc --outdir dist/cjs",
+    "build:js:esm": "node esbuild-esm.mjs",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "postcss src/styles/global.css -o style.css",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "jest",
+    "clean": "rm -rf .turbo node_modules dist style.css"
+  },
   "sideEffects": false,
   "keywords": [],
   "author": "",
@@ -35,6 +52,7 @@
     "@babel/preset-env": "^7.24.6",
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
@@ -66,22 +84,5 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
-    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
-    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
-    "dev:js:esm": "node esbuild-esm.mjs watch=true",
-    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
-    "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
-    "build:js:cjs": "node esbuild-cjs.mjs",
-    "build:js:cjs:types": "tsc --outdir dist/cjs",
-    "build:js:esm": "node esbuild-esm.mjs",
-    "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "postcss src/styles/global.css -o style.css",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "test": "jest",
-    "clean": "rm -rf .turbo node_modules dist style.css"
   }
-}
+}

package/src/components/button.tsx

@@ -56,6 +56,17 @@ const buttonVariants = cva(
   }
 )
 
+const loadingSvgVariants = cva('', {
+  variants: {
+    variant: {
+      primary: 'ai-stroke-btn-primary-foreground',
+      secondary: 'ai-stroke-btn-secondary-foreground',
+      link: 'ai-stroke-primary',
+      ghost: 'ai-stroke-primary',
+    },
+  },
+})
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
@@ -65,6 +76,8 @@ export interface ButtonProps
   disabled?: boolean
   /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
   asChild?: boolean
+  /** 自定义loading  */
+  spinner?: React.ReactNode
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -78,6 +91,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className,
       disabled = false,
       loading = false,
+      spinner,
       ...props
     }: ButtonProps,
     ref
@@ -104,7 +118,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               {children}
             </span>
             <span className="ai-absolute">
-              <Spinner />
+              {spinner ? (
+                spinner
+              ) : (
+                <Spinner
+                  className={loadingSvgVariants({
+                    variant,
+                  })}
+                />
+              )}
             </span>
             <VisuallyHidden>{children}</VisuallyHidden>
           </>

package/src/icons/spinner.tsx

@@ -1,14 +1,14 @@
+import { cn } from '../helpers'
+
 export interface SpinnerProps {
-  /** loading 图标大小 */
-  size?: 'sm' | 'md' | 'lg'
-  color?: string
+  className?: string
 }
 
 // eslint-disable-next-line no-unused-vars
-const Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {
+const Spinner = (props: SpinnerProps) => {
   return (
     <svg
-      className="ai-animate-spin"
+      className={cn('ai-animate-spin', props.className)}
       width="20"
       height="20"
       viewBox="0 0 20 20"
@@ -17,7 +17,6 @@ const Spinner = ({ size = 'sm', color = '#ffffff' }: SpinnerProps) => {
     >
       <path
         d="M3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3"
-        stroke={color}
         strokeWidth="1.6"
         strokeLinecap="round"
       />

package/src/stories/button.stories.tsx

@@ -96,3 +96,11 @@ export const Aschild: Story = {
     children: <a href="http://example.com">as a a tag</a>,
   },
 }
+
+export const Spinner: Story = {
+  args: {
+    size: 'lg',
+    loading: true,
+    spinner: <span className=" ai-text-neutral-900 ai-animate-pulse ai-font-bold">loading...</span>,
+  },
+}

package/src/styles/global.css

@@ -163,7 +163,7 @@
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #17bbef;
   --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #17bbef;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
 
   --btn-radius: 30px;
 

package/style.css

@@ -742,6 +742,15 @@ video {
 .\!ai-bg-clip-border {
   background-clip: border-box !important;
 }
+.ai-stroke-btn-primary-foreground {
+  stroke: var(--btn-text-color);
+}
+.ai-stroke-btn-secondary-foreground {
+  stroke: var(--btn-text-secondary-color);
+}
+.ai-stroke-primary {
+  stroke: var(--brand-color-1);
+}
 .ai-p-4 {
   padding: 1rem;
 }
@@ -1072,7 +1081,7 @@ video {
   --btn-bg-secondary-color: #ffffff;
   --btn-text-secondary-color: #17bbef;
   --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #17bbef;
+  --btn-bg-secondary-disabled-color: #f5f5f5;
 
   --btn-radius: 30px;