@anker-in/headless-ui 0.0.15 → 0.0.17
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 +3 -3
- package/dist/cjs/components/input.d.ts +2 -1
- package/dist/cjs/components/input.js +1 -1
- package/dist/cjs/components/input.js.map +2 -2
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/dist/esm/components/input.d.ts +2 -1
- package/dist/esm/components/input.js +1 -1
- package/dist/esm/components/input.js.map +2 -2
- package/package.json +1 -1
- package/src/components/button.tsx +3 -2
- package/src/components/input.tsx +13 -9
- package/src/styles/global.css +4 -5
- package/style.css +4 -20
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var P=(e,a)=>{for(var i in a)n(e,i,{get:a[i],enumerable:!0})},d=(e,a,i,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of z(a))!H.call(e,t)&&t!==i&&n(e,t,{get:()=>a[t],enumerable:!(o=V(a,t))||o.enumerable});return e};var f=(e,a,i)=>(i=e!=null?B(E(e)):{},d(a||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),C=e=>d(n({},"__esModule",{value:!0}),e);var R={};P(R,{default:()=>N});module.exports=C(R);var r=require("react/jsx-runtime"),L=f(require("react")),p=require("@radix-ui/react-slot"),u=require("@radix-ui/react-visually-hidden"),c=require("class-variance-authority"),m=f(require("../icons/spinner.js")),y=require("../helpers/index.js");const M=(0,c.cva)("ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none disabled:ai-opacity-50",{variants:{variant:{primary:"ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground",secondary:"ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid",link:"ai-text-primary ai-underline-offset-4 hover:ai-underline",ghost:"hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground"},size:{sm:"ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]",base:"ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]",lg:"ai-h-11 ai-px-8 ai-text-[16px]",icon:"ai-size-10 ai-rounded-full"},hoverEffect:{none:"",slide:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),l=L.forwardRef(({asChild:e=!1,size:a="base",children:i,variant:o,hoverEffect:t="none",className:v,disabled:g=!1,loading:s=!1,...x},h)=>{const w=e?p.Slot:"button",b=g||s;return(0,r.jsx)(w,{disabled:b,className:(0,y.cn)(M({variant:o,size:a,hoverEffect:t}),{"ai-cursor-not-allowed":b},v),ref:h,...x,children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:i}),(0,r.jsx)("span",{className:"ai-absolute",children:(0,r.jsx)(m.default,{})}),(0,r.jsx)(u.VisuallyHidden,{children:i})]}):i})});l.displayName="Button";var N=l;
|
|
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\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\n return (\n <Comp\n disabled={
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "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\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(\n buttonVariants({ variant, size, hoverEffect }),\n {\n 'ai-cursor-not-allowed': isInactive,\n },\n className\n )}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"ai-absolute\">\n <Spinner />\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGU,IAAAI,EAAA,6BAnGVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAKnB,MAAMC,KAAiB,OACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAaMC,EAASP,EAAM,WACnB,CACE,CACE,QAAAQ,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAU,OAAO,SACxBW,EAAaL,GAAYC,EAE/B,SACE,OAACG,EAAA,CACC,SAAUC,EACV,aAAW,MACTb,EAAe,CAAE,QAAAK,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBO,CAC3B,EACAN,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,cACd,mBAAC,EAAAU,QAAA,EAAQ,EACX,KACA,OAAC,kBAAgB,SAAAV,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOV,EAAQU",
|
|
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", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Comp", "isInactive", "Spinner"]
|
|
7
7
|
}
|
|
@@ -9,8 +9,9 @@ export interface InputProps extends ComponentPropsWithout<'input', 'size'>, Vari
|
|
|
9
9
|
interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
|
|
10
10
|
/**
|
|
11
11
|
* 插槽的位置
|
|
12
|
+
* default: right
|
|
12
13
|
*/
|
|
13
|
-
side
|
|
14
|
+
side?: 'left' | 'right';
|
|
14
15
|
}
|
|
15
16
|
/**
|
|
16
17
|
* InputSlot
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var h=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},f=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of b(t))!P.call(e,a)&&a!==i&&p(e,a,{get:()=>t[a],enumerable:!(o=v(t,a))||o.enumerable});return e};var g=(e,t,i)=>(i=e!=null?h(x(e)):{},f(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),R=e=>f(p({},"__esModule",{value:!0}),e);var y={};I(y,{Input:()=>u,InputSlot:()=>d});module.exports=R(y);var r=require("react/jsx-runtime"),l=g(require("react")),n=require("../helpers/index.js"),c=require("class-variance-authority");const m=(0,c.cva)("ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border",{variants:{size:{sm:"ai-h-8 ai-text-sm",base:"ai-h-10",lg:"ai-h-12 ai-text-lg"}},defaultVariants:{size:"base"}}),d=l.forwardRef((e,t)=>{const{className:i,side:o="right",children:a,...s}=e;return(0,r.jsx)("div",{ref:t,...s,className:(0,n.cn)("ai-flex ai-h-full ai-items-center",i,{"-ai-order-1":o==="left","ai-order-2":o==="right"}),children:a})}),u=l.forwardRef(({className:e,type:t,size:i,children:o,...a},s)=>l.isValidElement(o)?(0,r.jsxs)("div",{className:(0,n.cn)(m({size:i}),e),children:[(0,r.jsx)("input",{type:t,className:(0,n.cn)("placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3"),ref:s,...a}),o]}):(0,r.jsx)("input",{type:t,className:(0,n.cn)(m({size:i}),"ai-px-3",e),ref:s,...a}));u.displayName="Input",d.displayName="InputSlot";
|
|
2
2
|
//# sourceMappingURL=input.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/input.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n 'ai-border-input ai-bg-background focus-visible:ai-
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,cAAAC,IAAA,eAAAC,EAAAJ,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n 'ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border',\n {\n variants: {\n size: {\n sm: 'ai-h-8 ai-text-sm',\n base: 'ai-h-10',\n lg: 'ai-h-12 ai-text-lg',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\nexport interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}\n\ntype InputSlotElement = React.ElementRef<'div'>\ninterface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {\n /**\n * \u63D2\u69FD\u7684\u4F4D\u7F6E\n * default: right\n */\n side?: 'left' | 'right'\n}\n\n/**\n * InputSlot\n * \u7528\u6765\u5728 Input \u7EC4\u4EF6\u4E2D\u63D2\u5165\u989D\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982icon \uFF0C\u6309\u94AE\n */\nconst InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {\n const { className, side = 'right', children, ...slotProps } = props\n\n return (\n <div\n ref={forwardedRef}\n {...slotProps}\n className={cn('ai-flex ai-h-full ai-items-center', className, {\n '-ai-order-1': side === 'left',\n 'ai-order-2': side === 'right',\n })}\n >\n {children}\n </div>\n )\n})\n\nconst Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(\n ({ className, type, size, children, ...props }, ref) => {\n if (!React.isValidElement(children)) {\n return <input type={type} className={cn(inputVariants({ size }), 'ai-px-3', className)} ref={ref} {...props} />\n }\n return (\n <div className={cn(inputVariants({ size }), className)}>\n <input\n type={type}\n className={cn(\n 'placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3'\n )}\n ref={ref}\n {...props}\n />\n {children}\n </div>\n )\n }\n)\nInput.displayName = 'Input'\nInputSlot.displayName = 'InputSlot'\n\nexport { Input, InputSlot }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,cAAAC,IAAA,eAAAC,EAAAJ,GA0CI,IAAAK,EAAA,6BAxCJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAAuC,oCAEvC,MAAMC,KAAgB,OACpB,0JACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,oBACJ,KAAM,UACN,GAAI,oBACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAiBMN,EAAYG,EAAM,WAA6C,CAACI,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAU,EAAIL,EAE9D,SACE,OAAC,OACC,IAAKC,EACJ,GAAGI,EACJ,aAAW,MAAG,oCAAqCH,EAAW,CAC5D,cAAeC,IAAS,OACxB,aAAcA,IAAS,OACzB,CAAC,EAEA,SAAAC,EACH,CAEJ,CAAC,EAEKZ,EAAQI,EAAM,WAClB,CAAC,CAAE,UAAAM,EAAW,KAAAI,EAAM,KAAAC,EAAM,SAAAH,EAAU,GAAGJ,CAAM,EAAGQ,IACzCZ,EAAM,eAAeQ,CAAQ,KAIhC,QAAC,OAAI,aAAW,MAAGL,EAAc,CAAE,KAAAQ,CAAK,CAAC,EAAGL,CAAS,EACnD,oBAAC,SACC,KAAMI,EACN,aAAW,MACT,mNACF,EACA,IAAKE,EACJ,GAAGR,EACN,EACCI,GACH,KAbO,OAAC,SAAM,KAAME,EAAM,aAAW,MAAGP,EAAc,CAAE,KAAAQ,CAAK,CAAC,EAAG,UAAWL,CAAS,EAAG,IAAKM,EAAM,GAAGR,EAAO,CAgBnH,EACAR,EAAM,YAAc,QACpBC,EAAU,YAAc",
|
|
6
6
|
"names": ["input_exports", "__export", "Input", "InputSlot", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_class_variance_authority", "inputVariants", "props", "forwardedRef", "className", "side", "children", "slotProps", "type", "size", "ref"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as w,jsx as e,jsxs as B}from"react/jsx-runtime";import*as c from"react";import{Slot as m}from"@radix-ui/react-slot";import{VisuallyHidden as y}from"@radix-ui/react-visually-hidden";import{cva as v}from"class-variance-authority";import g from"../icons/spinner.js";import{cn as x}from"../helpers/index.js";const h=v("ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none disabled:ai-opacity-50",{variants:{variant:{primary:"ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground",secondary:"ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid",link:"ai-text-primary ai-underline-offset-4 hover:ai-underline",ghost:"hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground"},size:{sm:"ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]",base:"ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]",lg:"ai-h-11 ai-px-8 ai-text-[16px]",icon:"ai-size-10 ai-rounded-full"},hoverEffect:{none:"",slide:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),t=c.forwardRef(({asChild:o=!1,size:n="base",children:a,variant:s,hoverEffect:b="none",className:d,disabled:f=!1,loading:i=!1,...l},p)=>{const u=o?m:"button",r=f||i;return e(u,{disabled:r,className:x(h({variant:s,size:n,hoverEffect:b}),{"ai-cursor-not-allowed":r},d),ref:p,...l,children:i?B(w,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:a}),e("span",{className:"ai-absolute",children:e(g,{})}),e(y,{children:a})]}):a})});t.displayName="Button";var C=t;export{C as default};
|
|
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\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\n return (\n <Comp\n disabled={
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "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\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(\n buttonVariants({ variant, size, hoverEffect }),\n {\n 'ai-cursor-not-allowed': isInactive,\n },\n className\n )}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"ai-absolute\">\n <Spinner />\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "aAqGU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAnGV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAKnB,MAAMC,EAAiBH,EACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAaMI,EAASP,EAAM,WACnB,CACE,CACE,QAAAQ,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAOV,EAAUP,EAAO,SACxBkB,EAAaL,GAAYC,EAE/B,OACEjB,EAACoB,EAAA,CACC,SAAUC,EACV,UAAWd,EACTC,EAAe,CAAE,QAAAK,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBO,CAC3B,EACAN,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,EACChB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAY,EACH,EACAZ,EAAC,QAAK,UAAU,cACd,SAAAA,EAACM,EAAA,EAAQ,EACX,EACAN,EAACI,EAAA,CAAgB,SAAAQ,EAAS,GAC5B,EAEAA,EAEJ,CAEJ,CACF,EAEAH,EAAO,YAAc,SACrB,IAAOa,EAAQb",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Comp", "isInactive", "button_default"]
|
|
7
7
|
}
|
|
@@ -9,8 +9,9 @@ export interface InputProps extends ComponentPropsWithout<'input', 'size'>, Vari
|
|
|
9
9
|
interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
|
|
10
10
|
/**
|
|
11
11
|
* 插槽的位置
|
|
12
|
+
* default: right
|
|
12
13
|
*/
|
|
13
|
-
side
|
|
14
|
+
side?: 'left' | 'right';
|
|
14
15
|
}
|
|
15
16
|
/**
|
|
16
17
|
* InputSlot
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as p,jsxs as m}from"react/jsx-runtime";import*as s from"react";import{cn as n}from"../helpers/index.js";import{cva as f}from"class-variance-authority";const l=f("ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border",{variants:{size:{sm:"ai-h-8 ai-text-sm",base:"ai-h-10",lg:"ai-h-12 ai-text-lg"}},defaultVariants:{size:"base"}}),d=s.forwardRef((t,i)=>{const{className:a,side:e="right",children:o,...r}=t;return p("div",{ref:i,...r,className:n("ai-flex ai-h-full ai-items-center",a,{"-ai-order-1":e==="left","ai-order-2":e==="right"}),children:o})}),u=s.forwardRef(({className:t,type:i,size:a,children:e,...o},r)=>s.isValidElement(e)?m("div",{className:n(l({size:a}),t),children:[p("input",{type:i,className:n("placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3"),ref:r,...o}),e]}):p("input",{type:i,className:n(l({size:a}),"ai-px-3",t),ref:r,...o}));u.displayName="Input",d.displayName="InputSlot";export{u as Input,d as InputSlot};
|
|
2
2
|
//# sourceMappingURL=input.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/input.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n 'ai-border-input ai-bg-background focus-visible:ai-
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n 'ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border',\n {\n variants: {\n size: {\n sm: 'ai-h-8 ai-text-sm',\n base: 'ai-h-10',\n lg: 'ai-h-12 ai-text-lg',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\nexport interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}\n\ntype InputSlotElement = React.ElementRef<'div'>\ninterface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {\n /**\n * \u63D2\u69FD\u7684\u4F4D\u7F6E\n * default: right\n */\n side?: 'left' | 'right'\n}\n\n/**\n * InputSlot\n * \u7528\u6765\u5728 Input \u7EC4\u4EF6\u4E2D\u63D2\u5165\u989D\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982icon \uFF0C\u6309\u94AE\n */\nconst InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {\n const { className, side = 'right', children, ...slotProps } = props\n\n return (\n <div\n ref={forwardedRef}\n {...slotProps}\n className={cn('ai-flex ai-h-full ai-items-center', className, {\n '-ai-order-1': side === 'left',\n 'ai-order-2': side === 'right',\n })}\n >\n {children}\n </div>\n )\n})\n\nconst Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(\n ({ className, type, size, children, ...props }, ref) => {\n if (!React.isValidElement(children)) {\n return <input type={type} className={cn(inputVariants({ size }), 'ai-px-3', className)} ref={ref} {...props} />\n }\n return (\n <div className={cn(inputVariants({ size }), className)}>\n <input\n type={type}\n className={cn(\n 'placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3'\n )}\n ref={ref}\n {...props}\n />\n {children}\n </div>\n )\n }\n)\nInput.displayName = 'Input'\nInputSlot.displayName = 'InputSlot'\n\nexport { Input, InputSlot }\n"],
|
|
5
|
+
"mappings": "aA0CI,cAAAA,EAmBE,QAAAC,MAnBF,oBAxCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,OAAS,OAAAC,MAA8B,2BAEvC,MAAMC,EAAgBD,EACpB,0JACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,oBACJ,KAAM,UACN,GAAI,oBACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAiBME,EAAYJ,EAAM,WAA6C,CAACK,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAU,EAAIL,EAE9D,OACEP,EAAC,OACC,IAAKQ,EACJ,GAAGI,EACJ,UAAWT,EAAG,oCAAqCM,EAAW,CAC5D,cAAeC,IAAS,OACxB,aAAcA,IAAS,OACzB,CAAC,EAEA,SAAAC,EACH,CAEJ,CAAC,EAEKE,EAAQX,EAAM,WAClB,CAAC,CAAE,UAAAO,EAAW,KAAAK,EAAM,KAAAC,EAAM,SAAAJ,EAAU,GAAGJ,CAAM,EAAGS,IACzCd,EAAM,eAAeS,CAAQ,EAIhCV,EAAC,OAAI,UAAWE,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAGN,CAAS,EACnD,UAAAT,EAAC,SACC,KAAMc,EACN,UAAWX,EACT,mNACF,EACA,IAAKa,EACJ,GAAGT,EACN,EACCI,GACH,EAbOX,EAAC,SAAM,KAAMc,EAAM,UAAWX,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAG,UAAWN,CAAS,EAAG,IAAKO,EAAM,GAAGT,EAAO,CAgBnH,EACAM,EAAM,YAAc,QACpBP,EAAU,YAAc",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cn", "cva", "inputVariants", "InputSlot", "props", "forwardedRef", "className", "side", "children", "slotProps", "Input", "type", "size", "ref"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -83,14 +83,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
83
83
|
ref
|
|
84
84
|
) => {
|
|
85
85
|
const Comp = asChild ? Slot : 'button'
|
|
86
|
+
const isInactive = disabled || loading
|
|
86
87
|
|
|
87
88
|
return (
|
|
88
89
|
<Comp
|
|
89
|
-
disabled={
|
|
90
|
+
disabled={isInactive}
|
|
90
91
|
className={cn(
|
|
91
92
|
buttonVariants({ variant, size, hoverEffect }),
|
|
92
93
|
{
|
|
93
|
-
'ai-cursor-not-allowed':
|
|
94
|
+
'ai-cursor-not-allowed': isInactive,
|
|
94
95
|
},
|
|
95
96
|
className
|
|
96
97
|
)}
|
package/src/components/input.tsx
CHANGED
|
@@ -6,13 +6,13 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
|
|
|
6
6
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
7
7
|
|
|
8
8
|
const inputVariants = cva(
|
|
9
|
-
'ai-border-input ai-bg-background focus-visible:ai-
|
|
9
|
+
'ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border',
|
|
10
10
|
{
|
|
11
11
|
variants: {
|
|
12
12
|
size: {
|
|
13
|
-
sm: 'ai-h-8',
|
|
13
|
+
sm: 'ai-h-8 ai-text-sm',
|
|
14
14
|
base: 'ai-h-10',
|
|
15
|
-
lg: 'ai-h-12',
|
|
15
|
+
lg: 'ai-h-12 ai-text-lg',
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
18
|
defaultVariants: {
|
|
@@ -27,8 +27,9 @@ type InputSlotElement = React.ElementRef<'div'>
|
|
|
27
27
|
interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
|
|
28
28
|
/**
|
|
29
29
|
* 插槽的位置
|
|
30
|
+
* default: right
|
|
30
31
|
*/
|
|
31
|
-
side
|
|
32
|
+
side?: 'left' | 'right'
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
/**
|
|
@@ -36,15 +37,15 @@ interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
|
|
|
36
37
|
* 用来在 Input 组件中插入额外的内容，比如icon ，按钮
|
|
37
38
|
*/
|
|
38
39
|
const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {
|
|
39
|
-
const { className, side, children, ...slotProps } = props
|
|
40
|
+
const { className, side = 'right', children, ...slotProps } = props
|
|
40
41
|
|
|
41
42
|
return (
|
|
42
43
|
<div
|
|
43
44
|
ref={forwardedRef}
|
|
44
45
|
{...slotProps}
|
|
45
|
-
className={cn('ai-flex ai-h-full ai-items-center
|
|
46
|
-
'-ai-order-1
|
|
47
|
-
'ai-order-2
|
|
46
|
+
className={cn('ai-flex ai-h-full ai-items-center', className, {
|
|
47
|
+
'-ai-order-1': side === 'left',
|
|
48
|
+
'ai-order-2': side === 'right',
|
|
48
49
|
})}
|
|
49
50
|
>
|
|
50
51
|
{children}
|
|
@@ -54,12 +55,15 @@ const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, for
|
|
|
54
55
|
|
|
55
56
|
const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
|
|
56
57
|
({ className, type, size, children, ...props }, ref) => {
|
|
58
|
+
if (!React.isValidElement(children)) {
|
|
59
|
+
return <input type={type} className={cn(inputVariants({ size }), 'ai-px-3', className)} ref={ref} {...props} />
|
|
60
|
+
}
|
|
57
61
|
return (
|
|
58
62
|
<div className={cn(inputVariants({ size }), className)}>
|
|
59
63
|
<input
|
|
60
64
|
type={type}
|
|
61
65
|
className={cn(
|
|
62
|
-
'placeholder:ai-text-muted-foreground ai-flex ai-size-full
|
|
66
|
+
'placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3'
|
|
63
67
|
)}
|
|
64
68
|
ref={ref}
|
|
65
69
|
{...props}
|
package/src/styles/global.css
CHANGED
|
@@ -154,17 +154,16 @@
|
|
|
154
154
|
--brand-color-1: #e42d46;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
|
|
158
157
|
:root[data-brand-theme='soundcore'] {
|
|
159
|
-
--btn-bg-color: #
|
|
158
|
+
--btn-bg-color: #17bbef;
|
|
160
159
|
--btn-text-color: #ffffff;
|
|
161
160
|
--btn-bg-color-active: #48cffa;
|
|
162
161
|
--btn-bg-disabled-color: #ccdfe8;
|
|
163
162
|
|
|
164
163
|
--btn-bg-secondary-color: #ffffff;
|
|
165
|
-
--btn-text-secondary-color: #
|
|
166
|
-
--btn-bg-secondary-active-color: #
|
|
167
|
-
--btn-bg-secondary-disabled-color: #
|
|
164
|
+
--btn-text-secondary-color: #17bbef;
|
|
165
|
+
--btn-bg-secondary-active-color: #17bbef;
|
|
166
|
+
--btn-bg-secondary-disabled-color: #17bbef;
|
|
168
167
|
|
|
169
168
|
--btn-radius: 30px;
|
|
170
169
|
|
package/style.css
CHANGED
|
@@ -748,10 +748,6 @@ video {
|
|
|
748
748
|
.ai-p-6 {
|
|
749
749
|
padding: 1.5rem;
|
|
750
750
|
}
|
|
751
|
-
.ai-px-2 {
|
|
752
|
-
padding-left: 0.5rem;
|
|
753
|
-
padding-right: 0.5rem;
|
|
754
|
-
}
|
|
755
751
|
.ai-px-3 {
|
|
756
752
|
padding-left: 0.75rem;
|
|
757
753
|
padding-right: 0.75rem;
|
|
@@ -776,12 +772,6 @@ video {
|
|
|
776
772
|
padding-top: 0.5rem;
|
|
777
773
|
padding-bottom: 0.5rem;
|
|
778
774
|
}
|
|
779
|
-
.ai-pl-0 {
|
|
780
|
-
padding-left: 0px;
|
|
781
|
-
}
|
|
782
|
-
.ai-pr-0 {
|
|
783
|
-
padding-right: 0px;
|
|
784
|
-
}
|
|
785
775
|
.ai-text-left {
|
|
786
776
|
text-align: left;
|
|
787
777
|
}
|
|
@@ -1073,17 +1063,16 @@ video {
|
|
|
1073
1063
|
--brand-color-1: #e42d46;
|
|
1074
1064
|
}
|
|
1075
1065
|
|
|
1076
|
-
|
|
1077
1066
|
:root[data-brand-theme='soundcore'] {
|
|
1078
|
-
--btn-bg-color: #
|
|
1067
|
+
--btn-bg-color: #17bbef;
|
|
1079
1068
|
--btn-text-color: #ffffff;
|
|
1080
1069
|
--btn-bg-color-active: #48cffa;
|
|
1081
1070
|
--btn-bg-disabled-color: #ccdfe8;
|
|
1082
1071
|
|
|
1083
1072
|
--btn-bg-secondary-color: #ffffff;
|
|
1084
|
-
--btn-text-secondary-color: #
|
|
1085
|
-
--btn-bg-secondary-active-color: #
|
|
1086
|
-
--btn-bg-secondary-disabled-color: #
|
|
1073
|
+
--btn-text-secondary-color: #17bbef;
|
|
1074
|
+
--btn-bg-secondary-active-color: #17bbef;
|
|
1075
|
+
--btn-bg-secondary-disabled-color: #17bbef;
|
|
1087
1076
|
|
|
1088
1077
|
--btn-radius: 30px;
|
|
1089
1078
|
|
|
@@ -1122,11 +1111,6 @@ video {
|
|
|
1122
1111
|
background-color: transparent;
|
|
1123
1112
|
}
|
|
1124
1113
|
|
|
1125
|
-
.file\:ai-text-sm::file-selector-button {
|
|
1126
|
-
font-size: 0.875rem;
|
|
1127
|
-
line-height: 1.25rem;
|
|
1128
|
-
}
|
|
1129
|
-
|
|
1130
1114
|
.file\:ai-font-medium::file-selector-button {
|
|
1131
1115
|
font-weight: 500;
|
|
1132
1116
|
}
|