@anker-in/headless-ui 0.0.27-alpha.7 → 0.0.27-alpha.73

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",
-  "names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "weight", "Html"]
+  "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=\"semibold\">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      <>\n        <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n        <hr />\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        <hr />\n        <Text\n          html={\n            {\n              root: {\n                type: 'root',\n                format: '',\n                indent: 0,\n                version: 1,\n                children: [\n                  {\n                    tag: 'h1',\n                    type: 'heading',\n                    format: '',\n                    indent: 0,\n                    version: 1,\n                    children: [\n                      {\n                        mode: 'normal',\n                        text: 'React to Every Noise as You Go',\n                        type: 'text',\n                        style: '',\n                        detail: 0,\n                        format: 0,\n                        version: 1,\n                      },\n                    ],\n                    direction: 'ltr',\n                  },\n                  {\n                    tag: 'h3',\n                    type: 'heading',\n                    format: '',\n                    indent: 0,\n                    version: 1,\n                    children: [\n                      {\n                        mode: 'normal',\n                        text: 'Reserve for Only $1, Get $70 Off',\n                        type: 'text',\n                        style: '',\n                        detail: 0,\n                        format: 0,\n                        version: 1,\n                      },\n                    ],\n                    direction: 'ltr',\n                  },\n                ],\n                direction: 'ltr',\n              },\n            } as any\n          }\n        />\n      </>\n    )\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "weight", "Html"]
 }

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

@@ -2,4 +2,32 @@ export interface ComponentCommonProps {
     style?: string;
     event?: any;
     condition?: any;
+    className?: string;
+    id?: 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;
+};
+export type GSAPContext = {
+    gsap?: any;
+    ScrollTrigger?: any;
+    SplitText?: any;
+};

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;
+
+  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
+  /* 通用组件库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: #f5f5f7;
+  --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,15 @@
+:root {
+  --btn-bg-active-color: var(--brand-color-0);
+
+  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
+
+
+  --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-bg-active-color: var(--brand-color-0);
+
+  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
+  --btn-radius: 24px;
+  --radius: 0em;
+
+  --brand-color-0: #3adb67;
+}

package/dist/tokens/solix.css

@@ -0,0 +1,9 @@
+:root {
+  --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,16 @@
+:root {
+  --btn-bg-active-color: var(--brand-color-0);
+
+  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
+
+
+  --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.7",
+  "version": "0.0.27-alpha.73",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -27,15 +27,37 @@
         "default": "./dist/esm/biz-components/index.js"
       }
     },
-    "./tailwind.config.js": "./tailwind.config.ts",
-    "./style.css": "./style.css"
+    "./cpn": {
+      "require": {
+        "types": "./dist/cjs/cpn-components/index.d.ts",
+        "default": "./dist/cjs/cpn-components/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/cpn-components/index.d.ts",
+        "default": "./dist/esm/cpn-components/index.js"
+      }
+    },
+    "./tailwind.config": {
+      "require": "./tailwind.config.js",
+      "import": "./tailwind.config.js",
+      "types": "./tailwind.config.d.ts"
+    },
+    "./tailwind.config.js": {
+      "require": "./tailwind.config.js",
+      "import": "./tailwind.config.js",
+      "types": "./tailwind.config.d.ts"
+    },
+    "./style.css": "./style.css",
+    "./tokens/*": "./dist/tokens/*"
   },
   "description": "",
   "files": [
     "dist/**",
     "*.css",
     "README.md",
-    "CONTRIBUTING.md"
+    "CONTRIBUTING.md",
+    "tailwind.config.js",
+    "tailwind.config.d.ts"
   ],
   "sideEffects": false,
   "keywords": [],
@@ -45,13 +67,17 @@
     "@babel/preset-env": "^7.24.6",
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
+    "@hyrious/esbuild-plugin-commonjs": "^0.2.6",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "babel-jest": "^29.7.0",
     "esbuild": "^0.20.2",
+    "esbuild-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,18 +87,22 @@
     "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-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "@payloadcms/richtext-lexical": "^3.37.0",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-visually-hidden": "^1.2.2",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -83,9 +113,15 @@
     "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"
+    "vaul": "^1.1.2",
+    "react-responsive": "10.0.1"
+  },
+  "peerDependencies": {
+    "@gsap/react": "^2.1.2",
+    "gsap": "^3.13.0"
   },
   "publishConfig": {
     "access": "public",