@anker-in/headless-ui 1.1.9-alpha.1764674322345 → 1.1.9-alpha.1764730875779
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/CreativeModule/index.js +1 -1
- package/dist/cjs/biz-components/CreativeModule/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/components/ExposureDetector.d.ts +3 -3
- package/dist/cjs/components/ExposureDetector.js +1 -1
- package/dist/cjs/components/ExposureDetector.js.map +2 -2
- package/dist/cjs/components/alert.d.ts +5 -0
- package/dist/cjs/components/alert.js.map +2 -2
- package/dist/cjs/components/avatar.d.ts +5 -0
- package/dist/cjs/components/avatar.js.map +2 -2
- package/dist/cjs/components/badge.d.ts +5 -0
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/board.d.ts +5 -0
- package/dist/cjs/components/board.js.map +2 -2
- package/dist/cjs/components/button.d.ts +5 -0
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/checkbox.d.ts +5 -0
- package/dist/cjs/components/checkbox.js.map +2 -2
- package/dist/cjs/components/color.d.ts +7 -1
- package/dist/cjs/components/color.js +1 -1
- package/dist/cjs/components/color.js.map +2 -2
- package/dist/cjs/components/container.d.ts +5 -0
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/components/{gird.d.ts → grid.d.ts} +5 -0
- package/dist/cjs/components/{gird.js → grid.js} +1 -1
- package/dist/cjs/components/{gird.js.map → grid.js.map} +4 -4
- package/dist/cjs/components/heading.d.ts +5 -0
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/index.d.ts +1 -1
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/components/index.js.map +2 -2
- package/dist/cjs/components/input-number.d.ts +5 -0
- package/dist/cjs/components/input-number.js.map +2 -2
- package/dist/cjs/components/input.d.ts +5 -0
- package/dist/cjs/components/input.js.map +2 -2
- package/dist/cjs/components/link.d.ts +7 -2
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/components/link.js.map +2 -2
- package/dist/cjs/components/loadingDots.d.ts +5 -0
- package/dist/cjs/components/loadingDots.js.map +2 -2
- package/dist/cjs/components/picture.d.ts +5 -0
- package/dist/cjs/components/picture.js.map +2 -2
- package/dist/cjs/components/radio.d.ts +5 -0
- package/dist/cjs/components/radio.js.map +2 -2
- package/dist/cjs/components/skeleton.d.ts +5 -0
- package/dist/cjs/components/skeleton.js.map +2 -2
- package/dist/cjs/components/text.d.ts +5 -0
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/components/theme.d.ts +4 -3
- package/dist/cjs/components/theme.js.map +2 -2
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/cjs/stories/grid.stories.js +1 -1
- package/dist/cjs/stories/grid.stories.js.map +2 -2
- package/dist/cjs/stories/heading.stories.js +4 -2
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/cjs/stories/link.stories.js +1 -1
- package/dist/cjs/stories/link.stories.js.map +1 -1
- package/dist/cjs/stories/text.stories.js +4 -2
- package/dist/cjs/stories/text.stories.js.map +2 -2
- package/dist/esm/biz-components/CreativeModule/index.js +1 -1
- package/dist/esm/biz-components/CreativeModule/index.js.map +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +1 -1
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +1 -1
- package/dist/esm/components/ExposureDetector.d.ts +3 -3
- package/dist/esm/components/ExposureDetector.js +1 -1
- package/dist/esm/components/ExposureDetector.js.map +2 -2
- package/dist/esm/components/alert.d.ts +5 -0
- package/dist/esm/components/alert.js.map +2 -2
- package/dist/esm/components/avatar.d.ts +5 -0
- package/dist/esm/components/avatar.js.map +2 -2
- package/dist/esm/components/badge.d.ts +5 -0
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/board.d.ts +5 -0
- package/dist/esm/components/board.js.map +2 -2
- package/dist/esm/components/button.d.ts +5 -0
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/checkbox.d.ts +5 -0
- package/dist/esm/components/checkbox.js.map +2 -2
- package/dist/esm/components/color.d.ts +7 -1
- package/dist/esm/components/color.js +1 -1
- package/dist/esm/components/color.js.map +2 -2
- package/dist/esm/components/container.d.ts +5 -0
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/components/{gird.d.ts → grid.d.ts} +5 -0
- package/dist/esm/components/{gird.js → grid.js} +1 -1
- package/dist/esm/components/{gird.js.map → grid.js.map} +3 -3
- package/dist/esm/components/heading.d.ts +5 -0
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/index.d.ts +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/input-number.d.ts +5 -0
- package/dist/esm/components/input-number.js.map +2 -2
- package/dist/esm/components/input.d.ts +5 -0
- package/dist/esm/components/input.js.map +2 -2
- package/dist/esm/components/link.d.ts +7 -2
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/components/link.js.map +2 -2
- package/dist/esm/components/loadingDots.d.ts +5 -0
- package/dist/esm/components/loadingDots.js.map +2 -2
- package/dist/esm/components/picture.d.ts +5 -0
- package/dist/esm/components/picture.js.map +2 -2
- package/dist/esm/components/radio.d.ts +5 -0
- package/dist/esm/components/radio.js.map +2 -2
- package/dist/esm/components/skeleton.d.ts +5 -0
- package/dist/esm/components/skeleton.js.map +2 -2
- package/dist/esm/components/text.d.ts +5 -0
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/components/theme.d.ts +4 -3
- package/dist/esm/components/theme.js.map +2 -2
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +1 -1
- package/dist/esm/stories/grid.stories.js +1 -1
- package/dist/esm/stories/grid.stories.js.map +1 -1
- package/dist/esm/stories/heading.stories.js +4 -2
- package/dist/esm/stories/heading.stories.js.map +3 -3
- package/dist/esm/stories/link.stories.js +1 -1
- package/dist/esm/stories/link.stories.js.map +1 -1
- package/dist/esm/stories/text.stories.js +5 -3
- package/dist/esm/stories/text.stories.js.map +3 -3
- package/dist/tokens/base.css +51 -86
- package/package.json +4 -6
- package/style.css +8 -62
- package/tailwind.config.js +8 -31
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Heading as t}from"../components/index.js";import"react";const r={title:"Typography/Heading",component:t,parameters:{layout:"padded",docs:{description:{component:`Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002
|
|
2
|
+
|
|
3
|
+
\u9ED8\u8BA4\u7684\u6587\u5B57\u989C\u8272\u7EE7\u627F\u81EA\u7236\u5143\u7D20\u7684\u6587\u672C\u989C\u8272\uFF0C\u5EFA\u8BAE\u6700\u8FD1\u7684root\u8282\u70B9 \u8BBE\u7F6Eclass text-info-primary\uFF0C\u53EF\u4EE5\u901A\u8FC7 color \u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\u989C\u8272\u3002
|
|
2
4
|
|
|
3
5
|
### \u6807\u9898\u5C3A\u5BF8
|
|
4
6
|
\u6807\u9898\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\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px,
|
|
@@ -9,5 +11,5 @@ import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading a
|
|
|
9
11
|
- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)
|
|
10
12
|
- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)
|
|
11
13
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
12
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",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"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var
|
|
14
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",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"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var l=r;const s={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog.",className:"tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] text-info-primary"}},p={render:()=>o("div",{className:"text-info-primary",children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},d={render:()=>o("div",{className:"text-info-primary",children:[e(t,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),e("hr",{}),e(t,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};export{p as All,s as Default,d as Html,l as default};
|
|
13
15
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\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\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\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 options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\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 options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n className: 'tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] ',\n },\n}\n\nexport const All: Story = {\n render: () => (\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n \u9ED8\u8BA4\u7684\u6587\u5B57\u989C\u8272\u7EE7\u627F\u81EA\u7236\u5143\u7D20\u7684\u6587\u672C\u989C\u8272\uFF0C\u5EFA\u8BAE\u6700\u8FD1\u7684root\u8282\u70B9 \u8BBE\u7F6Eclass text-info-primary\uFF0C\u53EF\u4EE5\u901A\u8FC7 color \u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\u989C\u8272\u3002 \n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\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\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\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 options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\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 options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n className: 'tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] text-info-primary',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <div className=\"text-info-primary\">\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </div>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <div className=\"text-info-primary\">\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\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',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\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 </div>\n ),\n}\n"],
|
|
5
|
+
"mappings": "AAsGI,OACE,OAAAA,EADF,QAAAC,MAAA,oBApGJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,CAAC,EAC/B,YAAa,sFACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,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,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,gDACV,UAAW,kFACb,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ,EAEaK,EAAc,CACzB,OAAQ,IACNN,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAM,EAAG,sGAAmC,EACrDF,EAAC,OAAG,EACJA,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAK,mFAAmF,EAC1GF,EAAC,OAAG,EACJA,EAACE,EAAA,CACC,KAAM,EACN,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,0BACN,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,SACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "Heading", "meta", "heading_stories_default", "Default", "All", "Html"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import"@storybook/icons";import i from"../components/link.js";const n={title:"Components/Link",component:i,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{description:"\u5C3A\u5BF8",control:{type:"select"},options:["base","lg"],table:{defaultValue:{summary:"base"}}},variant:{description:"\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F",control:{type:"select"},options:["primary","
|
|
1
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import"@storybook/icons";import i from"../components/link.js";const n={title:"Components/Link",component:i,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{description:"\u5C3A\u5BF8",control:{type:"select"},options:["base","lg"],table:{defaultValue:{summary:"base"}}},variant:{description:"\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F",control:{type:"select"},options:["primary","secondary"],table:{defaultValue:{summary:"primary"}}},onClick:{control:!1},suffixIcon:{control:!1},style:{control:!1},className:{control:!1},children:{control:!1}},args:{onClick:void 0}};var t=n;const r={args:{children:"Link"}},d=()=>a("div",{className:"inline-flex flex-col gap-4",children:[e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",variant:"secondary",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",variant:"secondary",children:"Link"})})]}),c=()=>a("div",{className:"inline-flex flex-col gap-4",children:[a("div",{className:"inline-flex gap-4",children:[e(i,{size:"base",disabled:!0,children:"Link"}),e(i,{size:"base",disabled:!0,children:"Link"})]}),a("div",{className:"inline-flex gap-4",children:[e(i,{size:"lg",disabled:!0,children:"Link"}),e(i,{size:"lg",disabled:!0,children:"Link"})]})]});export{r as Default,c as Disabled,d as LinkSize,t as default};
|
|
2
2
|
//# sourceMappingURL=link.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/link.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { ChevronRightIcon } from '@storybook/icons'\nimport Link from '../components/link.js'\n\nconst meta = {\n // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n title: 'Components/Link',\n component: Link,\n parameters: {\n layout: 'centered',\n },\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n tags: ['autodocs'],\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n control: {\n type: 'select',\n },\n options: ['base', 'lg'],\n table: {\n defaultValue: { summary: 'base' },\n },\n },\n variant: {\n description: '\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F',\n control: {\n type: 'select',\n },\n options: ['primary', '
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { ChevronRightIcon } from '@storybook/icons'\nimport Link from '../components/link.js'\n\nconst meta = {\n // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n title: 'Components/Link',\n component: Link,\n parameters: {\n layout: 'centered',\n },\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n tags: ['autodocs'],\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n control: {\n type: 'select',\n },\n options: ['base', 'lg'],\n table: {\n defaultValue: { summary: 'base' },\n },\n },\n variant: {\n description: '\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F',\n control: {\n type: 'select',\n },\n options: ['primary', 'secondary'],\n table: {\n defaultValue: { summary: 'primary' },\n },\n },\n onClick: {\n control: false,\n },\n suffixIcon: {\n control: false,\n },\n style: {\n control: false,\n },\n className: {\n control: false,\n },\n children: {\n control: false,\n },\n },\n args: {\n onClick: undefined,\n },\n} satisfies Meta<typeof Link>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'Link',\n },\n}\n\nexport const LinkSize = () => (\n <div className=\"inline-flex flex-col gap-4\">\n <div className=\"inline-flex gap-4\">\n <Link size=\"base\">Link</Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"lg\">Link</Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"base\" variant=\"secondary\">\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"lg\" variant=\"secondary\">\n Link\n </Link>\n </div>\n </div>\n)\n\nexport const Disabled = () => (\n <div className=\"inline-flex flex-col gap-4\">\n <div className=\"inline-flex gap-4\">\n <Link size=\"base\" disabled>\n Link\n </Link>\n <Link size=\"base\" disabled>\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"lg\" disabled>\n Link\n </Link>\n <Link size=\"lg\" disabled>\n Link\n </Link>\n </div>\n </div>\n)\n"],
|
|
5
5
|
"mappings": "AAmEE,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAlEF,MAAiC,mBACjC,OAAOC,MAAU,wBAEjB,MAAMC,EAAO,CAEX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,KAAM,CACJ,YAAa,eACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,IAAI,EACtB,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,QAAS,CACP,YAAa,mDACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,WAAW,EAChC,MAAO,CACL,aAAc,CAAE,QAAS,SAAU,CACrC,CACF,EACA,QAAS,CACP,QAAS,EACX,EACA,WAAY,CACV,QAAS,EACX,EACA,MAAO,CACL,QAAS,EACX,EACA,UAAW,CACT,QAAS,EACX,EACA,SAAU,CACR,QAAS,EACX,CACF,EACA,KAAM,CACJ,QAAS,MACX,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,MACZ,CACF,EAEaC,EAAW,IACtBL,EAAC,OAAI,UAAU,6BACb,UAAAD,EAAC,OAAI,UAAU,oBACb,SAAAA,EAACE,EAAA,CAAK,KAAK,OAAO,gBAAI,EACxB,EACAF,EAAC,OAAI,UAAU,oBACb,SAAAA,EAACE,EAAA,CAAK,KAAK,KAAK,gBAAI,EACtB,EACAF,EAAC,OAAI,UAAU,oBACb,SAAAA,EAACE,EAAA,CAAK,KAAK,OAAO,QAAQ,YAAY,gBAEtC,EACF,EACAF,EAAC,OAAI,UAAU,oBACb,SAAAA,EAACE,EAAA,CAAK,KAAK,KAAK,QAAQ,YAAY,gBAEpC,EACF,GACF,EAGWK,EAAW,IACtBN,EAAC,OAAI,UAAU,6BACb,UAAAA,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAK,KAAK,OAAO,SAAQ,GAAC,gBAE3B,EACAF,EAACE,EAAA,CAAK,KAAK,OAAO,SAAQ,GAAC,gBAE3B,GACF,EACAD,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAK,KAAK,KAAK,SAAQ,GAAC,gBAEzB,EACAF,EAACE,EAAA,CAAK,KAAK,KAAK,SAAQ,GAAC,gBAEzB,GACF,GACF",
|
|
6
6
|
"names": ["jsx", "jsxs", "Link", "meta", "link_stories_default", "Default", "LinkSize", "Disabled"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t}from"../components/index.js";import"react";const r={title:"Typography/Text",component:t,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
|
+
|
|
3
|
+
\u9ED8\u8BA4\u7684\u6587\u5B57\u989C\u8272\u7EE7\u627F\u81EA\u7236\u5143\u7D20\u7684\u6587\u672C\u989C\u8272\uFF0C\u5EFA\u8BAE\u6700\u8FD1\u7684root\u8282\u70B9 \u8BBE\u7F6Eclass text-info-primary\uFF0C\u53EF\u4EE5\u901A\u8FC7 color \u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\u989C\u8272\u3002
|
|
2
4
|
|
|
3
5
|
### \u6587\u672C\u5C3A\u5BF8
|
|
4
6
|
\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 +9,7 @@ import{Fragment as i,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t
|
|
|
7
9
|
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
10
|
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
11
|
- 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,4],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:["medium","semibold","bold","extraBold","black"],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:"bold",align:"left",html:"",as:"p"}};var
|
|
12
|
+
`}}},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,4],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:["medium","semibold","bold","extraBold","black"],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:"bold",align:"left",html:"",as:"p"}};var n=r;const s={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"bold",className:"text-info-primary"}},d={render(){return o("div",{className:"text-info-primary flex flex-col",children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},p={render(){return o("div",{className:"text-info-primary flex flex-col",children:[e("span",{className:"text-sm font-extrabold",children:"size 3"}),o("div",{className:"flex flex-col",children:[e(t,{weight:"medium",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"semibold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"bold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"extraBold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"black",size:3,children:"The quick brown fox jumps over the lazy dog."})]}),e("span",{className:"mt-2 text-sm font-extrabold",children:"size none"}),o("div",{className:"flex flex-col",children:[e(t,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"extraBold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"black",children:"The quick brown fox jumps over the lazy dog."})]})]})}},m={render(){return o("div",{children:[e(t,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
11
13
|
to right,
|
|
12
14
|
#00ff00, /* \u7EFF\u8272 */
|
|
13
15
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -15,5 +17,5 @@ import{Fragment as i,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t
|
|
|
15
17
|
#0099ff, /* \u6D45\u84DD\u8272 */
|
|
16
18
|
#8000ff, /* \u7D2B\u8272 */
|
|
17
19
|
#ff00ff /* \u7C89\u8272 */
|
|
18
|
-
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{
|
|
20
|
+
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{d as All,s as Default,m as Html,n as default,p as weight};
|
|
19
21
|
//# sourceMappingURL=text.stories.js.map
|
|
@@ -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, 4],\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: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\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: 'bold',\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: 'bold',\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 <span className=\"text-sm font-extrabold\">size 3</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"semibold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"bold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"extraBold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"black\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n </div>\n <span className=\"mt-2 text-sm font-extrabold\">size none</span>\n <div className=\"flex flex-col\">\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 <Text weight=\"extraBold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"black\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
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\u9ED8\u8BA4\u7684\u6587\u5B57\u989C\u8272\u7EE7\u627F\u81EA\u7236\u5143\u7D20\u7684\u6587\u672C\u989C\u8272\uFF0C\u5EFA\u8BAE\u6700\u8FD1\u7684root\u8282\u70B9 \u8BBE\u7F6Eclass text-info-primary\uFF0C\u53EF\u4EE5\u901A\u8FC7 color \u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\u989C\u8272\u3002\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, 4],\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: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\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: 'bold',\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: 'bold',\n className: 'text-info-primary',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"text-info-primary 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=\"text-info-primary flex flex-col\">\n <span className=\"text-sm font-extrabold\">size 3</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"semibold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"bold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"extraBold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"black\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n </div>\n <span className=\"mt-2 text-sm font-extrabold\">size none</span>\n <div className=\"flex flex-col\">\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 <Text weight=\"extraBold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"black\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <div>\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 </div>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "All", "weight", "Html"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
|
@@ -1,76 +1,54 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--btn-text-color: #ffffff;
|
|
3
2
|
--btn-bg-active-color: #00a7e1;
|
|
4
3
|
--btn-bg-disabled-color: #ccdfe850;
|
|
5
4
|
--btn-text-active-color: #ffffff;
|
|
6
5
|
|
|
7
6
|
|
|
8
7
|
--btn-bg-secondary-color: transparent;
|
|
9
|
-
--btn-text-secondary-color: #1D1D1F;
|
|
10
|
-
--btn-tsxt-secondary-active-color: #ffffff;
|
|
11
8
|
--btn-bg-secondary-disabled-color: #f5f5f550;
|
|
12
9
|
|
|
13
10
|
/* 浅色背景 */
|
|
14
|
-
--success-color-0: #
|
|
15
|
-
--success-color-1: #
|
|
16
|
-
|
|
17
|
-
--success-color-3: #aee9bd;
|
|
18
|
-
--success-color-4: #D6F4DE;
|
|
11
|
+
--success-color-0: #30D158;
|
|
12
|
+
--success-color-1: #D6F4DE;
|
|
13
|
+
|
|
19
14
|
|
|
20
15
|
--warning-color-0: #FFC24D;
|
|
21
|
-
--warning-color-1: #
|
|
22
|
-
|
|
23
|
-
--warning-color-3: #f8e0af;
|
|
24
|
-
--warning-color-4: #F6EAD0;
|
|
16
|
+
--warning-color-1: #F6EAD0;
|
|
17
|
+
|
|
25
18
|
|
|
26
19
|
--error-color-0: #FF4D4D;
|
|
27
|
-
--error-color-1: #
|
|
28
|
-
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
--info-
|
|
34
|
-
--info-
|
|
35
|
-
--info-
|
|
20
|
+
--error-color-1: #F6DBD8;
|
|
21
|
+
|
|
22
|
+
--marketing-color-0: #FF6B35;
|
|
23
|
+
--marketing-color-1: #FF9741;
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
--info-primary-color: #080A0F;
|
|
27
|
+
--info-secondary-color: #2A2C32;
|
|
28
|
+
--info-tertiary-color: #4A4C56;
|
|
29
|
+
--info-quaternary-color: #767880;
|
|
36
30
|
--info-white-color: #FFFFFF;
|
|
37
31
|
|
|
38
32
|
--container-primary-color: #ffffff;
|
|
39
|
-
--container-secondary-color-0: #
|
|
33
|
+
--container-secondary-color-0: #F5F6F7;
|
|
40
34
|
--container-secondary-color-1: #EAEAEC;
|
|
41
|
-
--container-tertiary-color: #EAEAEC;
|
|
42
35
|
|
|
43
|
-
--bg-color-0: #
|
|
36
|
+
--bg-color-0: #F5F6F7;
|
|
44
37
|
--bg-color-1: #ffffff;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
--masks-color-0: rgba(
|
|
48
|
-
--masks-color-1: rgba(
|
|
49
|
-
--tab-word-color-0: #ff9900;
|
|
50
|
-
--tab-stroke-color-0: #ffcf87;
|
|
51
|
-
--tab-fill-color-0: #fff7eb;
|
|
52
|
-
--tab-word-color-1: #00aaff;
|
|
53
|
-
--tab-stroke-color-1: #88d7ff;
|
|
54
|
-
--tab-fill-color-1: #ebf8ff;
|
|
55
|
-
--tab-word-color-2: #ff4d4d;
|
|
56
|
-
--tab-stroke-color-2: #ff8a8a;
|
|
57
|
-
--tab-fill-color-2: #fff1f1;
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
--masks-color-0: rgba(0, 0, 0, 0.2);
|
|
41
|
+
--masks-color-1: rgba(0, 0, 0, 0.6);
|
|
58
42
|
|
|
59
43
|
--secondary-brand-color-1: #042637;
|
|
60
44
|
--secondary-brand-color-2: #b3ecfb;
|
|
61
45
|
--secondary-brand-color-3: #f8f7f6;
|
|
62
46
|
|
|
63
|
-
--
|
|
64
|
-
--bg-color-2: #efefec;
|
|
65
|
-
|
|
47
|
+
--lines-color: #DADCE0;
|
|
66
48
|
--line-color: #e9e9e9;
|
|
67
49
|
--line-color-1: #ddd;
|
|
68
50
|
--line-color-2: #1d1d1f;
|
|
69
51
|
|
|
70
|
-
--masks-color-1: hsla(0, 0%, 0%, 0.5);
|
|
71
|
-
--masks-color-2: hsla(0, 0%, 0%, 0.85);
|
|
72
|
-
|
|
73
|
-
|
|
74
52
|
--line-height-base: 1.2;
|
|
75
53
|
|
|
76
54
|
--letter-spacing-normal: -0.02em;
|
|
@@ -85,61 +63,48 @@
|
|
|
85
63
|
|
|
86
64
|
|
|
87
65
|
.aiui-dark {
|
|
88
|
-
--btn-text-color: #1D1D1F;
|
|
89
66
|
--btn-text-active-color: #ffffff;
|
|
67
|
+
--btn-bg-secondary-color: transparent;
|
|
90
68
|
|
|
69
|
+
/* 深色背景 */
|
|
70
|
+
--success-color-0: #2BBC4F;
|
|
71
|
+
--success-color-1: #204028;
|
|
91
72
|
|
|
92
|
-
--
|
|
93
|
-
--
|
|
94
|
-
--btn-tsxt-secondary-active-color: #1D1D1F;
|
|
73
|
+
--warning-color-0: #E6AF45;
|
|
74
|
+
--warning-color-1: #33270F;
|
|
95
75
|
|
|
76
|
+
--error-color-0: #E64545;
|
|
77
|
+
--error-color-1: #330F0F;
|
|
96
78
|
|
|
97
|
-
|
|
98
|
-
--
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
--
|
|
102
|
-
--
|
|
103
|
-
--
|
|
104
|
-
--
|
|
105
|
-
--
|
|
106
|
-
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
--error-color-2: #992e2e;
|
|
111
|
-
--error-color-3: #661f1f;
|
|
112
|
-
--error-color-4: #330f0f;
|
|
113
|
-
|
|
114
|
-
--info-primary-color: #FFFFFF;
|
|
115
|
-
--info-secondary-color: #B6B6BA;
|
|
116
|
-
--info-tertiary-color: #86868C;
|
|
117
|
-
--info-quaternary-color: #353537;
|
|
118
|
-
--info-white-color: #1D1D1F;
|
|
119
|
-
|
|
120
|
-
--container-primary-color: #1d1d1f;
|
|
121
|
-
--container-secondary-color-0: #353537;
|
|
122
|
-
--container-secondary-color-1: #F7F8F9;
|
|
123
|
-
--container-tertiary-color: #F7F8F9;
|
|
79
|
+
--marketing-color-0: #FF6B35;
|
|
80
|
+
--marketing-color-1: #FF9741;
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
--info-primary-color: #F5F6F7;
|
|
84
|
+
--info-secondary-color: #B5B7BB;
|
|
85
|
+
--info-tertiary-color: #8A8D92;
|
|
86
|
+
--info-quaternary-color: #75787F;
|
|
87
|
+
--info-white-color: #1E2024;
|
|
88
|
+
|
|
89
|
+
--container-primary-color: #1E2024;
|
|
90
|
+
--container-secondary-color-0: #373A40;
|
|
91
|
+
--container-secondary-color-1: #F5F6F7;
|
|
124
92
|
|
|
125
93
|
|
|
126
94
|
--bg-color-0: #000000;
|
|
127
|
-
--bg-color-1: #
|
|
128
|
-
|
|
95
|
+
--bg-color-1: #1E2024;
|
|
96
|
+
|
|
97
|
+
--lines-color: #3A3C40;
|
|
98
|
+
|
|
129
99
|
--line-masks-color-0: rgba(245, 245, 247, 0.2);
|
|
130
100
|
--line-masks-color-1: rgba(245, 245, 247, 0.6);
|
|
131
|
-
--tab-word-color-0: #ff9900;
|
|
132
|
-
--tab-stroke-color-0: #663d00;
|
|
133
|
-
--tab-fill-color-0: #331f00;
|
|
134
|
-
--tab-word-color-1: #00aaff;
|
|
135
|
-
--tab-stroke-color-1: #004466;
|
|
136
|
-
--tab-fill-color-1: #002233;
|
|
137
|
-
--tab-word-color-2: #ff4d4d;
|
|
138
|
-
--tab-stroke-color-2: #661f1f;
|
|
139
|
-
--tab-fill-color-2: #330f0f;
|
|
140
101
|
|
|
141
102
|
--tabs-list-bg-color: var(--container-primary-color);
|
|
142
103
|
|
|
104
|
+
|
|
105
|
+
--masks-color-0: rgba(255, 255, 255, 0.2);
|
|
106
|
+
--masks-color-1: rgba(255, 255, 255, 0.6);
|
|
107
|
+
|
|
143
108
|
--box-radius: 12px;
|
|
144
109
|
}
|
|
145
110
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "1.1.9-alpha.
|
|
3
|
+
"version": "1.1.9-alpha.1764730875779",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -90,7 +90,8 @@
|
|
|
90
90
|
"postcss-prefix-selector": "^2.1.1",
|
|
91
91
|
"prettier": "^3.5.3",
|
|
92
92
|
"react-test-renderer": "^18.3.1",
|
|
93
|
-
"stylelint": "^16.6.0"
|
|
93
|
+
"stylelint": "^16.6.0",
|
|
94
|
+
"@testing-library/dom": "^10.4.1"
|
|
94
95
|
},
|
|
95
96
|
"dependencies": {
|
|
96
97
|
"@payloadcms/richtext-lexical": "^3.62.1",
|
|
@@ -104,8 +105,6 @@
|
|
|
104
105
|
"@radix-ui/react-slot": "^1.2.3",
|
|
105
106
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
106
107
|
"@radix-ui/react-visually-hidden": "^1.2.3",
|
|
107
|
-
"@testing-library/dom": "^10.4.1",
|
|
108
|
-
"@types/lodash": "^4.17.20",
|
|
109
108
|
"autoprefixer": "^10.4.19",
|
|
110
109
|
"class-variance-authority": "^0.7.0",
|
|
111
110
|
"clsx": "^2.1.1",
|
|
@@ -121,12 +120,11 @@
|
|
|
121
120
|
"framer-motion": "^12.23.24",
|
|
122
121
|
"jump.js": "^1.0.2",
|
|
123
122
|
"lexical": "^0.38.2",
|
|
124
|
-
"postcss": "^8.4.38",
|
|
125
123
|
"react-fast-marquee": "^1.6.5",
|
|
126
124
|
"react-intersection-observer": "^9.4.0",
|
|
127
125
|
"react-responsive": "10.0.1",
|
|
128
126
|
"react-youtube": "^10.1.0",
|
|
129
|
-
"swiper": "^11.
|
|
127
|
+
"swiper": "^11.2.10",
|
|
130
128
|
"tailwind-merge": "^2.3.0",
|
|
131
129
|
"tailwindcss": "^3.4.3",
|
|
132
130
|
"typescript": "5.4.5",
|
package/style.css
CHANGED
|
@@ -1058,15 +1058,6 @@ video {
|
|
|
1058
1058
|
.bg-error-1 {
|
|
1059
1059
|
background-color: var(--error-color-1);
|
|
1060
1060
|
}
|
|
1061
|
-
.bg-error-2 {
|
|
1062
|
-
background-color: var(--error-color-2);
|
|
1063
|
-
}
|
|
1064
|
-
.bg-error-3 {
|
|
1065
|
-
background-color: var(--error-color-3);
|
|
1066
|
-
}
|
|
1067
|
-
.bg-error-4 {
|
|
1068
|
-
background-color: var(--error-color-4);
|
|
1069
|
-
}
|
|
1070
1061
|
.bg-info-primary {
|
|
1071
1062
|
background-color: var(--info-primary-color);
|
|
1072
1063
|
}
|
|
@@ -1092,7 +1083,7 @@ video {
|
|
|
1092
1083
|
background-color: var(--masks-color-1);
|
|
1093
1084
|
}
|
|
1094
1085
|
.bg-primary-foreground {
|
|
1095
|
-
background-color: var(--
|
|
1086
|
+
background-color: var(--info-white-color);
|
|
1096
1087
|
}
|
|
1097
1088
|
.bg-skeleton {
|
|
1098
1089
|
background-color: var(--info-tertiary-color);
|
|
@@ -1103,42 +1094,6 @@ video {
|
|
|
1103
1094
|
.bg-success-1 {
|
|
1104
1095
|
background-color: var(--success-color-1);
|
|
1105
1096
|
}
|
|
1106
|
-
.bg-success-2 {
|
|
1107
|
-
background-color: var(--success-color-2);
|
|
1108
|
-
}
|
|
1109
|
-
.bg-success-3 {
|
|
1110
|
-
background-color: var(--success-color-3);
|
|
1111
|
-
}
|
|
1112
|
-
.bg-success-4 {
|
|
1113
|
-
background-color: var(--success-color-4);
|
|
1114
|
-
}
|
|
1115
|
-
.bg-tab-fill-0 {
|
|
1116
|
-
background-color: var(--tab-fill-color-0);
|
|
1117
|
-
}
|
|
1118
|
-
.bg-tab-fill-1 {
|
|
1119
|
-
background-color: var(--tab-fill-color-1);
|
|
1120
|
-
}
|
|
1121
|
-
.bg-tab-fill-2 {
|
|
1122
|
-
background-color: var(--tab-fill-color-2);
|
|
1123
|
-
}
|
|
1124
|
-
.bg-tab-stroke-0 {
|
|
1125
|
-
background-color: var(--tab-stroke-color-0);
|
|
1126
|
-
}
|
|
1127
|
-
.bg-tab-stroke-1 {
|
|
1128
|
-
background-color: var(--tab-stroke-color-1);
|
|
1129
|
-
}
|
|
1130
|
-
.bg-tab-stroke-2 {
|
|
1131
|
-
background-color: var(--tab-stroke-color-2);
|
|
1132
|
-
}
|
|
1133
|
-
.bg-tab-word-0 {
|
|
1134
|
-
background-color: var(--tab-word-color-0);
|
|
1135
|
-
}
|
|
1136
|
-
.bg-tab-word-1 {
|
|
1137
|
-
background-color: var(--tab-word-color-1);
|
|
1138
|
-
}
|
|
1139
|
-
.bg-tab-word-2 {
|
|
1140
|
-
background-color: var(--tab-word-color-2);
|
|
1141
|
-
}
|
|
1142
1097
|
.bg-tabs-list-bg {
|
|
1143
1098
|
background-color: var(--tabs-list-bg-color);
|
|
1144
1099
|
}
|
|
@@ -1151,15 +1106,6 @@ video {
|
|
|
1151
1106
|
.bg-warning-1 {
|
|
1152
1107
|
background-color: var(--warning-color-1);
|
|
1153
1108
|
}
|
|
1154
|
-
.bg-warning-2 {
|
|
1155
|
-
background-color: var(--warning-color-2);
|
|
1156
|
-
}
|
|
1157
|
-
.bg-warning-3 {
|
|
1158
|
-
background-color: var(--warning-color-3);
|
|
1159
|
-
}
|
|
1160
|
-
.bg-warning-4 {
|
|
1161
|
-
background-color: var(--warning-color-4);
|
|
1162
|
-
}
|
|
1163
1109
|
.bg-white {
|
|
1164
1110
|
--tw-bg-opacity: 1;
|
|
1165
1111
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
@@ -1178,10 +1124,10 @@ video {
|
|
|
1178
1124
|
fill: currentColor;
|
|
1179
1125
|
}
|
|
1180
1126
|
.stroke-btn-primary-foreground {
|
|
1181
|
-
stroke: var(--
|
|
1127
|
+
stroke: var(--info-white-color);
|
|
1182
1128
|
}
|
|
1183
1129
|
.stroke-btn-secondary-foreground {
|
|
1184
|
-
stroke: var(--
|
|
1130
|
+
stroke: var(--info-primary-color);
|
|
1185
1131
|
}
|
|
1186
1132
|
.stroke-primary {
|
|
1187
1133
|
stroke: var(--brand-color-0);
|
|
@@ -1397,10 +1343,10 @@ video {
|
|
|
1397
1343
|
color: var(--brand-color-0);
|
|
1398
1344
|
}
|
|
1399
1345
|
.text-btn-primary-foreground {
|
|
1400
|
-
color: var(--
|
|
1346
|
+
color: var(--info-white-color);
|
|
1401
1347
|
}
|
|
1402
1348
|
.text-btn-secondary-foreground {
|
|
1403
|
-
color: var(--
|
|
1349
|
+
color: var(--info-primary-color);
|
|
1404
1350
|
}
|
|
1405
1351
|
.text-current {
|
|
1406
1352
|
color: currentColor;
|
|
@@ -1631,10 +1577,10 @@ video {
|
|
|
1631
1577
|
color: var(--btn-text-active-color);
|
|
1632
1578
|
}
|
|
1633
1579
|
.hover\:text-btn-primary-foreground:hover {
|
|
1634
|
-
color: var(--
|
|
1580
|
+
color: var(--info-white-color);
|
|
1635
1581
|
}
|
|
1636
1582
|
.hover\:text-btn-secondary-active-foreground:hover {
|
|
1637
|
-
color: var(--
|
|
1583
|
+
color: var(--info-white-color);
|
|
1638
1584
|
}
|
|
1639
1585
|
.hover\:text-info-primary:hover {
|
|
1640
1586
|
color: var(--info-primary-color);
|
|
@@ -1799,7 +1745,7 @@ video {
|
|
|
1799
1745
|
color: rgb(29 29 29 / var(--tw-text-opacity, 1));
|
|
1800
1746
|
}
|
|
1801
1747
|
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
|
|
1802
|
-
color: var(--
|
|
1748
|
+
color: var(--info-white-color);
|
|
1803
1749
|
}
|
|
1804
1750
|
.data-\[disabled\]\:opacity-50[data-disabled] {
|
|
1805
1751
|
opacity: 0.5;
|