@anker-in/headless-ui 0.0.24 → 0.0.25
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.
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/heading.d.ts +1 -1
- package/dist/cjs/components/text.d.ts +1 -1
- package/dist/cjs/icons/spinner.js +1 -1
- package/dist/cjs/icons/spinner.js.map +2 -2
- package/dist/cjs/stories/button.stories.js +1 -1
- package/dist/cjs/stories/button.stories.js.map +2 -2
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/text.d.ts +1 -1
- package/dist/esm/icons/spinner.js +1 -1
- package/dist/esm/icons/spinner.js.map +2 -2
- package/dist/esm/stories/button.stories.js +1 -1
- package/dist/esm/stories/button.stories.js.map +2 -2
- package/package.json +1 -1
- package/src/components/button.tsx +6 -5
- package/src/icons/spinner.tsx +6 -6
- package/src/stories/button.stories.tsx +19 -1
- package/src/styles/global.css +14 -6
- package/style.css +41 -16
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var V=Object.create;var n=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(a,e)=>{for(var i in e)n(a,i,{get:e[i],enumerable:!0})},f=(a,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let
|
|
1
|
+
"use strict";"use client";var V=Object.create;var n=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(a,e)=>{for(var i in e)n(a,i,{get:e[i],enumerable:!0})},f=(a,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of k(e))!w.call(a,t)&&t!==i&&n(a,t,{get:()=>e[t],enumerable:!(o=B(e,t))||o.enumerable});return a};var c=(a,e,i)=>(i=a!=null?V(z(a)):{},f(e||!a||!a.__esModule?n(i,"default",{value:a,enumerable:!0}):i,a)),C=a=>f(n({},"__esModule",{value:!0}),a);var L={};E(L,{default:()=>R});module.exports=C(L);var r=require("react/jsx-runtime"),H=c(require("react")),p=require("@radix-ui/react-slot"),y=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),m=c(require("../icons/spinner.js")),v=require("../helpers/index.js");const N=(0,d.cva)("ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none",{variants:{variant:{primary:"ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ",secondary:"ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground",link:"ai-text-primary ai-underline-offset-4 hover:ai-underline",ghost:"hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground"},size:{sm:"ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]",base:"ai-h-10 ai-px-[2.625rem] ai-py-[0.625rem] ai-text-[14px]",lg:"ai-h-11 ai-px-8 ai-text-[16px]",icon:"ai-size-10 ai-rounded-full"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"!ai-cursor-not-allowed !ai-pointer-events-auto",loading:""}},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'},{variant:"primary",state:"loading",class:"ai-bg-btn-primary"},{variant:"secondary",state:"loading",class:"ai-bg-btn-secondary-active disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground"},{variant:"primary",state:"disabled",class:"disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground"},{variant:"secondary",state:"disabled",class:"disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),P=(0,d.cva)("",{variants:{variant:{primary:"ai-stroke-btn-primary-foreground",secondary:"ai-stroke-btn-secondary",link:"ai-stroke-primary",ghost:"ai-stroke-primary"}},defaultVariants:{variant:"primary"}}),u=H.forwardRef(({asChild:a=!1,size:e="base",children:i,variant:o,hoverEffect:t="none",className:g,disabled:b=!1,loading:s=!1,spinner:l,...x},h)=>(0,r.jsx)(a?p.Slot:"button",{disabled:b||s,className:(0,v.cn)(N({variant:o,size:e,hoverEffect:t,state:s?"loading":b?"disabled":"default"}),g),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:l||(0,r.jsx)(m.default,{className:P({variant:o})})}),(0,r.jsx)(y.VisuallyHidden,{children:i})]}):i}));u.displayName="Button";var R=u;
|
|
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-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',\n {\n variants: {\n variant: {\n primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',\n secondary:\n 'ai-bg-btn-secondary ai-border-
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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-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',\n {\n variants: {\n variant: {\n primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',\n secondary:\n 'ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground',\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-[2.625rem] ai-py-[0.625rem] 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 state: {\n default: '',\n disabled: '!ai-cursor-not-allowed !ai-pointer-events-auto',\n loading: '',\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 variant: 'primary',\n state: 'loading',\n class: 'ai-bg-btn-primary',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'ai-bg-btn-secondary-active disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class: 'disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'ai-stroke-btn-primary-foreground',\n secondary: 'ai-stroke-btn-secondary',\n link: 'ai-stroke-primary',\n ghost: 'ai-stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\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 const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\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,GA4IU,IAAAI,EAAA,6BA1IVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAKnB,MAAMC,KAAiB,OACrB,2RACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,mFACT,UACE,8PACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,2DACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,iDACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mBACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0HACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MAAO,sFACT,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,gJACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,mCACT,UAAW,0BACX,KAAM,oBACN,MAAO,mBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,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,OAOE,OALWV,EAAU,OAAO,SAK3B,CACC,SALeM,GAAYC,EAM3B,aAAW,MAAGV,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,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,EAAAG,QAAA,CACC,UAAWb,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOX,EAAQW",
|
|
6
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", "Spinner"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
declare const headingVariants: (props?: ({
|
|
4
|
-
size?:
|
|
4
|
+
size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
|
|
5
5
|
weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
|
|
6
6
|
align?: "center" | "left" | "right" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
4
4
|
declare const textVariants: (props?: ({
|
|
5
|
-
size?:
|
|
5
|
+
size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
|
|
6
6
|
weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
|
|
7
7
|
align?: "center" | "left" | "right" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var w=(e,n)=>{for(var s in n)t(e,s,{get:n[s],enumerable:!0})},c=(e,n,s,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of l(n))!m.call(e,r)&&r!==s&&t(e,r,{get:()=>n[r],enumerable:!(o=p(n,r))||o.enumerable});return e};var d=e=>c(t({},"__esModule",{value:!0}),e);var f={};w(f,{default:()=>h});module.exports=d(f);var i=require("react/jsx-runtime"),a=require("../helpers/index.js");const g=e=>(0,i.jsx)("svg",{fill:"none",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",width:"1rem",className:(0,a.cn)("ai-animate-spin",e.className),children:(0,i.jsx)("path",{d:"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})});var h=g;
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/icons/spinner.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\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
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\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 fill=\"none\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1rem\"\n className={cn('ai-animate-spin', props.className)}\n >\n <path\n d=\"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n\nexport default Spinner\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgBM,IAAAI,EAAA,6BAhBNC,EAAmB,+BAOnB,MAAMC,EAAWC,MAEb,OAAC,OACC,KAAK,OACL,QAAQ,YACR,MAAM,6BACN,MAAM,OACN,aAAW,MAAG,kBAAmBA,EAAM,SAAS,EAEhD,mBAAC,QACC,EAAE,yFACF,OAAO,QACP,YAAY,IACZ,cAAc,QAChB,EACF,EAIJ,IAAOL,EAAQI",
|
|
6
6
|
"names": ["spinner_exports", "__export", "spinner_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "Spinner", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},m=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of p(t))!d.call(e,o)&&o!==r&&i(e,o,{get:()=>t[o],enumerable:!(s=l(t,o))||s.enumerable});return e};var h=e=>m(i({},"__esModule",{value:!0}),e);var b={};y(b,{Aschild:()=>u,Link:()=>S,Primary:()=>v,Secondary:()=>z,Spinner:()=>M,WithIcon:()=>x,default:()=>f});module.exports=h(b);var a=require("react/jsx-runtime"),n=require("@storybook/icons"),c=require("../components/index.js"),k=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 v={args:{size:"lg",children:"Primary"}},z={args:{size:"lg",variant:"secondary",children:"Secondary"}},S={args:{size:"lg",variant:"link",children:"Link"}},x={args:{size:"lg",children:(0,a.jsxs)(a.Fragment,{children:["WithIcon ",(0,a.jsx)(n.SearchIcon,{className:"ai-ml-2"})]})}},u={args:{size:"lg",asChild:!0,children:(0,a.jsx)("a",{href:"http://example.com",children:"as a a tag"})}},M={args:{size:"lg",loading:!0,spinner:(0,a.jsxs)("div",{className:"ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex",children:[(0,a.jsx)("svg",{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"2625",width:"1rem",className:"align-middle",children:(0,a.jsx)("path",{d:"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z",fill:"","p-id":"2626"})}),"\xA0loading..."]})}};
|
|
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.js'\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: <
|
|
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,kCACvBC,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,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index.js'\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: (\n <div className=\"ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex\">\n <svg\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"2625\"\n width=\"1rem\"\n className=\"align-middle\"\n >\n <path\n d=\"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z\"\n fill=\"\"\n p-id=\"2626\"\n ></path>\n </svg>\n loading...\n </div>\n ),\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,kCACvBC,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,WACE,QAAC,OAAI,UAAU,wEACb,oBAAC,OACC,QAAQ,gBACR,QAAQ,MACR,MAAM,6BACN,OAAK,OACL,MAAM,OACN,UAAU,eAEV,mBAAC,QACC,EAAE,o5EACF,KAAK,GACL,OAAK,OACN,EACH,EAAM,kBAER,CAEJ,CACF",
|
|
6
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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as V,jsx as a,jsxs as B}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{Fragment as V,jsx as a,jsxs as B}from"react/jsx-runtime";import*as p from"react";import{Slot as y}from"@radix-ui/react-slot";import{VisuallyHidden as m}from"@radix-ui/react-visually-hidden";import{cva as n}from"class-variance-authority";import v from"../icons/spinner.js";import{cn as g}from"../helpers/index.js";const x=n("ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none",{variants:{variant:{primary:"ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ",secondary:"ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground",link:"ai-text-primary ai-underline-offset-4 hover:ai-underline",ghost:"hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground"},size:{sm:"ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]",base:"ai-h-10 ai-px-[2.625rem] ai-py-[0.625rem] ai-text-[14px]",lg:"ai-h-11 ai-px-8 ai-text-[16px]",icon:"ai-size-10 ai-rounded-full"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"!ai-cursor-not-allowed !ai-pointer-events-auto",loading:""}},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'},{variant:"primary",state:"loading",class:"ai-bg-btn-primary"},{variant:"secondary",state:"loading",class:"ai-bg-btn-secondary-active disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground"},{variant:"primary",state:"disabled",class:"disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground"},{variant:"secondary",state:"disabled",class:"disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),h=n("",{variants:{variant:{primary:"ai-stroke-btn-primary-foreground",secondary:"ai-stroke-btn-secondary",link:"ai-stroke-primary",ghost:"ai-stroke-primary"}},defaultVariants:{variant:"primary"}}),s=p.forwardRef(({asChild:d=!1,size:b="base",children:e,variant:r,hoverEffect:l="none",className:f,disabled:t=!1,loading:i=!1,spinner:o,...c},u)=>a(d?y:"button",{disabled:t||i,className:g(x({variant:r,size:b,hoverEffect:l,state:i?"loading":t?"disabled":"default"}),f),ref:u,...c,children:i?B(V,{children:[a("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:e}),a("span",{className:"ai-absolute",children:o||a(v,{className:h({variant:r})})}),a(m,{children:e})]}):e}));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-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',\n {\n variants: {\n variant: {\n primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',\n secondary:\n 'ai-bg-btn-secondary ai-border-
|
|
5
|
-
"mappings": "
|
|
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-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',\n {\n variants: {\n variant: {\n primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',\n secondary:\n 'ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground',\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-[2.625rem] ai-py-[0.625rem] 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 state: {\n default: '',\n disabled: '!ai-cursor-not-allowed !ai-pointer-events-auto',\n loading: '',\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 variant: 'primary',\n state: 'loading',\n class: 'ai-bg-btn-primary',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'ai-bg-btn-secondary-active disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class: 'disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'ai-stroke-btn-primary-foreground',\n secondary: 'ai-stroke-btn-secondary',\n link: 'ai-stroke-primary',\n ghost: 'ai-stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\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 const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\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": "aA4IU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBA1IV,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,2RACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,mFACT,UACE,8PACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,2DACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,iDACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mBACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0HACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MAAO,sFACT,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,gJACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMI,EAAqBJ,EAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,mCACT,UAAW,0BACX,KAAM,oBACN,MAAO,mBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,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,IAOErB,EALWW,EAAUR,EAAO,SAK3B,CACC,SALec,GAAYC,EAM3B,UAAWX,EAAGC,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,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,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOY,EAAQZ",
|
|
6
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", "button_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
declare const headingVariants: (props?: ({
|
|
4
|
-
size?:
|
|
4
|
+
size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
|
|
5
5
|
weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
|
|
6
6
|
align?: "center" | "left" | "right" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
4
4
|
declare const textVariants: (props?: ({
|
|
5
|
-
size?:
|
|
5
|
+
size?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
|
|
6
6
|
weights?: "bold" | "light" | "normal" | "medium" | null | undefined;
|
|
7
7
|
align?: "center" | "left" | "right" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{cn as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{cn as r}from"../helpers/index.js";const s=n=>e("svg",{fill:"none",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",width:"1rem",className:r("ai-animate-spin",n.className),children:e("path",{d:"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})});var i=s;export{i as default};
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/icons/spinner.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\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 fill=\"none\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1rem\"\n className={cn('ai-animate-spin', props.className)}\n >\n <path\n d=\"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n\nexport default Spinner\n"],
|
|
5
|
+
"mappings": "AAgBM,cAAAA,MAAA,oBAhBN,OAAS,MAAAC,MAAU,sBAOnB,MAAMC,EAAWC,GAEbH,EAAC,OACC,KAAK,OACL,QAAQ,YACR,MAAM,6BACN,MAAM,OACN,UAAWC,EAAG,kBAAmBE,EAAM,SAAS,EAEhD,SAAAH,EAAC,QACC,EAAE,yFACF,OAAO,QACP,YAAY,IACZ,cAAc,QAChB,EACF,EAIJ,IAAOI,EAAQF",
|
|
6
6
|
"names": ["jsx", "cn", "Spinner", "props", "spinner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as i,jsx as a,jsxs as t}from"react/jsx-runtime";import{SearchIcon as e}from"@storybook/icons";import{Button as o}from"../components/index.js";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 d={args:{size:"lg",children:"Primary"}},y={args:{size:"lg",variant:"secondary",children:"Secondary"}},m={args:{size:"lg",variant:"link",children:"Link"}},h={args:{size:"lg",children:t(i,{children:["WithIcon ",a(e,{className:"ai-ml-2"})]})}},g={args:{size:"lg",asChild:!0,children:a("a",{href:"http://example.com",children:"as a a tag"})}},f={args:{size:"lg",loading:!0,spinner:t("div",{className:"ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex",children:[a("svg",{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"2625",width:"1rem",className:"align-middle",children:a("path",{d:"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z",fill:"","p-id":"2626"})}),"\xA0loading..."]})}};export{g as Aschild,m as Link,d as Primary,y as Secondary,f as Spinner,h 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.js'\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: <
|
|
5
|
-
"mappings": "AAoFM,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAnFN,OAAS,cAAAC,MAAkB,mBAE3B,OAAS,UAAAC,MAAc,yBACvB,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,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index.js'\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: (\n <div className=\"ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex\">\n <svg\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"2625\"\n width=\"1rem\"\n className=\"align-middle\"\n >\n <path\n d=\"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z\"\n fill=\"\"\n p-id=\"2626\"\n ></path>\n </svg>\n loading...\n </div>\n ),\n },\n}\n"],
|
|
5
|
+
"mappings": "AAoFM,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAnFN,OAAS,cAAAC,MAAkB,mBAE3B,OAAS,UAAAC,MAAc,yBACvB,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,QACEV,EAAC,OAAI,UAAU,wEACb,UAAAD,EAAC,OACC,QAAQ,gBACR,QAAQ,MACR,MAAM,6BACN,OAAK,OACL,MAAM,OACN,UAAU,eAEV,SAAAA,EAAC,QACC,EAAE,o5EACF,KAAK,GACL,OAAK,OACN,EACH,EAAM,kBAER,CAEJ,CACF",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild", "Spinner"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -17,13 +17,13 @@ const buttonVariants = cva(
|
|
|
17
17
|
variant: {
|
|
18
18
|
primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',
|
|
19
19
|
secondary:
|
|
20
|
-
'ai-bg-btn-secondary ai-border-
|
|
20
|
+
'ai-bg-btn-secondary hover:ai-border-btn-secondary-active ai-border-btn-secondary-border-disabled ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid ai-border-btn-secondary-foreground',
|
|
21
21
|
link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
|
|
22
22
|
ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
|
|
23
23
|
},
|
|
24
24
|
size: {
|
|
25
25
|
sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',
|
|
26
|
-
base: 'ai-h-10 ai-px-
|
|
26
|
+
base: 'ai-h-10 ai-px-[2.625rem] ai-py-[0.625rem] ai-text-[14px]',
|
|
27
27
|
lg: 'ai-h-11 ai-px-8 ai-text-[16px]',
|
|
28
28
|
icon: 'ai-size-10 ai-rounded-full',
|
|
29
29
|
},
|
|
@@ -60,7 +60,7 @@ const buttonVariants = cva(
|
|
|
60
60
|
variant: 'secondary',
|
|
61
61
|
state: 'loading',
|
|
62
62
|
class:
|
|
63
|
-
'ai-bg-btn-secondary
|
|
63
|
+
'ai-bg-btn-secondary-active disabled:ai-text-btn-secondary-disabled-foreground ai-text-btn-secondary-disabled-foreground',
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
variant: 'primary',
|
|
@@ -70,7 +70,8 @@ const buttonVariants = cva(
|
|
|
70
70
|
{
|
|
71
71
|
variant: 'secondary',
|
|
72
72
|
state: 'disabled',
|
|
73
|
-
class:
|
|
73
|
+
class:
|
|
74
|
+
'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor',
|
|
74
75
|
},
|
|
75
76
|
],
|
|
76
77
|
defaultVariants: {
|
|
@@ -86,7 +87,7 @@ const loadingSvgVariants = cva('', {
|
|
|
86
87
|
variants: {
|
|
87
88
|
variant: {
|
|
88
89
|
primary: 'ai-stroke-btn-primary-foreground',
|
|
89
|
-
secondary: 'ai-stroke-btn-secondary
|
|
90
|
+
secondary: 'ai-stroke-btn-secondary',
|
|
90
91
|
link: 'ai-stroke-primary',
|
|
91
92
|
ghost: 'ai-stroke-primary',
|
|
92
93
|
},
|
package/src/icons/spinner.tsx
CHANGED
|
@@ -8,16 +8,16 @@ export interface SpinnerProps {
|
|
|
8
8
|
const Spinner = (props: SpinnerProps) => {
|
|
9
9
|
return (
|
|
10
10
|
<svg
|
|
11
|
-
className={cn('ai-animate-spin', props.className)}
|
|
12
|
-
width="20"
|
|
13
|
-
height="20"
|
|
14
|
-
viewBox="0 0 20 20"
|
|
15
11
|
fill="none"
|
|
12
|
+
viewBox="0 0 20 20"
|
|
16
13
|
xmlns="http://www.w3.org/2000/svg"
|
|
14
|
+
width="1rem"
|
|
15
|
+
className={cn('ai-animate-spin', props.className)}
|
|
17
16
|
>
|
|
18
17
|
<path
|
|
19
|
-
d="
|
|
20
|
-
|
|
18
|
+
d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1"
|
|
19
|
+
stroke="white"
|
|
20
|
+
strokeWidth="2"
|
|
21
21
|
strokeLinecap="round"
|
|
22
22
|
/>
|
|
23
23
|
</svg>
|
|
@@ -101,6 +101,24 @@ export const Spinner: Story = {
|
|
|
101
101
|
args: {
|
|
102
102
|
size: 'lg',
|
|
103
103
|
loading: true,
|
|
104
|
-
spinner:
|
|
104
|
+
spinner: (
|
|
105
|
+
<div className="ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex">
|
|
106
|
+
<svg
|
|
107
|
+
viewBox="0 0 1024 1024"
|
|
108
|
+
version="1.1"
|
|
109
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
110
|
+
p-id="2625"
|
|
111
|
+
width="1rem"
|
|
112
|
+
className="align-middle"
|
|
113
|
+
>
|
|
114
|
+
<path
|
|
115
|
+
d="M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z"
|
|
116
|
+
fill=""
|
|
117
|
+
p-id="2626"
|
|
118
|
+
></path>
|
|
119
|
+
</svg>
|
|
120
|
+
loading...
|
|
121
|
+
</div>
|
|
122
|
+
),
|
|
105
123
|
},
|
|
106
124
|
}
|
package/src/styles/global.css
CHANGED
|
@@ -64,19 +64,24 @@
|
|
|
64
64
|
--masks-color-2: hsla(0, 0%, 0%, 0.85);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
|
|
67
68
|
:root[data-brand-theme='anker'] {
|
|
68
|
-
--btn-bg-color: #
|
|
69
|
+
--btn-bg-color: #00BEFA;
|
|
69
70
|
--btn-text-color: #ffffff;
|
|
70
|
-
--btn-bg-active-color: #
|
|
71
|
-
--btn-bg-disabled-color: #
|
|
71
|
+
--btn-bg-active-color: #00AAFF;
|
|
72
|
+
/* --btn-bg-disabled-color: #1D3E4F; */
|
|
73
|
+
--btn-bg-disabled-color: rgba(29,62,79,0.7);
|
|
72
74
|
|
|
73
75
|
--btn-bg-secondary-color: #ffffff;
|
|
74
|
-
--btn-text-secondary-color: #
|
|
75
|
-
--btn-bg-secondary-active-color: #
|
|
76
|
-
--btn-bg-secondary-disabled-color:
|
|
76
|
+
--btn-text-secondary-color: #1D1D1F;
|
|
77
|
+
--btn-bg-secondary-active-color: #6E6E73;
|
|
78
|
+
--btn-bg-secondary-disabled-color: rgba(221,221,221,0.7);
|
|
79
|
+
--btn-border-secondary-border-color:#acacac;
|
|
77
80
|
|
|
78
81
|
--btn-radius: 9999px;
|
|
79
82
|
|
|
83
|
+
--btn-radius: 0;
|
|
84
|
+
|
|
80
85
|
--radius: 0em;
|
|
81
86
|
}
|
|
82
87
|
|
|
@@ -193,3 +198,6 @@
|
|
|
193
198
|
|
|
194
199
|
--brand-color-1: #88f387;
|
|
195
200
|
}
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
package/style.css
CHANGED
|
@@ -706,6 +706,9 @@ video {
|
|
|
706
706
|
.\!ai-border-none {
|
|
707
707
|
border-style: none !important;
|
|
708
708
|
}
|
|
709
|
+
.ai-border-btn-secondary-foreground {
|
|
710
|
+
border-color: var(--btn-text-secondary-color);
|
|
711
|
+
}
|
|
709
712
|
.ai-border-primary {
|
|
710
713
|
border-color: var(--brand-color-1);
|
|
711
714
|
}
|
|
@@ -727,6 +730,9 @@ video {
|
|
|
727
730
|
.ai-bg-btn-secondary {
|
|
728
731
|
background-color: var(--btn-bg-secondary-color);
|
|
729
732
|
}
|
|
733
|
+
.ai-bg-btn-secondary-active {
|
|
734
|
+
background-color: var(--btn-bg-secondary-active-color);
|
|
735
|
+
}
|
|
730
736
|
.ai-bg-skeleton {
|
|
731
737
|
background-color: var(--tertiary-color);
|
|
732
738
|
}
|
|
@@ -743,8 +749,8 @@ video {
|
|
|
743
749
|
.ai-stroke-btn-primary-foreground {
|
|
744
750
|
stroke: var(--btn-text-color);
|
|
745
751
|
}
|
|
746
|
-
.ai-stroke-btn-secondary
|
|
747
|
-
stroke: var(--btn-
|
|
752
|
+
.ai-stroke-btn-secondary {
|
|
753
|
+
stroke: var(--btn-bg-secondary-color);
|
|
748
754
|
}
|
|
749
755
|
.ai-stroke-primary {
|
|
750
756
|
stroke: var(--brand-color-1);
|
|
@@ -759,10 +765,6 @@ video {
|
|
|
759
765
|
padding-left: 0.75rem;
|
|
760
766
|
padding-right: 0.75rem;
|
|
761
767
|
}
|
|
762
|
-
.ai-px-4 {
|
|
763
|
-
padding-left: 1rem;
|
|
764
|
-
padding-right: 1rem;
|
|
765
|
-
}
|
|
766
768
|
.ai-px-8 {
|
|
767
769
|
padding-left: 2rem;
|
|
768
770
|
padding-right: 2rem;
|
|
@@ -771,13 +773,17 @@ video {
|
|
|
771
773
|
padding-left: 10px;
|
|
772
774
|
padding-right: 10px;
|
|
773
775
|
}
|
|
776
|
+
.ai-px-\[2\.625rem\] {
|
|
777
|
+
padding-left: 2.625rem;
|
|
778
|
+
padding-right: 2.625rem;
|
|
779
|
+
}
|
|
774
780
|
.ai-py-1 {
|
|
775
781
|
padding-top: 0.25rem;
|
|
776
782
|
padding-bottom: 0.25rem;
|
|
777
783
|
}
|
|
778
|
-
.ai-py
|
|
779
|
-
padding-top: 0.
|
|
780
|
-
padding-bottom: 0.
|
|
784
|
+
.ai-py-\[0\.625rem\] {
|
|
785
|
+
padding-top: 0.625rem;
|
|
786
|
+
padding-bottom: 0.625rem;
|
|
781
787
|
}
|
|
782
788
|
.ai-text-left {
|
|
783
789
|
text-align: left;
|
|
@@ -863,6 +869,9 @@ video {
|
|
|
863
869
|
.ai-text-btn-primary-foreground {
|
|
864
870
|
color: var(--btn-text-color);
|
|
865
871
|
}
|
|
872
|
+
.ai-text-btn-secondary-disabled-foreground {
|
|
873
|
+
color: var(--btn-border-secondary-border-color);
|
|
874
|
+
}
|
|
866
875
|
.ai-text-btn-secondary-foreground {
|
|
867
876
|
color: var(--btn-text-secondary-color);
|
|
868
877
|
}
|
|
@@ -980,19 +989,24 @@ video {
|
|
|
980
989
|
--masks-color-2: hsla(0, 0%, 0%, 0.85);
|
|
981
990
|
}
|
|
982
991
|
|
|
992
|
+
|
|
983
993
|
:root[data-brand-theme='anker'] {
|
|
984
|
-
--btn-bg-color: #
|
|
994
|
+
--btn-bg-color: #00BEFA;
|
|
985
995
|
--btn-text-color: #ffffff;
|
|
986
|
-
--btn-bg-active-color: #
|
|
987
|
-
--btn-bg-disabled-color: #
|
|
996
|
+
--btn-bg-active-color: #00AAFF;
|
|
997
|
+
/* --btn-bg-disabled-color: #1D3E4F; */
|
|
998
|
+
--btn-bg-disabled-color: rgba(29,62,79,0.7);
|
|
988
999
|
|
|
989
1000
|
--btn-bg-secondary-color: #ffffff;
|
|
990
|
-
--btn-text-secondary-color: #
|
|
991
|
-
--btn-bg-secondary-active-color: #
|
|
992
|
-
--btn-bg-secondary-disabled-color:
|
|
1001
|
+
--btn-text-secondary-color: #1D1D1F;
|
|
1002
|
+
--btn-bg-secondary-active-color: #6E6E73;
|
|
1003
|
+
--btn-bg-secondary-disabled-color: rgba(221,221,221,0.7);
|
|
1004
|
+
--btn-border-secondary-border-color:#acacac;
|
|
993
1005
|
|
|
994
1006
|
--btn-radius: 9999px;
|
|
995
1007
|
|
|
1008
|
+
--btn-radius: 0;
|
|
1009
|
+
|
|
996
1010
|
--radius: 0em;
|
|
997
1011
|
}
|
|
998
1012
|
|
|
@@ -1200,6 +1214,10 @@ video {
|
|
|
1200
1214
|
display: block;
|
|
1201
1215
|
}
|
|
1202
1216
|
|
|
1217
|
+
.hover\:ai-border-btn-secondary-active:hover {
|
|
1218
|
+
border-color: var(--btn-bg-secondary-active-color);
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1203
1221
|
.hover\:\!ai-bg-btn-primary:hover {
|
|
1204
1222
|
background-color: var(--btn-bg-color) !important;
|
|
1205
1223
|
}
|
|
@@ -1280,6 +1298,10 @@ video {
|
|
|
1280
1298
|
cursor: not-allowed;
|
|
1281
1299
|
}
|
|
1282
1300
|
|
|
1301
|
+
.disabled\:ai-border-btn-secondary-disabled-borderColor:disabled {
|
|
1302
|
+
border-color: var(--btn-border-secondary-border-color);
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1283
1305
|
.disabled\:ai-bg-btn-primary-disabled:disabled {
|
|
1284
1306
|
background-color: var(--btn-bg-disabled-color);
|
|
1285
1307
|
}
|
|
@@ -1293,7 +1315,7 @@ video {
|
|
|
1293
1315
|
}
|
|
1294
1316
|
|
|
1295
1317
|
.disabled\:ai-text-btn-secondary-disabled-foreground:disabled {
|
|
1296
|
-
color: var(--
|
|
1318
|
+
color: var(--btn-border-secondary-border-color);
|
|
1297
1319
|
}
|
|
1298
1320
|
|
|
1299
1321
|
.disabled\:ai-opacity-50:disabled {
|
|
@@ -1340,3 +1362,6 @@ video {
|
|
|
1340
1362
|
.\[\&\>\*\]\:\!ai-invisible>* {
|
|
1341
1363
|
visibility: hidden !important;
|
|
1342
1364
|
}
|
|
1365
|
+
|
|
1366
|
+
|
|
1367
|
+
|