@anker-in/headless-ui 0.0.27-alpha.14 → 0.0.27-alpha.16
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/README.md +34 -7
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +2 -1
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/MemberEquity/index.js +8 -7
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/types.d.ts +3 -3
- package/dist/cjs/biz-components/MemberEquity/types.js +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js +7 -7
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Tabs/Tabs.d.ts +9 -0
- package/dist/cjs/biz-components/Tabs/Tabs.js +2 -0
- package/dist/cjs/biz-components/Tabs/Tabs.js.map +7 -0
- package/dist/cjs/biz-components/Tabs/index.d.ts +1 -0
- package/dist/cjs/biz-components/Tabs/index.js +2 -0
- package/dist/cjs/biz-components/Tabs/index.js.map +7 -0
- package/dist/cjs/biz-components/Tabs/types.d.ts +14 -0
- package/dist/cjs/biz-components/Tabs/types.js +2 -0
- package/dist/cjs/biz-components/Tabs/types.js.map +7 -0
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/button.d.ts +0 -1
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +3 -3
- package/dist/cjs/components/tabs.d.ts +3 -1
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +3 -3
- package/dist/cjs/stories/MemberEquity.stories.d.ts +1 -1
- package/dist/cjs/stories/MemberEquity.stories.js +2 -2
- package/dist/cjs/stories/MemberEquity.stories.js.map +2 -2
- package/dist/cjs/stories/bizTabs.stories.d.ts +7 -0
- package/dist/cjs/stories/bizTabs.stories.js +2 -0
- package/dist/cjs/stories/bizTabs.stories.js.map +7 -0
- package/dist/cjs/stories/button.stories.d.ts +0 -8
- package/dist/cjs/stories/button.stories.js +1 -1
- package/dist/cjs/stories/button.stories.js.map +2 -2
- package/dist/cjs/stories/tabs.stories.d.ts +6 -4
- package/dist/cjs/stories/tabs.stories.js +1 -1
- package/dist/cjs/stories/tabs.stories.js.map +1 -1
- package/dist/cjs/types/props.d.ts +3 -0
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +2 -1
- package/dist/esm/biz-components/MemberEquity/index.js +9 -8
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/types.d.ts +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +7 -7
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Tabs/Tabs.d.ts +9 -0
- package/dist/esm/biz-components/Tabs/Tabs.js +2 -0
- package/dist/esm/biz-components/Tabs/Tabs.js.map +7 -0
- package/dist/esm/biz-components/Tabs/index.d.ts +1 -0
- package/dist/esm/biz-components/Tabs/index.js +2 -0
- package/dist/esm/biz-components/Tabs/index.js.map +7 -0
- package/dist/esm/biz-components/Tabs/types.d.ts +14 -0
- package/dist/esm/biz-components/Tabs/types.js +1 -0
- package/dist/esm/biz-components/Tabs/types.js.map +7 -0
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/button.d.ts +0 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/dist/esm/components/tabs.d.ts +3 -1
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +3 -3
- package/dist/esm/stories/MemberEquity.stories.d.ts +1 -1
- package/dist/esm/stories/MemberEquity.stories.js +2 -2
- package/dist/esm/stories/MemberEquity.stories.js.map +2 -2
- package/dist/esm/stories/bizTabs.stories.d.ts +7 -0
- package/dist/esm/stories/bizTabs.stories.js +2 -0
- package/dist/esm/stories/bizTabs.stories.js.map +7 -0
- package/dist/esm/stories/button.stories.d.ts +0 -8
- package/dist/esm/stories/button.stories.js +1 -1
- package/dist/esm/stories/button.stories.js.map +2 -2
- package/dist/esm/stories/tabs.stories.d.ts +6 -4
- package/dist/esm/stories/tabs.stories.js +1 -1
- package/dist/esm/stories/tabs.stories.js.map +1 -1
- package/dist/esm/types/props.d.ts +3 -0
- package/dist/tokens/anker.css +29 -0
- package/dist/tokens/base.css +147 -0
- package/dist/tokens/eufy.css +14 -0
- package/dist/tokens/eufyMake.css +10 -0
- package/dist/tokens/solix.css +10 -0
- package/dist/tokens/soundcore.css +15 -0
- package/package.json +8 -3
- package/style.css +40 -41
- package/tailwind.config.ts +6 -0
package/README.md
CHANGED
|
@@ -9,19 +9,46 @@ npm install @anker-in/headless-ui
|
|
|
9
9
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
无头项目修改tailwind.config.ts 配置文件
|
|
13
|
+
```js
|
|
14
|
+
import type { Config } from 'tailwindcss'
|
|
15
|
+
+ import headlessUIConfig from '@anker-in/headless-ui/tailwind.config.js'
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
+ presets: [
|
|
20
|
+
+ headlessUIConfig,
|
|
21
|
+
+ ],
|
|
22
|
+
content: [
|
|
23
|
+
+ './node_modules/@anker-in/headless-ui/dist/**/*.js',
|
|
24
|
+
],
|
|
25
|
+
} satisfies Config
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
在全局css 文件添加 design token css 变量文件
|
|
30
|
+
查看Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs
|
|
31
|
+
|
|
32
|
+
```css
|
|
33
|
+
:root {
|
|
34
|
+
--btn-bg-color: #00a7e1;
|
|
35
|
+
--btn-text-color: #ffffff;
|
|
36
|
+
--btn-bg-active-color: #00a7e1;
|
|
37
|
+
--btn-bg-disabled-color: #ccdfe850;
|
|
38
|
+
// and more
|
|
39
|
+
}
|
|
13
40
|
|
|
14
|
-
```html
|
|
15
|
-
<html data-brand-theme="soundcore"></html>
|
|
16
41
|
```
|
|
17
42
|
|
|
18
|
-
|
|
43
|
+
或者直接引入 design token css
|
|
44
|
+
```js
|
|
45
|
+
import '@anker-in/headless-ui/tokens/base.css'
|
|
46
|
+
import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
|
|
47
|
+
|
|
48
|
+
```
|
|
19
49
|
|
|
20
|
-
然后就可以项目内引入需要的组件
|
|
21
50
|
|
|
22
51
|
```jsx
|
|
23
|
-
// 在项目入口添加样式文件,比如_app.js
|
|
24
|
-
import '@anker-in/headless-ui/style.css'
|
|
25
52
|
|
|
26
53
|
// 使用组件
|
|
27
54
|
import { Button, Skeleton } from '@anker-in/headless-ui'
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var H=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},g=(e,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of D(a))!F.call(e,l)&&l!==r&&m(e,l,{get:()=>a[l],enumerable:!(i=w(a,l))||i.enumerable});return e};var z=(e,a,r)=>(r=e!=null?u(y(e)):{},g(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>g(m({},"__esModule",{value:!0}),e);var P={};H(P,{default:()=>B});module.exports=C(P);var t=require("react/jsx-runtime"),p=z(require("react")),s=require("../../components/index.js"),n=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const b=p.default.forwardRef(({title:e,subtitle:a,background:r,primaryButton:i,secondaryButton:l,theme:o="light",className:f,products:c=[]},h)=>{const d=o==="dark"?"text-white":"text-[#1D1D1F]",k=o==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{ref:h,className:(0,n.cn)(o==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full",f),children:[(0,t.jsx)(s.Picture,{className:"absolute top-0",source:r}),(0,t.jsxs)("div",{className:"relative z-10 flex flex-col gap-8 px-32",children:[(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)("h1",{className:(0,n.cn)("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",d),children:e}),(0,t.jsx)("p",{className:(0,n.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",d),children:a})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[l&&(0,t.jsx)(s.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",...l,children:l.text}),i&&(0,t.jsx)(s.Button,{size:"lg",variant:"secondary",...i,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:i.text})]})]}),c.length>0&&(0,t.jsx)("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:c.map((N,x)=>(0,t.jsxs)(p.default.Fragment,{children:[(0,t.jsx)(s.Text,{className:(0,n.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",o==="dark"?"text-white":"text-[#1D1D1F]"),children:N.title}),x<c.length-1&&(0,t.jsx)("div",{className:(0,n.cn)("h-4 w-px",k)})]},x))})]})});b.displayName="HeroBanner";var B=(0,v.withStyles)(b);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n '
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full',\n className\n )}\n >\n <Picture className=\"absolute top-0\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1\n className={cn(\n 'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n textColorClass\n )}\n >\n {title}\n </h1>\n <p\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n >\n {subtitle}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\" {...secondaryButton}>\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n {...primaryButton}\n className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n )}\n >\n {product.title}\n </Text>\n {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBQ,IAAAI,EAAA,6BApBRC,EAAkB,oBAElBC,EAAsC,qCACtCC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WACvB,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,IAAKG,EACL,aAAW,MACTH,IAAU,OAAS,YAAc,GACjC,wFACAC,CACF,EAEA,oBAAC,WAAQ,UAAU,iBAAiB,OAAQJ,EAAY,KAExD,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,MACC,aAAW,MACT,oFACAO,CACF,EAEC,SAAAT,EACH,KACA,OAAC,KACC,aAAW,MACT,4EACAS,CACF,EAEC,SAAAR,EACH,GACF,KAGA,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAA8B,GAAGA,EAC5E,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UACC,KAAK,KACL,QAAQ,YACP,GAAGA,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,mDACZ,SAAAA,EAAS,IAAI,CAACI,EAASC,OACtB,QAAC,EAAAb,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAM,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYG,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAd,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ButtonProps } from '../../components/button.js';
|
|
2
|
+
import type { Theme } from '../../types/props.js';
|
|
2
3
|
export interface HeroBannerProps {
|
|
3
4
|
/** 主标题 */
|
|
4
5
|
title: string;
|
|
@@ -17,7 +18,7 @@ export interface HeroBannerProps {
|
|
|
17
18
|
/** 自定义类名 */
|
|
18
19
|
className?: string;
|
|
19
20
|
/** 主题 */
|
|
20
|
-
theme?:
|
|
21
|
+
theme?: Theme;
|
|
21
22
|
/** 底部产品列表 */
|
|
22
23
|
products?: Array<{
|
|
23
24
|
title: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(r,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!m.call(r,e)&&e!==s&&n(r,e,{get:()=>t[e],enumerable:!(o=i(t,e))||o.enumerable});return r};var c=r=>a(n({},"__esModule",{value:!0}),r);var u={};module.exports=c(u);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\n\nexport interface HeroBannerProps {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247URL */\n background: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?:
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247URL */\n background: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n products?: Array<{\n title: string\n active?: boolean\n }>\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var x=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var c=(p,e)=>{for(var o in e)x(p,o,{get:e[o],enumerable:!0})},y=(p,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of k(e))!u.call(p,a)&&a!==o&&x(p,a,{get:()=>e[a],enumerable:!(l=b(e,a))||l.enumerable});return p};var f=p=>y(x({},"__esModule",{value:!0}),p);var h={};c(h,{default:()=>v});module.exports=f(h);var t=require("react/jsx-runtime"),q=require("react"),s=require("../../components/index.js"),r=require("../../shared/Styles.js");const w=({title:p,description:e,backgroundImage:o,primaryButton:l,secondaryButton:a,shape:d="square",theme:n="light",className:i=""})=>{const m=()=>{},g=()=>{};return(0,t.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
|
+
${n==="dark"?"aiui-dark":""}
|
|
2
3
|
relative w-full overflow-hidden bg-[#242426]
|
|
3
|
-
${
|
|
4
|
+
${d==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
|
|
4
5
|
${i}
|
|
5
6
|
`,children:[(0,t.jsx)("div",{className:"absolute inset-0 size-full",style:{backgroundImage:`
|
|
6
7
|
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
@@ -26,15 +27,15 @@
|
|
|
26
27
|
lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
27
28
|
max-w-[260px]
|
|
28
29
|
text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
|
|
29
|
-
`,children:e})]}),(0,t.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,t.jsx)(s.Button,{
|
|
30
|
+
`,children:e})]}),(0,t.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,t.jsx)(s.Button,{variant:"primary",onClick:m,className:`
|
|
30
31
|
member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
|
|
31
32
|
laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
|
|
32
33
|
py-2 text-xs text-white hover:bg-white hover:text-black
|
|
33
|
-
${
|
|
34
|
-
`,children:l.text}),(0,t.jsx)(s.Button,{
|
|
34
|
+
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
35
|
+
`,children:l.text}),(0,t.jsx)(s.Button,{variant:"secondary",onClick:g,className:`
|
|
35
36
|
member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
|
|
36
37
|
laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
|
|
37
38
|
desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
|
|
38
|
-
${
|
|
39
|
-
`,children:a.text})]})]})})]})};var v=(0,
|
|
39
|
+
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
40
|
+
`,children:a.text})]})]})})]})};var v=(0,r.withStyles)(w);
|
|
40
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title,\n description,\n backgroundImage,\n primaryButton,\n secondaryButton,\n shape = 'square',\n theme = 'light',\n className = '',\n}) => {\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n relative w-full overflow-hidden bg-[#242426]\n ${shape === '
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title,\n description,\n backgroundImage,\n primaryButton,\n secondaryButton,\n shape = 'square',\n theme = 'light',\n className = '',\n}) => {\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <div\n className=\"absolute inset-0 size-full\"\n style={{\n backgroundImage: `\n radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n url(${backgroundImage})\n `,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div\n className={`\n xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n relative \n mx-auto\n flex\n aspect-[343/200]\n w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <h2\n className={`\n member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl\n lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n max-w-[280px]\n text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white\n `}\n >\n {title}\n </h2>\n <p\n className={`\n member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg\n lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n max-w-[260px]\n text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white\n `}\n >\n {description}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]\n laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4\n py-2 text-xs text-white hover:bg-white hover:text-black\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5\n laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]\n desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs\n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCM,IAAAI,EAAA,6BAjCNC,EAAkB,iBAClBC,EAAuB,qCACvBC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CACjD,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,SACR,MAAAC,EAAQ,QACR,UAAAC,EAAY,EACd,IAAM,CACJ,MAAMC,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPH,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCD,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGE,CAAS;AAAA,QAGb,oBAAC,OACC,UAAU,6BACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETL,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,MACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAF,EACH,KACA,OAAC,KACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAC,EACH,GACF,KAGA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,UACR,QAASO,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPH,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAc,KACjB,KACA,OAAC,UACC,QAAQ,YACR,QAASM,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPJ,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAD,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOX,KAAQ,cAAWM,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "shape", "theme", "className", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentCommonProps } from '../../types/props.js';
|
|
1
|
+
import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
|
|
2
2
|
export interface MemberEquityProps extends ComponentCommonProps {
|
|
3
3
|
/** 标题 */
|
|
4
4
|
title: string;
|
|
@@ -17,9 +17,9 @@ export interface MemberEquityProps extends ComponentCommonProps {
|
|
|
17
17
|
href: string;
|
|
18
18
|
};
|
|
19
19
|
/** 形状 */
|
|
20
|
-
shape?:
|
|
20
|
+
shape?: Shape;
|
|
21
21
|
/** 主题 */
|
|
22
|
-
theme?:
|
|
22
|
+
theme?: Theme;
|
|
23
23
|
/** 自定义类名 */
|
|
24
24
|
className?: string;
|
|
25
25
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var o=Object.defineProperty;var
|
|
1
|
+
"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of i(e))!m.call(t,r)&&r!==s&&o(t,r,{get:()=>e[r],enumerable:!(n=p(e,r))||n.enumerable});return t};var g=t=>a(o({},"__esModule",{value:!0}),t);var h={};module.exports=g(h);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n backgroundImage: string\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?:
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n backgroundImage: string\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?: Shape\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var y=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},x=(t,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of D(o))!w.call(t,r)&&r!==a&&d(t,r,{get:()=>o[r],enumerable:!(l=h(o,r))||l.enumerable});return t};var m=(t,o,a)=>(a=t!=null?y(N(t)):{},x(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>x(d({},"__esModule",{value:!0}),t);var I={};B(I,{default:()=>S});module.exports=F(I);var e=require("react/jsx-runtime"),E=require("react"),p=require("../../helpers/utils.js"),c=m(require("../../components/picture.js")),i=m(require("../../components/button.js"));const C=({className:t="",shape:o="square",itemShape:a="square",products:l=[],primaryButton:r,secondaryButton:u,event:n})=>{const f=s=>{n?.primaryButton?.onClick?.(s)},k=s=>{n?.secondaryButton?.onClick(s)};return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,p.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,p.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,p.cn)("w-full
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
${o==="round"?"rounded-[20px]
|
|
1
|
+
"use strict";var y=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},x=(t,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of D(o))!w.call(t,r)&&r!==a&&d(t,r,{get:()=>o[r],enumerable:!(l=h(o,r))||l.enumerable});return t};var m=(t,o,a)=>(a=t!=null?y(N(t)):{},x(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>x(d({},"__esModule",{value:!0}),t);var I={};B(I,{default:()=>S});module.exports=F(I);var e=require("react/jsx-runtime"),E=require("react"),p=require("../../helpers/utils.js"),c=m(require("../../components/picture.js")),i=m(require("../../components/button.js"));const C=({className:t="",shape:o="square",itemShape:a="square",products:l=[],primaryButton:r,secondaryButton:u,event:n})=>{const f=s=>{n?.primaryButton?.onClick?.(s)},k=s=>{n?.secondaryButton?.onClick(s)};return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,p.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,p.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,p.cn)("flex w-full","laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden"),children:l?.map((s,b)=>(0,e.jsxs)("div",{className:(0,p.cn)("flex min-w-[288px] max-w-[288px] flex-col bg-[#EAEAEC] p-4","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",a==="round"?"rounded-2xl":"rounded-none"),children:[(0,e.jsx)("div",{className:(0,p.cn)("relative mb-2 inline-block h-[137px] overflow-hidden","desktop:mb-3 desktop:h-[195px]"),children:(0,e.jsx)(c.default,{source:s?.img||"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,e.jsx)("div",{className:"desktop:mb-2 mb-1 flex flex-wrap gap-1",children:s?.tagItems?.map((v,g)=>(0,e.jsx)("div",{className:"desktop:text-base rounded-3xl border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold text-[#00BEFA]",children:v},g))}),(0,e.jsx)("p",{className:"desktop:text-2xl flex-1 text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:s?.title||""}),(0,e.jsx)("h3",{className:"desktop:mt-2 desktop:mb-6 desktop:text-lg mb-5 mt-1 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:s?.subTitle||""}),(0,e.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,e.jsx)("div",{className:"desktop:text-2xl text-xl font-bold text-[#1D1D1F]",children:s?.price||""}),(0,e.jsx)("div",{className:"desktop:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:s?.basePrice||""})]}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(i.default,{variant:"primary",onClick:()=>f(s),className:`
|
|
2
|
+
laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
3
|
+
border-[#1D1D1F] bg-transparent px-4 py-2 text-xs tracking-[-0.04em] text-[#1D1D1F] hover:bg-transparent hover:text-black
|
|
4
|
+
${o==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
5
5
|
`,children:r||""}),(0,e.jsx)(i.default,{variant:"secondary",onClick:()=>k(s),className:`
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
${o==="round"?"rounded-[20px]
|
|
6
|
+
laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
7
|
+
border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
|
|
8
|
+
${o==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
9
9
|
`,children:u||""})]})]},b))})})})})};var S=C;
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nexport interface ShelfDisplayItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price: string\n title: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice: string\n subTitle: string\n /** \u6807\u7B7E*/\n tagItems: string[]\n}\n\nexport interface ShelfDisplayProps {\n products: ShelfDisplayItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nexport interface ShelfDisplayItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price: string\n title: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice: string\n subTitle: string\n /** \u6807\u7B7E*/\n tagItems: string[]\n}\n\nexport interface ShelfDisplayProps {\n products: ShelfDisplayItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n secondaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({\n className = '',\n shape = 'square',\n itemShape = 'square',\n products = [],\n primaryButton,\n secondaryButton,\n event,\n}) => {\n const onPrimaryButton = (params: ShelfDisplayItem) => {\n event?.primaryButton?.onClick?.(params)\n }\n\n const onSecondaryButton = (params: ShelfDisplayItem) => {\n event?.secondaryButton?.onClick(params)\n }\n\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden')}>\n <div className={cn('flex w-full', 'laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden')}>\n {products?.map((item, index) => {\n return (\n <div\n key={index}\n className={cn(\n 'flex min-w-[288px] max-w-[288px] flex-col bg-[#EAEAEC] p-4',\n 'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div\n className={cn(\n 'relative mb-2 inline-block h-[137px] overflow-hidden',\n 'desktop:mb-3 desktop:h-[195px]'\n )}\n >\n <Picture\n source={item?.img || ''}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </div>\n <div className=\"desktop:mb-2 mb-1 flex flex-wrap gap-1\">\n {item?.tagItems?.map((tag, index) => {\n return (\n <div\n key={index}\n className=\"desktop:text-base rounded-3xl border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold text-[#00BEFA]\"\n >\n {tag}\n </div>\n )\n })}\n </div>\n <p className=\"desktop:text-2xl flex-1 text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item?.title || ''}\n </p>\n <h3 className=\"desktop:mt-2 desktop:mb-6 desktop:text-lg mb-5 mt-1 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item?.subTitle || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"desktop:text-2xl text-xl font-bold text-[#1D1D1F]\">{item?.price || ''}</div>\n <div className=\"desktop:text-2xl ml-1 text-xl font-bold text-[#86868C]\">\n {item?.basePrice || ''}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-3\">\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(item)}\n className={`\n laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n border-[#1D1D1F] bg-transparent px-4 py-2 text-xs tracking-[-0.04em] text-[#1D1D1F] hover:bg-transparent hover:text-black\n ${shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n `}\n >\n {primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(item)}\n className={`\n laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n ${shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n `}\n >\n {secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default ShelfDisplay\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2DI,IAAAI,EAAA,6BA3DJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCAsCnB,MAAMC,EAA4C,CAAC,CACjD,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,SAAAC,EAAW,CAAC,EACZ,cAAAC,EACA,gBAAAC,EACA,MAAAC,CACF,IAAM,CACJ,MAAMC,EAAmBC,GAA6B,CACpDF,GAAO,eAAe,UAAUE,CAAM,CACxC,EAEMC,EAAqBD,GAA6B,CACtDF,GAAO,iBAAiB,QAAQE,CAAM,CACxC,EAEA,SACE,mBACE,mBAAC,OAAI,aAAW,MAAG,SAAUR,CAAS,EACpC,mBAAC,OAAI,aAAW,MAAG,sBAAsB,EACvC,mBAAC,OAAI,aAAW,MAAG,cAAe,sDAAsD,EACrF,SAAAG,GAAU,IAAI,CAACO,EAAMC,OAElB,QAAC,OAEC,aAAW,MACT,6DACA,+HACAT,IAAc,QAAU,cAAgB,cAC1C,EAEA,oBAAC,OACC,aAAW,MACT,uDACA,gCACF,EAEA,mBAAC,EAAAU,QAAA,CACC,OAAQF,GAAM,KAAO,GACrB,UAAU,yDACZ,EACF,KACA,OAAC,OAAI,UAAU,yCACZ,SAAAA,GAAM,UAAU,IAAI,CAACG,EAAKF,OAEvB,OAAC,OAEC,UAAU,qGAET,SAAAE,GAHIF,CAIP,CAEH,EACH,KACA,OAAC,KAAE,UAAU,4FACV,SAAAD,GAAM,OAAS,GAClB,KACA,OAAC,MAAG,UAAU,4HACX,SAAAA,GAAM,UAAY,GACrB,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,OAAI,UAAU,oDAAqD,SAAAA,GAAM,OAAS,GAAG,KACtF,OAAC,OAAI,UAAU,yDACZ,SAAAA,GAAM,WAAa,GACtB,GACF,KAEA,QAAC,OAAI,UAAU,0BACb,oBAAC,EAAAI,QAAA,CACC,QAAQ,UACR,QAAS,IAAMP,EAAgBG,CAAI,EACnC,UAAW;AAAA;AAAA;AAAA,0BAGPT,IAAU,QAAU,qCAAuC,EAAE;AAAA,wBAGhE,SAAAG,GAAiB,GACpB,KACA,OAAC,EAAAU,QAAA,CACC,QAAQ,YACR,QAAS,IAAML,EAAkBC,CAAI,EACrC,UAAW;AAAA;AAAA;AAAA,0BAGPT,IAAU,QAAU,qCAAuC,EAAE;AAAA,wBAGhE,SAAAI,GAAmB,GACtB,GACF,IAlEKM,CAmEP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOnB,EAAQO",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_button", "ShelfDisplay", "className", "shape", "itemShape", "products", "primaryButton", "secondaryButton", "event", "onPrimaryButton", "params", "onSecondaryButton", "item", "index", "Picture", "tag", "Button"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { TabsProps } from './types.js';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
(props: Omit<TabsProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
5
|
+
className?: string;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var v=Object.create;var b=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var k=(a,e)=>{for(var s in e)b(a,s,{get:e[s],enumerable:!0})},l=(a,e,s,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of P(e))!h.call(a,i)&&i!==s&&b(a,i,{get:()=>e[i],enumerable:!(m=y(e,i))||m.enumerable});return a};var T=(a,e,s)=>(s=a!=null?v(d(a)):{},l(e||!a||!a.__esModule?b(s,"default",{value:a,enumerable:!0}):s,a)),C=a=>l(b({},"__esModule",{value:!0}),a);var S={};k(S,{default:()=>L});module.exports=C(S);var r=require("react/jsx-runtime"),p=require("../../shared/Styles.js"),o=T(require("../../components/tabs.js")),f=require("../../helpers/index.js"),c=T(require("react")),N=T(require("../ShelfDisplay/index.js"));const D=c.default.forwardRef((a,e)=>{const{theme:s,shape:m,align:i,tabs:n,className:u}=a,g=t=>{if(t.blockType==="ShelfDisplay")return(0,r.jsx)(N.default,{...t})};return(0,r.jsx)("section",{ref:e,className:(0,f.cn)(s==="dark"?"aiui-dark":"",u),children:(0,r.jsxs)(o.Tabs,{shape:m,align:i,defaultValue:n[0].tabName,children:[(0,r.jsx)(o.TabsList,{className:"tabs-list",children:n.map(t=>(0,r.jsx)(o.TabsTrigger,{value:t.tabName,className:"tabs-trigger",children:t.tabName},t.tabName))}),n.map(t=>(0,r.jsx)(o.TabsContent,{value:t.tabName,className:"tabs-content",children:g(t.tabContent?.[0])},t.tabName))]})})});var L=(0,p.withStyles)(D);
|
|
2
|
+
//# sourceMappingURL=Tabs.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
|
|
4
|
+
"sourcesContent": ["import { withStyles } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, forwardedRef) => {\n const { theme, shape, align, tabs, className } = props\n\n const renderTabContent = (tabContent: TabsProps['tabs'][number]['tabContent'][number]) => {\n if (tabContent.blockType === 'ShelfDisplay') {\n return <ShelfDisplay {...tabContent} />\n }\n }\n\n return (\n <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n <TabsPrimitive.TabsList className=\"tabs-list\">\n {tabs.map(tab => (\n <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n {tab.tabName}\n </TabsPrimitive.TabsTrigger>\n ))}\n </TabsPrimitive.TabsList>\n {tabs.map(tab => (\n <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n {renderTabContent(tab.tabContent?.[0])}\n </TabsPrimitive.TabsContent>\n ))}\n </TabsPrimitive.Tabs>\n </section>\n )\n})\n\nexport default withStyles(Tabs)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYa,IAAAI,EAAA,6BAZbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmB,kCAEnBC,EAAkB,oBAClBC,EAAyB,uCAEzB,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAACC,EAAOC,IAAiB,CAChF,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,UAAAC,CAAU,EAAIN,EAE3CO,EAAoBC,GAAgE,CACxF,GAAIA,EAAW,YAAc,eAC3B,SAAO,OAAC,EAAAC,QAAA,CAAc,GAAGD,EAAY,CAEzC,EAEA,SACE,OAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAII,CAAS,EACtF,oBAACZ,EAAc,KAAd,CAAmB,MAAOS,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,oBAACX,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAW,EAAK,IAAIK,MACR,OAAChB,EAAc,YAAd,CAA4C,MAAOgB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCL,EAAK,IAAIK,MACR,OAAChB,EAAc,YAAd,CAA4C,MAAOgB,EAAI,QAAS,UAAU,eACxE,SAAAH,EAAiBG,EAAI,aAAa,CAAC,CAAC,GADPA,EAAI,OAEpC,CACD,GACH,EACF,CAEJ,CAAC,EAED,IAAOpB,KAAQ,cAAWQ,CAAI",
|
|
6
|
+
"names": ["Tabs_exports", "__export", "Tabs_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "import_ShelfDisplay", "Tabs", "React", "props", "forwardedRef", "theme", "shape", "align", "tabs", "className", "renderTabContent", "tabContent", "ShelfDisplay", "tab"]
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Tabs.js';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var m=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var c=(e,f)=>{for(var o in f)t(e,o,{get:f[o],enumerable:!0})},d=(e,f,o,a)=>{if(f&&typeof f=="object"||typeof f=="function")for(let r of u(f))!b.call(e,r)&&r!==o&&t(e,r,{get:()=>f[r],enumerable:!(a=p(f,r))||a.enumerable});return e};var g=(e,f,o)=>(o=e!=null?m(x(e)):{},d(f||!e||!e.__esModule?t(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>d(t({},"__esModule",{value:!0}),e);var i={};c(i,{default:()=>l.default});module.exports=h(i);var l=g(require("./Tabs.js"));
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Tabs/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './Tabs.js'"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
|
|
6
|
+
"names": ["Tabs_exports", "__export", "__toCommonJS", "import_Tabs"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Align, Shape, Theme } from '../../types/props.js';
|
|
2
|
+
import type { ShelfDisplayProps } from '../ShelfDisplay/index.js';
|
|
3
|
+
export type TabsProps = {
|
|
4
|
+
theme: Theme;
|
|
5
|
+
shape: Shape;
|
|
6
|
+
align: Align;
|
|
7
|
+
className?: string;
|
|
8
|
+
tabs: {
|
|
9
|
+
tabName: string;
|
|
10
|
+
tabContent: (ShelfDisplayProps & {
|
|
11
|
+
blockType: 'ShelfDisplay';
|
|
12
|
+
})[];
|
|
13
|
+
}[];
|
|
14
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var h=(p,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of o(e))!r.call(p,s)&&s!==l&&t(p,s,{get:()=>e[s],enumerable:!(a=i(e,s))||a.enumerable});return p};var m=p=>h(t({},"__esModule",{value:!0}),p);var y={};module.exports=m(y);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Tabs/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/index.js'\n\nexport type TabsProps = {\n theme: Theme\n shape: Shape\n align: Align\n className?: string\n tabs: {\n tabName: string\n tabContent: (ShelfDisplayProps & { blockType: 'ShelfDisplay' })[]\n }[]\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var c=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},f=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!l.call(e,a)&&a!==r&&n(e,a,{get:()=>t[a],enumerable:!(o=d(t,a))||o.enumerable});return e};var g=e=>f(n({},"__esModule",{value:!0}),e);var y={};c(y,{default:()=>u});module.exports=g(y);var s=require("react/jsx-runtime"),v=require("react"),i=require("class-variance-authority"),p=require("../helpers/index.js");const b=(0,i.cva)("text-brand-0 border-brand-0 inline-flex items-center justify-center rounded-[16px] border-[1.6px] text-xs font-bold backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] py-[4px] text-[14px] leading-tight",lg:"px-[8px] py-[4px] text-[16px] leading-tight"}},defaultVariants:{size:"lg"}});function m({className:e,size:t,...r}){return(0,s.jsx)("div",{className:(0,p.cn)(b({size:t}),e),...r})}var u=m;
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'inline-flex justify-center rounded-[16px]
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 border-brand-0 inline-flex items-center justify-center rounded-[16px] border-[1.6px] text-xs font-bold backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] py-[4px] text-[14px] leading-tight',\n lg: 'px-[8px] py-[4px] text-[16px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,4KACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,8CACJ,GAAI,6CACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOV,EAAQO",
|
|
6
6
|
"names": ["badge_exports", "__export", "badge_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "badgeVariants", "Badge", "className", "size", "props"]
|
|
7
7
|
}
|
|
@@ -8,7 +8,6 @@ declare const buttonVariants: (props?: ({
|
|
|
8
8
|
size?: "sm" | "base" | "lg" | "icon" | null | undefined;
|
|
9
9
|
hoverEffect?: "none" | "slide" | null | undefined;
|
|
10
10
|
state?: "default" | "disabled" | "loading" | null | undefined;
|
|
11
|
-
theme?: "dark" | "light" | null | undefined;
|
|
12
11
|
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
13
12
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
14
13
|
/** 设置按钮载入状态 */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var V=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var w=(e,r)=>{for(var t in r)i(e,t,{get:r[t],enumerable:!0})},f=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of B(r))!E.call(e,o)&&o!==t&&i(e,o,{get:()=>r[o],enumerable:!(n=k(r,o))||n.enumerable});return e};var p=(e,r,t)=>(t=e!=null?V(z(e)):{},f(r||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),H=e=>f(i({},"__esModule",{value:!0}),e);var L={};w(L,{default:()=>C});module.exports=H(L);var a=require("react/jsx-runtime"),N=p(require("react")),u=require("@radix-ui/react-slot"),y=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),m=p(require("../icons/spinner.js")),v=require("../helpers/index.js");const P=(0,d.cva)("ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active",secondary:"bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid",link:"text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline",ghost:"hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),R=(0,d.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),c=N.forwardRef(({asChild:e=!1,size:r="base",children:t,variant:n,hoverEffect:o="none",className:g,disabled:b=!1,loading:s=!1,spinner:l,...x},h)=>(0,a.jsx)(e?u.Slot:"button",{disabled:b||s,className:(0,v.cn)(P({variant:n,size:r,hoverEffect:o,state:s?"loading":b?"disabled":"default"}),g),ref:h,...x,children:s?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:t}),(0,a.jsx)("span",{className:"absolute",children:l||(0,a.jsx)(m.default,{className:R({variant:n})})}),(0,a.jsx)(y.VisuallyHidden,{children:t})]}):t}));c.displayName="Button";var C=c;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n 'ring-offset-background
|
|
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", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "
|
|
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 */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\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: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class: 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class: 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\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: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: '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\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=\"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,GAmJU,IAAAI,EAAA,6BAjJVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAMnB,MAAMC,KAAiB,OACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,6HACF,UACE,gJACF,KAAM,iGACN,MAAO,wDACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,uBACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MAAO,qGACT,EACA,CACE,QAAS,UACT,MAAO,WACP,MAAO,gFACT,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAeKC,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EAEA,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,WACb,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
|
+
"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,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
3
|
+
import type { Align, Shape } from '../types/props.js';
|
|
3
4
|
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
4
|
-
|
|
5
|
+
align?: Align;
|
|
6
|
+
shape?: Shape;
|
|
5
7
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
6
8
|
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|