@anker-in/headless-ui 0.0.27-alpha.11 → 0.0.27-alpha.12
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/BrandEquity/BrandEquity.d.ts +3 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +3 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.d.ts +3 -1
- package/dist/cjs/biz-components/MemberEquity/index.d.ts +3 -1
- package/dist/cjs/biz-components/Shelf/Shelf.d.ts +3 -1
- package/dist/cjs/biz-components/Slogan/index.d.ts +3 -1
- package/dist/cjs/helpers/utils.js.map +2 -2
- package/dist/cjs/shared/Styles.d.ts +5 -3
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/cjs/stories/HeroBanner.stories.d.ts +3 -1
- package/dist/cjs/stories/brandEquity.stories.d.ts +3 -1
- package/dist/cjs/stories/graphic.stories.d.ts +3 -1
- package/dist/cjs/stories/shelf.stories.d.ts +3 -1
- package/dist/cjs/stories/slogan.stories.d.ts +3 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +3 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +3 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts +3 -1
- package/dist/esm/biz-components/MemberEquity/index.d.ts +3 -1
- package/dist/esm/biz-components/Shelf/Shelf.d.ts +3 -1
- package/dist/esm/biz-components/Slogan/index.d.ts +3 -1
- package/dist/esm/helpers/utils.js.map +2 -2
- package/dist/esm/shared/Styles.d.ts +5 -3
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +2 -2
- package/dist/esm/stories/HeroBanner.stories.d.ts +3 -1
- package/dist/esm/stories/brandEquity.stories.d.ts +3 -1
- package/dist/esm/stories/graphic.stories.d.ts +3 -1
- package/dist/esm/stories/shelf.stories.d.ts +3 -1
- package/dist/esm/stories/slogan.stories.d.ts +3 -1
- package/package.json +1 -1
|
@@ -13,7 +13,9 @@ export interface BrandEquityProps extends ComponentCommonProps {
|
|
|
13
13
|
theme?: 'light' | 'dark';
|
|
14
14
|
}
|
|
15
15
|
declare const _default: {
|
|
16
|
-
(props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
16
|
+
(props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
17
|
+
className?: string;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
displayName: string;
|
|
18
20
|
};
|
|
19
21
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var x=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},l=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of u(t))!v.call(e,p)&&p!==o&&i(e,p,{get:()=>t[p],enumerable:!(s=g(t,p))||s.enumerable});return e};var y=(e,t,o)=>(o=e!=null?x(f(e)):{},l(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>l(i({},"__esModule",{value:!0}),e);var q={};b(q,{default:()=>h});module.exports=N(q);var a=require("react/jsx-runtime"),F=require("react"),r=require("../../helpers/utils.js"),n=y(require("../../components/picture.js")),d=require("../../shared/Styles.js");const k=({items:e=[],itemShape:t="square",className:o=""})=>(0,a.jsx)("div",{className:(0,r.cn)("brand-equity-wrapper w-full bg-[#F7F8F9]",o),children:(0,a.jsx)("div",{className:(0,r.cn)("grid gap-3 px-4","tablet:px-8 tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:e.map((s,p)=>(0,a.jsxs)("div",{className:(0,r.cn)("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(p)},t==="round"?"rounded-[16px]":"rounded-none"),children:[(0,a.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,a.jsx)("h3",{className:"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg",children:s.title}),s.avatarList?.length?(0,a.jsx)("div",{className:"flex -space-x-2",children:s.avatarList.map((c,m)=>(0,a.jsx)("div",{className:(0,r.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,a.jsx)(n.default,{source:c,className:"size-full object-cover"})},m))}):(0,a.jsx)("span",{className:"text-[#1D1D1F]",children:s.icon})]}),(0,a.jsx)("p",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl",children:s.description})]},p))})});var h=(0,d.withStyles)(k);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square',
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+CY,IAAAI,EAAA,6BA/CZC,EAAkB,iBAElBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,
|
|
6
|
-
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'tablet:px-8 tablet:grid-cols-2 grid-cols-1',\n 'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n 'desktop:px-[175px] lg-desktop:px-[268px]'\n )}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6',\n 'desktop:gap-16 gap-12',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+CY,IAAAI,EAAA,6BA/CZC,EAAkB,iBAElBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,OAEhG,OAAC,OAAI,aAAW,MAAG,2CAA4CA,CAAS,EACtE,mBAAC,OACC,aAAW,MACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAF,EAAM,IAAI,CAACG,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,qBAAC,OAAI,UAAU,0CACb,oBAAC,MAAG,UAAU,oFACX,SAAAE,EAAK,MACR,EACCA,EAAK,YAAY,UAChB,OAAC,OAAI,UAAU,kBACZ,SAAAA,EAAK,WAAW,IAAI,CAACE,EAAmBD,OACvC,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAE,QAAA,CAAQ,OAAQD,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,KAEA,OAAC,QAAK,UAAU,iBAAkB,SAAAD,EAAK,KAAK,GAEhD,KACA,OAAC,KAAE,UAAU,iFACV,SAAAA,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOZ,KAAQ,cAAWO,CAAW",
|
|
6
|
+
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "item", "index", "avatarUrl", "Picture"]
|
|
7
7
|
}
|
|
@@ -9,7 +9,9 @@ export interface GraphicProps {
|
|
|
9
9
|
shape?: 'round' | 'square';
|
|
10
10
|
}
|
|
11
11
|
declare const _default: {
|
|
12
|
-
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
12
|
+
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
13
|
+
className?: string;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
displayName: string;
|
|
14
16
|
};
|
|
15
17
|
export default _default;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { HeroBannerProps } from "./types.js";
|
|
3
3
|
declare const _default: {
|
|
4
|
-
(props: Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
4
|
+
(props: Omit<HeroBannerProps & 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;
|
|
5
7
|
displayName: string;
|
|
6
8
|
};
|
|
7
9
|
export default _default;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { MemberEquityProps } from './types.js';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
(props: Omit<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
3
|
+
(props: Omit<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
6
|
displayName: string;
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { ShelfProps } from './types.js';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
(props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
3
|
+
(props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
6
|
displayName: string;
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SloganProps } from './types.js';
|
|
3
3
|
declare const _default: {
|
|
4
|
-
(props: Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
4
|
+
(props: Omit<SloganProps & 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;
|
|
5
7
|
displayName: string;
|
|
6
8
|
};
|
|
7
9
|
export default _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/utils.ts"],
|
|
4
|
-
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,QAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAsC,gBACtCC,EAAoC,0BAEpC,MAAMC,KAAU,uBAAoB,CAClC,OAAQ,
|
|
4
|
+
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n borderRadius: ['btn'],\n },\n classGroups: {\n 'font-size': [\n 'text-heading-1',\n 'text-heading-2',\n 'text-heading-3',\n 'text-heading-4',\n 'text-heading-5',\n 'text-text-3',\n 'text-text-2',\n 'text-text-1',\n ],\n 'text-color': [\n 'text-info-primary',\n 'text-info-secondary',\n 'text-info-tertiary',\n 'text-info-quaternary',\n 'text-info-white',\n ],\n leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,QAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAsC,gBACtCC,EAAoC,0BAEpC,MAAMC,KAAU,uBAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASL,KAAMM,EAAsB,CAC1C,OAAOD,KAAQ,QAAKC,CAAM,CAAC,CAC7B,CAEO,SAASL,GAAY,CAAC",
|
|
6
6
|
"names": ["utils_exports", "__export", "cn", "noop", "__toCommonJS", "import_clsx", "import_tailwind_merge", "twMerge", "inputs"]
|
|
7
7
|
}
|
|
@@ -15,8 +15,8 @@ export declare const getStylesProps: <T extends Record<string, unknown>>(props:
|
|
|
15
15
|
* 样式 Hook，返回样式类名和样式组件
|
|
16
16
|
* @param styleProps - 样式属性
|
|
17
17
|
*/
|
|
18
|
-
export declare const useStyles: (styleProps
|
|
19
|
-
readonly className: `block-${string}`;
|
|
18
|
+
export declare const useStyles: (styleProps: Partial<StylesProps>) => {
|
|
19
|
+
readonly className: `block-${string} `;
|
|
20
20
|
readonly StyleComponent: import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
readonly uid: string;
|
|
22
22
|
};
|
|
@@ -26,7 +26,9 @@ export declare const useStyles: (styleProps?: Partial<StylesProps>) => {
|
|
|
26
26
|
* @param defaultStyleProps - 默认样式属性
|
|
27
27
|
*/
|
|
28
28
|
export declare function withStyles<P extends object>(WrappedComponent: React.ComponentType<P>, defaultStyleProps?: Partial<StylesProps>): {
|
|
29
|
-
(props: Omit<P, keyof StylesProps> & Partial<StylesProps>
|
|
29
|
+
(props: Omit<P, keyof StylesProps> & Partial<StylesProps> & {
|
|
30
|
+
className?: string;
|
|
31
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
30
32
|
displayName: string;
|
|
31
33
|
};
|
|
32
34
|
declare const _default: React.NamedExoticComponent<StylesProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var P=Object.create;var
|
|
1
|
+
"use strict";var P=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var N=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of f(e))!b.call(t,l)&&l!==s&&r(t,l,{get:()=>e[l],enumerable:!(n=p(e,l))||n.enumerable});return t};var $=(t,e,s)=>(s=t!=null?P(g(t)):{},i(e||!t||!t.__esModule?r(s,"default",{value:t,enumerable:!0}):s,t)),x=t=>i(r({},"__esModule",{value:!0}),t);var h={};N(h,{default:()=>R,getStylesProps:()=>u,useStyles:()=>S,withStyles:()=>k});module.exports=x(h);var o=require("react/jsx-runtime"),a=$(require("react"));const c=()=>`style_${Math.random().toString(36).substring(2,9)}_${Date.now().toString(36)}`,u=t=>{const{style:e,uid:s,disabled:n}=t;return{style:e,uid:s,disabled:n}},y=({style:t,uid:e=c(),disabled:s=!1})=>!t||s?null:(0,o.jsx)("style",{"data-style-id":e,children:`.block-${e} { ${t} }`}),S=t=>{const e=(0,a.useMemo)(()=>t?.uid||c(),[t?.uid]),s=(0,a.useMemo)(()=>(0,o.jsx)(y,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}};function k(t,e){const s=function(n){const l={...e,...u(n)},{className:d,StyleComponent:m}=S(l);return(0,o.jsxs)(o.Fragment,{children:[m,(0,o.jsx)(t,{...n,className:`${d} ${n.className}`})]})};return s.displayName=t.displayName||t.name||"Component",s}var R=a.default.memo(y);
|
|
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'
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,mBAAAC,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAN,
|
|
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\nexport default React.memo(Styles)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,mBAAAC,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAN,GAkCS,IAAAO,EAAA,6BAlCTC,EAA+B,oBAc/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,EAOrDP,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,CAEA,IAAOjB,EAAQ,EAAAoB,QAAM,KAAKR,CAAM",
|
|
6
6
|
"names": ["Styles_exports", "__export", "Styles_default", "getStylesProps", "useStyles", "withStyles", "__toCommonJS", "import_jsx_runtime", "import_react", "generateUID", "props", "style", "uid", "disabled", "Styles", "styleProps", "StyleComponent", "WrappedComponent", "defaultStyleProps", "WithStyles", "finalStyleProps", "className", "React"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,9 @@ import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: {
|
|
6
|
-
(props: Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
6
|
+
(props: Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
7
|
+
className?: string;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
displayName: string;
|
|
8
10
|
};
|
|
9
11
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/BrandEquity/BrandEquity.js").BrandEquityProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/BrandEquity/BrandEquity.js").BrandEquityProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/Shelf/types.js").ShelfProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/Shelf/types.js").ShelfProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -3,7 +3,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: {
|
|
6
|
-
(props: Omit<import("../biz-components/Slogan/types").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>
|
|
6
|
+
(props: Omit<import("../biz-components/Slogan/types").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps> & {
|
|
7
|
+
className?: string;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
displayName: string;
|
|
8
10
|
};
|
|
9
11
|
parameters: {
|
|
@@ -13,7 +13,9 @@ export interface BrandEquityProps extends ComponentCommonProps {
|
|
|
13
13
|
theme?: 'light' | 'dark';
|
|
14
14
|
}
|
|
15
15
|
declare const _default: {
|
|
16
|
-
(props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
16
|
+
(props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
17
|
+
className?: string;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
displayName: string;
|
|
18
20
|
};
|
|
19
21
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({items:p=[],itemShape:r="square",
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({items:p=[],itemShape:r="square",className:i=""})=>e("div",{className:a("brand-equity-wrapper w-full bg-[#F7F8F9]",i),children:e("div",{className:a("grid gap-3 px-4","tablet:px-8 tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:p.map((t,o)=>s("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(o)},r==="round"?"rounded-[16px]":"rounded-none"),children:[s("div",{className:"flex items-center justify-between gap-3",children:[e("h3",{className:"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((l,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(d,{source:l,className:"size-full object-cover"})},n))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl",children:t.description})]},o))})});var b=c(m);export{b as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square',
|
|
5
|
-
"mappings": "AA+CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,
|
|
6
|
-
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'tablet:px-8 tablet:grid-cols-2 grid-cols-1',\n 'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n 'desktop:px-[175px] lg-desktop:px-[268px]'\n )}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6',\n 'desktop:gap-16 gap-12',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "AA+CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAEhGR,EAAC,OAAI,UAAWE,EAAG,2CAA4CM,CAAS,EACtE,SAAAR,EAAC,OACC,UAAWE,EACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,MAAG,UAAU,oFACX,SAAAS,EAAK,MACR,EACCA,EAAK,YAAY,OAChBT,EAAC,OAAI,UAAU,kBACZ,SAAAS,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQQ,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,EAEAV,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAK,KAAK,GAEhD,EACAT,EAAC,KAAE,UAAU,iFACV,SAAAS,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQR,EAAWC,CAAW",
|
|
6
|
+
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "avatarUrl", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -9,7 +9,9 @@ export interface GraphicProps {
|
|
|
9
9
|
shape?: 'round' | 'square';
|
|
10
10
|
}
|
|
11
11
|
declare const _default: {
|
|
12
|
-
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
12
|
+
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
13
|
+
className?: string;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
displayName: string;
|
|
14
16
|
};
|
|
15
17
|
export default _default;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { HeroBannerProps } from "./types.js";
|
|
3
3
|
declare const _default: {
|
|
4
|
-
(props: Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
4
|
+
(props: Omit<HeroBannerProps & 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;
|
|
5
7
|
displayName: string;
|
|
6
8
|
};
|
|
7
9
|
export default _default;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { MemberEquityProps } from './types.js';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
(props: Omit<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
3
|
+
(props: Omit<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
6
|
displayName: string;
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { ShelfProps } from './types.js';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
(props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
3
|
+
(props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
6
|
displayName: string;
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SloganProps } from './types.js';
|
|
3
3
|
declare const _default: {
|
|
4
|
-
(props: Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>
|
|
4
|
+
(props: Omit<SloganProps & 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;
|
|
5
7
|
displayName: string;
|
|
6
8
|
};
|
|
7
9
|
export default _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/utils.ts"],
|
|
4
|
-
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n
|
|
5
|
-
"mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,
|
|
4
|
+
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n borderRadius: ['btn'],\n },\n classGroups: {\n 'font-size': [\n 'text-heading-1',\n 'text-heading-2',\n 'text-heading-3',\n 'text-heading-4',\n 'text-heading-5',\n 'text-text-3',\n 'text-text-2',\n 'text-text-1',\n ],\n 'text-color': [\n 'text-info-primary',\n 'text-info-secondary',\n 'text-info-tertiary',\n 'text-info-quaternary',\n 'text-info-white',\n ],\n leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n"],
|
|
5
|
+
"mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC",
|
|
6
6
|
"names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop"]
|
|
7
7
|
}
|
|
@@ -15,8 +15,8 @@ export declare const getStylesProps: <T extends Record<string, unknown>>(props:
|
|
|
15
15
|
* 样式 Hook，返回样式类名和样式组件
|
|
16
16
|
* @param styleProps - 样式属性
|
|
17
17
|
*/
|
|
18
|
-
export declare const useStyles: (styleProps
|
|
19
|
-
readonly className: `block-${string}`;
|
|
18
|
+
export declare const useStyles: (styleProps: Partial<StylesProps>) => {
|
|
19
|
+
readonly className: `block-${string} `;
|
|
20
20
|
readonly StyleComponent: import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
readonly uid: string;
|
|
22
22
|
};
|
|
@@ -26,7 +26,9 @@ export declare const useStyles: (styleProps?: Partial<StylesProps>) => {
|
|
|
26
26
|
* @param defaultStyleProps - 默认样式属性
|
|
27
27
|
*/
|
|
28
28
|
export declare function withStyles<P extends object>(WrappedComponent: React.ComponentType<P>, defaultStyleProps?: Partial<StylesProps>): {
|
|
29
|
-
(props: Omit<P, keyof StylesProps> & Partial<StylesProps>
|
|
29
|
+
(props: Omit<P, keyof StylesProps> & Partial<StylesProps> & {
|
|
30
|
+
className?: string;
|
|
31
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
30
32
|
displayName: string;
|
|
31
33
|
};
|
|
32
34
|
declare const _default: React.NamedExoticComponent<StylesProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as m,jsx as o,jsxs as P}from"react/jsx-runtime";import u,{useMemo as l}from"react";const
|
|
1
|
+
import{Fragment as m,jsx as o,jsxs as P}from"react/jsx-runtime";import u,{useMemo as l}from"react";const a=()=>`style_${Math.random().toString(36).substring(2,9)}_${Date.now().toString(36)}`,S=t=>{const{style:e,uid:s,disabled:n}=t;return{style:e,uid:s,disabled:n}},r=({style:t,uid:e=a(),disabled:s=!1})=>!t||s?null:o("style",{"data-style-id":e,children:`.block-${e} { ${t} }`}),d=t=>{const e=l(()=>t?.uid||a(),[t?.uid]),s=l(()=>o(r,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}};function f(t,e){const s=function(n){const i={...e,...S(n)},{className:c,StyleComponent:y}=d(i);return P(m,{children:[y,o(t,{...n,className:`${c} ${n.className}`})]})};return s.displayName=t.displayName||t.name||"Component",s}var g=u.memo(r);export{g as default,S as getStylesProps,d as useStyles,f 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'
|
|
5
|
-
"mappings": "
|
|
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\nexport default React.memo(Styles)\n"],
|
|
5
|
+
"mappings": "AAkCS,OAqCH,YAAAA,EArCG,OAAAC,EAqCH,QAAAC,MArCG,oBAlCT,OAAOC,GAAS,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,KAGFT,EAAC,SAAM,gBAAeQ,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAOrDI,EAAaC,GAAqC,CAC7D,MAAMJ,EAAML,EAAQ,IAAMS,GAAY,KAAOR,EAAY,EAAG,CAACQ,GAAY,GAAG,CAAC,EAEvEC,EAAiBV,EAAQ,IAAMH,EAACU,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,OACEjB,EAAAF,EAAA,CACG,UAAAc,EACDb,EAACe,EAAA,CAAkB,GAAIT,EAAa,UAAW,GAAGa,CAAS,IAAIb,EAAM,SAAS,GAAI,GACpF,CAEJ,EAGA,OAAAW,EAAW,YAAcF,EAAiB,aAAeA,EAAiB,MAAQ,YAC3EE,CACT,CAEA,IAAOG,EAAQlB,EAAM,KAAKQ,CAAM",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "generateUID", "getStylesProps", "props", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "StyleComponent", "withStyles", "WrappedComponent", "defaultStyleProps", "WithStyles", "finalStyleProps", "className", "Styles_default"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,9 @@ import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: {
|
|
6
|
-
(props: Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
6
|
+
(props: Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
7
|
+
className?: string;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
displayName: string;
|
|
8
10
|
};
|
|
9
11
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/BrandEquity/BrandEquity.js").BrandEquityProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/BrandEquity/BrandEquity.js").BrandEquityProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: {
|
|
5
|
-
(props: Omit<import("../biz-components/Shelf/types.js").ShelfProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps>
|
|
5
|
+
(props: Omit<import("../biz-components/Shelf/types.js").ShelfProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
6
|
+
className?: string;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
parameters: {
|
|
@@ -3,7 +3,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: {
|
|
6
|
-
(props: Omit<import("../biz-components/Slogan/types").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>
|
|
6
|
+
(props: Omit<import("../biz-components/Slogan/types").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps> & {
|
|
7
|
+
className?: string;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
displayName: string;
|
|
8
10
|
};
|
|
9
11
|
parameters: {
|