@anker-in/headless-ui 0.0.27-alpha.97 → 0.0.27-alpha.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/helpers/GloablContext.d.ts +10 -0
- package/dist/cjs/helpers/GloablContext.js +2 -0
- package/dist/cjs/helpers/GloablContext.js.map +7 -0
- package/dist/cjs/hooks/useMergeRefs.d.ts +4 -0
- package/dist/cjs/stories/text.stories.d.ts +1 -0
- package/dist/cjs/stories/text.stories.js +2 -2
- package/dist/cjs/stories/text.stories.js.map +2 -2
- package/dist/cjs/tsconfig.tsbuildinfo +1 -0
- package/dist/cjs/types/libs.d.js +2 -0
- package/dist/cjs/types/libs.d.js.map +7 -0
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/helpers/GloablContext.d.ts +10 -0
- package/dist/esm/helpers/GloablContext.js +2 -0
- package/dist/esm/helpers/GloablContext.js.map +7 -0
- package/dist/esm/hooks/useMergeRefs.d.ts +4 -0
- package/dist/esm/stories/text.stories.d.ts +1 -0
- package/dist/esm/stories/text.stories.js +2 -2
- package/dist/esm/stories/text.stories.js.map +2 -2
- package/dist/esm/tsconfig.tsbuildinfo +1 -0
- package/dist/esm/types/libs.d.js +2 -0
- package/dist/esm/types/libs.d.js.map +7 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var b=Object.create;var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of C(e))!z.call(t,r)&&r!==o&&p(t,r,{get:()=>e[r],enumerable:!(n=S(e,r))||n.enumerable});return t};var
|
|
1
|
+
"use strict";var b=Object.create;var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of C(e))!z.call(t,r)&&r!==o&&p(t,r,{get:()=>e[r],enumerable:!(n=S(e,r))||n.enumerable});return t};var w=(t,e,o)=>(o=t!=null?b(R(t)):{},x(e||!t||!t.__esModule?p(o,"default",{value:t,enumerable:!0}):o,t)),E=t=>x(p({},"__esModule",{value:!0}),t);var W={};L(W,{Text:()=>a});module.exports=E(W);var i=require("react/jsx-runtime"),N=w(require("react")),d=require("@radix-ui/react-slot"),P=require("class-variance-authority"),c=require("@payloadcms/richtext-lexical/html"),f=require("../helpers/index.js");const V=(0,P.cva)("font-heading",{variants:{size:{none:"tracking",1:"text-text-1",2:"text-text-2",3:"text-text-3",4:"text-text-4"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),a=N.forwardRef((t,e)=>{const{children:o,size:n="none",weight:r,align:h,className:T,asChild:g,as:y="span",color:l,html:s,...u}=t,m=s?{dangerouslySetInnerHTML:{__html:typeof s=="string"?s:(0,c.convertLexicalToHTML)({data:s})}}:null,v=l?{style:{color:l}}:null;return(0,i.jsx)(d.Slot,{...u,ref:e,className:(0,f.cn)(V({size:n,weight:n==="none"?"medium":r,align:h}),T),...m,...v,children:g?o:(0,i.jsx)(y,{children:m?null:o})})});a.displayName="Text";
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('font-heading', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n 4: 'text-text-4',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,eAAgB,CACvC,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('font-heading', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n 4: 'text-text-4',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight: size === 'none' ? 'medium' : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,eAAgB,CACvC,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAQA,IAAS,OAAS,SAAWC,EACrC,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
|
|
6
6
|
"names": ["text_exports", "__export", "Text", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_class_variance_authority", "import_html", "import_helpers", "textVariants", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of s(t))!a.call(e,l)&&l!==o&&r(e,l,{get:()=>t[l],enumerable:!(x=p(t,l))||x.enumerable});return e};var g=e=>C(r({},"__esModule",{value:!0}),e);var b={};c(b,{GlobalContext:()=>u,useGlobalContext:()=>i});module.exports=g(b);var n=require("react");const u=(0,n.createContext)({gsap:null,ScrollTrigger:null,SplitText:null}),i=()=>(0,n.useContext)(u);
|
|
2
|
+
//# sourceMappingURL=GloablContext.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/GloablContext.ts"],
|
|
4
|
+
"sourcesContent": ["import { createContext, useContext } from 'react'\n\nexport const GlobalContext = createContext({\n gsap: null,\n ScrollTrigger: null,\n SplitText: null,\n})\n\nexport const useGlobalContext = () => {\n return useContext(GlobalContext)\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,qBAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAA0C,iBAEnC,MAAMH,KAAgB,iBAAc,CACzC,KAAM,KACN,cAAe,KACf,UAAW,IACb,CAAC,EAEYC,EAAmB,OACvB,cAAWD,CAAa",
|
|
6
|
+
"names": ["GloablContext_exports", "__export", "GlobalContext", "useGlobalContext", "__toCommonJS", "import_react"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
|
|
3
|
+
export declare function assignRef<T = any>(ref: ReactRef<T> | null | undefined, value: T): void;
|
|
4
|
+
export declare function useMergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(r,o)=>{for(var i in o)l(r,i,{get:o[i],enumerable:!0})},c=(r,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of d(o))!p.call(r,n)&&n!==i&&l(r,n,{get:()=>o[n],enumerable:!(a=s(o,n))||a.enumerable});return r};var f=r=>c(l({},"__esModule",{value:!0}),r);var T={};m(T,{All:()=>x,Default:()=>u,Html:()=>b,default:()=>y,weight:()=>g});module.exports=f(T);var e=require("react/jsx-runtime"),t=require("../components/index.js"),w=require("react");const h={title:"Typography/Text",component:t.Text,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
2
|
|
|
3
3
|
### \u6587\u672C\u5C3A\u5BF8
|
|
4
4
|
\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
8
|
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
9
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
10
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"
|
|
10
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},description:"\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold",options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var y=h;const u={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},x={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},g={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},b={render(){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Text,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Text,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
11
11
|
to right,
|
|
12
12
|
#00ff00, /* \u7EFF\u8272 */
|
|
13
13
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n table: {\n defaultValue: { summary: '
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold',\n options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'normal',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'normal',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"semibold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <>\n <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n <hr />\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n <hr />\n <Text\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h3',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'Reserve for Only $1, Get $70 Off',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAmGM,IAAAQ,EAAA,6BAjGNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,mKACb,QAAS,CAAC,OAAQ,EAAG,EAAG,CAAC,EACzB,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,YAAa,6IACb,QAAS,CAAC,QAAS,SAAU,SAAU,WAAY,MAAM,EACzD,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,EACN,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAON,EAAQM,EAGR,MAAMR,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaD,EAAa,CACxB,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaI,EAAgB,CAC3B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,OAAO,QAAQ,wDAA4C,KACjE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,WAAW,wDAA4C,KACpE,OAAC,QAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAEaF,EAAc,CACzB,QAAS,CACP,SACE,oBACE,oBAAC,QAAK,sGAAmC,KACzC,OAAC,OAAG,KACJ,OAAC,QACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,KACA,OAAC,OAAG,KACJ,OAAC,QACC,KACE,CACE,KAAM,CACJ,KAAM,OACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,iCACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,EACA,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,mCACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ,CACF",
|
|
6
6
|
"names": ["text_stories_exports", "__export", "All", "Default", "Html", "text_stories_default", "weight", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|