@anker-in/headless-ui 0.0.27-alpha.3 → 0.0.27-alpha.31

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"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "meta", "Story", "tabs_stories_default", "Default", "args", "AlignCenter", "AlignRight", "Disabled"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Tabs, TabsList, TabsTrigger, TabsContent, Text } 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\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"discountProducts\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"bundleDeals\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"recommend\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </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\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"discountProducts\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"bundleDeals\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"recommend\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </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\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"discountProducts\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"bundleDeals\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"recommend\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </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\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u7545\u9500\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"discountProducts\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u6298\u6263\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"bundleDeals\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u5957\u88C5\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>{' '}\n      <TabsContent value=\"recommend\">\n        <Text>\u8FD9\u91CC\u5C55\u793A\u63A8\u8350\u5546\u54C1\u5185\u5BB9\u3002</Text>\n      </TabsContent>\n    </Tabs>\n  ),\n}\n"],
+  "mappings": "AAiBQ,cAAAA,EAuFF,QAAAC,MAvFE,oBAfR,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,EAAa,QAAAC,MAAY,yBAE/D,MAA0C,QAE1C,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWL,EACX,cAAe,CACb,SAAUC,EACV,YAAaC,EACb,YAAaC,CACf,EACA,WAAY,CACVG,GACER,EAAC,OAAI,MAAO,CAAE,OAAQ,KAAM,EAC1B,SAAAA,EAACQ,EAAA,EAAM,EACT,CAEJ,EACA,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,+HACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,KAAM,CACJ,aAAc,aACd,MAAO,MACT,EACA,SAAU,CACR,aAAc,CACZ,YAAa,yDACb,QAAS,OACT,MAAO,CACL,QAAS,aACT,SAAU,EACZ,CACF,EACA,MAAO,CACL,YAAa,6FACb,QAAS,CACP,KAAM,OACR,EACA,QAAS,CAAC,aAAc,mBAAoB,cAAe,WAAW,CACxE,EACA,MAAO,CACL,YAAa,0BACf,EACA,cAAe,CACb,YAAa,2EACb,OAAQ,UACR,KAAM,UACR,EACA,YAAa,CACX,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,aAAc,UAAU,EAClC,YAAa,6CACb,MAAO,CACL,aAAc,CACZ,QAAS,YACX,CACF,CACF,EACA,IAAK,CACH,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,MAAO,KAAK,EACtB,YAAa,2BACb,MAAO,CACL,aAAc,CACZ,QAAS,KACX,CACF,CACF,CAaF,CACF,EAEA,IAAOC,EAAQF,EAIR,MAAMG,EAAiB,CAC5B,OAAQC,GACNV,EAACC,EAAA,CAAM,GAAGS,EACR,UAAAV,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAY,MAAM,aAAa,uBAAW,EAC3CJ,EAACI,EAAA,CAAY,MAAM,mBAAmB,6BAAiB,EACvDJ,EAACI,EAAA,CAAY,MAAM,cAAc,wBAAY,EAC7CJ,EAACI,EAAA,CAAY,MAAM,YAAY,qBAAS,GAC1C,EACAJ,EAACK,EAAA,CAAY,MAAM,aACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,mBACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,cACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,YACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,GACF,CAEJ,EAEaM,EAAqB,CAChC,KAAM,CACJ,MAAO,QACT,EACA,OAAQD,GACNV,EAACC,EAAA,CAAM,GAAGS,EACR,UAAAV,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAY,MAAM,aAAa,uBAAW,EAC3CJ,EAACI,EAAA,CAAY,MAAM,mBAAmB,6BAAiB,EACvDJ,EAACI,EAAA,CAAY,MAAM,cAAc,wBAAY,EAC7CJ,EAACI,EAAA,CAAY,MAAM,YAAY,qBAAS,GAC1C,EACAJ,EAACK,EAAA,CAAY,MAAM,aACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,mBACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,cACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,YACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,GACF,CAEJ,EAEaO,EAAoB,CAC/B,KAAM,CACJ,MAAO,OACT,EACA,OAAQF,GACNV,EAACC,EAAA,CAAM,GAAGS,EACR,UAAAV,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAY,MAAM,aAAa,uBAAW,EAC3CJ,EAACI,EAAA,CAAY,MAAM,mBAAmB,6BAAiB,EACvDJ,EAACI,EAAA,CAAY,MAAM,cAAc,wBAAY,EAC7CJ,EAACI,EAAA,CAAY,MAAM,YAAY,qBAAS,GAC1C,EACAJ,EAACK,EAAA,CAAY,MAAM,aACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,mBACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,cACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,YACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,GACF,CAEJ,EAEaQ,EAAkB,CAC7B,KAAM,CACJ,aAAc,EAChB,EACA,OAAQH,GACNV,EAACC,EAAA,CAAM,GAAGS,EACR,UAAAV,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAY,SAAQ,GAAC,MAAM,aAAa,uBAEzC,EACAJ,EAACI,EAAA,CAAY,MAAM,mBAAmB,6BAAiB,EACvDJ,EAACI,EAAA,CAAY,MAAM,cAAc,wBAAY,EAC7CJ,EAACI,EAAA,CAAY,MAAM,YAAY,qBAAS,GAC1C,EACAJ,EAACK,EAAA,CAAY,MAAM,aACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,mBACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,cACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,EAAe,IACfN,EAACK,EAAA,CAAY,MAAM,YACjB,SAAAL,EAACM,EAAA,CAAK,8EAAW,EACnB,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Text", "meta", "Story", "tabs_stories_default", "Default", "args", "AlignCenter", "AlignRight", "Disabled"]
 }

package/dist/esm/stories/text.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/text.js").TextProps & React.RefAttributes<HTMLSpanElement>>;
+    component: React.ForwardRefExoticComponent<import("../index.js").TextProps & React.RefAttributes<HTMLSpanElement>>;
     parameters: {
         layout: string;
         docs: {

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

@@ -2,4 +2,26 @@ export interface ComponentCommonProps {
     style?: string;
     event?: any;
     condition?: any;
+    className?: string;
+    key?: string;
 }
+export type Img = {
+    url: string;
+    alt?: string;
+};
+export type Video = {
+    url: string;
+};
+export type Theme = 'light' | 'dark';
+export type Shape = 'rounded' | 'square';
+export type Align = 'left' | 'center' | 'right';
+export type Media = {
+    alt: string;
+    url: string;
+    thumbnailURL: string;
+    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    width?: number;
+    height?: number;
+    focalX?: number;
+    focalY?: number;
+};

package/dist/tokens/anker.css

@@ -0,0 +1,22 @@
+:root {
+  --btn-bg-active-color: var(--brand-color-0);
+  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
+
+  --btn-bg-secondary-color: transparent;
+  --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;
+
+
+  /* 通用组件库anker品牌颜色 */
+  --brand-color-0: #00befa;
+}

package/dist/tokens/base.css

@@ -0,0 +1,166 @@
+:root {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: #00a7e1;
+  --btn-bg-disabled-color: #ccdfe850;
+  --btn-text-active-color: #ffffff;
+
+
+  --btn-bg-secondary-color: transparent;
+  --btn-text-secondary-color: #1D1D1F;
+  --btn-tsxt-secondary-active-color: #ffffff;
+  --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;
+
+  --tabs-list-bg-color: var(--container-secondary-color-1);
+
+  --box-radius: 12px;
+}
+
+
+.aiui-dark {
+  --btn-text-color: #1D1D1F;
+  --btn-text-active-color: #ffffff;
+
+
+  --btn-bg-secondary-color: transparent;
+  --btn-text-secondary-color: #ffffff;
+  --btn-tsxt-secondary-active-color: #1D1D1F;
+
+
+   /* 深色背景 */
+  --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);
+
+  --box-radius: 12px;
+}
+
+
+@media (min-width: 1441px) {
+  :root {
+    --box-radius: 16px;
+  }
+}

package/dist/tokens/eufy.css

@@ -0,0 +1,13 @@
+:root {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: var(--brand-color-0);
+
+  --btn-bg-secondary-color: transparent;
+  --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 @@
+:root {
+
+  --btn-text-color: #fff;
+  --btn-bg-active-color: var(--brand-color-0);
+
+  --btn-radius: 24px;
+  --radius: 0em;
+
+  --brand-color-0: #3adb67;
+}

package/dist/tokens/solix.css

@@ -0,0 +1,10 @@
+:root {
+  --btn-text-color: #fff;
+  --btn-bg-active-color: var(--brand-color-0);
+  
+  --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,14 @@
+:root {
+  --btn-text-color: #ffffff;
+  --btn-bg-active-color: var(--brand-color-0);
+
+  --btn-bg-secondary-color: transparent;
+  --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.3",
+  "version": "0.0.27-alpha.31",
   "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,16 @@
     "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": {
+    "@payloadcms/richtext-lexical": "^3.37.0",
+    "@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,11 +94,12 @@
     "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",
     "react-fast-marquee": "^1.6.5",
+    "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "vaul": "^1.1.2"