@anker-in/headless-ui 0.0.18 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/cjs/components/button.d.ts +2 -0
  2. package/dist/cjs/components/button.js +1 -1
  3. package/dist/cjs/components/button.js.map +3 -3
  4. package/dist/cjs/stories/button.stories.d.ts +1 -0
  5. package/dist/cjs/stories/button.stories.js +1 -1
  6. package/dist/cjs/stories/button.stories.js.map +3 -3
  7. package/dist/esm/components/button.d.ts +2 -0
  8. package/dist/esm/components/button.js +1 -1
  9. package/dist/esm/components/button.js.map +3 -3
  10. package/dist/esm/stories/button.stories.d.ts +1 -0
  11. package/dist/esm/stories/button.stories.js +1 -1
  12. package/dist/esm/stories/button.stories.js.map +3 -3
  13. package/package.json +1 -1
  14. package/src/components/button.tsx +12 -5
  15. package/src/stories/button.stories.tsx +8 -0
  16. package/dist/cjs/src/components/badge.d.ts +0 -9
  17. package/dist/cjs/src/components/button.d.ts +0 -20
  18. package/dist/cjs/src/components/checkbox.d.ts +0 -11
  19. package/dist/cjs/src/components/dialog.d.ts +0 -19
  20. package/dist/cjs/src/components/heading.d.ts +0 -16
  21. package/dist/cjs/src/components/index.d.ts +0 -12
  22. package/dist/cjs/src/components/input.d.ts +0 -22
  23. package/dist/cjs/src/components/popover.d.ts +0 -6
  24. package/dist/cjs/src/components/radio.d.ts +0 -16
  25. package/dist/cjs/src/components/skeleton.d.ts +0 -9
  26. package/dist/cjs/src/components/text.d.ts +0 -31
  27. package/dist/cjs/src/components/theme.d.ts +0 -13
  28. package/dist/cjs/src/helpers/component-props.d.ts +0 -7
  29. package/dist/cjs/src/helpers/constants.d.ts +0 -2
  30. package/dist/cjs/src/helpers/index.d.ts +0 -1
  31. package/dist/cjs/src/helpers/utils.d.ts +0 -2
  32. package/dist/cjs/src/icons/spinner.d.ts +0 -5
  33. package/dist/cjs/src/index.d.ts +0 -1
  34. package/dist/cjs/src/stories/badge.stories.d.ts +0 -26
  35. package/dist/cjs/src/stories/button.stories.d.ts +0 -47
  36. package/dist/cjs/src/stories/checkbox.stories.d.ts +0 -46
  37. package/dist/cjs/src/stories/dialog.stories.d.ts +0 -20
  38. package/dist/cjs/src/stories/heading.stories.d.ts +0 -82
  39. package/dist/cjs/src/stories/input.stories.d.ts +0 -35
  40. package/dist/cjs/src/stories/popover.stories.d.ts +0 -17
  41. package/dist/cjs/src/stories/radio.stories.d.ts +0 -39
  42. package/dist/cjs/src/stories/skeleton.stories.d.ts +0 -20
  43. package/dist/cjs/src/stories/text.stories.d.ts +0 -84
  44. package/dist/cjs/tests/badge.test.d.ts +0 -1
  45. package/dist/cjs/tests/button.test.d.ts +0 -1
  46. package/dist/cjs/tests/heading.test.d.ts +0 -1
  47. package/dist/cjs/tests/input.test.d.ts +0 -1
  48. package/dist/cjs/tests/jest.setup.d.ts +0 -1
  49. package/dist/cjs/tests/text.test.d.ts +0 -1
  50. package/dist/cjs/tsconfig.tsbuildinfo +0 -1
  51. package/dist/esm/src/components/badge.d.ts +0 -9
  52. package/dist/esm/src/components/button.d.ts +0 -20
  53. package/dist/esm/src/components/checkbox.d.ts +0 -11
  54. package/dist/esm/src/components/dialog.d.ts +0 -19
  55. package/dist/esm/src/components/heading.d.ts +0 -16
  56. package/dist/esm/src/components/index.d.ts +0 -12
  57. package/dist/esm/src/components/input.d.ts +0 -22
  58. package/dist/esm/src/components/popover.d.ts +0 -6
  59. package/dist/esm/src/components/radio.d.ts +0 -16
  60. package/dist/esm/src/components/skeleton.d.ts +0 -9
  61. package/dist/esm/src/components/text.d.ts +0 -31
  62. package/dist/esm/src/components/theme.d.ts +0 -13
  63. package/dist/esm/src/helpers/component-props.d.ts +0 -7
  64. package/dist/esm/src/helpers/constants.d.ts +0 -2
  65. package/dist/esm/src/helpers/index.d.ts +0 -1
  66. package/dist/esm/src/helpers/utils.d.ts +0 -2
  67. package/dist/esm/src/icons/spinner.d.ts +0 -5
  68. package/dist/esm/src/index.d.ts +0 -1
  69. package/dist/esm/src/stories/badge.stories.d.ts +0 -26
  70. package/dist/esm/src/stories/button.stories.d.ts +0 -47
  71. package/dist/esm/src/stories/checkbox.stories.d.ts +0 -46
  72. package/dist/esm/src/stories/dialog.stories.d.ts +0 -20
  73. package/dist/esm/src/stories/heading.stories.d.ts +0 -82
  74. package/dist/esm/src/stories/input.stories.d.ts +0 -35
  75. package/dist/esm/src/stories/popover.stories.d.ts +0 -17
  76. package/dist/esm/src/stories/radio.stories.d.ts +0 -39
  77. package/dist/esm/tsconfig.tsbuildinfo +0 -1
@@ -15,6 +15,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
15
15
  disabled?: boolean;
16
16
  /** 定义自组件作为父组件的类型, 详细使用方式请参考radix-ui */
17
17
  asChild?: boolean;
18
+ /** 自定义loading */
19
+ spinner?: React.ReactNode;
18
20
  }
19
21
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
20
22
  export default Button;
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var n=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(a,e)=>{for(var i in e)n(a,i,{get:e[i],enumerable:!0})},f=(a,e,i,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!E.call(a,o)&&o!==i&&n(a,o,{get:()=>e[o],enumerable:!(t=B(e,o))||t.enumerable});return a};var l=(a,e,i)=>(i=a!=null?w(z(a)):{},f(e||!a||!a.__esModule?n(i,"default",{value:a,enumerable:!0}):i,a)),P=a=>f(n({},"__esModule",{value:!0}),a);var R={};H(R,{default:()=>M});module.exports=P(R);var r=require("react/jsx-runtime"),N=l(require("react")),u=require("@radix-ui/react-slot"),c=require("@radix-ui/react-visually-hidden"),s=require("class-variance-authority"),m=l(require("../icons/spinner.js")),y=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"}}}),p=N.forwardRef(({asChild:a=!1,size:e="base",children:i,variant:t,hoverEffect:o="none",className:v,disabled:g=!1,loading:b=!1,...x},h)=>{const V=a?u.Slot:"button",d=g||b;return(0,r.jsx)(V,{disabled:d,className:(0,y.cn)(C({variant:t,size:e,hoverEffect:o}),{"ai-cursor-not-allowed":d},v),ref:h,...x,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:(0,r.jsx)(m.default,{className:L({variant:t})})}),(0,r.jsx)(c.VisuallyHidden,{children:i})]}):i})});p.displayName="Button";var M=p;
1
+ "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;
2
2
  //# sourceMappingURL=button.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/button.tsx"],
4
- "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}\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 className={loadingSvgVariants({\n variant,\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"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgHU,IAAAI,EAAA,6BA9GVC,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,EAaKC,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,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAU,OAAO,SACxBW,EAAaL,GAAYC,EAE/B,SACE,OAACG,EAAA,CACC,SAAUC,EACV,aAAW,MACTd,EAAe,CAAE,QAAAM,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,CACC,UAAWd,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EACF,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOX,EAAQW",
6
- "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", "props", "ref", "Comp", "isInactive", "Spinner"]
4
+ "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"],
5
+ "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",
6
+ "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"]
7
7
  }
@@ -45,3 +45,4 @@ export declare const Secondary: Story;
45
45
  export declare const Link: Story;
46
46
  export declare const WithIcon: Story;
47
47
  export declare const Aschild: Story;
48
+ export declare const Spinner: Story;
@@ -1,2 +1,2 @@
1
- "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"})}};
1
+ "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..."})}};
2
2
  //# sourceMappingURL=button.stories.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/button.stories.tsx"],
4
- "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"],
5
- "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",
6
- "names": ["button_stories_exports", "__export", "Aschild", "Link", "Primary", "Secondary", "WithIcon", "button_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_components", "import_react", "meta"]
4
+ "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"],
5
+ "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",
6
+ "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"]
7
7
  }
@@ -15,6 +15,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
15
15
  disabled?: boolean;
16
16
  /** 定义自组件作为父组件的类型, 详细使用方式请参考radix-ui */
17
17
  asChild?: boolean;
18
+ /** 自定义loading */
19
+ spinner?: React.ReactNode;
18
20
  }
19
21
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
20
22
  export default Button;
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as w,jsx as a,jsxs as B}from"react/jsx-runtime";import*as m from"react";import{Slot as y}from"@radix-ui/react-slot";import{VisuallyHidden as v}from"@radix-ui/react-visually-hidden";import{cva as t}from"class-variance-authority";import g from"../icons/spinner.js";import{cn as x}from"../helpers/index.js";const h=t("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"}}),V=t("",{variants:{variant:{primary:"ai-stroke-btn-primary-foreground",secondary:"ai-stroke-btn-secondary-foreground",link:"ai-stroke-primary",ghost:"ai-stroke-primary"}}}),n=m.forwardRef(({asChild:s=!1,size:b="base",children:e,variant:i,hoverEffect:d="none",className:f,disabled:l=!1,loading:r=!1,...p},u)=>{const c=s?y:"button",o=l||r;return a(c,{disabled:o,className:x(h({variant:i,size:b,hoverEffect:d}),{"ai-cursor-not-allowed":o},f),ref:u,...p,children:r?B(w,{children:[a("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:e}),a("span",{className:"ai-absolute",children:a(g,{className:V({variant:i})})}),a(v,{children:e})]}):e})});n.displayName="Button";var N=n;export{N as default};
1
+ "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};
2
2
  //# sourceMappingURL=button.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/button.tsx"],
4
- "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}\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 className={loadingSvgVariants({\n variant,\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"],
5
- "mappings": "aAgHU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBA9GV,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,EAaKK,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,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAUR,EAAO,SACxBmB,EAAaL,GAAYC,EAE/B,OACElB,EAACqB,EAAA,CACC,SAAUC,EACV,UAAWf,EACTC,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBO,CAC3B,EACAN,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,EACCjB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAa,EACH,EACAb,EAAC,QAAK,UAAU,cACd,SAAAA,EAACM,EAAA,CACC,UAAWG,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EACF,EACAd,EAACI,EAAA,CAAgB,SAAAS,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOa,EAAQb",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Comp", "isInactive", "button_default"]
4
+ "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"],
5
+ "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",
6
+ "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"]
7
7
  }
@@ -45,3 +45,4 @@ export declare const Secondary: Story;
45
45
  export declare const Link: Story;
46
46
  export declare const WithIcon: Story;
47
47
  export declare const Aschild: Story;
48
+ export declare const Spinner: Story;
@@ -1,2 +1,2 @@
1
- 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};
1
+ 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};
2
2
  //# sourceMappingURL=button.stories.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/button.stories.tsx"],
4
- "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"],
5
- "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",
6
- "names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild"]
4
+ "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"],
5
+ "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild", "Spinner"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
@@ -76,6 +76,8 @@ export interface ButtonProps
76
76
  disabled?: boolean
77
77
  /** 定义自组件作为父组件的类型, 详细使用方式请参考radix-ui */
78
78
  asChild?: boolean
79
+ /** 自定义loading */
80
+ spinner?: React.ReactNode
79
81
  }
80
82
 
81
83
  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -89,6 +91,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
89
91
  className,
90
92
  disabled = false,
91
93
  loading = false,
94
+ spinner,
92
95
  ...props
93
96
  }: ButtonProps,
94
97
  ref
@@ -115,11 +118,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
115
118
  {children}
116
119
  </span>
117
120
  <span className="ai-absolute">
118
- <Spinner
119
- className={loadingSvgVariants({
120
- variant,
121
- })}
122
- />
121
+ {spinner ? (
122
+ spinner
123
+ ) : (
124
+ <Spinner
125
+ className={loadingSvgVariants({
126
+ variant,
127
+ })}
128
+ />
129
+ )}
123
130
  </span>
124
131
  <VisuallyHidden>{children}</VisuallyHidden>
125
132
  </>
@@ -96,3 +96,11 @@ export const Aschild: Story = {
96
96
  children: <a href="http://example.com">as a a tag</a>,
97
97
  },
98
98
  }
99
+
100
+ export const Spinner: Story = {
101
+ args: {
102
+ size: 'lg',
103
+ loading: true,
104
+ spinner: <span className=" ai-text-neutral-900 ai-animate-pulse ai-font-bold">loading...</span>,
105
+ },
106
+ }
@@ -1,9 +0,0 @@
1
- import * as React from 'react';
2
- import { type VariantProps } from 'class-variance-authority';
3
- declare const badgeVariants: (props?: ({
4
- variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
5
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
6
- export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
7
- }
8
- declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime.js").JSX.Element;
9
- export default Badge;
@@ -1,20 +0,0 @@
1
- import * as React from 'react';
2
- import { type VariantProps } from 'class-variance-authority';
3
- /**
4
- * Button Variants
5
- */
6
- declare const buttonVariants: (props?: ({
7
- variant?: "link" | "primary" | "secondary" | "ghost" | null | undefined;
8
- size?: "sm" | "base" | "lg" | "icon" | null | undefined;
9
- hoverEffect?: "none" | "slide" | null | undefined;
10
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
11
- export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
12
- /** 设置按钮载入状态 */
13
- loading?: boolean;
14
- /** 设置按钮失效状态 */
15
- disabled?: boolean;
16
- /** 定义自组件作为父组件的类型, 详细使用方式请参考radix-ui */
17
- asChild?: boolean;
18
- }
19
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
20
- export default Button;
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
3
- import { type VariantProps } from 'class-variance-authority';
4
- declare const checkboxVariants: (props?: ({
5
- size?: "sm" | "base" | "lg" | null | undefined;
6
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
7
- interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
8
- }
9
- declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
10
- export default Checkbox;
11
- export type { CheckboxProps };
@@ -1,19 +0,0 @@
1
- import * as React from 'react';
2
- import * as DialogPrimitive from '@radix-ui/react-dialog';
3
- declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
4
- declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
5
- declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
6
- declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
7
- declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
8
- declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
9
- declare const DialogHeader: {
10
- ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime.js").JSX.Element;
11
- displayName: string;
12
- };
13
- declare const DialogFooter: {
14
- ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime.js").JSX.Element;
15
- displayName: string;
16
- };
17
- declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
18
- declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
19
- export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
@@ -1,16 +0,0 @@
1
- import { type VariantProps } from 'class-variance-authority';
2
- import React from 'react';
3
- declare const headingVariants: (props?: ({
4
- size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
5
- weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
6
- align?: "center" | "left" | "right" | null | undefined;
7
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
8
- interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
9
- as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
10
- asChild?: boolean;
11
- color?: string;
12
- html?: string;
13
- }
14
- declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
15
- export { Heading };
16
- export type { HeadingProps };
@@ -1,12 +0,0 @@
1
- export { default as Button } from './button.js';
2
- export { default as Badge } from './badge.js';
3
- export * from './input.js';
4
- export { default as Checkbox } from './checkbox.js';
5
- export { default as Skeleton } from './skeleton.js';
6
- export * from './dialog.js';
7
- export * from './popover.js';
8
- export * from './radio.js';
9
- export * from './dialog.js';
10
- export * from './text.js';
11
- export * from './heading.js';
12
- export { default as Theme } from './theme.js';
@@ -1,22 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
3
- import { type VariantProps } from 'class-variance-authority';
4
- declare const inputVariants: (props?: ({
5
- size?: "sm" | "base" | "lg" | null | undefined;
6
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
7
- export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {
8
- }
9
- interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
10
- /**
11
- * 插槽的位置
12
- * default: right
13
- */
14
- side?: 'left' | 'right';
15
- }
16
- /**
17
- * InputSlot
18
- * 用来在 Input 组件中插入额外的内容,比如icon ,按钮
19
- */
20
- declare const InputSlot: React.ForwardRefExoticComponent<InputSlotProps & React.RefAttributes<HTMLDivElement>>;
21
- declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
22
- export { Input, InputSlot };
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import * as PopoverPrimitive from '@radix-ui/react-popover';
3
- declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
4
- declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
5
- declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
6
- export { Popover, PopoverTrigger, PopoverContent };
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
3
- import { type VariantProps } from 'class-variance-authority';
4
- declare const radioGroupVariants: (props?: ({
5
- size?: "sm" | "base" | "lg" | null | undefined;
6
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
7
- interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
8
- /** 尺寸 */
9
- size?: 'sm' | 'base' | 'lg';
10
- }
11
- declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
12
- interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioGroupVariants> {
13
- }
14
- declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
15
- export { RadioGroup, RadioGroupItem };
16
- export type { RadioGroupProps, RadioGroupItemProps };
@@ -1,9 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
3
- interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
4
- /** 是否正在加载 , 默认是true*/
5
- loading?: boolean;
6
- }
7
- declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
8
- export default Skeleton;
9
- export type { SkeletonProps };
@@ -1,31 +0,0 @@
1
- import * as React from 'react';
2
- import { type VariantProps } from 'class-variance-authority';
3
- import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
4
- declare const textVariants: (props?: ({
5
- size?: 1 | "none" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
6
- weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
7
- align?: "center" | "left" | "right" | null | undefined;
8
- } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
9
- type TextSpanProps = {
10
- as?: 'span';
11
- } & ComponentPropsWithout<'span', RemovedProps>;
12
- type TextDivProps = {
13
- as: 'div';
14
- } & ComponentPropsWithout<'div', RemovedProps>;
15
- type TextLabelProps = {
16
- as: 'label';
17
- } & ComponentPropsWithout<'label', RemovedProps>;
18
- type TextPProps = {
19
- as: 'p';
20
- } & ComponentPropsWithout<'p', RemovedProps>;
21
- interface CommonTextProps extends VariantProps<typeof textVariants> {
22
- as?: 'div' | 'label' | 'p' | 'span';
23
- asChild?: boolean;
24
- color?: string;
25
- /** 相当于 dangerouslySetInnerHTML */
26
- html?: string;
27
- }
28
- type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps);
29
- declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
30
- export { Text };
31
- export type { TextProps };
@@ -1,13 +0,0 @@
1
- import * as React from 'react';
2
- import type { Brand } from '../helpers/constants.js';
3
- interface ThemeProps {
4
- brand: Brand;
5
- children: React.ReactNode;
6
- }
7
- /**
8
- *
9
- * @param param
10
- * @returns
11
- */
12
- declare const Theme: ({ brand, children }: ThemeProps) => import("react/jsx-runtime.js").JSX.Element;
13
- export default Theme;
@@ -1,7 +0,0 @@
1
- import type React from 'react';
2
- type ComponentPropsAs<C extends React.ElementType<any>, T extends React.ComponentPropsWithoutRef<C>['as']> = Omit<Extract<React.ComponentPropsWithoutRef<C>, {
3
- as: T;
4
- }>, 'as' | 'asChild'>;
5
- type ComponentPropsWithout<T extends React.ElementType, O extends Omit<string, keyof React.ComponentPropsWithoutRef<T>> | keyof React.ComponentPropsWithoutRef<T>> = Omit<React.ComponentPropsWithoutRef<T>, O & string>;
6
- type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'color';
7
- export type { ComponentPropsAs, ComponentPropsWithout, RemovedProps };
@@ -1,2 +0,0 @@
1
- export declare const ALL_BRANDS: readonly ["anker", "eufy", "soundcore", "nebula", "ankerWork", "ankerMake"];
2
- export type Brand = (typeof ALL_BRANDS)[number];
@@ -1 +0,0 @@
1
- export { cn } from './utils.js';
@@ -1,2 +0,0 @@
1
- import { type ClassValue } from 'clsx';
2
- export declare function cn(...inputs: ClassValue[]): string;
@@ -1,5 +0,0 @@
1
- export interface SpinnerProps {
2
- className?: string;
3
- }
4
- declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
5
- export default Spinner;
@@ -1 +0,0 @@
1
- export * from './components/index.js';
@@ -1,26 +0,0 @@
1
- import type { StoryObj } from '@storybook/react';
2
- import { Badge } from '../components/index';
3
- declare const meta: {
4
- title: string;
5
- component: typeof Badge;
6
- parameters: {
7
- layout: string;
8
- };
9
- tags: string[];
10
- argTypes: {
11
- variant: {
12
- control: {
13
- type: "select";
14
- };
15
- options: string[];
16
- };
17
- };
18
- args: {
19
- variant: "default";
20
- children: string;
21
- };
22
- };
23
- export default meta;
24
- type Story = StoryObj<typeof meta>;
25
- export declare const Default: Story;
26
- export declare const Examples: Story;