@anker-in/headless-ui 0.0.27-alpha.21 → 0.0.27-alpha.23
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/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/types.d.ts +10 -12
- package/dist/cjs/biz-components/Slogan/types.js +1 -1
- package/dist/cjs/biz-components/Slogan/types.js.map +1 -1
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/cjs/stories/slogan.stories.js +1 -1
- package/dist/cjs/stories/slogan.stories.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +3 -3
- package/dist/esm/biz-components/Slogan/types.d.ts +10 -12
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +2 -2
- package/dist/esm/stories/slogan.stories.js +2 -2
- package/dist/esm/stories/slogan.stories.js.map +2 -2
- package/dist/tokens/anker.css +1 -7
- package/dist/tokens/eufy.css +1 -2
- package/dist/tokens/eufyMake.css +1 -1
- package/dist/tokens/solix.css +1 -1
- package/dist/tokens/soundcore.css +1 -2
- package/package.json +1 -1
- package/style.css +1 -1
- package/tailwind.config.ts +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var c=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},n=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of w(e))!v.call(t,p)&&p!==l&&s(t,p,{get:()=>e[p],enumerable:!(o=y(e,p))||o.enumerable});return t};var k=(t,e,l)=>(l=t!=null?c(u(t)):{},n(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),N=t=>n(s({},"__esModule",{value:!0}),t);var h={};D(h,{default:()=>b});module.exports=N(h);var a=require("react/jsx-runtime"),x=k(require("react")),f=require("../../helpers/utils.js"),i=require("../../components/index.js"),d=require("../../shared/Styles.js");const r=x.default.forwardRef(({data:t,className:e},l)=>{const{title:o,features:p}=t;return(0,a.jsxs)("div",{ref:l,className:(0,f.cn)("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",e),children:[(0,a.jsx)(i.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:o}),p&&p.length>0&&(0,a.jsx)("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:p.slice(0,3).map((g,m)=>(0,a.jsxs)(x.default.Fragment,{children:[m>0&&(0,a.jsx)("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(i.Text,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:g.title})})]},m))})]})});r.displayName="Slogan";var b=(0,d.withStyles)(r);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAlBNC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,SACE,QAAC,OACC,IAAKE,EACL,aAAW,MACT,sHACA,8DACA,sEACAD,CACF,EAEA,oBAAC,WACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAE,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,wDACZ,SAAAA,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,OAClC,QAAC,EAAAP,QAAM,SAAN,CACE,UAAAO,EAAQ,MAAK,OAAC,OAAI,UAAU,iCAAiC,KAC9D,OAAC,OAAI,UAAU,SACb,mBAAC,QACC,MAAM,OACN,UAAU,kJACV,KAAMD,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDR,EAAO,YAAc,SAErB,IAAOP,KAAQ,cAAWO,CAAM",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "data", "className", "ref", "title", "features", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var o=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!l.call(t,r)&&r!==s&&i(t,r,{get:()=>e[r],enumerable:!(a=n(e,r))||a.enumerable});return t};var c=t=>o(i({},"__esModule",{value:!0}),t);var f={};module.exports=c(f);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/types.ts"],
|
|
4
|
-
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n
|
|
4
|
+
"sourcesContent": ["export interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface SloganProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var s in e)a(t,s,{get:e[s],enumerable:!0})},g=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!P.call(t,r)&&r!==s&&a(t,r,{get:()=>e[r],enumerable:!(n=d(e,r))||n.enumerable});return t};var f=t=>g(a({},"__esModule",{value:!0}),t);var $={};p($,{getStylesProps:()=>c,useStyles:()=>y,withStyles:()=>N});module.exports=f($);var o=require("react/jsx-runtime"),l=require("react");const i=()=>`style_${Math.random().toString(36).substring(2,9)}_${Date.now().toString(36)}`,c=t=>{const{style:e,uid:s,disabled:n}=t;return{style:e,uid:s,disabled:n}},b=({style:t,uid:e=i(),disabled:s=!1})=>!t||s?null:(0,o.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),y=t=>{const e=(0,l.useMemo)(()=>t?.uid||i(),[t?.uid]),s=(0,l.useMemo)(()=>(0,o.jsx)(b,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}};function N(t,e){const s=function(n){const r={...e,...c(n)},{className:u,StyleComponent:S}=y(r);return(0,o.jsxs)(o.Fragment,{children:[S,(0,o.jsx)(t,{...n,className:`${u} ${n.className}`})]})};return s.displayName=t.displayName||t.name||"Component",s}
|
|
2
2
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u751F\u6210\u552F\u4E00\u6807\u8BC6\u7B26\n */\nconst generateUID = () => {\n return `style_${Math.random().toString(36).substring(2, 9)}_${Date.now().toString(36)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID(), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID(), [styleProps?.uid])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\n/**\n * \u6837\u5F0F\u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultStyleProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withStyles<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultStyleProps?: Partial<StylesProps>\n) {\n const WithStyles = function (props: Omit<P, keyof StylesProps> & Partial<StylesProps> & { className?: string }) {\n const finalStyleProps = {\n ...defaultStyleProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps)\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent {...(props as P)} className={`${className} ${props.className}`} />\n </>\n )\n }\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n WithStyles.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return WithStyles\n}\n\n\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,GAkCS,IAAAM,EAAA,6BAlCTC,EAA+B,iBAc/B,MAAMC,EAAc,IACX,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,GAM1EN,EAAqDO,GAAwC,CACxG,KAAM,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIH,EACjC,MAAO,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAMH,EAAY,EAAG,SAAAI,EAAW,EAAM,IAChF,CAACF,GAASE,EACL,QAGF,OAAC,SAAM,gBAAeD,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u751F\u6210\u552F\u4E00\u6807\u8BC6\u7B26\n */\nconst generateUID = () => {\n return `style_${Math.random().toString(36).substring(2, 9)}_${Date.now().toString(36)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID(), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID(), [styleProps?.uid])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\n/**\n * \u6837\u5F0F\u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultStyleProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withStyles<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultStyleProps?: Partial<StylesProps>\n) {\n const WithStyles = function (props: Omit<P, keyof StylesProps> & Partial<StylesProps> & { className?: string }) {\n const finalStyleProps = {\n ...defaultStyleProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps)\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent {...(props as P)} className={`${className} ${props.className}`} />\n </>\n )\n }\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n WithStyles.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return WithStyles\n}\n\n\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,GAkCS,IAAAM,EAAA,6BAlCTC,EAA+B,iBAc/B,MAAMC,EAAc,IACX,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,GAM1EN,EAAqDO,GAAwC,CACxG,KAAM,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIH,EACjC,MAAO,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAMH,EAAY,EAAG,SAAAI,EAAW,EAAM,IAChF,CAACF,GAASE,EACL,QAGF,OAAC,SAAM,yBAAwB,GAAC,gBAAeD,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EP,EAAaW,GAAqC,CAC7D,MAAMH,KAAM,WAAQ,IAAMG,GAAY,KAAON,EAAY,EAAG,CAACM,GAAY,GAAG,CAAC,EAEvEC,KAAiB,WAAQ,OAAM,OAACF,EAAA,CAAQ,GAAGC,EAAY,IAAKH,EAAK,EAAI,CAACG,EAAYH,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAI,EACA,IAAAJ,CACF,CACF,EAOO,SAASP,EACdY,EACAC,EACA,CACA,MAAMC,EAAa,SAAUT,EAAmF,CAC9G,MAAMU,EAAkB,CACtB,GAAGF,EACH,GAAGf,EAAeO,CAAK,CACzB,EAEM,CAAE,UAAAW,EAAW,eAAAL,CAAe,EAAIZ,EAAUgB,CAAe,EAE/D,SACE,oBACG,UAAAJ,KACD,OAACC,EAAA,CAAkB,GAAIP,EAAa,UAAW,GAAGW,CAAS,IAAIX,EAAM,SAAS,GAAI,GACpF,CAEJ,EAGA,OAAAS,EAAW,YAAcF,EAAiB,aAAeA,EAAiB,MAAQ,YAC3EE,CACT",
|
|
6
6
|
"names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withStyles", "__toCommonJS", "import_jsx_runtime", "import_react", "generateUID", "props", "style", "uid", "disabled", "Styles", "styleProps", "StyleComponent", "WrappedComponent", "defaultStyleProps", "WithStyles", "finalStyleProps", "className"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var a=Object.defineProperty;var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var f=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},b=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of g(e))!d.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(i=s(e,o))||i.enumerable});return t};var p=t=>b(a({},"__esModule",{value:!0}),t);var x={};f(x,{CustomClassName:()=>S,CustomStyle:()=>M,Default:()=>c,SingleFeature:()=>h,TitleOnly:()=>u,TwoFeatures:()=>C,default:()=>m});module.exports=p(x);var n=require("react/jsx-runtime"),N=require("react"),l=require("../biz-components/index.js");const y={title:"Biz Components/Slogan",component:l.Slogan,parameters:{layout:"fullscreen"},tags:["autodocs"]};var m=y;const c={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},u={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},h={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},C={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},S={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},M=()=>(0,n.jsx)(l.Slogan,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GA+FI,IAAAU,EAAA,6BA/FJC,EAAkB,iBAElBC,EAAuB,sCAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,SACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaD,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaL,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,OAEvB,OAAC,UACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["slogan_stories_exports", "__export", "CustomClassName", "CustomStyle", "Default", "SingleFeature", "TitleOnly", "TwoFeatures", "slogan_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_biz_components", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as f,Text as d}from"../../components/index.js";import{withStyles as g}from"../../shared/Styles.js";const a=p.forwardRef(({data:s,className:i},x)=>{const{title:m,features:e}=s;return o("div",{ref:x,className:r("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",i),children:[t(f,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:m}),e&&e.length>0&&t("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:e.slice(0,3).map((n,l)=>o(p.Fragment,{children:[l>0&&t("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),t("div",{className:"flex-1",children:t(d,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:n.title})})]},l))})]})});a.displayName="Slogan";var v=g(a);export{v as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className }, ref) => {\n const { title, features } = data\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center',\n 'tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4',\n 'tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8',\n className\n )}\n >\n <Heading\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className=\"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]\"\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"flex w-full max-w-[423px] flex-row items-center gap-3\">\n {features.slice(0, 3).map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"w-px self-stretch bg-[#D9D9D9]\" />}\n <div className=\"flex-1\">\n <Text\n align=\"left\"\n className=\"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "aAmBM,cAAAA,EAYM,QAAAC,MAZN,oBAlBN,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAASL,EAAM,WAAwC,CAAC,CAAE,KAAAM,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAAIJ,EAC5B,OACEP,EAAC,OACC,IAAKS,EACL,UAAWP,EACT,sHACA,8DACA,sEACAM,CACF,EAEA,UAAAT,EAACI,EAAA,CACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAO,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BZ,EAAC,OAAI,UAAU,wDACZ,SAAAY,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACC,EAASC,IAClCb,EAACC,EAAM,SAAN,CACE,UAAAY,EAAQ,GAAKd,EAAC,OAAI,UAAU,iCAAiC,EAC9DA,EAAC,OAAI,UAAU,SACb,SAAAA,EAACK,EAAA,CACC,MAAM,OACN,UAAU,kJACV,KAAMQ,EAAQ,MAChB,EACF,IARmBC,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDP,EAAO,YAAc,SAErB,IAAOQ,EAAQT,EAAWC,CAAM",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "withStyles", "Slogan", "data", "className", "ref", "title", "features", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -3,20 +3,18 @@ export interface Feature {
|
|
|
3
3
|
* 特性标题
|
|
4
4
|
*/
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
* 特性描述
|
|
8
|
-
*/
|
|
9
|
-
description: string;
|
|
10
6
|
}
|
|
11
7
|
export interface SloganProps {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
data: {
|
|
9
|
+
/**
|
|
10
|
+
* 主标题
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* 特性列表，最多支持3个
|
|
15
|
+
*/
|
|
16
|
+
features?: Feature[];
|
|
17
|
+
};
|
|
20
18
|
/**
|
|
21
19
|
* 自定义类名
|
|
22
20
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as d,jsx as o,jsxs as m}from"react/jsx-runtime";import{useMemo as
|
|
1
|
+
import{Fragment as d,jsx as o,jsxs as m}from"react/jsx-runtime";import{useMemo as r}from"react";const a=()=>`style_${Math.random().toString(36).substring(2,9)}_${Date.now().toString(36)}`,y=t=>{const{style:e,uid:s,disabled:n}=t;return{style:e,uid:s,disabled:n}},u=({style:t,uid:e=a(),disabled:s=!1})=>!t||s?null:o("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),S=t=>{const e=r(()=>t?.uid||a(),[t?.uid]),s=r(()=>o(u,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}};function g(t,e){const s=function(n){const l={...e,...y(n)},{className:i,StyleComponent:c}=S(l);return m(d,{children:[c,o(t,{...n,className:`${i} ${n.className}`})]})};return s.displayName=t.displayName||t.name||"Component",s}export{y as getStylesProps,S as useStyles,g as withStyles};
|
|
2
2
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/shared/Styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react'\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u751F\u6210\u552F\u4E00\u6807\u8BC6\u7B26\n */\nconst generateUID = () => {\n return `style_${Math.random().toString(36).substring(2, 9)}_${Date.now().toString(36)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID(), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID(), [styleProps?.uid])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\n/**\n * \u6837\u5F0F\u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultStyleProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withStyles<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultStyleProps?: Partial<StylesProps>\n) {\n const WithStyles = function (props: Omit<P, keyof StylesProps> & Partial<StylesProps> & { className?: string }) {\n const finalStyleProps = {\n ...defaultStyleProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps)\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent {...(props as P)} className={`${className} ${props.className}`} />\n </>\n )\n }\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n WithStyles.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return WithStyles\n}\n\n\n"],
|
|
5
|
-
"mappings": "AAkCS,OAqCH,YAAAA,EArCG,OAAAC,EAqCH,QAAAC,MArCG,oBAlCT,OAAgB,WAAAC,MAAe,QAc/B,MAAMC,EAAc,IACX,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,GAM1EC,EAAqDC,GAAwC,CACxG,KAAM,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIH,EACjC,MAAO,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAMJ,EAAY,EAAG,SAAAK,EAAW,EAAM,IAChF,CAACF,GAASE,EACL,KAGFR,EAAC,SAAM,gBAAeO,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\n\nexport interface StylesProps {\n /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n style?: string\n /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n uid?: string\n /** \u662F\u5426\u7981\u7528 */\n disabled?: boolean\n}\n\n/**\n * \u751F\u6210\u552F\u4E00\u6807\u8BC6\u7B26\n */\nconst generateUID = () => {\n return `style_${Math.random().toString(36).substring(2, 9)}_${Date.now().toString(36)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n const { style, uid, disabled } = props\n return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID(), disabled = false }) => {\n if (!style || disabled) {\n return null\n }\n\n return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>) => {\n const uid = useMemo(() => styleProps?.uid || generateUID(), [styleProps?.uid])\n\n const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n return {\n className: `block-${uid} `,\n StyleComponent,\n uid,\n } as const\n}\n\n/**\n * \u6837\u5F0F\u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultStyleProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withStyles<P extends object>(\n WrappedComponent: React.ComponentType<P>,\n defaultStyleProps?: Partial<StylesProps>\n) {\n const WithStyles = function (props: Omit<P, keyof StylesProps> & Partial<StylesProps> & { className?: string }) {\n const finalStyleProps = {\n ...defaultStyleProps,\n ...getStylesProps(props),\n }\n\n const { className, StyleComponent } = useStyles(finalStyleProps)\n\n return (\n <>\n {StyleComponent}\n <WrappedComponent {...(props as P)} className={`${className} ${props.className}`} />\n </>\n )\n }\n\n // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n WithStyles.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n return WithStyles\n}\n\n\n"],
|
|
5
|
+
"mappings": "AAkCS,OAqCH,YAAAA,EArCG,OAAAC,EAqCH,QAAAC,MArCG,oBAlCT,OAAgB,WAAAC,MAAe,QAc/B,MAAMC,EAAc,IACX,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,GAM1EC,EAAqDC,GAAwC,CACxG,KAAM,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIH,EACjC,MAAO,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAMJ,EAAY,EAAG,SAAAK,EAAW,EAAM,IAChF,CAACF,GAASE,EACL,KAGFR,EAAC,SAAM,yBAAwB,GAAC,gBAAeO,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAaC,GAAqC,CAC7D,MAAMJ,EAAML,EAAQ,IAAMS,GAAY,KAAOR,EAAY,EAAG,CAACQ,GAAY,GAAG,CAAC,EAEvEC,EAAiBV,EAAQ,IAAMF,EAACS,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAK,EACA,IAAAL,CACF,CACF,EAOO,SAASM,EACdC,EACAC,EACA,CACA,MAAMC,EAAa,SAAUX,EAAmF,CAC9G,MAAMY,EAAkB,CACtB,GAAGF,EACH,GAAGX,EAAeC,CAAK,CACzB,EAEM,CAAE,UAAAa,EAAW,eAAAN,CAAe,EAAIF,EAAUO,CAAe,EAE/D,OACEhB,EAAAF,EAAA,CACG,UAAAa,EACDZ,EAACc,EAAA,CAAkB,GAAIT,EAAa,UAAW,GAAGa,CAAS,IAAIb,EAAM,SAAS,GAAI,GACpF,CAEJ,EAGA,OAAAW,EAAW,YAAcF,EAAiB,aAAeA,EAAiB,MAAQ,YAC3EE,CACT",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useMemo", "generateUID", "getStylesProps", "props", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "StyleComponent", "withStyles", "WrappedComponent", "defaultStyleProps", "WithStyles", "finalStyleProps", "className"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{Slogan as e}from"../biz-components/index.js";const t={title:"Biz Components/Slogan",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=t;const n={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]}}},s={args:{data:{title:"The World's No.1 Mobile Charging Brand*"}}},g={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"}]}}},d={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"}]}}},f={args:{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100"}},b=()=>o(e,{data:{title:"The World's No.1 Mobile Charging Brand*",features:[{title:"47%<br/>R&D Employees"},{title:"100 Million<br/>Global Customers"},{title:"Pioneering in Charging<br/>Technology for 12 Years"}]},className:"bg-gray-100",style:`
|
|
2
2
|
|
|
3
3
|
.slogan-title{
|
|
4
4
|
background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
|
|
@@ -22,5 +22,5 @@ import{jsx as r}from"react/jsx-runtime";import"react";import{Slogan as e}from"..
|
|
|
22
22
|
border-radius: 10px;
|
|
23
23
|
animation: fadeIn 1s ease-in forwards;
|
|
24
24
|
}
|
|
25
|
-
`});export{
|
|
25
|
+
`});export{f as CustomClassName,b as CustomStyle,n as Default,g as SingleFeature,s as TitleOnly,d as TwoFeatures,i as default};
|
|
26
26
|
//# sourceMappingURL=slogan.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/slogan.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n title: 'Biz Components/Slogan',\n component: Slogan,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n },\n}\n\nexport const TitleOnly: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n },\n },\n}\n\nexport const SingleFeature: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n ],\n },\n },\n}\n\nexport const TwoFeatures: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n ],\n },\n },\n}\n\nexport const CustomClassName: Story = {\n args: {\n data: {\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n },\n className: 'bg-gray-100',\n },\n}\n\nexport const CustomStyle = () => {\n return (\n <Slogan\n data={{\n title: \"The World's No.1 Mobile Charging Brand*\",\n features: [\n {\n title: '47%<br/>R&D Employees',\n },\n {\n title: '100 Million<br/>Global Customers',\n },\n {\n title: 'Pioneering in Charging<br/>Technology for 12 Years',\n },\n ],\n }}\n className=\"bg-gray-100\"\n style={`\n \n .slogan-title{\n background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: fadeIn 1s ease-in forwards;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .slogan-feature-text {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 10px;\n animation: fadeIn 1s ease-in forwards;\n }\n `}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "AA+FI,cAAAA,MAAA,oBA/FJ,MAAkB,QAElB,OAAS,UAAAC,MAAc,6BAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,yCACT,CACF,CACF,EAEaC,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,CACF,CACF,CACF,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,CACF,CACF,CACF,CACF,EAEaC,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,IAEvBT,EAACC,EAAA,CACC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,CACE,MAAO,uBACT,EACA,CACE,MAAO,kCACT,EACA,CACE,MAAO,oDACT,CACF,CACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
|
|
6
6
|
"names": ["jsx", "Slogan", "meta", "slogan_stories_default", "Default", "TitleOnly", "SingleFeature", "TwoFeatures", "CustomClassName", "CustomStyle"]
|
|
7
7
|
}
|
package/dist/tokens/anker.css
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--btn-bg-active-color:
|
|
2
|
+
--btn-bg-active-color: var(--brand-color-0);
|
|
3
3
|
--btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
|
|
4
4
|
|
|
5
5
|
--btn-bg-secondary-color: #ffffff;
|
|
6
|
-
--btn-text-secondary-color: #1d1d1f;
|
|
7
6
|
--btn-bg-secondary-active-color: #6e6e73;
|
|
8
7
|
--btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
|
|
9
8
|
--btn-border-secondary-border-color: #acacac;
|
|
@@ -17,11 +16,6 @@
|
|
|
17
16
|
--line-height-normal: 1.4;
|
|
18
17
|
--line-height-loose: 1.6;
|
|
19
18
|
|
|
20
|
-
--min-xxl-w: 1680px;
|
|
21
|
-
--md-w: 342px;
|
|
22
|
-
--md-l-w: 688px;
|
|
23
|
-
--l-xl-w: 864px;
|
|
24
|
-
--xl-xxl-w: 1280px;
|
|
25
19
|
|
|
26
20
|
/* 通用组件库anker品牌颜色 */
|
|
27
21
|
--brand-color-0: #00befa;
|
package/dist/tokens/eufy.css
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--btn-text-color: #ffffff;
|
|
3
|
-
--btn-bg-active-color:
|
|
3
|
+
--btn-bg-active-color: var(--brand-color-0);
|
|
4
4
|
|
|
5
5
|
--btn-bg-secondary-color: #ffffff;
|
|
6
|
-
--btn-text-secondary-color: #333333;
|
|
7
6
|
--btn-bg-secondary-active-color: #555555;
|
|
8
7
|
--btn-bg-secondary-disabled-color: #f5f5f550;
|
|
9
8
|
|
package/dist/tokens/eufyMake.css
CHANGED
package/dist/tokens/solix.css
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--btn-text-color: #ffffff;
|
|
3
|
-
--btn-bg-color
|
|
3
|
+
--btn-bg-active-color: var(--brand-color-0);
|
|
4
4
|
|
|
5
5
|
--btn-bg-secondary-color: #ffffff;
|
|
6
|
-
--btn-text-secondary-color: #17bbef;
|
|
7
6
|
--btn-bg-secondary-active-color: #17bbef;
|
|
8
7
|
--btn-bg-secondary-disabled-color: #f5f5f550;
|
|
9
8
|
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1083,7 +1083,7 @@ video {
|
|
|
1083
1083
|
background-color: var(--btn-text-color);
|
|
1084
1084
|
}
|
|
1085
1085
|
.bg-skeleton {
|
|
1086
|
-
background-color: var(--tertiary-color);
|
|
1086
|
+
background-color: var(--info-tertiary-color);
|
|
1087
1087
|
}
|
|
1088
1088
|
.bg-success-0 {
|
|
1089
1089
|
background-color: var(--success-color-0);
|
package/tailwind.config.ts
CHANGED