@anker-in/headless-ui 0.0.12 → 0.0.13

package/dist/esm/stories/radio.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/radio.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react/*'\nimport { RadioGroup, RadioGroupItem } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Radio',\n  component: RadioGroup,\n  // subcomponents: { RadioGroupItem },\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component:\n          '\u5355\u9009\u6846, \u57FA\u4E8E@radix-ui/react-radio-group https://www.radix-ui.com/primitives/docs/components/radio-group',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg'],\n      description: '\u5C3A\u5BF8',\n      table: {\n        defaultValue: { summary: 'base' },\n      },\n    },\n  },\n  args: {\n    size: 'base',\n  },\n} satisfies Meta<typeof RadioGroup>\n\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\nexport const Default: Story = {\n  args: {\n    size: 'base',\n    children: (\n      <>\n        <div className=\"ai-flex ai-items-center ai-space-x-2\">\n          <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n          <label htmlFor=\"option-one\">Option One</label>\n        </div>\n        <div className=\"ai-flex ai-items-center ai-space-x-2\">\n          <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n          <label htmlFor=\"option-two\">Option Two</label>\n        </div>\n      </>\n    ),\n  },\n}\n"],
-  "mappings": "AA0CM,mBAAAA,EAEI,OAAAC,EADF,QAAAC,MADF,oBAzCN,OAAS,cAAAC,EAAY,kBAAAC,MAAsB,sBAC3C,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWF,EAEX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,6HACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,IAAI,EAC5B,YAAa,eACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,CACF,EACA,KAAM,CACJ,KAAM,MACR,CACF,EAEA,IAAOG,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,OACN,SACEL,EAAAF,EAAA,CACE,UAAAE,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACG,EAAA,CAAe,MAAM,aAAa,GAAG,aAAa,EACnDH,EAAC,SAAM,QAAQ,aAAa,sBAAU,GACxC,EACAC,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACG,EAAA,CAAe,MAAM,aAAa,GAAG,aAAa,EACnDH,EAAC,SAAM,QAAQ,aAAa,sBAAU,GACxC,GACF,CAEJ,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react/*'\nimport { RadioGroup, RadioGroupItem } from '../components/index'\nimport React, { type ComponentType } from 'react'\n\nconst meta = {\n  title: 'Components/RadioGroup',\n  component: RadioGroup,\n  subcomponents: { RadioGroupItem: RadioGroupItem as ComponentType<unknown> },\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component:\n          '\u5355\u9009\u6846, \u57FA\u4E8E@radix-ui/react-radio-group https://www.radix-ui.com/primitives/docs/components/radio-group',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg'],\n      description: '\u5C3A\u5BF8',\n      table: {\n        defaultValue: { summary: 'base' },\n      },\n    },\n  },\n  args: {\n    size: 'base',\n  },\n} satisfies Meta<typeof RadioGroup>\n\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\nexport const Default: Story = {\n  args: {\n    size: 'base',\n    children: (\n      <>\n        <div className=\"ai-flex ai-items-center ai-space-x-2\">\n          <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n          <label htmlFor=\"option-one\">Option One</label>\n        </div>\n        <div className=\"ai-flex ai-items-center ai-space-x-2\">\n          <RadioGroupItem value=\"option-two\" id=\"option-two\" />\n          <label htmlFor=\"option-two\">Option Two</label>\n        </div>\n      </>\n    ),\n  },\n}\n"],
+  "mappings": "AA0CM,mBAAAA,EAEI,OAAAC,EADF,QAAAC,MADF,oBAzCN,OAAS,cAAAC,EAAY,kBAAAC,MAAsB,sBAC3C,MAA0C,QAE1C,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWF,EACX,cAAe,CAAE,eAAgBC,CAAyC,EAC1E,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,6HACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,IAAI,EAC5B,YAAa,eACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,CACF,EACA,KAAM,CACJ,KAAM,MACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,OACN,SACEL,EAAAF,EAAA,CACE,UAAAE,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACG,EAAA,CAAe,MAAM,aAAa,GAAG,aAAa,EACnDH,EAAC,SAAM,QAAQ,aAAa,sBAAU,GACxC,EACAC,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACG,EAAA,CAAe,MAAM,aAAa,GAAG,aAAa,EACnDH,EAAC,SAAM,QAAQ,aAAa,sBAAU,GACxC,GACF,CAEJ,CACF",
   "names": ["Fragment", "jsx", "jsxs", "RadioGroup", "RadioGroupItem", "meta", "radio_stories_default", "Default"]
 }

package/dist/esm/stories/text.stories.d.ts

@@ -17,7 +17,8 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: number[];
+            description: string;
+            options: (string | number)[];
             table: {
                 defaultValue: {
                     summary: string;
@@ -36,7 +37,9 @@ declare const meta: {
             };
         };
         color: {
-            control: "color";
+            control: {
+                type: "color";
+            };
         };
         as: {
             control: {
@@ -56,7 +59,7 @@ declare const meta: {
         };
     };
     args: {
-        size: 3;
+        size: "none";
         weights: "normal";
         html: string;
     };

package/dist/esm/stories/text.stories.js

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Text as e}from"../components/index";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"centered",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"},options:[1,2,3,4,5,6,7,8,9],table:{defaultValue:{summary:"3"}}},weights:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},color:{control:"color"},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weights:"normal",html:""}};var l=r;const n={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weights:"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."})]})}},u={render(){return t("div",{className:"ai-flex ai-flex-col",children:[o(e,{weights:"light",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"normal",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"medium",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"bold",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(
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Text as e}from"../components/index";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"centered",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"}}},weights:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:"none",weights:"normal",html:""}};var a=r;const l={args:{children:" The quick brown fox jumps over the lazy dog.",size:"none",weights:"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."})]})}},u={render(){return t("div",{className:"ai-flex ai-flex-col",children:[o(e,{weights:"light",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"normal",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"medium",children:"The quick brown fox jumps over the lazy dog."}),o(e,{weights:"bold",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(
       to right, 
       #00ff00,   /* \u7EFF\u8272 */
       #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
       #0099ff,   /* \u6D45\u84DD\u8272 */
       #8000ff,   /* \u7D2B\u8272 */
       #ff00ff    /* \u7C89\u8272 */
-    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{n as Default,c as Html,p as Sizes,u as Weights,l as default};
+    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{l as Default,c as Html,p as Sizes,u as Weights,a as default};
 //# sourceMappingURL=text.stories.js.map

package/dist/esm/stories/text.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/text.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'centered',\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      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],\n      table: {\n        defaultValue: { summary: '3' },\n      },\n    },\n    weights: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    color: {\n      control: 'color',\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      description: 'html \u6807\u7B7E\u7C7B\u578B',\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    weights: 'normal',\n    html: '',\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    weights: '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 Weights: Story = {\n  render() {\n    return (\n      <div className=\"ai-flex ai-flex-col\">\n        <Text weights=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const Html: Story = {\n  render() {\n    return (\n      <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"],
-  "mappings": "AA2EM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAzEN,OAAS,QAAAC,MAAY,sBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,2JACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAC,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,EAC7C,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,OACX,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,gCACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,EACN,QAAS,SACT,KAAM,EACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,QAAS,QACX,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAiB,CAC5B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACE,EAAA,CAAK,QAAQ,QAAQ,wDAA4C,EAClEF,EAACE,EAAA,CAAK,QAAQ,SAAS,wDAA4C,EACnEF,EAACE,EAAA,CAAK,QAAQ,SAAS,wDAA4C,EACnEF,EAACE,EAAA,CAAK,QAAQ,OAAO,wDAA4C,GACnE,CAEJ,CACF,EAEaM,EAAc,CACzB,QAAS,CACP,OACER,EAACE,EAAA,CACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'centered',\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    weights: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\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',\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: 'none',\n    weights: 'normal',\n    html: '',\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    weights: '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 Weights: Story = {\n  render() {\n    return (\n      <div className=\"ai-flex ai-flex-col\">\n        <Text weights=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weights=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const Html: Story = {\n  render() {\n    return (\n      <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"],
+  "mappings": "AA8EM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5EN,OAAS,QAAAC,MAAY,sBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,2JACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,6LACb,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAC,EAC3C,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,QAAS,CACP,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,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,gCACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,OACN,QAAS,SACT,KAAM,EACR,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,OACN,QAAS,QACX,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAiB,CAC5B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACE,EAAA,CAAK,QAAQ,QAAQ,wDAA4C,EAClEF,EAACE,EAAA,CAAK,QAAQ,SAAS,wDAA4C,EACnEF,EAACE,EAAA,CAAK,QAAQ,SAAS,wDAA4C,EACnEF,EAACE,EAAA,CAAK,QAAQ,OAAO,wDAA4C,GACnE,CAEJ,CACF,EAEaM,EAAc,CACzB,QAAS,CACP,OACER,EAACE,EAAA,CACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
   "names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "Weights", "Html"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/src/components/checkbox.tsx

@@ -38,7 +38,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
     </CheckboxPrimitive.Root>
   )
 )
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+Checkbox.displayName = 'Checkbox'
 
 export default Checkbox
 export type { CheckboxProps }

package/src/components/dialog.tsx

@@ -7,6 +7,7 @@ import { Cross2Icon } from '@radix-ui/react-icons'
 import { cn } from '../helpers/index.js'
 
 const Dialog = DialogPrimitive.Root
+Dialog.displayName = 'Dialog'
 
 const DialogTrigger = DialogPrimitive.Trigger
 

package/src/components/heading.tsx

@@ -6,6 +6,7 @@ import React from 'react'
 const headingVariants = cva('', {
   variants: {
     size: {
+      none: '',
       1: 'ai-text-xs',
       2: 'ai-text-sm',
       3: 'ai-text-base',
@@ -24,7 +25,7 @@ const headingVariants = cva('', {
     },
   },
   defaultVariants: {
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 })
@@ -32,7 +33,7 @@ const headingVariants = cva('', {
 type HeadingElement = React.ElementRef<'h1'>
 
 interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   asChild?: boolean
   color?: string
   html?: string

package/src/components/radio.tsx

@@ -40,7 +40,7 @@ const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.
     )
   }
 )
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+RadioGroup.displayName = 'RadioGroup'
 
 interface RadioGroupItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
@@ -67,7 +67,7 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
     )
   }
 )
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+RadioGroupItem.displayName = 'RadioGroupItem'
 
 export { RadioGroup, RadioGroupItem }
 export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -6,7 +6,7 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 type SkeletonElement = React.ElementRef<'span'>
 
 interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
-  /** 是否正在加载 */
+  /** 是否正在加载 , 默认是true*/
   loading?: boolean
 }
 

package/src/components/text.tsx

@@ -2,10 +2,12 @@ import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cn } from '../helpers/index.js'
 import { type VariantProps, cva } from 'class-variance-authority'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
 const textVariants = cva('', {
   variants: {
     size: {
+      none: '',
       1: 'ai-text-xs',
       2: 'ai-text-sm',
       3: 'ai-text-base',
@@ -24,22 +26,29 @@ const textVariants = cva('', {
     },
   },
   defaultVariants: {
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 })
 
 type TextElement = React.ElementRef<'span'>
-interface TextProps extends React.ComponentPropsWithoutRef<'span'>, VariantProps<typeof textVariants> {
-  as?: 'div' | 'label' | 'p' | 'span' | undefined
+type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>
+type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>
+type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>
+type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>
+
+interface CommonTextProps extends VariantProps<typeof textVariants> {
+  as?: 'div' | 'label' | 'p' | 'span'
   asChild?: boolean
   color?: string
   /** 相当于 dangerouslySetInnerHTML */
   html?: string
 }
 
+type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)
+
 const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const { children, size, weights, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
+  const { children, size = 'none', weights, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
 
   const htmlContentProps = html
     ? {

package/src/stories/dialog.stories.tsx

@@ -10,36 +10,65 @@ import {
   DialogTrigger,
   Input,
 } from '../components/index'
+import type { Meta, StoryObj } from '@storybook/react/*'
 
-export default { title: 'Components/Dialog' }
+const meta = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+  } as any,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '弹窗组件，基于@radix-ui/react-dialog，https://www.radix-ui.com/primitives/docs/components/dialog ',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dialog>
 
-export const Default = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <button>Edit Profile</button>
-    </DialogTrigger>
-    <DialogContent className="sm:ai-max-w-[425px]">
-      <DialogHeader>
-        <DialogTitle>Edit profile</DialogTitle>
-        <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
-      </DialogHeader>
-      <div className="ai-grid ai-gap-4 ai-py-4">
-        <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-          <label htmlFor="name" className="ai-text-right">
-            Name
-          </label>
-          <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
-        </div>
-        <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-          <label htmlFor="username" className="ai-text-right">
-            Username
-          </label>
-          <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
-        </div>
-      </div>
-      <DialogFooter>
-        <Button type="submit">Save changes</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-)
+export default meta
+
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <DialogTrigger asChild>
+          <button>Edit Profile</button>
+        </DialogTrigger>
+        <DialogContent className="sm:ai-max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
+          </DialogHeader>
+          <div className="ai-grid ai-gap-4 ai-py-4">
+            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
+              <label htmlFor="name" className="ai-text-right">
+                Name
+              </label>
+              <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
+            </div>
+            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
+              <label htmlFor="username" className="ai-text-right">
+                Username
+              </label>
+              <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </>
+    ),
+  },
+}

package/src/stories/heading.stories.tsx

@@ -20,10 +20,10 @@ const meta = {
       control: {
         type: 'select',
       },
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-      description: '1~9',
+      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
       table: {
-        defaultValue: { summary: '3' },
+        defaultValue: { summary: 'none' },
       },
     },
     weights: {
@@ -36,7 +36,9 @@ const meta = {
       },
     },
     color: {
-      control: 'color',
+      control: {
+        type: 'color',
+      },
     },
     as: {
       control: {
@@ -55,7 +57,7 @@ const meta = {
   },
   args: {
     as: 'h1',
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 } satisfies Meta<typeof Heading>

package/src/stories/input.stories.tsx

@@ -10,6 +10,11 @@ const meta = {
   subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: 检查type , 去掉as类型转换
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: 'Input 组件, 用于输入框, 可以通过插槽插入额外的内容, 比如icon, 按钮',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {

package/src/stories/radio.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react/*'
 import { RadioGroup, RadioGroupItem } from '../components/index'
-import React from 'react'
+import React, { type ComponentType } from 'react'
 
 const meta = {
-  title: 'Components/Radio',
+  title: 'Components/RadioGroup',
   component: RadioGroup,
-  // subcomponents: { RadioGroupItem },
+  subcomponents: { RadioGroupItem: RadioGroupItem as ComponentType<unknown> },
   parameters: {
     layout: 'centered',
     docs: {

package/src/stories/text.stories.tsx

@@ -20,9 +20,10 @@ const meta = {
       control: {
         type: 'select',
       },
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
+      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
       table: {
-        defaultValue: { summary: '3' },
+        defaultValue: { summary: 'none' },
       },
     },
     weights: {
@@ -35,7 +36,9 @@ const meta = {
       },
     },
     color: {
-      control: 'color',
+      control: {
+        type: 'color',
+      },
     },
     as: {
       control: {
@@ -53,7 +56,7 @@ const meta = {
     },
   },
   args: {
-    size: 3,
+    size: 'none',
     weights: 'normal',
     html: '',
   },
@@ -65,7 +68,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 }