@anker-in/headless-ui 0.0.11 → 0.0.13

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

@@ -1,5 +1,39 @@
-declare const _default: {
+import type { StoryObj } from '@storybook/react/*';
+import { RadioGroup } from '../components/index';
+import React from 'react';
+declare const meta: {
     title: string;
+    component: React.ForwardRefExoticComponent<import("../components/radio").RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    subcomponents: {
+        RadioGroupItem: React.ComponentType<unknown>;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        size: "base";
+    };
 };
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Default: Story;

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as i}from"react/jsx-runtime";import{RadioGroup as a,RadioGroupItem as e}from"../components/index";import"react";var p={title:"Components/Radio"};const d=()=>o("div",{className:"ai-flex ai-h-40 ai-w-48 ai-items-center ai-justify-center",children:i(a,{defaultValue:"ai-option-one",children:[i("div",{className:"ai-flex ai-items-center ai-space-x-2",children:[o(e,{value:"option-one",id:"option-one"}),o("label",{htmlFor:"option-one",children:"Option One"})]}),i("div",{className:"ai-flex ai-items-center ai-space-x-2",children:[o(e,{value:"option-two",id:"option-two"}),o("label",{htmlFor:"option-two",children:"Option Two"})]})]})});export{d as Default,p as default};
+import{Fragment as p,jsx as o,jsxs as t}from"react/jsx-runtime";import{RadioGroup as a,RadioGroupItem as e}from"../components/index";import"react";const i={title:"Components/RadioGroup",component:a,subcomponents:{RadioGroupItem:e},parameters:{layout:"centered",docs:{description:{component:"\u5355\u9009\u6846, \u57FA\u4E8E@radix-ui/react-radio-group https://www.radix-ui.com/primitives/docs/components/radio-group"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","base","lg"],description:"\u5C3A\u5BF8",table:{defaultValue:{summary:"base"}}}},args:{size:"base"}};var l=i;const m={args:{size:"base",children:t(p,{children:[t("div",{className:"ai-flex ai-items-center ai-space-x-2",children:[o(e,{value:"option-one",id:"option-one"}),o("label",{htmlFor:"option-one",children:"Option One"})]}),t("div",{className:"ai-flex ai-items-center ai-space-x-2",children:[o(e,{value:"option-two",id:"option-two"}),o("label",{htmlFor:"option-two",children:"Option Two"})]})]})}};export{m as Default,l as default};
 //# sourceMappingURL=radio.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/radio.stories.tsx"],
-  "sourcesContent": ["import { RadioGroup, RadioGroupItem } from '../components/index'\nimport React from 'react'\n\nexport default { title: 'Components/Radio' }\n\nexport const Default = () => (\n  <div className=\"ai-flex ai-h-40 ai-w-48 ai-items-center ai-justify-center\">\n    <RadioGroup defaultValue=\"ai-option-one\">\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    </RadioGroup>\n  </div>\n)\n"],
-  "mappings": "AAQM,OACE,OAAAA,EADF,QAAAC,MAAA,oBARN,OAAS,cAAAC,EAAY,kBAAAC,MAAsB,sBAC3C,MAAkB,QAElB,IAAOC,EAAQ,CAAE,MAAO,kBAAmB,EAEpC,MAAMC,EAAU,IACrBL,EAAC,OAAI,UAAU,4DACb,SAAAC,EAACC,EAAA,CAAW,aAAa,gBACvB,UAAAD,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,EACF",
-  "names": ["jsx", "jsxs", "RadioGroup", "RadioGroupItem", "radio_stories_default", "Default"]
+  "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/skeleton.stories.d.ts

@@ -1,14 +1,20 @@
 import type { StoryObj } from '@storybook/react';
-import { Skeleton } from '../components/index';
+import React from 'react';
 declare const meta: {
     title: string;
-    component: typeof Skeleton;
+    component: React.ForwardRefExoticComponent<import("../components/skeleton").SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Example: Story;
+export declare const Multiple: Story;
+export declare const WithText: Story;

package/dist/esm/stories/skeleton.stories.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Skeleton as e}from"../components/index";import"react";const o={title:"Components/Skeleton",component:e,parameters:{layout:"centered"},tags:["autodocs"]};var l=o;const m={},n={render(){return a("div",{className:"ai-flex ai-flex-col ai-items-center ai-justify-center",children:[a("div",{className:"ai-flex ai-w-full ai-justify-between",children:[t(e,{className:"ai-size-12 ai-rounded-full"}),t(e,{className:"ai-h-12 ai-w-[70%] "})]}),t(e,{className:"ai-mt-2 ai-h-40 ai-w-[200px]"})]})}};export{m as Default,n as Example,l as default};
+import{Fragment as i,jsx as e,jsxs as o}from"react/jsx-runtime";import{Skeleton as a}from"../components/index";import"react";const t={title:"Components/Skeleton",component:a,parameters:{layout:"centered",docs:{description:{component:"\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5F62\u72B6"}}},tags:["autodocs"]};var n=t;const c={args:{loading:!0,children:e("div",{className:"ai-h-14 ai-rounded-3xl ai-overflow-hidden ai-px-4 ai-py-4 w-full",children:"Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates driving."})}},d={render(){return o("div",{className:"ai-flex ai-flex-col ai-items-center ai-justify-center",children:[o("div",{className:"ai-flex ai-w-full ai-justify-between",children:[e(a,{className:"ai-size-12 ai-rounded-full"}),e(a,{className:"ai-h-12 ai-w-[70%] "})]}),e(a,{className:"ai-mt-2 ai-h-40 ai-w-[200px]"})]})}},p={render(){return o(i,{children:[e(a,{loading:!0,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."}),e("hr",{}),e(a,{loading:!1,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."})]})}};export{c as Default,d as Multiple,p as WithText,n as default};
 //# sourceMappingURL=skeleton.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/skeleton.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Skeleton } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Skeleton',\n  component: Skeleton,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Skeleton>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {}\n\nexport const Example: Story = {\n  render() {\n    return (\n      <div className=\"ai-flex ai-flex-col ai-items-center ai-justify-center\">\n        <div className=\"ai-flex ai-w-full ai-justify-between\">\n          <Skeleton className=\"ai-size-12 ai-rounded-full\" />\n          <Skeleton className=\"ai-h-12 ai-w-[70%] \" />\n        </div>\n        <Skeleton className=\"ai-mt-2 ai-h-40 ai-w-[200px]\" />\n      </div>\n    )\n  },\n}\n"],
-  "mappings": "AAwBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAtBR,OAAS,YAAAC,MAAgB,sBACzB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,sBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAAC,EAElBC,EAAiB,CAC5B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,wDACb,UAAAA,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACE,EAAA,CAAS,UAAU,6BAA6B,EACjDF,EAACE,EAAA,CAAS,UAAU,sBAAsB,GAC5C,EACAF,EAACE,EAAA,CAAS,UAAU,+BAA+B,GACrD,CAEJ,CACF",
-  "names": ["jsx", "jsxs", "Skeleton", "meta", "skeleton_stories_default", "Default", "Example"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Skeleton } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Skeleton',\n  component: Skeleton,\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component:\n          '\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5F62\u72B6',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Skeleton>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    loading: true,\n    children: (\n      <div className=\"ai-h-14 ai-rounded-3xl ai-overflow-hidden ai-px-4 ai-py-4 w-full\">\n        Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates\n        driving.\n      </div>\n    ),\n  },\n}\n\nexport const Multiple: Story = {\n  render() {\n    return (\n      <div className=\"ai-flex ai-flex-col ai-items-center ai-justify-center\">\n        <div className=\"ai-flex ai-w-full ai-justify-between\">\n          <Skeleton className=\"ai-size-12 ai-rounded-full\" />\n          <Skeleton className=\"ai-h-12 ai-w-[70%] \" />\n        </div>\n        <Skeleton className=\"ai-mt-2 ai-h-40 ai-w-[200px]\" />\n      </div>\n    )\n  },\n}\n\nexport const WithText: Story = {\n  render() {\n    return (\n      <>\n        <Skeleton loading={true}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n        <hr />\n        <Skeleton loading={false}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n      </>\n    )\n  },\n}\n"],
+  "mappings": "AA4BM,OAyBA,YAAAA,EAzBA,OAAAC,EAYE,QAAAC,MAZF,oBA1BN,OAAS,YAAAC,MAAgB,sBACzB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,sBACP,UAAWD,EACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,wYACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,QAAS,GACT,SACEL,EAAC,OAAI,UAAU,mEAAmE,8HAGlF,CAEJ,CACF,EAEaM,EAAkB,CAC7B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,wDACb,UAAAA,EAAC,OAAI,UAAU,uCACb,UAAAD,EAACE,EAAA,CAAS,UAAU,6BAA6B,EACjDF,EAACE,EAAA,CAAS,UAAU,sBAAsB,GAC5C,EACAF,EAACE,EAAA,CAAS,UAAU,+BAA+B,GACrD,CAEJ,CACF,EAEaK,EAAkB,CAC7B,QAAS,CACP,OACEN,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAS,QAAS,GAAM,uKAGzB,EACAF,EAAC,OAAG,EACJA,EAACE,EAAA,CAAS,QAAS,GAAO,uKAG1B,GACF,CAEJ,CACF",
+  "names": ["Fragment", "jsx", "jsxs", "Skeleton", "meta", "skeleton_stories_default", "Default", "Multiple", "WithText"]
 }

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

@@ -5,6 +5,11 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("../components/text").TextProps & React.RefAttributes<HTMLSpanElement>>;
     parameters: {
         layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
     argTypes: {
@@ -12,13 +17,41 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: number[];
+            description: string;
+            options: (string | number)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         weights: {
             control: {
                 type: "select";
             };
             options: string[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        color: {
+            control: {
+                type: "color";
+            };
+        };
+        as: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            options: string[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         html: {
             type: "string";
@@ -26,7 +59,7 @@ declare const meta: {
         };
     };
     args: {
-        size: 3;
+        size: "none";
         weights: "normal";
         html: string;
     };
@@ -34,4 +67,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const All: Story;
+export declare const Sizes: Story;
+export declare const Weights: Story;
+export declare const Html: Story;

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

@@ -1,2 +1,10 @@
-import{Fragment as n,jsx as o}from"react/jsx-runtime";import{Text as e}from"../components/index";import"react";const s={title:"Components/Text",component:e,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:[1,2,3,4,5,6,7,8,9]},weights:{control:{type:"select"},options:["light","normal","medium","bold"]},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weights:"normal",html:""}};var m=s;const y={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weights:"normal"}},a=new Array(9).fill(0).map((t,r)=>r+1),c={render(){return o(n,{children:a.map(t=>o(e,{as:"p",size:t,children:"The quick brown fox jumps over the lazy dog."},t))})}};export{c as All,y as Default,m as default};
+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 */
+      #00ffff,   /* \u9752\u8272 */
+      #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{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: 'Components/Text',\n  component: Text,\n  parameters: {\n    layout: 'centered',\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    },\n    weights: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'bold'],\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\nconst sizes = new Array(9).fill(0).map((_, i) => i + 1)\nexport const All: Story = {\n  render() {\n    return (\n      <>\n        {sizes.map(size => (\n          <Text as=\"p\" key={size} size={size as any}>\n            The quick brown fox jumps over the lazy dog.\n          </Text>\n        ))}\n      </>\n    )\n  },\n}\n"],
-  "mappings": "AAoDM,mBAAAA,EAEI,OAAAC,MAFJ,oBAlDN,OAAS,QAAAC,MAAY,sBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,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,CACrC,EACA,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,CAC/C,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,EAEMC,EAAQ,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,EAAGC,IAAMA,EAAI,CAAC,EACzCC,EAAa,CACxB,QAAS,CACP,OACER,EAAAD,EAAA,CACG,SAAAM,EAAM,IAAII,GACTT,EAACC,EAAA,CAAK,GAAG,IAAe,KAAMQ,EAAa,yDAAzBA,CAElB,CACD,EACH,CAEJ,CACF",
-  "names": ["Fragment", "jsx", "Text", "meta", "text_stories_default", "Default", "sizes", "_", "i", "All", "size"]
+  "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.11",
+  "version": "0.0.13",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/src/components/checkbox.tsx

@@ -5,24 +5,40 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { CheckIcon } from '@radix-ui/react-icons'
 
 import { cn } from '../helpers/index.js'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-size-4 ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('ai-flex ai-items-center ai-justify-center ai-text-current')}>
-      <CheckIcon className="ai-size-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+const checkboxVariants = cva(
+  'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-size-5',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, size, ...props }, ref) => (
+    <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ size }), className)} {...props}>
+      <CheckboxPrimitive.Indicator
+        className={cn('ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full')}
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+)
+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

@@ -1,19 +1,74 @@
 import { cn } from '../helpers/index.js'
 import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
 import React from 'react'
 
+const headingVariants = cva('', {
+  variants: {
+    size: {
+      none: '',
+      1: 'ai-text-xs',
+      2: 'ai-text-sm',
+      3: 'ai-text-base',
+      4: 'ai-text-lg',
+      5: 'ai-text-xl',
+      6: 'ai-text-2xl',
+      7: 'ai-text-3xl',
+      8: 'ai-text-4xl',
+      9: 'ai-text-5xl',
+    },
+    weights: {
+      light: 'ai-font-light',
+      normal: 'ai-font-normal',
+      medium: 'ai-font-medium',
+      bold: 'ai-font-bold',
+    },
+  },
+  defaultVariants: {
+    size: 'none',
+    weights: 'normal',
+  },
+})
+
 type HeadingElement = React.ElementRef<'h1'>
 
-interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   asChild?: boolean
+  color?: string
+  html?: string
 }
 
 const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, asChild, as: Tag = 'h1', color, ...headingProps } = props
+  const { children, className, size, weights, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : null
+
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
   return (
-    <Slot data-accent-color={color || undefined} {...headingProps} ref={forwardedRef} className={cn('', className)}>
-      {asChild ? children : <Tag>{children}</Tag>}
+    <Slot
+      {...headingProps}
+      ref={forwardedRef}
+      className={cn(
+        headingVariants({
+          size,
+          weights,
+        }),
+        className
+      )}
+      {...htmlContentProps}
+      {...styleProps}
+    >
+      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>
   )
 })
@@ -21,3 +76,4 @@ const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwarded
 Heading.displayName = 'Heading'
 
 export { Heading }
+export type { HeadingProps }

package/src/components/index.ts

@@ -14,4 +14,5 @@ export * from './popover.js'
 export * from './radio.js'
 export * from './dialog.js'
 export * from './text.js'
+export * from './heading.js'
 export { default as Theme } from './theme.js'

package/src/components/input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
-import type { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const inputVariants = cva(

package/src/components/radio.tsx

@@ -3,36 +3,71 @@
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { CheckIcon } from '@radix-ui/react-icons'
-
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../helpers/index.js'
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-size-4 ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center">
-        <CheckIcon className="ai-text-primary ai-size-2.5 ai-fill-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
+const RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({
+  size: 'base',
 })
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+const radioGroupVariants = cva(
+  'ai-border-primary ai-text-primary ai-ring-offset-background focus-visible:ai-ring-ring ai-aspect-square ai-rounded-full ai-border focus:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'ai-size-[14px]',
+        base: 'ai-size-4',
+        lg: 'ai-size-5',
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  }
+)
+
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /** 尺寸 */
+  size?: 'sm' | 'base' | 'lg'
+}
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ className, children, size, ...props }, ref) => {
+    return (
+      <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref}>
+        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>
+      </RadioGroupPrimitive.Root>
+    )
+  }
+)
+RadioGroup.displayName = 'RadioGroup'
+
+interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof radioGroupVariants> {}
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
+  ({ className, size, ...props }, ref) => {
+    const { size: sizeFromParent } = React.useContext(RadioContext)
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          radioGroupVariants({
+            size: size ?? sizeFromParent,
+          }),
+          className
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full">
+          <CheckIcon />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    )
+  }
+)
+RadioGroupItem.displayName = 'RadioGroupItem'
 
 export { RadioGroup, RadioGroupItem }
+export type { RadioGroupProps, RadioGroupItemProps }

package/src/components/skeleton.tsx

@@ -1,10 +1,41 @@
 import * as React from 'react'
 import { cn } from '../helpers/index.js'
+import { Slot } from '@radix-ui/react-slot'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('ai-bg-skeleton ai-size-12 ai-animate-pulse', className)} {...props} />
+type SkeletonElement = React.ElementRef<'span'>
+
+interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
+  /** 是否正在加载 , 默认是true*/
+  loading?: boolean
 }
 
+const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, className, loading = true, ...skeletonProps } = props
+
+  if (!loading) return children
+  const Tag = React.isValidElement(children) ? Slot : 'span'
+
+  return (
+    <Tag
+      ref={forwardedRef}
+      className={cn(
+        `ai-bg-skeleton ai-animate-pulse empty:ai-block data-[inline-skeleton=true]:ai-leading-[0] !ai-bg-none !ai-bg-clip-border !ai-border-none !ai-shadow-none 
+        !ai-text-transparent !ai-outline-none !ai-select-none !ai-cursor-default !ai-pointer-events-none !ai-decoration-clone
+        after:!ai-invisible before:!ai-invisible [&>*]:!ai-invisible
+        `,
+        className
+      )}
+      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
+      tabIndex={-1}
+      {...skeletonProps}
+    >
+      {children}
+    </Tag>
+  )
+})
+
 Skeleton.displayName = 'Skeleton'
 
 export default Skeleton
+export type { SkeletonProps }