@anker-in/headless-ui 0.0.25 → 0.0.26
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/CONTRIBUTING.md +2 -2
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/heading.d.ts +1 -1
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +3 -3
- package/dist/cjs/components/text.d.ts +2 -1
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +3 -3
- package/dist/cjs/icons/spinner.js +1 -1
- package/dist/cjs/icons/spinner.js.map +2 -2
- package/dist/cjs/stories/heading.stories.d.ts +2 -2
- package/dist/cjs/stories/heading.stories.js +1 -1
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/cjs/stories/text.stories.d.ts +12 -3
- package/dist/cjs/stories/text.stories.js +1 -1
- package/dist/cjs/stories/text.stories.js.map +3 -3
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +3 -3
- package/dist/esm/components/text.d.ts +2 -1
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +3 -3
- package/dist/esm/icons/spinner.js +1 -1
- package/dist/esm/icons/spinner.js.map +2 -2
- package/dist/esm/stories/heading.stories.d.ts +2 -2
- package/dist/esm/stories/heading.stories.js +1 -1
- package/dist/esm/stories/heading.stories.js.map +2 -2
- package/dist/esm/stories/text.stories.d.ts +12 -3
- package/dist/esm/stories/text.stories.js +2 -2
- package/dist/esm/stories/text.stories.js.map +3 -3
- package/package.json +1 -1
- package/src/components/button.tsx +6 -7
- package/src/components/heading.tsx +5 -5
- package/src/components/text.tsx +13 -5
- package/src/icons/spinner.tsx +0 -1
- package/src/stories/heading.stories.tsx +2 -2
- package/src/stories/text.stories.tsx +28 -8
- package/src/styles/global.css +13 -15
- package/style.css +34 -47
|
@@ -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 { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('', {\n variants: {\n size: {\n none: '',\n 1: 'ai-text-xs',\n 2: 'ai-text-sm',\n 3: 'ai-text-base',\n 4: 'ai-text-lg',\n 5: 'ai-text-xl',\n 6: 'ai-text-2xl',\n 7: 'ai-text-3xl',\n 8: 'ai-text-4xl',\n 9: 'ai-text-5xl',\n },\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "Slot", "cn", "cva", "textVariants", "Text", "props", "forwardedRef", "children", "size", "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('ai-tracking', {\n variants: {\n size: {\n none: '',\n 1: 'ai-text-xs',\n 2: 'ai-text-sm',\n 3: 'ai-text-base',\n 4: 'ai-text-lg',\n 5: 'ai-text-xl',\n 6: 'ai-text-2xl',\n 7: 'ai-text-3xl',\n 8: 'ai-text-4xl',\n 9: 'ai-text-5xl',\n },\n weight: {\n light: 'ai-font-light',\n normal: 'ai-font-normal',\n medium: 'ai-font-medium',\n semibold: 'ai-font-semibold',\n bold: 'ai-font-bold',\n },\n lineHeights: {\n tight: 'ai-leading-tight',\n normal: 'ai-leading-normal',\n loose: 'ai-leading-loose',\n },\n align: {\n left: 'ai-text-left',\n center: 'ai-text-center',\n right: 'ai-text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'normal',\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\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n lineHeights,\n size = 'none',\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: 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,\n align,\n lineHeights,\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": "AAyG4B,cAAAA,MAAA,oBAzG5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAGvC,MAAMC,EAAeD,EAAI,cAAe,CACtC,SAAU,CACR,KAAM,CACJ,KAAM,GACN,EAAG,aACH,EAAG,aACH,EAAG,eACH,EAAG,aACH,EAAG,aACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,gBACP,OAAQ,iBACR,OAAQ,iBACR,SAAU,mBACV,KAAM,cACR,EACA,YAAa,CACX,MAAO,mBACP,OAAQ,oBACR,MAAO,kBACT,EACA,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,eACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,QACV,CACF,CAAC,EAkBKE,EAAOL,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIZ,EAEEa,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQA,CAAK,CAC1C,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKX,EACL,UAAWL,EACTE,EAAa,CACX,KAAAM,EACA,OAAAC,EACA,MAAAC,EACA,YAAAH,CACF,CAAC,EACDI,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUN,EAAWT,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOX,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
|
|
6
|
+
"names": ["jsx", "React", "Slot", "cn", "cva", "textVariants", "Text", "props", "forwardedRef", "children", "lineHeights", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{cn as r}from"../helpers/index.js";const s=n=>e("svg",{fill:"none",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",width:"1rem",className:r("ai-animate-spin",n.className),children:e("path",{d:"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1",
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{cn as r}from"../helpers/index.js";const s=n=>e("svg",{fill:"none",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",width:"1rem",className:r("ai-animate-spin",n.className),children:e("path",{d:"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1",strokeWidth:"2",strokeLinecap:"round"})});var i=s;export{i as default};
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/icons/spinner.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\n\nexport interface SpinnerProps {\n className?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = (props: SpinnerProps) => {\n return (\n <svg\n fill=\"none\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1rem\"\n className={cn('ai-animate-spin', props.className)}\n >\n <path\n d=\"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1\"\n
|
|
5
|
-
"mappings": "AAgBM,cAAAA,MAAA,oBAhBN,OAAS,MAAAC,MAAU,sBAOnB,MAAMC,EAAWC,GAEbH,EAAC,OACC,KAAK,OACL,QAAQ,YACR,MAAM,6BACN,MAAM,OACN,UAAWC,EAAG,kBAAmBE,EAAM,SAAS,EAEhD,SAAAH,EAAC,QACC,EAAE,yFACF,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\n\nexport interface SpinnerProps {\n className?: string\n}\n\n// eslint-disable-next-line no-unused-vars\nconst Spinner = (props: SpinnerProps) => {\n return (\n <svg\n fill=\"none\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1rem\"\n className={cn('ai-animate-spin', props.className)}\n >\n <path\n d=\"M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n\nexport default Spinner\n"],
|
|
5
|
+
"mappings": "AAgBM,cAAAA,MAAA,oBAhBN,OAAS,MAAAC,MAAU,sBAOnB,MAAMC,EAAWC,GAEbH,EAAC,OACC,KAAK,OACL,QAAQ,YACR,MAAM,6BACN,MAAM,OACN,UAAWC,EAAG,kBAAmBE,EAAM,SAAS,EAEhD,SAAAH,EAAC,QACC,EAAE,yFACF,YAAY,IACZ,cAAc,QAChB,EACF,EAIJ,IAAOI,EAAQF",
|
|
6
6
|
"names": ["jsx", "cn", "Spinner", "props", "spinner_default"]
|
|
7
7
|
}
|
|
@@ -25,7 +25,7 @@ declare const meta: {
|
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
weight: {
|
|
29
29
|
control: {
|
|
30
30
|
type: "select";
|
|
31
31
|
};
|
|
@@ -72,7 +72,7 @@ declare const meta: {
|
|
|
72
72
|
args: {
|
|
73
73
|
as: "h1";
|
|
74
74
|
size: "none";
|
|
75
|
-
|
|
75
|
+
weight: "normal";
|
|
76
76
|
align: "left";
|
|
77
77
|
};
|
|
78
78
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as a,jsx as o,jsxs as r}from"react/jsx-runtime";import{Heading as e}from"../components/index.js";import"react";const t={title:"Typography/Heading",component:e,parameters:{layout:"padded",docs:{description:{component:"Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5,6,7,8,9],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8",table:{defaultValue:{summary:"none"}}},
|
|
1
|
+
import{Fragment as a,jsx as o,jsxs as r}from"react/jsx-runtime";import{Heading as e}from"../components/index.js";import"react";const t={title:"Typography/Heading",component:e,parameters:{layout:"padded",docs:{description:{component:"Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5,6,7,8,9],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},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:"none",weight:"normal",align:"left"}};var l=t;const d={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},p={render:()=>r(a,{children:[o(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:3,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:4,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:5,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:6,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:7,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:8,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:9,children:"The quick brown fox jumps over the lazy dog."})]})};export{p as All,d as Default,l as default};
|
|
2
2
|
//# 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, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n
|
|
5
|
-
"mappings": "AAuFI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBArFJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,qJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAC,EAC3C,YAAa,6LACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,
|
|
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, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\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: 'none',\n weight: 'normal',\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 },\n}\n\nexport const All: Story = {\n render: () => (\n <>\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 <Heading size={6}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={7}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={8}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={9}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "AAuFI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBArFJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,qJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAC,EAC3C,YAAa,6LACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,EAC7C,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,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,OACN,OAAQ,SACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAAF,EAAA,CACE,UAAAC,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,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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Heading", "meta", "heading_stories_default", "Default", "All"]
|
|
7
7
|
}
|
|
@@ -25,7 +25,7 @@ declare const meta: {
|
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
weight: {
|
|
29
29
|
control: {
|
|
30
30
|
type: "select";
|
|
31
31
|
};
|
|
@@ -64,6 +64,13 @@ declare const meta: {
|
|
|
64
64
|
};
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
+
lineHeights: {
|
|
68
|
+
control: {
|
|
69
|
+
type: "select";
|
|
70
|
+
};
|
|
71
|
+
description: string;
|
|
72
|
+
options: string[];
|
|
73
|
+
};
|
|
67
74
|
html: {
|
|
68
75
|
type: "string";
|
|
69
76
|
description: string;
|
|
@@ -71,8 +78,9 @@ declare const meta: {
|
|
|
71
78
|
};
|
|
72
79
|
args: {
|
|
73
80
|
size: "none";
|
|
74
|
-
|
|
81
|
+
weight: "normal";
|
|
75
82
|
align: "left";
|
|
83
|
+
lineHeights: "normal";
|
|
76
84
|
html: string;
|
|
77
85
|
as: "p";
|
|
78
86
|
};
|
|
@@ -81,5 +89,6 @@ export default meta;
|
|
|
81
89
|
type Story = StoryObj<typeof meta>;
|
|
82
90
|
export declare const Default: Story;
|
|
83
91
|
export declare const Sizes: Story;
|
|
84
|
-
export declare const
|
|
92
|
+
export declare const weight: Story;
|
|
93
|
+
export declare const LineHeights: Story;
|
|
85
94
|
export declare const Html: Story;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Text as e}from"../components/index.js";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"padded",docs:{description:{component:"\u6587\u672C\u7EC4\u4EF6, \u7B80\u5355\u5C01\u88C5\u4E86\u5E38\u7528\u7684\u6837\u5F0F\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9."}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8",options:["none",1,2,3,4,5,6,7,8,9],table:{defaultValue:{summary:"none"}}},
|
|
1
|
+
import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Text as e}from"../components/index.js";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"padded",docs:{description:{component:"\u6587\u672C\u7EC4\u4EF6, \u7B80\u5355\u5C01\u88C5\u4E86\u5E38\u7528\u7684\u6837\u5F0F\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9."}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8",options:["none",1,2,3,4,5,6,7,8,9],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},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"}}},lineHeights:{control:{type:"select"},description:"\u5B57\u4F53\u884C\u9AD8\uFF0Ctight\u662F1.2\u3001normal\u662F1.4\u3001loose\u662F1.6",options:["tight","normal","loose"]},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:"none",weight:"normal",align:"left",lineHeights:"normal",html:"",as:"p"}};var s=r;const a={args:{children:" The quick brown fox jumps over the lazy dog.",size:"none",weight:"normal"}},p={render(){return t("div",{className:"ai-flex ai-flex-col",children:[o(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:3,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:4,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:5,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:6,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:7,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:8,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:9,children:"The quick brown fox jumps over the lazy dog."})]})}},h={render(){return t("div",{className:"ai-flex ai-flex-col",children:[o(e,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},u={render(){return t("div",{className:"ai-flex ai-flex-col",children:[o(e,{lineHeights:"tight",children:"The quick brown fox jumps over the lazy dog."}),o(e,{lineHeights:"normal",children:"The quick brown fox jumps over the lazy dog."}),o(e,{lineHeights:"loose",children:"The quick brown fox jumps over the lazy dog."})]})}},c={render(){return o(e,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
2
2
|
to right,
|
|
3
3
|
#00ff00, /* \u7EFF\u8272 */
|
|
4
4
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -6,5 +6,5 @@ import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Text as e}from"../compo
|
|
|
6
6
|
#0099ff, /* \u6D45\u84DD\u8272 */
|
|
7
7
|
#8000ff, /* \u7D2B\u8272 */
|
|
8
8
|
#ff00ff /* \u7C89\u8272 */
|
|
9
|
-
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{
|
|
9
|
+
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{a as Default,c as Html,u as LineHeights,p as Sizes,s as default,h as weight};
|
|
10
10
|
//# 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, \u7B80\u5355\u5C01\u88C5\u4E86\u5E38\u7528\u7684\u6837\u5F0F\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8',\n options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "
|
|
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, \u7B80\u5355\u5C01\u88C5\u4E86\u5E38\u7528\u7684\u6837\u5F0F\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anone\uFF0C\u6D4F\u89C8\u5668\u9ED8\u8BA4\u5927\u5C0F\u548C\u884C\u9AD8\uFF0C1\uFF5E9\u9884\u8BBE\u5B57\u4F53\u5927\u5C0F\u548C\u884C\u9AD8',\n options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\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 lineHeights: {\n control: {\n type: 'select',\n },\n description: '\u5B57\u4F53\u884C\u9AD8\uFF0Ctight\u662F1.2\u3001normal\u662F1.4\u3001loose\u662F1.6',\n options: ['tight', 'normal', 'loose'],\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 'none',\n weight: 'normal',\n align: 'left',\n lineHeights: 'normal',\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: 'none',\n weight: 'normal',\n },\n}\n\nexport const Sizes: Story = {\n render() {\n return (\n <div className=\"ai-flex ai-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 <Text size={5}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={6}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={7}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={8}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={9}>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=\"ai-flex ai-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=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const LineHeights: Story = {\n render() {\n return (\n <div className=\"ai-flex ai-flex-col\">\n <Text lineHeights=\"tight\">The quick brown fox jumps over the lazy dog.</Text>\n <Text lineHeights=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text lineHeights=\"loose\">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 <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 )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "weight", "LineHeights", "Html"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -17,13 +17,13 @@ const buttonVariants = cva(
|
|
|
17
17
|
variant: {
|
|
18
18
|
primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',
|
|
19
19
|
secondary:
|
|
20
|
-
'ai-bg-btn-secondary
|
|
20
|
+
'ai-bg-btn-secondary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid',
|
|
21
21
|
link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
|
|
22
22
|
ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
|
|
23
23
|
},
|
|
24
24
|
size: {
|
|
25
25
|
sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',
|
|
26
|
-
base: 'ai-h-10 ai-px-
|
|
26
|
+
base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',
|
|
27
27
|
lg: 'ai-h-11 ai-px-8 ai-text-[16px]',
|
|
28
28
|
icon: 'ai-size-10 ai-rounded-full',
|
|
29
29
|
},
|
|
@@ -34,7 +34,7 @@ const buttonVariants = cva(
|
|
|
34
34
|
},
|
|
35
35
|
state: {
|
|
36
36
|
default: '',
|
|
37
|
-
disabled: '
|
|
37
|
+
disabled: '',
|
|
38
38
|
loading: '',
|
|
39
39
|
},
|
|
40
40
|
},
|
|
@@ -60,7 +60,7 @@ const buttonVariants = cva(
|
|
|
60
60
|
variant: 'secondary',
|
|
61
61
|
state: 'loading',
|
|
62
62
|
class:
|
|
63
|
-
'ai-bg-btn-secondary
|
|
63
|
+
'ai-bg-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
variant: 'primary',
|
|
@@ -70,8 +70,7 @@ const buttonVariants = cva(
|
|
|
70
70
|
{
|
|
71
71
|
variant: 'secondary',
|
|
72
72
|
state: 'disabled',
|
|
73
|
-
class:
|
|
74
|
-
'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground disabled:ai-border-btn-secondary-disabled-borderColor',
|
|
73
|
+
class: 'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
|
|
75
74
|
},
|
|
76
75
|
],
|
|
77
76
|
defaultVariants: {
|
|
@@ -87,7 +86,7 @@ const loadingSvgVariants = cva('', {
|
|
|
87
86
|
variants: {
|
|
88
87
|
variant: {
|
|
89
88
|
primary: 'ai-stroke-btn-primary-foreground',
|
|
90
|
-
secondary: 'ai-stroke-btn-secondary',
|
|
89
|
+
secondary: 'ai-stroke-btn-secondary-foreground',
|
|
91
90
|
link: 'ai-stroke-primary',
|
|
92
91
|
ghost: 'ai-stroke-primary',
|
|
93
92
|
},
|
|
@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot'
|
|
|
3
3
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
4
4
|
import React from 'react'
|
|
5
5
|
|
|
6
|
-
const headingVariants = cva('', {
|
|
6
|
+
const headingVariants = cva('ai-leading-tight ai-tracking', {
|
|
7
7
|
variants: {
|
|
8
8
|
size: {
|
|
9
9
|
none: '',
|
|
@@ -17,7 +17,7 @@ const headingVariants = cva('', {
|
|
|
17
17
|
8: 'ai-text-4xl',
|
|
18
18
|
9: 'ai-text-5xl',
|
|
19
19
|
},
|
|
20
|
-
|
|
20
|
+
weight: {
|
|
21
21
|
light: 'ai-font-light',
|
|
22
22
|
normal: 'ai-font-normal',
|
|
23
23
|
medium: 'ai-font-medium',
|
|
@@ -31,7 +31,7 @@ const headingVariants = cva('', {
|
|
|
31
31
|
},
|
|
32
32
|
defaultVariants: {
|
|
33
33
|
size: 'none',
|
|
34
|
-
|
|
34
|
+
weight: 'normal',
|
|
35
35
|
},
|
|
36
36
|
})
|
|
37
37
|
|
|
@@ -45,7 +45,7 @@ interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProp
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
|
|
48
|
-
const { children, className, size, align,
|
|
48
|
+
const { children, className, size, align, weight, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
|
|
49
49
|
const htmlContentProps = html
|
|
50
50
|
? {
|
|
51
51
|
dangerouslySetInnerHTML: { __html: html },
|
|
@@ -66,7 +66,7 @@ const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwarded
|
|
|
66
66
|
className={cn(
|
|
67
67
|
headingVariants({
|
|
68
68
|
size,
|
|
69
|
-
|
|
69
|
+
weight,
|
|
70
70
|
align,
|
|
71
71
|
}),
|
|
72
72
|
className
|
package/src/components/text.tsx
CHANGED
|
@@ -4,7 +4,7 @@ import { cn } from '../helpers/index.js'
|
|
|
4
4
|
import { type VariantProps, cva } from 'class-variance-authority'
|
|
5
5
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
|
|
6
6
|
|
|
7
|
-
const textVariants = cva('', {
|
|
7
|
+
const textVariants = cva('ai-tracking', {
|
|
8
8
|
variants: {
|
|
9
9
|
size: {
|
|
10
10
|
none: '',
|
|
@@ -18,12 +18,18 @@ const textVariants = cva('', {
|
|
|
18
18
|
8: 'ai-text-4xl',
|
|
19
19
|
9: 'ai-text-5xl',
|
|
20
20
|
},
|
|
21
|
-
|
|
21
|
+
weight: {
|
|
22
22
|
light: 'ai-font-light',
|
|
23
23
|
normal: 'ai-font-normal',
|
|
24
24
|
medium: 'ai-font-medium',
|
|
25
|
+
semibold: 'ai-font-semibold',
|
|
25
26
|
bold: 'ai-font-bold',
|
|
26
27
|
},
|
|
28
|
+
lineHeights: {
|
|
29
|
+
tight: 'ai-leading-tight',
|
|
30
|
+
normal: 'ai-leading-normal',
|
|
31
|
+
loose: 'ai-leading-loose',
|
|
32
|
+
},
|
|
27
33
|
align: {
|
|
28
34
|
left: 'ai-text-left',
|
|
29
35
|
center: 'ai-text-center',
|
|
@@ -32,7 +38,7 @@ const textVariants = cva('', {
|
|
|
32
38
|
},
|
|
33
39
|
defaultVariants: {
|
|
34
40
|
size: 'none',
|
|
35
|
-
|
|
41
|
+
weight: 'normal',
|
|
36
42
|
},
|
|
37
43
|
})
|
|
38
44
|
|
|
@@ -55,8 +61,9 @@ type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProp
|
|
|
55
61
|
const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
|
|
56
62
|
const {
|
|
57
63
|
children,
|
|
64
|
+
lineHeights,
|
|
58
65
|
size = 'none',
|
|
59
|
-
|
|
66
|
+
weight,
|
|
60
67
|
align,
|
|
61
68
|
className,
|
|
62
69
|
asChild,
|
|
@@ -87,8 +94,9 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
|
|
|
87
94
|
className={cn(
|
|
88
95
|
textVariants({
|
|
89
96
|
size,
|
|
90
|
-
|
|
97
|
+
weight,
|
|
91
98
|
align,
|
|
99
|
+
lineHeights,
|
|
92
100
|
}),
|
|
93
101
|
className
|
|
94
102
|
)}
|
package/src/icons/spinner.tsx
CHANGED
|
@@ -26,7 +26,7 @@ const meta = {
|
|
|
26
26
|
defaultValue: { summary: 'none' },
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
|
-
|
|
29
|
+
weight: {
|
|
30
30
|
control: {
|
|
31
31
|
type: 'select',
|
|
32
32
|
},
|
|
@@ -67,7 +67,7 @@ const meta = {
|
|
|
67
67
|
args: {
|
|
68
68
|
as: 'h1',
|
|
69
69
|
size: 'none',
|
|
70
|
-
|
|
70
|
+
weight: 'normal',
|
|
71
71
|
align: 'left',
|
|
72
72
|
},
|
|
73
73
|
} satisfies Meta<typeof Heading>
|
|
@@ -26,7 +26,7 @@ const meta = {
|
|
|
26
26
|
defaultValue: { summary: 'none' },
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
|
-
|
|
29
|
+
weight: {
|
|
30
30
|
control: {
|
|
31
31
|
type: 'select',
|
|
32
32
|
},
|
|
@@ -59,6 +59,13 @@ const meta = {
|
|
|
59
59
|
defaultValue: { summary: 'span' },
|
|
60
60
|
},
|
|
61
61
|
},
|
|
62
|
+
lineHeights: {
|
|
63
|
+
control: {
|
|
64
|
+
type: 'select',
|
|
65
|
+
},
|
|
66
|
+
description: '字体行高，tight是1.2、normal是1.4、loose是1.6',
|
|
67
|
+
options: ['tight', 'normal', 'loose'],
|
|
68
|
+
},
|
|
62
69
|
html: {
|
|
63
70
|
type: 'string',
|
|
64
71
|
description: '相当于 dangerouslySetInnerHTML',
|
|
@@ -66,8 +73,9 @@ const meta = {
|
|
|
66
73
|
},
|
|
67
74
|
args: {
|
|
68
75
|
size: 'none',
|
|
69
|
-
|
|
76
|
+
weight: 'normal',
|
|
70
77
|
align: 'left',
|
|
78
|
+
lineHeights: 'normal',
|
|
71
79
|
html: '',
|
|
72
80
|
as: 'p',
|
|
73
81
|
},
|
|
@@ -80,7 +88,7 @@ export const Default: Story = {
|
|
|
80
88
|
args: {
|
|
81
89
|
children: ' The quick brown fox jumps over the lazy dog.',
|
|
82
90
|
size: 'none',
|
|
83
|
-
|
|
91
|
+
weight: 'normal',
|
|
84
92
|
},
|
|
85
93
|
}
|
|
86
94
|
|
|
@@ -102,14 +110,26 @@ export const Sizes: Story = {
|
|
|
102
110
|
},
|
|
103
111
|
}
|
|
104
112
|
|
|
105
|
-
export const
|
|
113
|
+
export const weight: Story = {
|
|
114
|
+
render() {
|
|
115
|
+
return (
|
|
116
|
+
<div className="ai-flex ai-flex-col">
|
|
117
|
+
<Text weight="light">The quick brown fox jumps over the lazy dog.</Text>
|
|
118
|
+
<Text weight="normal">The quick brown fox jumps over the lazy dog.</Text>
|
|
119
|
+
<Text weight="medium">The quick brown fox jumps over the lazy dog.</Text>
|
|
120
|
+
<Text weight="bold">The quick brown fox jumps over the lazy dog.</Text>
|
|
121
|
+
</div>
|
|
122
|
+
)
|
|
123
|
+
},
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
export const LineHeights: Story = {
|
|
106
127
|
render() {
|
|
107
128
|
return (
|
|
108
129
|
<div className="ai-flex ai-flex-col">
|
|
109
|
-
<Text
|
|
110
|
-
<Text
|
|
111
|
-
<Text
|
|
112
|
-
<Text weights="bold">The quick brown fox jumps over the lazy dog.</Text>
|
|
130
|
+
<Text lineHeights="tight">The quick brown fox jumps over the lazy dog.</Text>
|
|
131
|
+
<Text lineHeights="normal">The quick brown fox jumps over the lazy dog.</Text>
|
|
132
|
+
<Text lineHeights="loose">The quick brown fox jumps over the lazy dog.</Text>
|
|
113
133
|
</div>
|
|
114
134
|
)
|
|
115
135
|
},
|
package/src/styles/global.css
CHANGED
|
@@ -64,25 +64,26 @@
|
|
|
64
64
|
--masks-color-2: hsla(0, 0%, 0%, 0.85);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
|
|
68
67
|
:root[data-brand-theme='anker'] {
|
|
69
|
-
--btn-bg-color: #
|
|
68
|
+
--btn-bg-color: #00befa;
|
|
70
69
|
--btn-text-color: #ffffff;
|
|
71
|
-
--btn-bg-active-color: #
|
|
72
|
-
|
|
73
|
-
--btn-bg-disabled-color: rgba(29,62,79,0.7);
|
|
70
|
+
--btn-bg-active-color: #00aaff;
|
|
71
|
+
--btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
|
|
74
72
|
|
|
75
73
|
--btn-bg-secondary-color: #ffffff;
|
|
76
|
-
--btn-text-secondary-color: #
|
|
77
|
-
--btn-bg-secondary-active-color: #
|
|
78
|
-
--btn-bg-secondary-disabled-color: rgba(221,221,221,0.7);
|
|
79
|
-
--btn-border-secondary-border-color
|
|
80
|
-
|
|
81
|
-
--btn-radius: 9999px;
|
|
74
|
+
--btn-text-secondary-color: #1d1d1f;
|
|
75
|
+
--btn-bg-secondary-active-color: #6e6e73;
|
|
76
|
+
--btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
|
|
77
|
+
--btn-border-secondary-border-color: #acacac;
|
|
82
78
|
|
|
83
79
|
--btn-radius: 0;
|
|
84
|
-
|
|
80
|
+
|
|
85
81
|
--radius: 0em;
|
|
82
|
+
|
|
83
|
+
--letter-spacing-normal: -0.02em;
|
|
84
|
+
--line-height-tight: 1.2;
|
|
85
|
+
--line-height-normal: 1.4;
|
|
86
|
+
--line-height-loose: 1.6;
|
|
86
87
|
}
|
|
87
88
|
|
|
88
89
|
:root[data-brand-theme='eufy'] {
|
|
@@ -198,6 +199,3 @@
|
|
|
198
199
|
|
|
199
200
|
--brand-color-1: #88f387;
|
|
200
201
|
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|