@anker-in/headless-ui 0.0.27-alpha.2 → 0.0.27-alpha.20

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.js'\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\u5E03\u5C40',\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=\"h-14 rounded-3xl overflow-hidden px-4 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=\"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\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,yBACzB,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,oDAAoD,8HAGnE,CAEJ,CACF,EAEaM,EAAkB,CAC7B,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,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",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Skeleton } from '../components/index.js'\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\u5E03\u5C40',\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=\"h-14 w-full overflow-hidden rounded-3xl p-4\">\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=\"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\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,yBACzB,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,8CAA8C,8HAG7D,CAEJ,CACF,EAEaM,EAAkB,CAC7B,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,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/slogan.stories.d.ts

@@ -3,7 +3,9 @@ import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: {
-        (props: Omit<import("../biz-components/Slogan/types").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>): import("react/jsx-runtime").JSX.Element;
+        (props: Omit<import("../biz-components/Slogan/types.js").SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     parameters: {

package/dist/esm/stories/slogan.stories.js

@@ -1,4 +1,4 @@
-import{jsx as r}from"react/jsx-runtime";import"react";import{Slogan as e}from"../biz-components/index";const o={title:"Biz Components/Slogan",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var s=o;const l={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"]}},i={args:{title:"The World's No.1 Mobile Charging Brand*"}},g={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees"]}},f={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers"]}},b={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"],className:"bg-gray-100"}},p=()=>r(e,{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"],className:"bg-gray-100",style:`
+import{jsx as r}from"react/jsx-runtime";import"react";import{Slogan as e}from"../biz-components/index.js";const o={title:"Biz Components/Slogan",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var s=o;const l={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"]}},i={args:{title:"The World's No.1 Mobile Charging Brand*"}},g={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees"]}},f={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers"]}},b={args:{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"],className:"bg-gray-100"}},p=()=>r(e,{title:"The World's No.1 Mobile Charging Brand*",features:["47%<br/>R&D Employees","100 Million<br/>Global Customers","Pioneering in Charging<br/>Technology for 12 Years"],className:"bg-gray-100",style:`
         
         .slogan-title{
           background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/slogan.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index'\n\nconst meta = {\n  title: 'Biz Components/Slogan',\n  component: Slogan,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years'\n    ],\n\n  }\n}\n\nexport const TitleOnly: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\"\n  }\n}\n\nexport const SingleFeature: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees'\n    ]\n  }\n}\n\nexport const TwoFeatures: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers'\n    ]\n  }\n}\n\nexport const CustomClassName: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years'\n    ],\n    className: 'bg-gray-100'\n  }\n}\n\nexport const CustomStyle = () => {\n  return (<Slogan\n    title=\"The World's No.1 Mobile Charging Brand*\"\n    features={['47%<br/>R&D Employees', '100 Million<br/>Global Customers', 'Pioneering in Charging<br/>Technology for 12 Years']}\n    className=\"bg-gray-100\"\n    style={`\n        \n        .slogan-title{\n          background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          animation: fadeIn 1s ease-in forwards;\n        }\n\n        @keyframes fadeIn {\n          from {\n            opacity: 0;\n          }\n          to {\n            opacity: 1;\n          }\n        }\n        .slogan-feature-text {\n          background-color: #f0f0f0;\n          padding: 10px;\n          border-radius: 10px;\n          animation: fadeIn 1s ease-in forwards;\n        }\n      `}\n  />)\n}\n\n"],
-  "mappings": "AAmEU,cAAAA,MAAA,oBAnEV,MAAkB,QAElB,OAAS,UAAAC,MAAc,0BAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,CAEF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,MAAO,yCACT,CACF,EAEaC,EAAuB,CAClC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,uBACF,CACF,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,kCACF,CACF,CACF,EAEaC,EAAyB,CACpC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,IACjBT,EAACC,EAAA,CACP,MAAM,0CACN,SAAU,CAAC,wBAAyB,mCAAoC,oDAAoD,EAC5H,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index.js'\n\nconst meta = {\n  title: 'Biz Components/Slogan',\n  component: Slogan,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years',\n    ],\n  },\n}\n\nexport const TitleOnly: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n  },\n}\n\nexport const SingleFeature: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: ['47%<br/>R&D Employees'],\n  },\n}\n\nexport const TwoFeatures: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: ['47%<br/>R&D Employees', '100 Million<br/>Global Customers'],\n  },\n}\n\nexport const CustomClassName: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years',\n    ],\n    className: 'bg-gray-100',\n  },\n}\n\nexport const CustomStyle = () => {\n  return (\n    <Slogan\n      title=\"The World's No.1 Mobile Charging Brand*\"\n      features={[\n        '47%<br/>R&D Employees',\n        '100 Million<br/>Global Customers',\n        'Pioneering in Charging<br/>Technology for 12 Years',\n      ]}\n      className=\"bg-gray-100\"\n      style={`\n        \n        .slogan-title{\n          background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          animation: fadeIn 1s ease-in forwards;\n        }\n\n        @keyframes fadeIn {\n          from {\n            opacity: 0;\n          }\n          to {\n            opacity: 1;\n          }\n        }\n        .slogan-feature-text {\n          background-color: #f0f0f0;\n          padding: 10px;\n          border-radius: 10px;\n          animation: fadeIn 1s ease-in forwards;\n        }\n      `}\n    />\n  )\n}\n"],
+  "mappings": "AA8DI,cAAAA,MAAA,oBA9DJ,MAAkB,QAElB,OAAS,UAAAC,MAAc,6BAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,MAAO,yCACT,CACF,EAEaC,EAAuB,CAClC,KAAM,CACJ,MAAO,0CACP,SAAU,CAAC,uBAAuB,CACpC,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,MAAO,0CACP,SAAU,CAAC,wBAAyB,kCAAkC,CACxE,CACF,EAEaC,EAAyB,CACpC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,IAEvBT,EAACC,EAAA,CACC,MAAM,0CACN,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
   "names": ["jsx", "Slogan", "meta", "slogan_stories_default", "Default", "TitleOnly", "SingleFeature", "TwoFeatures", "CustomClassName", "CustomStyle"]
 }

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

@@ -4,7 +4,8 @@ import React, { type ComponentType } from 'react';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        algin?: "left" | "center" | "right";
+        align?: import("../types/props.js").Align;
+        shape?: import("../types/props.js").Shape;
     } & React.RefAttributes<HTMLDivElement>>;
     subcomponents: {
         TabsList: ComponentType<unknown>;
@@ -286,7 +287,8 @@ declare const meta: {
         orientation?: "horizontal" | "vertical" | undefined;
         onValueChange?: ((value: string) => void) | undefined;
         activationMode?: "automatic" | "manual" | undefined;
-        algin?: "left" | "center" | "right" | undefined;
+        align?: import("../types/props.js").Align | undefined;
+        shape?: import("../types/props.js").Shape | undefined;
         ref?: React.LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {
@@ -300,7 +302,7 @@ declare const meta: {
     tags: string[];
     args: {
         defaultValue: string;
-        algin: "left";
+        align: "left";
     };
     argTypes: {
         defaultValue: {
@@ -318,7 +320,7 @@ declare const meta: {
             };
             options: string[];
         };
-        algin: {
+        align: {
             description: string;
         };
         onValueChange: {

package/dist/esm/stories/tabs.stories.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Tabs as o,TabsList as r,TabsTrigger as t,TabsContent as a}from"../components/index.js";import"react";const l={title:"Components/Tabs",component:o,subcomponents:{TabsList:r,TabsTrigger:t,TabsContent:a},decorators:[s=>e("div",{style:{margin:"2em"},children:e(s,{})})],parameters:{layout:"fullscreen",docs:{description:{component:"Tab\u9009\u9879\u5361\uFF0C\u63D0\u4F9B\u53EF\u8BBF\u95EE\u7684\u6807\u7B7E\u754C\u9762\uFF0C\u57FA\u4E8E@radix-ui/react-tabs"}}},tags:["autodocs"],args:{defaultValue:"bestSeller",algin:"left"},argTypes:{defaultValue:{description:"\u9ED8\u8BA4\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C",control:"text",table:{summary:"bestSeller",readonly:!0}},value:{description:"\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C\uFF08\u53D7\u63A7\u6A21\u5F0F\uFF09",control:{type:"radio"},options:["bestSeller","discountProducts","bundleDeals","recommend"]},algin:{description:"\u5BF9\u9F50\u65B9\u5411"},onValueChange:{description:"\u6807\u7B7E\u9875\u503C\u53D8\u5316\u65F6\u7684\u56DE\u8C03\u51FD\u6570",action:"changed",type:"function"},orientation:{control:{type:"inline-radio"},options:["horizontal","vertical"],description:"\u6807\u7B7E\u9875\u5E03\u5C40\u65B9\u5411",table:{defaultValue:{summary:"horizontal"}}},dir:{control:{type:"inline-radio"},options:["ltr","rtl"],description:"\u6587\u672C\u65B9\u5411",table:{defaultValue:{summary:"ltr"}}}}};var d=l;const T={render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},c={args:{algin:"center"},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},g={args:{algin:"right"},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},m={args:{defaultValue:""},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{disabled:!0,value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})};export{c as AlignCenter,g as AlignRight,T as Default,m as Disabled,d as default};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Tabs as o,TabsList as r,TabsTrigger as t,TabsContent as a}from"../components/index.js";import"react";const l={title:"Components/Tabs",component:o,subcomponents:{TabsList:r,TabsTrigger:t,TabsContent:a},decorators:[s=>e("div",{style:{margin:"2em"},children:e(s,{})})],parameters:{layout:"fullscreen",docs:{description:{component:"Tab\u9009\u9879\u5361\uFF0C\u63D0\u4F9B\u53EF\u8BBF\u95EE\u7684\u6807\u7B7E\u754C\u9762\uFF0C\u57FA\u4E8E@radix-ui/react-tabs"}}},tags:["autodocs"],args:{defaultValue:"bestSeller",align:"left"},argTypes:{defaultValue:{description:"\u9ED8\u8BA4\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C",control:"text",table:{summary:"bestSeller",readonly:!0}},value:{description:"\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C\uFF08\u53D7\u63A7\u6A21\u5F0F\uFF09",control:{type:"radio"},options:["bestSeller","discountProducts","bundleDeals","recommend"]},align:{description:"\u5BF9\u9F50\u65B9\u5411"},onValueChange:{description:"\u6807\u7B7E\u9875\u503C\u53D8\u5316\u65F6\u7684\u56DE\u8C03\u51FD\u6570",action:"changed",type:"function"},orientation:{control:{type:"inline-radio"},options:["horizontal","vertical"],description:"\u6807\u7B7E\u9875\u5E03\u5C40\u65B9\u5411",table:{defaultValue:{summary:"horizontal"}}},dir:{control:{type:"inline-radio"},options:["ltr","rtl"],description:"\u6587\u672C\u65B9\u5411",table:{defaultValue:{summary:"ltr"}}}}};var d=l;const T={render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},c={args:{align:"center"},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},g={args:{align:"right"},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})},m={args:{defaultValue:""},render:s=>n(o,{...s,children:[n(r,{children:[e(t,{disabled:!0,value:"bestSeller",children:"Best Seller"}),e(t,{value:"discountProducts",children:"Discount products"}),e(t,{value:"bundleDeals",children:"Bundle Deals"}),e(t,{value:"recommend",children:"Recommend"})]}),e(a,{value:"bestSeller",children:"\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"discountProducts",children:"\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"bundleDeals",children:"\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002"}),e(a,{value:"recommend",children:"\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002"})]})};export{c as AlignCenter,g as AlignRight,T as Default,m as Disabled,d as default};
 //# sourceMappingURL=tabs.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/tabs.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/index.js'\n\nimport React, { type ComponentType } from 'react'\n\nconst meta = {\n  title: 'Components/Tabs',\n  component: Tabs,\n  subcomponents: {\n    TabsList: TabsList as ComponentType<unknown>,\n    TabsTrigger: TabsTrigger as ComponentType<unknown>,\n    TabsContent: TabsContent as ComponentType<unknown>,\n  },\n  decorators: [\n    Story => (\n      <div style={{ margin: '2em' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Tab\u9009\u9879\u5361\uFF0C\u63D0\u4F9B\u53EF\u8BBF\u95EE\u7684\u6807\u7B7E\u754C\u9762\uFF0C\u57FA\u4E8E@radix-ui/react-tabs',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  args: {\n    defaultValue: 'bestSeller',\n    algin: 'left',\n  },\n  argTypes: {\n    defaultValue: {\n      description: '\u9ED8\u8BA4\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C',\n      control: 'text',\n      table: {\n        summary: 'bestSeller',\n        readonly: true,\n      },\n    },\n    value: {\n      description: '\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C\uFF08\u53D7\u63A7\u6A21\u5F0F\uFF09',\n      control: {\n        type: 'radio',\n      },\n      options: ['bestSeller', 'discountProducts', 'bundleDeals', 'recommend'],\n    },\n    algin: {\n      description: '\u5BF9\u9F50\u65B9\u5411',\n    },\n    onValueChange: {\n      description: '\u6807\u7B7E\u9875\u503C\u53D8\u5316\u65F6\u7684\u56DE\u8C03\u51FD\u6570',\n      action: 'changed',\n      type: 'function',\n    },\n    orientation: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['horizontal', 'vertical'],\n      description: '\u6807\u7B7E\u9875\u5E03\u5C40\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'horizontal',\n        },\n      },\n    },\n    dir: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['ltr', 'rtl'],\n      description: '\u6587\u672C\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'ltr',\n        },\n      },\n    },\n    // activationMode: {\n    //   control: {\n    //     type: 'select',\n    //   },\n    //   options: ['automatic', 'manual'],\n    //   description: '\u6FC0\u6D3B\u6A21\u5F0F\uFF08automatic: \u81EA\u52A8\u6FC0\u6D3B, manual: \u624B\u52A8\u6FC0\u6D3B\uFF09',\n    //   table: {\n    //     defaultValue: {\n    //       summary: 'automatic',\n    //     },\n    //   },\n    // },\n  },\n} satisfies Meta<typeof Tabs>\n\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Default: Story = {\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const AlignCenter: Story = {\n  args: {\n    algin: 'center',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const AlignRight: Story = {\n  args: {\n    algin: 'right',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const Disabled: Story = {\n  args: {\n    defaultValue: '',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger disabled value=\"bestSeller\">\n          Best Seller\n        </TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/index.js'\n\nimport React, { type ComponentType } from 'react'\n\nconst meta = {\n  title: 'Components/Tabs',\n  component: Tabs,\n  subcomponents: {\n    TabsList: TabsList as ComponentType<unknown>,\n    TabsTrigger: TabsTrigger as ComponentType<unknown>,\n    TabsContent: TabsContent as ComponentType<unknown>,\n  },\n  decorators: [\n    Story => (\n      <div style={{ margin: '2em' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Tab\u9009\u9879\u5361\uFF0C\u63D0\u4F9B\u53EF\u8BBF\u95EE\u7684\u6807\u7B7E\u754C\u9762\uFF0C\u57FA\u4E8E@radix-ui/react-tabs',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  args: {\n    defaultValue: 'bestSeller',\n    align: 'left',\n  },\n  argTypes: {\n    defaultValue: {\n      description: '\u9ED8\u8BA4\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C',\n      control: 'text',\n      table: {\n        summary: 'bestSeller',\n        readonly: true,\n      },\n    },\n    value: {\n      description: '\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7E\u9875\u503C\uFF08\u53D7\u63A7\u6A21\u5F0F\uFF09',\n      control: {\n        type: 'radio',\n      },\n      options: ['bestSeller', 'discountProducts', 'bundleDeals', 'recommend'],\n    },\n    align: {\n      description: '\u5BF9\u9F50\u65B9\u5411',\n    },\n    onValueChange: {\n      description: '\u6807\u7B7E\u9875\u503C\u53D8\u5316\u65F6\u7684\u56DE\u8C03\u51FD\u6570',\n      action: 'changed',\n      type: 'function',\n    },\n    orientation: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['horizontal', 'vertical'],\n      description: '\u6807\u7B7E\u9875\u5E03\u5C40\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'horizontal',\n        },\n      },\n    },\n    dir: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['ltr', 'rtl'],\n      description: '\u6587\u672C\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'ltr',\n        },\n      },\n    },\n    // activationMode: {\n    //   control: {\n    //     type: 'select',\n    //   },\n    //   options: ['automatic', 'manual'],\n    //   description: '\u6FC0\u6D3B\u6A21\u5F0F\uFF08automatic: \u81EA\u52A8\u6FC0\u6D3B, manual: \u624B\u52A8\u6FC0\u6D3B\uFF09',\n    //   table: {\n    //     defaultValue: {\n    //       summary: 'automatic',\n    //     },\n    //   },\n    // },\n  },\n} satisfies Meta<typeof Tabs>\n\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Default: Story = {\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const AlignCenter: Story = {\n  args: {\n    align: 'center',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const AlignRight: Story = {\n  args: {\n    align: 'right',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger value=\"bestSeller\">Best Seller</TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n\nexport const Disabled: Story = {\n  args: {\n    defaultValue: '',\n  },\n  render: args => (\n    <Tabs {...args}>\n      <TabsList>\n        <TabsTrigger disabled value=\"bestSeller\">\n          Best Seller\n        </TabsTrigger>\n        <TabsTrigger value=\"discountProducts\">Discount products</TabsTrigger>\n        <TabsTrigger value=\"bundleDeals\">Bundle Deals</TabsTrigger>\n        <TabsTrigger value=\"recommend\">Recommend</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"bestSeller\">\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"discountProducts\">\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"bundleDeals\">\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n      <TabsContent value=\"recommend\">\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</TabsContent>\n    </Tabs>\n  ),\n}\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "meta", "Story", "tabs_stories_default", "Default", "args", "AlignCenter", "AlignRight", "Disabled"]
 }

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.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n      options: [1, 2, 3],\n      table: {\n        defaultValue: { summary: '3' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n      options: ['div', 'label', 'p', 'span'],\n      table: {\n        defaultValue: { summary: 'span' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    size: 3,\n    weight: 'normal',\n    align: 'left',\n    html: '',\n    as: 'p',\n  },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    children: ' The quick brown fox jumps over the lazy dog.',\n    size: 3,\n    weight: 'normal',\n  },\n}\n\nexport const Sizes: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const weight: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\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": "AAyFM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvFN,OAAS,QAAAC,MAAY,yBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,WAAY,MAAM,EACzD,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,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,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAgB,CAC3B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,OAAO,QAAQ,wDAA4C,EACjEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAIaM,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.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n      options: [1, 2, 3],\n      table: {\n        defaultValue: { summary: '3' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n      options: ['div', 'label', 'p', 'span'],\n      table: {\n        defaultValue: { summary: 'span' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    size: 3,\n    weight: 'normal',\n    align: 'left',\n    html: '',\n    as: 'p',\n  },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    children: ' The quick brown fox jumps over the lazy dog.',\n    size: 3,\n    weight: 'normal',\n  },\n}\n\nexport const Sizes: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const weight: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const 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": "AAyFM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvFN,OAAS,QAAAC,MAAY,yBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,WAAY,MAAM,EACzD,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,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,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAgB,CAC3B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,OAAO,QAAQ,wDAA4C,EACjEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,OAAO,wDAA4C,GAClE,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", "weight", "Html"]
 }

package/dist/esm/types/props.d.ts

@@ -3,3 +3,6 @@ export interface ComponentCommonProps {
     event?: any;
     condition?: any;
 }
+export type Theme = 'light' | 'dark';
+export type Shape = 'rounded' | 'square';
+export type Align = 'left' | 'center' | 'right';

package/dist/tokens/anker.css

@@ -0,0 +1,29 @@
+* {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #00aaff;
+  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #1d1d1f;
+  --btn-bg-secondary-active-color: #6e6e73;
+  --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
+  --btn-border-secondary-border-color: #acacac;
+
+  --btn-radius: 0;
+
+  --radius: 0em;
+
+  --letter-spacing-normal: -0.02em;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-loose: 1.6;
+
+  --min-xxl-w: 1680px;
+  --md-w: 342px;
+  --md-l-w: 688px;
+  --l-xl-w: 864px;
+  --xl-xxl-w: 1280px;
+
+  /* 通用组件库anker品牌颜色 */
+  --brand-color-0: #00befa;
+}

package/dist/tokens/base.css

@@ -0,0 +1,147 @@
+:root {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #00a7e1;
+  --btn-bg-disabled-color: #ccdfe850;
+
+  --btn-bg-secondary-color: transparent;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
+
+  /* 浅色背景 */
+  --success-color-0: #34C759;
+  --success-color-1: #5dd27a;
+  --success-color-2: #85dd9b;
+  --success-color-3: #aee9bd;
+  --success-color-4: #D6F4DE;
+
+  --warning-color-0: #FFC24D;
+  --warning-color-1: #fdcc6e;
+  --warning-color-2: #fbd68f;
+  --warning-color-3: #f8e0af;
+  --warning-color-4: #F6EAD0;
+
+  --error-color-0: #FF4D4D;
+  --error-color-1: #F6D3D0;
+  --error-color-2: #fb908f;
+  --error-color-3: #f8b1af;
+  --error-color-4: #f6dbd8;
+
+  --info-primary-color: #1D1D1F;
+  --info-secondary-color: #86868C;
+  --info-tertiary-color: #B6B6BA;
+  --info-quaternary-color: #DDDDDD;
+  --info-white-color: #FFFFFF;
+
+  --container-primary-color: #ffffff;
+  --container-secondary-color-0: #F7F8F9;
+  --container-secondary-color-1: #EAEAEC;
+  --bg-color-0: #f5f5f7;
+  --bg-color-1: #ffffff;
+  --bg-color-2: rgba(0, 190, 250, 0.08);
+  --lines-color: #cececf;
+  --masks-color-0: rgba(29, 29, 31, 0.2);
+  --masks-color-1: rgba(29, 29, 31, 0.6);
+  --tab-word-color-0: #ff9900;
+  --tab-stroke-color-0: #ffcf87;
+  --tab-fill-color-0: #fff7eb;
+  --tab-word-color-1: #00aaff;
+  --tab-stroke-color-1: #88d7ff;
+  --tab-fill-color-1: #ebf8ff;
+  --tab-word-color-2: #ff4d4d;
+  --tab-stroke-color-2: #ff8a8a;
+  --tab-fill-color-2: #fff1f1;
+
+  --secondary-brand-color-1: #042637;
+  --secondary-brand-color-2: #b3ecfb;
+  --secondary-brand-color-3: #f8f7f6; 
+
+  --bg-color-1: #f4f4f1;
+  --bg-color-2: #efefec;
+
+  --line-color: #e9e9e9;
+  --line-color-1: #ddd;
+  --line-color-2: #1d1d1f;
+
+  --masks-color-1: hsla(0, 0%, 0%, 0.5);
+  --masks-color-2: hsla(0, 0%, 0%, 0.85);
+
+  --size-text-1: 12px;
+  --size-text-2: 14px;
+  --size-text-3: 18px;
+  --letter-spacing-text-1: -0.24px;
+  --letter-spacing-text-2: -0.36px;
+  --letter-spacing-text-3: -0.48px;
+
+  --size-heading-1: 24px;
+  --size-heading-2: 32px;
+  --size-heading-3: 40px;
+  --size-heading-4: 48px;
+  --size-heading-5: 56px;
+  --letter-spacing-heading-1: -0.48px;
+  --letter-spacing-heading-2: -0.64px;
+  --letter-spacing-heading-3: -0.8px;
+  --letter-spacing-heading-4: -0.96px;
+  --letter-spacing-heading-5: -1.12px;
+
+  --line-height-base: 1.2;
+
+  --letter-spacing-normal: -0.02em;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-loose: 1.6;
+
+
+  /* 通用组件库anker品牌颜色 */
+
+  --tabs-list-bg-color: var(--container-secondary-color-1);
+
+
+}
+
+.aiui-dark {
+   /* 深色背景 */
+  --success-color-0: #34C759;
+  --success-color-1: #2cad4c;
+  --success-color-2: #288940;
+  --success-color-3: #246434;
+  --success-color-4: #D6F4DE;
+  --warning-color-0: #FFC24D;
+  --warning-color-1: #cc9b3e;
+  --warning-color-2: #99742e;
+  --warning-color-3: #664e1f;
+  --warning-color-4: #33270f;
+  --error-color-0: #FF4D4D;
+  --error-color-1: #F6D3D0;
+  --error-color-2: #992e2e;
+  --error-color-3: #661f1f;
+  --error-color-4: #330f0f;
+
+  --info-primary-color: #FFFFFF;
+  --info-secondary-color: #B6B6BA;
+  --info-tertiary-color: #86868C;
+  --info-quaternary-color: #353537;
+  --info-white-color: #1D1D1F;
+
+  --container-primary-color: #1d1d1f;
+  --container-secondary-color-0: #353537;
+  --container-secondary-color-1: #F7F8F9;
+
+  
+  --bg-color-0: #000000;
+  --bg-color-1: #1d1d1f;
+  --lines-color: #3d3d3d;
+  --line-masks-color-0: rgba(245, 245, 247, 0.2);
+  --line-masks-color-1: rgba(245, 245, 247, 0.6);
+  --tab-word-color-0: #ff9900;
+  --tab-stroke-color-0: #663d00;
+  --tab-fill-color-0: #331f00;
+  --tab-word-color-1: #00aaff;
+  --tab-stroke-color-1: #004466;
+  --tab-fill-color-1: #002233;
+  --tab-word-color-2: #ff4d4d;
+  --tab-stroke-color-2: #661f1f;
+  --tab-fill-color-2: #330f0f;
+
+  --tabs-list-bg-color: var(--container-primary-color);
+}

package/dist/tokens/eufy.css

@@ -0,0 +1,14 @@
+* {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #669ebb;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #333333;
+  --btn-bg-secondary-active-color: #555555;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
+
+  --btn-radius: 24px;
+
+  --radius: 40px;
+  --brand-color-0: #005d8e; 
+}

package/dist/tokens/eufyMake.css

@@ -0,0 +1,10 @@
+
+* {
+  --btn-text-color: #fff;
+  --btn-bg-active-color: #3adb67;
+
+  --btn-radius: 24px;
+  --radius: 0em;
+
+  --brand-color-0: #3adb67;
+}

package/dist/tokens/solix.css

@@ -0,0 +1,10 @@
+* {
+  --btn-text-color: #fff;
+  --btn-bg-active-color: #DDDDDD;
+  
+  --btn-radius: 24px;
+  --radius: 0em;
+
+  --brand-gradient-color-0: linear-gradient(90deg, #2C7ED0 0%, #00A9E1 43%, #00DB84 100%);
+  --brand-color-0: #2C7ED0;
+}

package/dist/tokens/soundcore.css

@@ -0,0 +1,15 @@
+* {
+  --btn-text-color: #ffffff;
+  --btn-bg-color-active: #48cffa;
+
+  --btn-bg-secondary-color: #ffffff;
+  --btn-text-secondary-color: #17bbef;
+  --btn-bg-secondary-active-color: #17bbef;
+  --btn-bg-secondary-disabled-color: #f5f5f550;
+
+  --btn-radius: 24px;
+
+  --radius: 0em;
+
+  --brand-color-0: #17bbef;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.2",
+  "version": "0.0.27-alpha.20",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -27,15 +27,24 @@
         "default": "./dist/esm/biz-components/index.js"
       }
     },
-    "./tailwind.config.js": "./tailwind.config.ts",
-    "./style.css": "./style.css"
+    "./tailwind.config": {
+      "require": "./tailwind.config.ts",
+      "import": "./tailwind.config.ts"
+    },
+    "./tailwind.config.js": {
+      "require": "./tailwind.config.ts",
+      "import": "./tailwind.config.ts"
+    },
+    "./style.css": "./style.css",
+    "./tokens/*": "./dist/tokens/*"
   },
   "description": "",
   "files": [
     "dist/**",
     "*.css",
     "README.md",
-    "CONTRIBUTING.md"
+    "CONTRIBUTING.md",
+    "tailwind.config.ts"
   ],
   "sideEffects": false,
   "keywords": [],
@@ -51,7 +60,10 @@
     "@types/node": "^20",
     "babel-jest": "^29.7.0",
     "esbuild": "^0.20.2",
+    "esbuild-copy-static-files": "^0.1.0",
     "esbuild-style-plugin": "^1.6.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jest": "^29.7.0",
@@ -61,12 +73,15 @@
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-prefix-selector": "^2.1.1",
+    "prettier": "^3.5.3",
     "react-test-renderer": "^18.3.1",
     "stylelint": "^16.6.0"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -78,7 +93,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-class-names": "^8.5.2",
-    "embla-carousel-react": "^8.5.2",
+    "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fitty": "^2.4.2",
     "postcss": "^8.4.38",