@anker-in/headless-ui 0.0.6 → 0.0.8

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

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

@@ -10,7 +10,7 @@ declare const meta: {
     argTypes: {
         variant: {
             control: {
-                type: string;
+                type: "select";
             };
             options: string[];
         };

package/dist/esm/stories/badge.stories.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Badge as e}from"../components/index";const a={title:"Components/Badge",component:e,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["default","destructive","outline","secondary"]}},args:{variant:"default",children:"New"}};var d=a;const i={},c={render(){return o("div",{className:"flex flex-col space-y-4",children:[t(e,{variant:"default",children:"Default"}),t(e,{variant:"secondary",children:"Secondary"}),t(e,{variant:"destructive",children:"Destructive"}),t(e,{variant:"outline",children:"Outline"})]})}};export{i as Default,c as Examples,d as default};
+//# sourceMappingURL=badge.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/badge.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Badge } from '../components/index'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Badge',\n  component: Badge,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['default', 'destructive', 'outline', 'secondary'],\n    },\n  },\n  args: {\n    variant: 'default',\n    children: 'New',\n  },\n} satisfies Meta<typeof Badge>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {}\n\nexport const Examples: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col space-y-4\">\n        <Badge variant=\"default\">Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AAmCM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAjCN,OAAS,SAAAC,MAAa,sBAGtB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,cAAe,UAAW,WAAW,CAC5D,CACF,EACA,KAAM,CACJ,QAAS,UACT,SAAU,KACZ,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAAC,EAElBC,EAAkB,CAC7B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CAAM,QAAQ,UAAU,mBAAO,EAChCF,EAACE,EAAA,CAAM,QAAQ,YAAY,qBAAS,EACpCF,EAACE,EAAA,CAAM,QAAQ,cAAc,uBAAW,EACxCF,EAACE,EAAA,CAAM,QAAQ,UAAU,mBAAO,GAClC,CAEJ,CACF",
+  "names": ["jsx", "jsxs", "Badge", "meta", "badge_stories_default", "Default", "Examples"]
+}

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import React from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("@/components/button").ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    component: React.ForwardRefExoticComponent<import("../components/button").ButtonProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };
@@ -10,13 +10,20 @@ declare const meta: {
     argTypes: {
         variant: {
             control: {
-                type: string;
+                type: "select";
             };
             options: string[];
         };
         size: {
             control: {
-                type: string;
+                type: "select";
+            };
+            options: string[];
+        };
+        hoverEffect: {
+            description: string;
+            control: {
+                type: "select";
             };
             options: string[];
         };
@@ -28,6 +35,7 @@ declare const meta: {
         asChild: false;
         disabled: false;
         loading: false;
+        hoverEffect: "none";
     };
 };
 export default meta;

package/dist/esm/stories/button.stories.js

@@ -0,0 +1,2 @@
+import{Fragment as a,jsx as t,jsxs as s}from"react/jsx-runtime";import{SearchIcon as o}from"@storybook/icons";import{Button as e}from"../components/index";const r={title:"Components/Button",component:e,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:{type:"select"},options:["primary","secondary","link","ghost"]},size:{control:{type:"select"},options:["sm","base","lg","icon"]},hoverEffect:{description:"hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548",control:{type:"select"},options:["none","slide"]}},args:{variant:"primary",size:"base",children:"Button",asChild:!1,disabled:!1,loading:!1,hoverEffect:"none"}};var p=r;const y={args:{size:"lg",children:"Primary"}},d={args:{size:"lg",variant:"secondary",children:"Secondary"}},m={args:{size:"lg",variant:"link",children:"Link"}},h={args:{size:"lg",children:s(a,{children:["WithIcon ",t(o,{className:"ml-2"})]})}},g={args:{size:"lg",asChild:!0,children:t("a",{href:"http://example.com",children:"as a a tag"})}};export{g as Aschild,m as Link,y as Primary,d as Secondary,h as WithIcon,p as default};
+//# sourceMappingURL=button.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/button.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    asChild: false,\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n"],
+  "mappings": "AAoFM,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAnFN,OAAS,cAAAC,MAAkB,mBAE3B,OAAS,UAAAC,MAAc,sBAIvB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAWD,EACX,WAAY,CAEV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,CACnD,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,CACtC,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAOE,EAAQD,EAOR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaC,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaC,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,SACER,EAAAF,EAAA,CAAE,sBACSC,EAACE,EAAA,CAAW,UAAU,OAAO,GACxC,CAEJ,CACF,EAEaQ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,SAAUV,EAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF",
+  "names": ["Fragment", "jsx", "jsxs", "SearchIcon", "Button", "meta", "button_stories_default", "Primary", "Secondary", "Link", "WithIcon", "Aschild"]
+}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/checkbox.stories.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Checkbox as t}from"../components/index";var m={title:"Components/Checkbox"};const d=()=>o("div",{className:"flex items-center space-x-2",children:[e(t,{id:"terms"}),e("label",{htmlFor:"terms",className:"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",children:"Accept terms and conditions"})]});export{d as Default,m as default};
+//# sourceMappingURL=checkbox.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/checkbox.stories.tsx"],
+  "sourcesContent": ["import { Checkbox } from '../components/index'\nimport React from 'react'\n\nexport default { title: 'Components/Checkbox' }\n\nexport const Default = () => (\n  <div className=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      htmlFor=\"terms\"\n      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n)\n"],
+  "mappings": "AAME,OACE,OAAAA,EADF,QAAAC,MAAA,oBANF,OAAS,YAAAC,MAAgB,sBAGzB,IAAOC,EAAQ,CAAE,MAAO,qBAAsB,EAEvC,MAAMC,EAAU,IACrBH,EAAC,OAAI,UAAU,8BACb,UAAAD,EAACE,EAAA,CAAS,GAAG,QAAQ,EACrBF,EAAC,SACC,QAAQ,QACR,UAAU,6FACX,uCAED,GACF",
+  "names": ["jsx", "jsxs", "Checkbox", "checkbox_stories_default", "Default"]
+}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/dialog.stories.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Button as i,Dialog as o,DialogContent as t,DialogDescription as r,DialogFooter as s,DialogHeader as g,DialogTitle as n,DialogTrigger as m,Input as l}from"../components/index";var D={title:"Components/Dialog"};const u=()=>a(o,{children:[e(m,{asChild:!0,children:e("button",{children:"Edit Profile"})}),a(t,{className:"sm:max-w-[425px]",children:[a(g,{children:[e(n,{children:"Edit profile"}),e(r,{children:"Make changes to your profile here. Click save when you're done."})]}),a("div",{className:"grid gap-4 py-4",children:[a("div",{className:"grid grid-cols-4 items-center gap-4",children:[e("label",{htmlFor:"name",className:"text-right",children:"Name"}),e(l,{id:"name",defaultValue:"Pedro Duarte",className:"col-span-3"})]}),a("div",{className:"grid grid-cols-4 items-center gap-4",children:[e("label",{htmlFor:"username",className:"text-right",children:"Username"}),e(l,{id:"username",defaultValue:"@peduarte",className:"col-span-3"})]})]}),e(s,{children:e(i,{type:"submit",children:"Save changes"})})]})]});export{u as Default,D as default};
+//# sourceMappingURL=dialog.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/dialog.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  Input,\n} from '../components/index'\n\nexport default { title: 'Components/Dialog' }\n\nexport const Default = () => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <button>Edit Profile</button>\n    </DialogTrigger>\n    <DialogContent className=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>\n      </DialogHeader>\n      <div className=\"grid gap-4 py-4\">\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <label htmlFor=\"name\" className=\"text-right\">\n            Name\n          </label>\n          <Input id=\"name\" defaultValue=\"Pedro Duarte\" className=\"col-span-3\" />\n        </div>\n        <div className=\"grid grid-cols-4 items-center gap-4\">\n          <label htmlFor=\"username\" className=\"text-right\">\n            Username\n          </label>\n          <Input id=\"username\" defaultValue=\"@peduarte\" className=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">Save changes</Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n)\n"],
+  "mappings": "AAkBM,cAAAA,EAGA,QAAAC,MAHA,oBAjBN,OACE,UAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,qBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,SAAAC,MACK,sBAEP,IAAOC,EAAQ,CAAE,MAAO,mBAAoB,EAErC,MAAMC,EAAU,IACrBX,EAACE,EAAA,CACC,UAAAH,EAACS,EAAA,CAAc,QAAO,GACpB,SAAAT,EAAC,UAAO,wBAAY,EACtB,EACAC,EAACG,EAAA,CAAc,UAAU,mBACvB,UAAAH,EAACM,EAAA,CACC,UAAAP,EAACQ,EAAA,CAAY,wBAAY,EACzBR,EAACK,EAAA,CAAkB,2EAA+D,GACpF,EACAJ,EAAC,OAAI,UAAU,kBACb,UAAAA,EAAC,OAAI,UAAU,sCACb,UAAAD,EAAC,SAAM,QAAQ,OAAO,UAAU,aAAa,gBAE7C,EACAA,EAACU,EAAA,CAAM,GAAG,OAAO,aAAa,eAAe,UAAU,aAAa,GACtE,EACAT,EAAC,OAAI,UAAU,sCACb,UAAAD,EAAC,SAAM,QAAQ,WAAW,UAAU,aAAa,oBAEjD,EACAA,EAACU,EAAA,CAAM,GAAG,WAAW,aAAa,YAAY,UAAU,aAAa,GACvE,GACF,EACAV,EAACM,EAAA,CACC,SAAAN,EAACE,EAAA,CAAO,KAAK,SAAS,wBAAY,EACpC,GACF,GACF",
+  "names": ["jsx", "jsxs", "Button", "Dialog", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogTitle", "DialogTrigger", "Input", "dialog_stories_default", "Default"]
+}

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

@@ -3,7 +3,7 @@ import type { ComponentType } from 'react';
 import React from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("@/components/input").InputProps & React.RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<import("../components/input").InputProps & React.RefAttributes<HTMLInputElement>>;
     subcomponents: {
         InputSlot: ComponentType<unknown>;
     };
@@ -14,7 +14,7 @@ declare const meta: {
     argTypes: {
         size: {
             control: {
-                type: string;
+                type: "select";
             };
             options: string[];
         };

package/dist/esm/stories/input.stories.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import{Button as r,Input as e,InputSlot as o}from"../components/index";import{SearchIcon as n}from"@storybook/icons";const p={title:"Components/Input",component:e,subcomponents:{InputSlot:o},parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","base","lg"]}},args:{size:"base"}};var m=p;const c={args:{}},i={render(){return t(e,{className:"rounded-3xl pr-0",placeholder:"Enter your email",type:"text",children:t(o,{side:"right",children:t(r,{className:"h-full rounded-none",size:"sm",children:"subscribe"})})})}},y={render(){return t(e,{type:"text",placeholder:"search in site",children:t(o,{side:"left",children:t(n,{})})})}};export{c as Default,i as WithButton,y as WithIcon,m as default};
+//# sourceMappingURL=input.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/input.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport type { ComponentType } from 'react'\nimport { Button, Input, InputSlot } from '../components/index'\nimport { SearchIcon } from '@storybook/icons'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Input',\n  component: Input,\n  subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: \u68C0\u67E5type , \u53BB\u6389as\u7C7B\u578B\u8F6C\u6362\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg'],\n    },\n  },\n  args: {\n    size: 'base',\n  },\n} satisfies Meta<typeof Input>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {},\n}\n\nexport const WithButton: Story = {\n  render() {\n    return (\n      <Input className=\"rounded-3xl pr-0\" placeholder=\"Enter your email\" type=\"text\">\n        <InputSlot side=\"right\">\n          <Button className=\"h-full rounded-none\" size=\"sm\">\n            subscribe\n          </Button>\n        </InputSlot>\n      </Input>\n    )\n  },\n}\nexport const WithIcon: Story = {\n  render() {\n    return (\n      <Input type=\"text\" placeholder=\"search in site\">\n        <InputSlot side=\"left\">\n          <SearchIcon />\n        </InputSlot>\n      </Input>\n    )\n  },\n}\n"],
+  "mappings": "AAwCU,cAAAA,MAAA,oBAtCV,OAAS,UAAAC,EAAQ,SAAAC,EAAO,aAAAC,MAAiB,sBACzC,OAAS,cAAAC,MAAkB,mBAG3B,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWH,EACX,cAAe,CAAE,UAAWC,CAAoC,EAChE,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,IAAI,CAC9B,CACF,EACA,KAAM,CACJ,KAAM,MACR,CACF,EAEA,IAAOG,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CAAC,CACT,EAEaC,EAAoB,CAC/B,QAAS,CACP,OACER,EAACE,EAAA,CAAM,UAAU,mBAAmB,YAAY,mBAAmB,KAAK,OACtE,SAAAF,EAACG,EAAA,CAAU,KAAK,QACd,SAAAH,EAACC,EAAA,CAAO,UAAU,sBAAsB,KAAK,KAAK,qBAElD,EACF,EACF,CAEJ,CACF,EACaQ,EAAkB,CAC7B,QAAS,CACP,OACET,EAACE,EAAA,CAAM,KAAK,OAAO,YAAY,iBAC7B,SAAAF,EAACG,EAAA,CAAU,KAAK,OACd,SAAAH,EAACI,EAAA,EAAW,EACd,EACF,CAEJ,CACF",
+  "names": ["jsx", "Button", "Input", "InputSlot", "SearchIcon", "meta", "input_stories_default", "Default", "WithButton", "WithIcon"]
+}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/popover.stories.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Popover as t,PopoverContent as o,PopoverTrigger as n}from"../components/index";var p={title:"Components/Popover"};const m=()=>s(t,{children:[e(n,{asChild:!0,children:e("button",{children:"Open popover"})}),e(o,{className:"w-80",children:e("div",{className:"grid gap-4",children:e("p",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})})})]});export{m as Default,p as default};
+//# sourceMappingURL=popover.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/popover.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Popover, PopoverContent, PopoverTrigger } from '../components/index'\n\nexport default { title: 'Components/Popover' }\n\nexport const Default = () => (\n  <Popover>\n    <PopoverTrigger asChild>\n      <button>Open popover</button>\n    </PopoverTrigger>\n    <PopoverContent className=\"w-80\">\n      <div className=\"grid gap-4\">\n        <p>\n          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\n          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to\n          make a type specimen book. It has survived not only five centuries, but also the leap into electronic\n          typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset\n          sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus\n          PageMaker including versions of Lorem Ipsum.\n        </p>\n      </div>\n    </PopoverContent>\n  </Popover>\n)\n"],
+  "mappings": "AAME,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBALF,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,sBAExD,IAAOC,EAAQ,CAAE,MAAO,oBAAqB,EAEtC,MAAMC,EAAU,IACrBL,EAACC,EAAA,CACC,UAAAF,EAACI,EAAA,CAAe,QAAO,GACrB,SAAAJ,EAAC,UAAO,wBAAY,EACtB,EACAA,EAACG,EAAA,CAAe,UAAU,OACxB,SAAAH,EAAC,OAAI,UAAU,aACb,SAAAA,EAAC,KAAE,0kBAOH,EACF,EACF,GACF",
+  "names": ["jsx", "jsxs", "Popover", "PopoverContent", "PopoverTrigger", "popover_stories_default", "Default"]
+}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import{RadioGroup as i,RadioGroupItem as t}from"../components/index";var p={title:"Components/Radio"};const d=()=>o("div",{className:"flex h-40 w-48 items-center justify-center",children:e(i,{defaultValue:"option-one",children:[e("div",{className:"flex items-center space-x-2",children:[o(t,{value:"option-one",id:"option-one"}),o("label",{htmlFor:"option-one",children:"Option One"})]}),e("div",{className:"flex items-center space-x-2",children:[o(t,{value:"option-two",id:"option-two"}),o("label",{htmlFor:"option-two",children:"Option Two"})]})]})});export{d as Default,p as default};
+//# sourceMappingURL=radio.stories.js.map

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

@@ -0,0 +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=\"flex h-40 w-48 items-center justify-center\">\n    <RadioGroup defaultValue=\"option-one\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"option-one\" id=\"option-one\" />\n        <label htmlFor=\"option-one\">Option One</label>\n      </div>\n      <div className=\"flex items-center 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,sBAG3C,IAAOC,EAAQ,CAAE,MAAO,kBAAmB,EAEpC,MAAMC,EAAU,IACrBL,EAAC,OAAI,UAAU,6CACb,SAAAC,EAACC,EAAA,CAAW,aAAa,aACvB,UAAAD,EAAC,OAAI,UAAU,8BACb,UAAAD,EAACG,EAAA,CAAe,MAAM,aAAa,GAAG,aAAa,EACnDH,EAAC,SAAM,QAAQ,aAAa,sBAAU,GACxC,EACAC,EAAC,OAAI,UAAU,8BACb,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"]
+}

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Skeleton as e}from"../components/index";const a={title:"Components/Skeleton",component:e,parameters:{layout:"centered"},tags:["autodocs"]};var m=a;const n={},c={render(){return o("div",{className:"flex flex-col items-center justify-center",children:[o("div",{className:"flex w-full justify-between",children:[t(e,{className:"size-12 rounded-full"}),t(e,{className:"h-12 w-[70%] "})]}),t(e,{className:"mt-2 h-40 w-[200px]"})]})}};export{n as Default,c as Example,m as default};
+//# sourceMappingURL=skeleton.stories.js.map

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

@@ -0,0 +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=\"flex flex-col items-center justify-center\">\n        <div className=\"flex w-full justify-between\">\n          <Skeleton className=\"size-12 rounded-full\" />\n          <Skeleton className=\"h-12 w-[70%] \" />\n        </div>\n        <Skeleton className=\"mt-2 h-40 w-[200px]\" />\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AAwBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAtBR,OAAS,YAAAC,MAAgB,sBAGzB,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,4CACb,UAAAA,EAAC,OAAI,UAAU,8BACb,UAAAD,EAACE,EAAA,CAAS,UAAU,uBAAuB,EAC3CF,EAACE,EAAA,CAAS,UAAU,gBAAgB,GACtC,EACAF,EAACE,EAAA,CAAS,UAAU,sBAAsB,GAC5C,CAEJ,CACF",
+  "names": ["jsx", "jsxs", "Skeleton", "meta", "skeleton_stories_default", "Default", "Example"]
+}

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/text").TextProps & import("class-variance-authority").VariantProps<(props?: ({
+        size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const All: Story;

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

@@ -0,0 +1,2 @@
+import{Fragment as s,jsx as o}from"react/jsx-runtime";import{Text as e}from"../components/index";const a={title:"Components/Text",component:e,parameters:{layout:"centered"},tags:["autodocs"]};var c=a;const f={args:{children:" The quick brown fox jumps over the lazy dog."}},p=new Array(10).fill(0).map((t,r)=>r+1),l={render(){return o(s,{children:p.map(t=>o(e,{as:"p",size:t,children:"The quick brown fox jumps over the lazy dog."},t))})}};export{l as All,f as Default,c as default};
+//# sourceMappingURL=text.stories.js.map

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

@@ -0,0 +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} 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  },\n}\n\nconst sizes = new Array(10).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": "AA2BM,mBAAAA,EAEI,OAAAC,MAFJ,oBAzBN,OAAS,QAAAC,MAAY,sBAGrB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,+CACZ,CACF,EAEMC,EAAQ,IAAI,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,EAAGC,IAAMA,EAAI,CAAC,EAC1CC,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"]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "module": "./dist/esm/index.js",
-  "style": "./dist/style.css",
+  "style": "./style.css",
   "description": "",
   "type": "module",
   "files": [
@@ -20,10 +20,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@testing-library/react": "^14.2.2",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@testing-library/react": "^14.3.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20",
     "babel-jest": "^29.7.0",
     "esbuild": "^0.20.2",
     "esbuild-style-plugin": "^1.6.3",
@@ -31,8 +33,8 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss-cli": "^11.0.0",
-    "react-test-renderer": "^18.2.0",
-    "stylelint": "^16.2.1"
+    "react-test-renderer": "^18.3.1",
+    "stylelint": "^16.6.0"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -42,23 +44,23 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "postcss": "^8.4.37",
-    "tailwind-merge": "^2.2.2",
-    "tailwindcss": "^3.4.1"
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.38",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "pnpm run dev:js:esm & pnpm run dev:js:esm:types & pnpm run dev:css",
+    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:esm:types",
     "dev:js:esm": "node build.esm.js watch=true",
-    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm >/dev/null",
+    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
     "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:esm:types ",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:esm:types",
     "build:js:esm": "node build.esm.js",
     "build:js:esm:types": "tsc --outdir dist/esm",
     "build:css": "postcss src/styles/global.css -o style.css",

package/src/components/badge.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority'
 
 import { cn } from '../helpers/index'
 

package/src/components/button.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+'use client'
+
+import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../helpers/index'
+import { type VariantProps, cva } from 'class-variance-authority'
 import Spinner from '../icons/spinner'
+import { cn } from '../helpers/index'
 
 /**
  * Button Variants
@@ -26,10 +28,30 @@ const buttonVariants = cva(
         lg: 'h-11 px-8',
         icon: 'size-10 rounded-full',
       },
+      /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
+      hoverEffect: {
+        none: '',
+        slide: '',
+      },
     },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        hoverEffect: 'slide',
+        class:
+          'before:rounded-btn hover:bg-btn-primary before:bg-btn-primary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
+      },
+      {
+        variant: 'secondary',
+        hoverEffect: 'slide',
+        class:
+          'before:rounded-btn hover:bg-btn-secondary before:bg-btn-secondary-active relative overflow-hidden before:absolute before:inset-y-0  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0',
+      },
+    ],
     defaultVariants: {
       variant: 'primary',
       size: 'base',
+      hoverEffect: 'none',
     },
   }
 )
@@ -52,6 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       size = 'base',
       children,
       variant,
+      hoverEffect = 'none',
       className,
       disabled = false,
       loading = false,
@@ -64,9 +87,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Comp
         disabled={disabled}
-        className={cn(buttonVariants({ variant, size, className }), {
-          'cursor-not-allowed': disabled,
-        })}
+        className={cn(
+          buttonVariants({ variant, size, hoverEffect }),
+          {
+            'cursor-not-allowed': disabled,
+          },
+          className
+        )}
         ref={ref}
         {...props}
       >
@@ -81,7 +108,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <VisuallyHidden>{children}</VisuallyHidden>
           </>
         ) : (
-          children
+          <span className="z-[1]">{children}</span>
         )}
       </Comp>
     )

package/src/components/checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { CheckIcon } from '@radix-ui/react-icons'

package/src/components/index.ts

@@ -1,5 +1,5 @@
 // theme
-export { default as Theme } from './theme'
+// export { default as Theme } from './theme'
 
 // components
 export { default as Button } from './button'
@@ -13,3 +13,5 @@ export * from './dialog'
 export * from './popover'
 export * from './radio'
 export * from './dialog'
+export * from './text'
+export { default as Theme } from './theme'

package/src/components/input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { cn } from '../helpers/index'
 import { ComponentPropsWithout, RemovedProps } from '@/helpers/component-props'

package/src/components/popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 

package/src/components/radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { CheckIcon } from '@radix-ui/react-icons'

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { cn } from '../helpers/index'
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {

package/src/components/text.tsx

@@ -1,6 +1,23 @@
-import { cn } from '@/helpers'
+import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import React from 'react'
+import { cn } from '../helpers'
+import { VariantProps, cva } from 'class-variance-authority'
+
+const textVariants = cva('', {
+  variants: {
+    size: {
+      1: 'text-xs',
+      2: 'text-sm',
+      3: 'text-base',
+      4: 'text-lg',
+      5: 'text-xl',
+      6: 'text-2xl',
+      7: 'text-3xl',
+      8: 'text-4xl',
+      9: 'text-5xl',
+    },
+  },
+})
 
 type TextElement = React.ElementRef<'span'>
 interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
@@ -9,10 +26,20 @@ interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
   color?: string
 }
 
-const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const { children, className, asChild, as: Tag = 'span', color, ...textProps } = props
+const Text = React.forwardRef<TextElement, TextProps & VariantProps<typeof textVariants>>((props, forwardedRef) => {
+  const { children, size, className, asChild, as: Tag = 'span', color, ...textProps } = props
   return (
-    <Slot {...textProps} ref={forwardedRef} className={cn(className, color)}>
+    <Slot
+      {...textProps}
+      ref={forwardedRef}
+      className={cn(
+        textVariants({
+          size: size,
+        }),
+        className,
+        color
+      )}
+    >
       {asChild ? children : <Tag>{children}</Tag>}
     </Slot>
   )
@@ -20,3 +47,4 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
 Text.displayName = 'Text'
 
 export { Text }
+export type { TextProps }

package/src/components/theme.tsx

@@ -1,16 +1,20 @@
+'use client'
+import * as React from 'react'
 import type { Brand } from '@/helpers/constants'
-import React, { useEffect } from 'react'
 
 interface ThemeProps {
   brand: Brand
   children: React.ReactNode
 }
+/**
+ *
+ * @param param
+ * @returns
+ */
 const Theme = ({ brand, children }: ThemeProps) => {
-  useEffect(() => {
-    // TODO: 在ssr 中不生效, 暂时手动在外层设置
-    document.getElementsByTagName('html')?.[0]?.setAttribute('data-brand-theme', brand)
-  }, [brand])
-
+  React.useLayoutEffect(() => {
+    document.querySelector('html')?.setAttribute('data-brand-theme', brand)
+  }, [])
   return <>{children}</>
 }
 

package/src/stories/button.stories.tsx

@@ -29,6 +29,13 @@ const meta = {
       },
       options: ['sm', 'base', 'lg', 'icon'],
     },
+    hoverEffect: {
+      description: 'hover 状态下的动画效果，仅在variant是primary 和 secondary 时生效',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'slide'],
+    },
   },
   args: {
     variant: 'primary',
@@ -37,6 +44,7 @@ const meta = {
     asChild: false,
     disabled: false,
     loading: false,
+    hoverEffect: 'none',
   },
 } satisfies Meta<typeof Button>