diff --git a/docs/.vitepress/code.json b/docs/.vitepress/code.json
index 1608a003..04a7ac7e 100644
--- a/docs/.vitepress/code.json
+++ b/docs/.vitepress/code.json
@@ -1,18 +1,18 @@
 {
-  "accordion": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SAccordion, SCard } from 'soy-ui';\nimport { Minus, Plus } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoAccordion'\n});\n\nconst single = ref('');\nconst single2 = ref('');\nconst single3 = ref('');\nconst multi = ref<string[]>([]);\nconst multi2 = ref<string[]>([]);\n\ntype AccordionItems = {\n  value: string;\n  title: string;\n  content: string;\n};\n\nconst items: AccordionItems[] = [\n  {\n    value: '1',\n    title: 'Is it accessible?',\n    content: 'Yes. It adheres to the WAI-ARIA design pattern.'\n  },\n  {\n    value: '2',\n    title: 'Is it unstyled?',\n    content: \"Yes. It's unstyled by default, giving you freedom over the look and feel.\"\n  },\n  {\n    value: '3',\n    title: 'Can it be animated?',\n    content: 'Yes! You can use the transition prop to configure the animation.'\n  }\n];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Single Collapse\" split>\n      <SAccordion v-model=\"single\" type=\"single\" collapsible :items=\"items\" />\n    </SCard>\n    <SCard title=\"Multi Collapse\" split>\n      <SAccordion v-model=\"multi\" type=\"multiple\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Single Collapse (always open one)\" split>\n      <SAccordion v-model=\"single2\" type=\"single\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Custom Styling\" split>\n      <SAccordion\n        v-model=\"single3\"\n        type=\"single\"\n        collapsible\n        :items=\"items\"\n        :ui=\"{\n          item: 'border-b-0',\n          content: 'px-3 leading-8',\n          trigger: `mb-2 rounded-md px-3 text-left text-sm underline-offset-2 data-[state=closed]:(bg-muted/50 no-underline) data-[state=open]:(bg-secondary-foreground/20 underline hover:bg-secondary-foreground/20 hover:underline) hover:bg-muted`\n        }\"\n      />\n    </SCard>\n    <SCard title=\"Custom Icon\" split>\n      <SAccordion v-model=\"multi2\" type=\"multiple\" :items=\"items\">\n        <template #triggerIcon=\"{ open }\">\n          <Minus v-if=\"open\" />\n          <Plus v-else />\n        </template>\n      </SAccordion>\n    </SCard>\n  </div>\n</template>\n",
+  "accordion": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SAccordion, SCard } from 'soy-ui';\nimport type { AccordionItemData, ThemeSize } from 'soy-ui';\nimport { Earth, Info, Minus, Plus, Rocket } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoAccordion'\n});\n\nconst single = ref('');\nconst single2 = ref('');\nconst single3 = ref('');\nconst multi = ref<string[]>([]);\nconst multi2 = ref<string[]>([]);\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nconst items: AccordionItemData[] = [\n  {\n    value: '1',\n    title: 'Is it accessible?',\n    content: 'Yes. It adheres to the WAI-ARIA design pattern.',\n    icon: Info\n  },\n  {\n    value: '2',\n    title: 'Is it unstyled?',\n    content: \"Yes. It's unstyled by default, giving you freedom over the look and feel.\",\n    icon: Rocket\n  },\n  {\n    value: '3',\n    title: 'Can it be animated?',\n    content: 'Yes! You can use the transition prop to configure the animation.',\n    icon: Earth\n  }\n];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Single Collapse\" split>\n      <SAccordion v-model=\"single\" type=\"single\" collapsible :items=\"items\" />\n    </SCard>\n    <SCard title=\"Multi Collapse\" split>\n      <SAccordion v-model=\"multi\" type=\"multiple\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Single Collapse (always open one)\" split>\n      <SAccordion v-model=\"single2\" type=\"single\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Custom Styling\" split>\n      <SAccordion\n        v-model=\"single3\"\n        type=\"single\"\n        collapsible\n        :items=\"items\"\n        :ui=\"{\n          item: 'border-b-0',\n          content: 'px-3 leading-8',\n          trigger: `mb-2 rounded-md px-3 text-left underline-offset-2 data-[state=closed]:(bg-muted/50 no-underline) data-[state=open]:(bg-secondary-foreground/20 underline hover:bg-secondary-foreground/20 hover:underline) hover:bg-muted`\n        }\"\n      />\n    </SCard>\n    <SCard title=\"Custom Icon\" split>\n      <SAccordion v-model=\"multi2\" type=\"multiple\" :items=\"items\">\n        <template #trigger-icon=\"{ open }\">\n          <Minus v-if=\"open\" />\n          <Plus v-else />\n        </template>\n      </SAccordion>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-wrap justify-between gap-4\">\n        <SCard v-for=\"size in sizes\" :key=\"size\" :title=\"size\" split class=\"basis-32% lt-lg:basis-48% lt-sm:basis-100%\">\n          <SAccordion :size=\"size\" :items=\"items\" collapsible />\n        </SCard>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
   "alert-dialog": "<script setup lang=\"ts\">\nimport { SAlertDialog, SAlertDialogAction, SAlertDialogCancel, SButton, SCard } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoAlertDialog'\n});\n</script>\n\n<template>\n  <SCard title=\"Alert Dialog\">\n    <div class=\"flex-c gap-4\">\n      <SCard title=\"Destructive\" split>\n        <SAlertDialog title=\"Are you sure delete?\" type=\"destructive\">\n          <template #trigger>\n            <SButton color=\"destructive\" variant=\"outline\">Show Dialog</SButton>\n          </template>\n          <p>This action will delete all data</p>\n          <template #footer>\n            <SAlertDialogCancel />\n            <SAlertDialogAction />\n          </template>\n        </SAlertDialog>\n      </SCard>\n      <SCard title=\"Success\" split>\n        <SAlertDialog title=\"Congratulations\" type=\"success\">\n          <template #trigger>\n            <SButton color=\"success\" variant=\"outline\">Show Dialog</SButton>\n          </template>\n          <p>You have successfully completed the task</p>\n          <template #footer>\n            <SAlertDialogAction />\n          </template>\n        </SAlertDialog>\n      </SCard>\n      <SCard title=\"Warning\" split>\n        <SAlertDialog title=\"Warning\" type=\"warning\">\n          <template #trigger>\n            <SButton color=\"warning\" variant=\"outline\">Show Dialog</SButton>\n          </template>\n          <p>Be careful with this action</p>\n          <template #footer>\n            <SAlertDialogCancel />\n            <SAlertDialogAction />\n          </template>\n        </SAlertDialog>\n      </SCard>\n      <SCard title=\"Info\" split>\n        <SAlertDialog title=\"Information\" type=\"info\">\n          <template #trigger>\n            <SButton color=\"info\" variant=\"outline\">Show Dialog</SButton>\n          </template>\n          <p>Here is some information for you</p>\n          <template #footer>\n            <SAlertDialogAction />\n          </template>\n        </SAlertDialog>\n      </SCard>\n    </div>\n  </SCard>\n</template>\n",
-  "alert": "<script setup lang=\"ts\">\nimport { SAlert, SCard } from 'soy-ui';\nimport type { AlertVariant, ThemeColor } from 'soy-ui';\nimport { Rocket, Terminal, TriangleAlert } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoAlert'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: AlertVariant[] = ['solid', 'pure', 'outline', 'soft', 'ghost'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-c-stretch gap-12px\">\n        <SAlert v-for=\"color in colors\" :key=\"color\" :color=\"color\" :title=\"color\">\n          <template #icon>\n            <Terminal />\n          </template>\n        </SAlert>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex flex-c-stretch gap-12px\">\n        <SAlert\n          v-for=\"(variant, index) in variants\"\n          :key=\"variant\"\n          :color=\"colors[index]\"\n          :variant=\"variant\"\n          :title=\"variant\"\n          closable\n        >\n          <template #icon>\n            <Terminal />\n          </template>\n        </SAlert>\n      </div>\n    </SCard>\n    <SCard title=\"With description\" split>\n      <SAlert variant=\"pure\" title=\"Heads up!\" description=\"You can add components to your app using the cli.\" />\n    </SCard>\n    <SCard title=\"With Icon\" split>\n      <SAlert color=\"success\" variant=\"outline\" title=\"Flighting !!!\">\n        <template #icon>\n          <Rocket />\n        </template>\n      </SAlert>\n    </SCard>\n    <SCard title=\"With description and icon\" split>\n      <SAlert\n        color=\"destructive\"\n        variant=\"ghost\"\n        title=\"Error\"\n        description=\"Your session has expired. Please log in again.\"\n      >\n        <template #icon>\n          <TriangleAlert />\n        </template>\n      </SAlert>\n    </SCard>\n    <SCard title=\"Closable\" split>\n      <SAlert variant=\"outline\" title=\"Closable\" description=\"You can click close icon to close alert.\" closable />\n    </SCard>\n  </div>\n</template>\n",
+  "alert": "<script setup lang=\"ts\">\nimport { SAlert, SCard } from 'soy-ui';\nimport type { AlertVariant, ThemeColor, ThemeSize } from 'soy-ui';\nimport { Rocket, Terminal, TriangleAlert } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoAlert'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: AlertVariant[] = ['solid', 'pure', 'outline', 'soft', 'ghost'];\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-c-stretch gap-12px\">\n        <SAlert v-for=\"color in colors\" :key=\"color\" :color=\"color\" :title=\"color\">\n          <template #icon>\n            <Terminal />\n          </template>\n        </SAlert>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex flex-c-stretch gap-12px\">\n        <SAlert\n          v-for=\"(variant, index) in variants\"\n          :key=\"variant\"\n          :color=\"colors[index]\"\n          :variant=\"variant\"\n          :title=\"variant\"\n          closable\n        >\n          <template #icon>\n            <Terminal />\n          </template>\n        </SAlert>\n      </div>\n    </SCard>\n    <SCard title=\"With description\" split>\n      <SAlert variant=\"pure\" title=\"Heads up!\" description=\"You can add components to your app using the cli.\" />\n    </SCard>\n    <SCard title=\"With Icon\" split>\n      <SAlert color=\"success\" variant=\"outline\" title=\"Flighting !!!\">\n        <template #icon>\n          <Rocket />\n        </template>\n      </SAlert>\n    </SCard>\n    <SCard title=\"With description and icon\" split>\n      <SAlert\n        color=\"destructive\"\n        variant=\"ghost\"\n        title=\"Error\"\n        description=\"Your session has expired. Please log in again.\"\n      >\n        <template #icon>\n          <TriangleAlert />\n        </template>\n      </SAlert>\n    </SCard>\n    <SCard title=\"Closable\" split>\n      <SAlert variant=\"outline\" title=\"Closable\" description=\"You can click close icon to close alert.\" closable />\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-c-stretch gap-12px\">\n        <SAlert\n          v-for=\"(size, index) in sizes\"\n          :key=\"size\"\n          :title=\"`Size: ${size}`\"\n          :color=\"colors[index]\"\n          variant=\"soft\"\n          :size=\"size\"\n          closable\n        >\n          <template #icon>\n            <Terminal />\n          </template>\n        </SAlert>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
   "aspect-ratio": "<script setup lang=\"ts\">\nimport { SAspectRatio, SCard } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoAspectRatio'\n});\n</script>\n\n<template>\n  <SCard title=\"Aspect Ratio\" split>\n    <div class=\"w-600px lt-sm:w-full\">\n      <SAspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n        <img\n          src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n          alt=\"Photo by Drew Beamer\"\n          class=\"h-full w-full rounded-md object-cover\"\n        />\n      </SAspectRatio>\n    </div>\n  </SCard>\n</template>\n",
-  "avatar": "<script setup lang=\"ts\">\nimport { SAvatar, SCard } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoAvatar'\n});\n\nconst soybeanUiRsc = 'https://soybean-ui.com/logo.svg';\n\nconst soybeanSrc = 'https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/logo.png';\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <div class=\"flex gap-12px\">\n        <SAvatar :src=\"soybeanUiRsc\" alt=\"SoybeanUI\" fallback-label=\"CN\" />\n        <SAvatar :src=\"soybeanSrc\" alt=\"SoybeanUI\">\n          <template #fallback>SoybeanUI</template>\n        </SAvatar>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "badge": "<script setup lang=\"ts\">\nimport { SBadge, SCard } from 'soy-ui';\nimport type { BadgeShape, BadgeVariant, ThemeColor } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoBadge'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: BadgeVariant[] = ['solid', 'pure', 'outline', 'soft', 'ghost'];\nconst shapes: BadgeShape[] = ['auto', 'rounded'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SBadge v-for=\"color in colors\" :key=\"color\" :color=\"color\">{{ color }}</SBadge>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex-c-stretch gap-12px\">\n        <div v-for=\"color in colors\" :key=\"color\" class=\"flex flex-wrap gap-12px\">\n          <SBadge v-for=\"variant in variants\" :key=\"variant\" :color=\"color\" :variant=\"variant\">{{ variant }}</SBadge>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Shape\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SBadge v-for=\"shape in shapes\" :key=\"shape\" variant=\"ghost\" :shape=\"shape\">{{ shape }}</SBadge>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "breadcrumb": "<script setup lang=\"ts\">\nimport { SBreadcrumb, SBreadcrumbEllipsis, SBreadcrumbPage, SCard, SDropdownMenu } from 'soy-ui';\nimport type { BreadcrumbItem, MenuOptionData } from 'soy-ui';\nimport { Component, Dock, Home } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoBreadcrumb'\n});\n\nconst items: BreadcrumbItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Components',\n    value: 'components',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb',\n    value: 'breadcrumb',\n    icon: Dock\n  }\n];\n\nconst items2: BreadcrumbItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Vue',\n    value: 'vue',\n    href: 'https://vuejs.org',\n    target: '_blank'\n  },\n  {\n    label: 'SoybeanUI',\n    value: 'soybean-ui',\n    href: 'https://soybean-ui.com',\n    target: '_blank'\n  }\n];\n\nconst items3: BreadcrumbItem[] = items.concat([\n  {\n    label: 'Components2',\n    value: 'components2',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb2',\n    value: 'breadcrumb2',\n    icon: Dock\n  }\n]);\n\ninterface DropdownItem extends BreadcrumbItem {\n  items?: MenuOptionData[];\n}\n\nconst dropdownItems: DropdownItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Dropdown',\n    value: 'dropdown',\n    items: [\n      {\n        label: 'Documentation',\n        value: 'documentation'\n      },\n      {\n        label: 'Themes',\n        value: 'themes'\n      },\n      {\n        label: 'Github',\n        value: 'github'\n      }\n    ]\n  },\n  {\n    label: 'Components',\n    value: 'components',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb',\n    value: 'breadcrumb',\n    icon: Dock\n  }\n];\n\nfunction handleClick(item: BreadcrumbItem) {\n  console.log('clicked:', item);\n}\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <SBreadcrumb :items=\"items\" @click=\"handleClick\" />\n    </SCard>\n    <SCard title=\"Custom Separator\" split>\n      <SBreadcrumb :items=\"items\">\n        <template #separator>&nbsp;/&nbsp;</template>\n      </SBreadcrumb>\n    </SCard>\n    <SCard title=\"Link\" split>\n      <SBreadcrumb :items=\"items2\" />\n    </SCard>\n    <SCard title=\"Ellipsis\" split>\n      <SBreadcrumb :items=\"items3\" ellipsis />\n    </SCard>\n    <SCard title=\"Item Dropdown\" split>\n      <SBreadcrumb :items=\"dropdownItems\">\n        <template #default=\"{ item }\">\n          <SDropdownMenu v-if=\"item.items\" :items=\"item.items\" :modal=\"false\">\n            <template #trigger>\n              <SBreadcrumbPage class=\"cursor-pointer\">{{ item.label }}</SBreadcrumbPage>\n            </template>\n          </SDropdownMenu>\n          <SBreadcrumbPage v-else>{{ item.label }}</SBreadcrumbPage>\n        </template>\n      </SBreadcrumb>\n    </SCard>\n    <SCard title=\"Ellipsis Dropdown\" split>\n      <SBreadcrumb :items=\"items3\" ellipsis>\n        <template #ellipsis=\"{ ellipsisItems }\">\n          <SDropdownMenu :items=\"ellipsisItems\" :modal=\"false\">\n            <template #trigger>\n              <SBreadcrumbEllipsis class=\"cursor-pointer\" />\n            </template>\n          </SDropdownMenu>\n        </template>\n      </SBreadcrumb>\n    </SCard>\n  </div>\n</template>\n",
-  "button": "<script setup lang=\"ts\">\nimport { SButton, SButtonGroup, SButtonIcon, SButtonLink, SCard, SLoadingButton } from 'soy-ui';\nimport type { ButtonShadow, ButtonVariant, ThemeColor } from 'soy-ui';\nimport { Loader, Minus, Pause, Plus, SkipBack, SkipForward } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoButton'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: ButtonVariant[] = ['solid', 'pure', 'plain', 'outline', 'dashed', 'soft', 'ghost', 'link'];\nconst shadows: ButtonShadow[] = ['none', 'sm', 'md', 'lg'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton v-for=\"color in colors\" :key=\"color\" :color=\"color\">{{ color }}</SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex-c-stretch gap-12px\">\n        <div v-for=\"color in colors\" :key=\"color\" class=\"flex flex-wrap gap-12px\">\n          <SButton v-for=\"variant in variants\" :key=\"variant\" :color=\"color\" :variant=\"variant\">{{ variant }}</SButton>\n        </div>\n      </div>\n    </SCard>\n\n    <SCard title=\"Shape\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"primary\" variant=\"solid\" shape=\"rounded\">rounded</SButton>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"destructive\" variant=\"plain\" shape=\"square\">\n            <Minus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">square</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"success\" variant=\"outline\" shape=\"circle\">\n            <Plus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">circle</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"warning\" variant=\"dashed\" shape=\"square\">\n            <Plus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">square</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon shape=\"circle\">\n            <Minus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">circle</div>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Shadow\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton v-for=\"(item, index) in shadows\" :key=\"item\" :color=\"colors[index]\" variant=\"plain\" :shadow=\"item\">\n          {{ item }}\n        </SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Slot\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"primary\">\n          <template #leading>\n            <Plus />\n          </template>\n          leading\n        </SButton>\n        <SButton color=\"destructive\" variant=\"outline\">\n          After\n          <template #trailing>\n            <Minus />\n          </template>\n        </SButton>\n        <SButton color=\"success\" variant=\"dashed\">\n          <template #leading>\n            <Plus />\n          </template>\n          Both\n          <template #trailing>\n            <Minus />\n          </template>\n        </SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Disabled\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"destructive\" variant=\"solid\" disabled>disabled</SButton>\n        <SButton color=\"success\" variant=\"outline\" disabled>disabled</SButton>\n        <SButton color=\"warning\" variant=\"dashed\" disabled>disabled</SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Loading\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SLoadingButton color=\"success\" variant=\"solid\" loading>Loading...</SLoadingButton>\n        <SLoadingButton color=\"warning\" variant=\"outline\" loading>\n          <template #loading>\n            <Loader class=\"animate-spin\" />\n          </template>\n          Loading...\n        </SLoadingButton>\n      </div>\n    </SCard>\n    <SCard title=\"Link\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonLink href=\"https://soybeanjs.cn\">soybeanjs.cn</SButtonLink>\n      </div>\n    </SCard>\n    <SCard title=\"Button Group\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonGroup>\n          <SButton variant=\"outline\">\n            <SkipBack />\n          </SButton>\n          <SButton variant=\"outline\">\n            <Pause />\n          </SButton>\n          <SButton variant=\"outline\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n        <SButtonGroup>\n          <SButton color=\"destructive\" variant=\"outline\">\n            <SkipBack />\n          </SButton>\n          <SButton color=\"destructive\" variant=\"outline\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n      </div>\n    </SCard>\n    <SCard title=\"Button Group vertical\" split>\n      <div class=\"w-100px\">\n        <SButtonGroup orientation=\"vertical\">\n          <SButton variant=\"dashed\">\n            <SkipBack />\n          </SButton>\n          <SButton variant=\"dashed\">\n            <Pause />\n          </SButton>\n          <SButton variant=\"dashed\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n      </div>\n    </SCard>\n    <SCard title=\"Button Icon\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonIcon>\n          <SkipBack />\n        </SButtonIcon>\n        <SButtonIcon>\n          <SkipForward />\n        </SButtonIcon>\n        <SButtonIcon>\n          <Pause />\n        </SButtonIcon>\n      </div>\n    </SCard>\n    <SCard title=\"Button Icon: fitContent\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <SkipBack />\n        </SButtonIcon>\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <SkipForward />\n        </SButtonIcon>\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <Pause />\n        </SButtonIcon>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "card": "<script setup lang=\"ts\">\nimport { SButtonIcon, SCard } from 'soy-ui';\nimport { X } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoCard'\n});\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Card\" split>\n      <SCard title=\"Default\" class=\"mb-12px\">\n        <template #extra>\n          <span>extra</span>\n        </template>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n        <template #footer>Footer</template>\n      </SCard>\n      <SCard title=\"Split\" split class=\"mb-12px\">\n        <template #extra>\n          <SButtonIcon fit-content>\n            <X />\n          </SButtonIcon>\n        </template>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n        <template #footer>Footer</template>\n      </SCard>\n    </SCard>\n    <SCard title=\"More\" split>\n      <SCard class=\"mb-12px\">\n        <p class=\"text-gray-500 dark:text-neutral-400\">Only Content</p>\n      </SCard>\n      <SCard title=\"Title\" split class=\"mb-12px\">\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n      </SCard>\n      <SCard split>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n        <template #footer>Footer</template>\n      </SCard>\n    </SCard>\n  </div>\n</template>\n",
+  "avatar": "<script setup lang=\"ts\">\nimport { SAvatar, SCard } from 'soy-ui';\nimport type { ThemeSize } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoAvatar'\n});\n\nconst soybeanUiRsc = 'https://soybean-ui.com/logo.svg';\n\nconst soybeanSrc = 'https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/logo.png';\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <div class=\"flex gap-12px\">\n        <SAvatar :src=\"soybeanUiRsc\" alt=\"SoybeanUI\" fallback-label=\"CN\" />\n        <SAvatar :src=\"soybeanUiRsc\" alt=\"SoybeanUI\">\n          <template #fallback>SoybeanUI</template>\n        </SAvatar>\n      </div>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <div v-for=\"size in sizes\" :key=\"size\" class=\"flex-c-center\">\n          <SAvatar :size=\"size\" :src=\"soybeanSrc\" alt=\"SoybeanAdmin\" fallback-label=\"SOY\" />\n          <p>{{ size }}</p>\n        </div>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
+  "badge": "<script setup lang=\"ts\">\nimport { SBadge, SCard } from 'soy-ui';\nimport type { BadgeShape, BadgeVariant, ThemeColor, ThemeSize } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoBadge'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: BadgeVariant[] = ['solid', 'pure', 'outline', 'soft', 'ghost'];\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\nconst shapes: BadgeShape[] = ['auto', 'rounded'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SBadge v-for=\"color in colors\" :key=\"color\" :color=\"color\">{{ color }}</SBadge>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex-c-stretch gap-12px\">\n        <div v-for=\"color in colors\" :key=\"color\" class=\"flex flex-wrap gap-12px\">\n          <SBadge v-for=\"variant in variants\" :key=\"variant\" :color=\"color\" :variant=\"variant\">{{ variant }}</SBadge>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SBadge v-for=\"size in sizes\" :key=\"size\" :size=\"size\" variant=\"soft\">\n          {{ size }}\n        </SBadge>\n      </div>\n    </SCard>\n    <SCard title=\"Shape\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SBadge v-for=\"shape in shapes\" :key=\"shape\" variant=\"ghost\" :shape=\"shape\">{{ shape }}</SBadge>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
+  "breadcrumb": "<script setup lang=\"ts\">\nimport { SBreadcrumb, SBreadcrumbEllipsis, SBreadcrumbPage, SCard, SDropdownMenu } from 'soy-ui';\nimport type { BreadcrumbItem, MenuOptionData, ThemeSize } from 'soy-ui';\nimport { Component, Dock, Home } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoBreadcrumb'\n});\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nconst items: BreadcrumbItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Components',\n    value: 'components',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb',\n    value: 'breadcrumb',\n    icon: Dock\n  }\n];\n\nconst items2: BreadcrumbItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Vue',\n    value: 'vue',\n    href: 'https://vuejs.org',\n    target: '_blank'\n  },\n  {\n    label: 'SoybeanUI',\n    value: 'soybean-ui',\n    href: 'https://soybean-ui.com',\n    target: '_blank'\n  }\n];\n\nconst items3: BreadcrumbItem[] = items.concat([\n  {\n    label: 'Components2',\n    value: 'components2',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb2',\n    value: 'breadcrumb2',\n    icon: Dock\n  }\n]);\n\ninterface DropdownItem extends BreadcrumbItem {\n  items?: MenuOptionData[];\n}\n\nconst dropdownItems: DropdownItem[] = [\n  {\n    label: 'Home',\n    value: 'home',\n    icon: Home\n  },\n  {\n    label: 'Dropdown',\n    value: 'dropdown',\n    items: [\n      {\n        label: 'Documentation',\n        value: 'documentation'\n      },\n      {\n        label: 'Themes',\n        value: 'themes'\n      },\n      {\n        label: 'Github',\n        value: 'github'\n      }\n    ]\n  },\n  {\n    label: 'Components',\n    value: 'components',\n    icon: Component\n  },\n  {\n    label: 'Breadcrumb',\n    value: 'breadcrumb',\n    icon: Dock\n  }\n];\n\nfunction handleClick(item: BreadcrumbItem) {\n  console.log('clicked:', item);\n}\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <SBreadcrumb :items=\"items\" @click=\"handleClick\" />\n    </SCard>\n    <SCard title=\"Custom Separator\" split>\n      <SBreadcrumb :items=\"items\">\n        <template #separator>&nbsp;/&nbsp;</template>\n      </SBreadcrumb>\n    </SCard>\n    <SCard title=\"Link\" split>\n      <SBreadcrumb :items=\"items2\" />\n    </SCard>\n    <SCard title=\"Ellipsis\" split>\n      <SBreadcrumb :items=\"items3\" ellipsis />\n    </SCard>\n    <SCard title=\"Item Dropdown\" split>\n      <SBreadcrumb :items=\"dropdownItems\">\n        <template #default=\"{ item }\">\n          <SDropdownMenu v-if=\"item.items\" :items=\"item.items\" :modal=\"false\">\n            <template #trigger>\n              <SBreadcrumbPage class=\"cursor-pointer\">{{ item.label }}</SBreadcrumbPage>\n            </template>\n          </SDropdownMenu>\n          <SBreadcrumbPage v-else>{{ item.label }}</SBreadcrumbPage>\n        </template>\n      </SBreadcrumb>\n    </SCard>\n    <SCard title=\"Ellipsis Dropdown\" split>\n      <SBreadcrumb :items=\"items3\" ellipsis>\n        <template #ellipsis=\"{ ellipsisItems }\">\n          <SDropdownMenu :items=\"ellipsisItems\" :modal=\"false\">\n            <template #trigger>\n              <SBreadcrumbEllipsis class=\"cursor-pointer\" />\n            </template>\n          </SDropdownMenu>\n        </template>\n      </SBreadcrumb>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex-c-stretch gap-12px\">\n        <SBreadcrumb v-for=\"size in sizes\" :key=\"size\" :items=\"items\" :size=\"size\" />\n      </div>\n    </SCard>\n  </div>\n</template>\n",
+  "button": "<script setup lang=\"ts\">\nimport { SButton, SButtonGroup, SButtonIcon, SButtonLink, SCard, SLoadingButton } from 'soy-ui';\nimport type { ButtonShadow, ButtonVariant, ThemeColor, ThemeSize } from 'soy-ui';\nimport { Loader, Minus, Pause, Plus, SkipBack, SkipForward } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoButton'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst variants: ButtonVariant[] = ['solid', 'pure', 'plain', 'outline', 'dashed', 'soft', 'ghost', 'link'];\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\nconst shadows: ButtonShadow[] = ['none', 'sm', 'md', 'lg'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton v-for=\"color in colors\" :key=\"color\" :color=\"color\">{{ color }}</SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Variant\" split>\n      <div class=\"flex-c-stretch gap-12px\">\n        <div v-for=\"color in colors\" :key=\"color\" class=\"flex flex-wrap gap-12px\">\n          <SButton v-for=\"variant in variants\" :key=\"variant\" :color=\"color\" :variant=\"variant\">{{ variant }}</SButton>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton v-for=\"(size, index) in sizes\" :key=\"size\" :color=\"colors[index]\" variant=\"outline\" :size=\"size\">\n          {{ size }}\n        </SButton>\n      </div>\n    </SCard>\n\n    <SCard title=\"Shape\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"primary\" variant=\"solid\" shape=\"rounded\">rounded</SButton>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"destructive\" variant=\"plain\" shape=\"square\">\n            <Minus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">square</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"success\" variant=\"outline\" shape=\"circle\">\n            <Plus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">circle</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon color=\"warning\" variant=\"dashed\" shape=\"square\">\n            <Plus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">square</div>\n        </div>\n        <div class=\"flex-c-center\">\n          <SButtonIcon shape=\"circle\">\n            <Minus />\n          </SButtonIcon>\n          <div class=\"text-12px text-#666\">circle</div>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Shadow\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton v-for=\"(item, index) in shadows\" :key=\"item\" :color=\"colors[index]\" variant=\"plain\" :shadow=\"item\">\n          {{ item }}\n        </SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Slot\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"primary\">\n          <template #leading>\n            <Plus />\n          </template>\n          leading\n        </SButton>\n        <SButton color=\"destructive\" variant=\"outline\">\n          After\n          <template #trailing>\n            <Minus />\n          </template>\n        </SButton>\n        <SButton color=\"success\" variant=\"dashed\">\n          <template #leading>\n            <Plus />\n          </template>\n          Both\n          <template #trailing>\n            <Minus />\n          </template>\n        </SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Disabled\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButton color=\"destructive\" variant=\"solid\" disabled>disabled</SButton>\n        <SButton color=\"success\" variant=\"outline\" disabled>disabled</SButton>\n        <SButton color=\"warning\" variant=\"dashed\" disabled>disabled</SButton>\n      </div>\n    </SCard>\n    <SCard title=\"Loading\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SLoadingButton color=\"success\" variant=\"solid\" loading>Loading...</SLoadingButton>\n        <SLoadingButton color=\"warning\" variant=\"outline\" loading>\n          <template #loading>\n            <Loader class=\"animate-spin\" />\n          </template>\n          Loading...\n        </SLoadingButton>\n      </div>\n    </SCard>\n    <SCard title=\"Link\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonLink href=\"https://soybeanjs.cn\">soybeanjs.cn</SButtonLink>\n      </div>\n    </SCard>\n    <SCard title=\"Button Group\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonGroup>\n          <SButton variant=\"outline\">\n            <SkipBack />\n          </SButton>\n          <SButton variant=\"outline\">\n            <Pause />\n          </SButton>\n          <SButton variant=\"outline\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n        <SButtonGroup>\n          <SButton color=\"destructive\" variant=\"outline\">\n            <SkipBack />\n          </SButton>\n          <SButton color=\"destructive\" variant=\"outline\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n      </div>\n    </SCard>\n    <SCard title=\"Button Group vertical\" split>\n      <div class=\"w-100px\">\n        <SButtonGroup orientation=\"vertical\">\n          <SButton variant=\"dashed\">\n            <SkipBack />\n          </SButton>\n          <SButton variant=\"dashed\">\n            <Pause />\n          </SButton>\n          <SButton variant=\"dashed\">\n            <SkipForward />\n          </SButton>\n        </SButtonGroup>\n      </div>\n    </SCard>\n    <SCard title=\"Button Icon\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonIcon>\n          <SkipBack />\n        </SButtonIcon>\n        <SButtonIcon>\n          <SkipForward />\n        </SButtonIcon>\n        <SButtonIcon>\n          <Pause />\n        </SButtonIcon>\n      </div>\n    </SCard>\n    <SCard title=\"Button Icon: fitContent\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <SkipBack />\n        </SButtonIcon>\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <SkipForward />\n        </SButtonIcon>\n        <SButtonIcon fit-content class=\"p-0.5 text-xl\">\n          <Pause />\n        </SButtonIcon>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
+  "card": "<script setup lang=\"ts\">\nimport { SBadge, SButtonIcon, SCard } from 'soy-ui';\nimport type { ThemeSize } from 'soy-ui';\nimport { Rocket, X } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoCard'\n});\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Size\" split>\n      <div class=\"w-1/2 i-flex-c pr-10px lt-sm:(w-full pr-0)\">\n        <SCard v-for=\"size in sizes\" :key=\"size\" :title=\"`Size: ${size}`\" :size=\"size\" class=\"mb-12px\">\n          <template #extra>\n            <span>extra</span>\n          </template>\n          <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n          <template #footer>Footer</template>\n        </SCard>\n      </div>\n      <div class=\"w-1/2 i-flex-c pl-10px lt-sm:(w-full pl-0)\">\n        <SCard v-for=\"size in sizes\" :key=\"size\" :title=\"`Size: ${size}`\" :size=\"size\" split class=\"mb-12px\">\n          <template #extra>\n            <SButtonIcon fit-content :size=\"size\">\n              <X />\n            </SButtonIcon>\n          </template>\n          <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n          <template #footer>Footer</template>\n        </SCard>\n      </div>\n    </SCard>\n    <SCard title=\"More\" split :ui=\"{ content: 'flex-c-stretch gap-4' }\">\n      <SCard>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Only Content</p>\n      </SCard>\n      <SCard title=\"Title\" split>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n      </SCard>\n      <SCard split>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n        <template #footer>Footer</template>\n      </SCard>\n      <SCard title=\"Title Slot\" split>\n        <template #title-leading>\n          <Rocket />\n        </template>\n        <template #title-trailing>\n          <SBadge variant=\"soft\">Badge</SBadge>\n        </template>\n        <p class=\"text-gray-500 dark:text-neutral-400\">Content</p>\n      </SCard>\n    </SCard>\n  </div>\n</template>\n",
   "carousel": "<script setup lang=\"ts\">\nimport { SCard, SCarousel } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoCarousel'\n});\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <div class=\"p-10\">\n        <SCarousel\n          :counts=\"10\"\n          :opts=\"{\n            loop: true\n          }\"\n          :ui=\"{ item: 'h-100px md:basis-1/4 lg:basis-1/5' }\"\n        >\n          <template #default=\"{ index }\">\n            <SCard class=\"size-full\">\n              <div class=\"size-full flex-center\">\n                {{ index }}\n              </div>\n            </SCard>\n          </template>\n        </SCarousel>\n      </div>\n    </SCard>\n    <SCard title=\"Vertical\" split>\n      <div class=\"p-10\">\n        <SCarousel\n          :counts=\"10\"\n          :opts=\"{\n            loop: true\n          }\"\n          orientation=\"vertical\"\n          :ui=\"{ content: 'h-200px', item: 'md:basis-1/2' }\"\n        >\n          <template #default=\"{ index }\">\n            <SCard class=\"size-full\">\n              {{ index }}\n            </SCard>\n          </template>\n        </SCarousel>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "checkbox": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { SCard, SCheckbox, SCheckboxGroup } from 'soy-ui';\nimport type { CheckboxGroupItem, CheckedState, ThemeColor } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoCheckbox'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\n\nconst checks = ref<string[]>(['1']);\nconst items = createCheckboxItems();\n\nconst checks2 = ref<string[]>(['1']);\nconst items2 = createCheckboxItems();\n\nconst checks3 = ref<string[]>([]);\nconst items3 = createCheckboxItems();\nconst checked = computed<CheckedState>({\n  get() {\n    if (checks3.value.length === 0) return false;\n\n    if (checks3.value.length === items3.length) return true;\n\n    return 'indeterminate';\n  },\n  set(value) {\n    checks3.value = value === true ? items3.map(item => item.value) : [];\n  }\n});\n\nfunction createCheckboxItems() {\n  return [\n    { label: 'A', value: '1' },\n    { label: 'B', value: '2' },\n    { label: 'C', value: '3' }\n  ] satisfies CheckboxGroupItem[];\n}\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SCheckbox v-for=\"color in colors\" :key=\"color\" :color=\"color\" :label=\"color\" />\n      </div>\n    </SCard>\n    <SCard title=\"Group\" split>\n      <SCheckboxGroup v-model=\"checks\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Orientation: Vertical\" split>\n      <SCheckboxGroup v-model=\"checks2\" orientation=\"vertical\" :items=\"items2\" />\n    </SCard>\n    <SCard title=\"Indeterminate\" split>\n      <SCheckbox v-model=\"checked\" label=\"Check All\" />\n      <SCheckboxGroup v-model=\"checks3\" :items=\"items3\" class=\"mt-3\" />\n    </SCard>\n    <SCard title=\"Disabled\" split>\n      <SCheckboxGroup :default-value=\"['2']\" :items=\"items\" disabled />\n    </SCard>\n  </div>\n</template>\n",
-  "chip": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SButton, SCard, SChip, SInput, SSwitch } from 'soy-ui';\nimport type { ChipPosition, ThemeColor } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoChip'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst positions: ChipPosition[] = ['top-right', 'bottom-right', 'top-left', 'bottom-left'];\n\nconst text = ref('99+');\nconst slotText = ref('New');\nconst show = ref(true);\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex gap-3\">\n        <div v-for=\"color in colors\" :key=\"color\">\n          <SChip :color=\"color\">\n            <SButton variant=\"dashed\">{{ color }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Color With Text\" split>\n      <div class=\"flex gap-4\">\n        <div v-for=\"color in colors\" :key=\"color\">\n          <SChip :color=\"color\" text=\"99+\">\n            <SButton variant=\"dashed\">{{ color }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Positions\" split>\n      <div class=\"flex gap-3\">\n        <div v-for=\"position in positions\" :key=\"position\">\n          <SChip :position=\"position\">\n            <SButton variant=\"dashed\" class=\"w-30\">{{ position }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"ModelValue\" split>\n      <div class=\"flex gap-3\">\n        <SInput v-model=\"text\" />\n        <SChip :text=\"text\">\n          <SButton variant=\"outline\">A</SButton>\n        </SChip>\n      </div>\n    </SCard>\n    <SCard title=\"Slot\" split>\n      <div class=\"flex gap-3\">\n        <SInput v-model=\"slotText\" />\n        <SChip :text=\"slotText\">\n          <SButton variant=\"outline\">A</SButton>\n          <template #content=\"{ value }\">{{ value }}！</template>\n        </SChip>\n      </div>\n    </SCard>\n    <SCard title=\"Show\" split>\n      <div class=\"flex gap-3\">\n        <SSwitch v-model:checked=\"show\" />\n        <SChip :show=\"show\">\n          <SButton variant=\"outline\">A</SButton>\n        </SChip>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "collapsible": "<script setup lang=\"ts\">\nimport { SButtonIcon, SCard, SCollapsible, SCollapsibleTrigger } from 'soy-ui';\nimport { ChevronsDownUp, ChevronsUpDown } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoCollapsible'\n});\n</script>\n\n<template>\n  <SCard title=\"Collapsible\" split>\n    <SCollapsible\n      class=\"w-350px lt-sm:w-auto space-y-2\"\n      :ui=\"{\n        content: 'space-y-2'\n      }\"\n    >\n      <template #default=\"{ open }\">\n        <div class=\"flex-y-center justify-between px-2 space-x-4\">\n          <h4 class=\"text-sm font-semibold\">@peduarte starred 3 repositories</h4>\n          <SCollapsibleTrigger as-child>\n            <SButtonIcon>\n              <ChevronsDownUp v-if=\"open\" />\n              <ChevronsUpDown v-else />\n            </SButtonIcon>\n          </SCollapsibleTrigger>\n        </div>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">@soybean-ui/primitives</div>\n      </template>\n      <template #content>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">@soybean-ui/colors</div>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">@stitches/react</div>\n      </template>\n    </SCollapsible>\n  </SCard>\n</template>\n",
-  "combobox": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SCard, SCombobox } from 'soy-ui';\nimport type { CommandOptionData } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoCombobox'\n});\n\nconst framework = ref('0');\n\nconst frameworks: CommandOptionData<string>[] = [\n  { value: '0', label: 'Vue' },\n  { value: '1', label: 'React' },\n  { value: '2', label: 'Next.js' },\n  { value: '3', label: 'SvelteKit' },\n  { value: '4', label: 'Nuxt' },\n  { value: '5', label: 'Remix' },\n  { value: '6', label: 'Astro' }\n];\n</script>\n\n<template>\n  <SCard title=\"Combobox\" split>\n    <div class=\"w-60 lt-sm:w-auto\">\n      <div class=\"py-3 text-18px\">Modern Mode</div>\n      <SCombobox\n        v-model=\"framework\"\n        :items=\"frameworks\"\n        trigger-label=\"Select framework\"\n        empty-label=\"No framework found.\"\n        :input-props=\"{ placeholder: 'Select framework...' }\"\n      />\n      <div class=\"py-3 text-18px\">Traditional Mode</div>\n      <SCombobox\n        v-model=\"framework\"\n        :items=\"frameworks\"\n        mode=\"traditional\"\n        empty-label=\"No framework found.\"\n        :input-props=\"{ placeholder: 'Select framework...' }\"\n      />\n    </div>\n  </SCard>\n</template>\n",
+  "checkbox": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { SCard, SCheckbox, SCheckboxGroup } from 'soy-ui';\nimport type { CheckboxGroupItem, CheckedState, ThemeColor, ThemeSize } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoCheckbox'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\n\nconst sizeChecked = ref<CheckedState>('indeterminate');\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nconst checks = ref<string[]>(['1']);\nconst items = createCheckboxItems();\n\nconst checks2 = ref<string[]>(['1']);\nconst items2 = createCheckboxItems();\n\nconst checks3 = ref<string[]>([]);\nconst items3 = createCheckboxItems();\nconst checked = computed<CheckedState>({\n  get() {\n    if (checks3.value.length === 0) return false;\n\n    if (checks3.value.length === items3.length) return true;\n\n    return 'indeterminate';\n  },\n  set(value) {\n    checks3.value = value === true ? items3.map(item => item.value) : [];\n  }\n});\n\nfunction createCheckboxItems() {\n  return [\n    { label: 'A', value: '1' },\n    { label: 'B', value: '2' },\n    { label: 'C', value: '3' }\n  ] satisfies CheckboxGroupItem[];\n}\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SCheckbox v-for=\"color in colors\" :key=\"color\" :color=\"color\" :label=\"color\" />\n      </div>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SCheckbox v-for=\"size in sizes\" :key=\"size\" v-model=\"sizeChecked\" :size=\"size\" :label=\"size\" />\n      </div>\n    </SCard>\n    <SCard title=\"Group\" split>\n      <SCheckboxGroup v-model=\"checks\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Orientation: Vertical\" split>\n      <SCheckboxGroup v-model=\"checks2\" orientation=\"vertical\" :items=\"items2\" />\n    </SCard>\n    <SCard title=\"Indeterminate\" split>\n      <SCheckbox v-model=\"checked\" label=\"Check All\" />\n      <SCheckboxGroup v-model=\"checks3\" :items=\"items3\" class=\"mt-3\" />\n    </SCard>\n    <SCard title=\"Disabled\" split>\n      <SCheckboxGroup :default-value=\"['2']\" :items=\"items\" disabled />\n    </SCard>\n  </div>\n</template>\n",
+  "chip": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SButton, SCard, SChip, SInput, SSwitch } from 'soy-ui';\nimport type { ChipPosition, ThemeColor, ThemeSize } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoChip'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\nconst positions: ChipPosition[] = ['top-right', 'bottom-right', 'top-left', 'bottom-left'];\n\nconst text = ref('99+');\nconst slotText = ref('New');\nconst show = ref(true);\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Color\" split>\n      <div class=\"flex gap-3\">\n        <div v-for=\"color in colors\" :key=\"color\">\n          <SChip :color=\"color\">\n            <SButton variant=\"dashed\">{{ color }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Color With Text\" split>\n      <div class=\"flex gap-4\">\n        <div v-for=\"color in colors\" :key=\"color\">\n          <SChip :color=\"color\" text=\"99+\">\n            <SButton variant=\"dashed\">{{ color }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Size\" split>\n      <div class=\"flex gap-3\">\n        <div v-for=\"size in sizes\" :key=\"size\">\n          <SChip :size=\"size\">\n            <SButton variant=\"soft\" :size=\"size\">{{ size }}</SButton>\n          </SChip>\n        </div>\n      </div>\n      <div class=\"mt-6 flex gap-3\">\n        <div v-for=\"size in sizes\" :key=\"size\">\n          <SChip :size=\"size\" text=\"99+\">\n            <SButton variant=\"soft\" :size=\"size\">{{ size }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Positions\" split>\n      <div class=\"flex gap-3\">\n        <div v-for=\"position in positions\" :key=\"position\">\n          <SChip :position=\"position\">\n            <SButton variant=\"dashed\" class=\"w-30\">{{ position }}</SButton>\n          </SChip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"ModelValue\" split>\n      <div class=\"flex gap-3\">\n        <SInput v-model=\"text\" />\n        <SChip :text=\"text\">\n          <SButton variant=\"outline\">A</SButton>\n        </SChip>\n      </div>\n    </SCard>\n    <SCard title=\"Slot\" split>\n      <div class=\"flex gap-3\">\n        <SInput v-model=\"slotText\" />\n        <SChip :text=\"slotText\">\n          <SButton variant=\"outline\">A</SButton>\n          <template #content=\"{ value }\">{{ value }}！</template>\n        </SChip>\n      </div>\n    </SCard>\n    <SCard title=\"Show\" split>\n      <div class=\"flex gap-3\">\n        <SSwitch v-model:checked=\"show\" />\n        <SChip :show=\"show\">\n          <SButton variant=\"outline\">A</SButton>\n        </SChip>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
+  "collapsible": "<script setup lang=\"ts\">\nimport { SButtonIcon, SCard, SCollapsible, SCollapsibleTrigger } from 'soy-ui';\nimport { ChevronsDownUp, ChevronsUpDown } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoCollapsible'\n});\n</script>\n\n<template>\n  <SCard title=\"Collapsible\" split>\n    <SCollapsible\n      class=\"w-350px lt-sm:w-auto space-y-2\"\n      :ui=\"{\n        content: 'space-y-2'\n      }\"\n    >\n      <template #default=\"{ open }\">\n        <div class=\"flex-y-center justify-between px-2 space-x-4\">\n          <h4 class=\"text-sm font-semibold\">@soybeanjs starred 3 repositories</h4>\n          <SCollapsibleTrigger as-child>\n            <SButtonIcon>\n              <ChevronsDownUp v-if=\"open\" />\n              <ChevronsUpDown v-else />\n            </SButtonIcon>\n          </SCollapsibleTrigger>\n        </div>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">@soybean-ui/primitives</div>\n      </template>\n      <template #content>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">@soybean-ui/colors</div>\n        <div class=\"border rounded-md px-4 py-3 text-sm font-mono\">soybean-ui</div>\n      </template>\n    </SCollapsible>\n  </SCard>\n</template>\n",
+  "combobox": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SCard, SCombobox } from 'soy-ui';\nimport type { ComboboxOptionData, ThemeSize } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoCombobox'\n});\n\nconst sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nconst framework = ref('0');\n\nconst frameworks: ComboboxOptionData[] = [\n  { value: '0', label: 'Vue' },\n  { value: '1', label: 'React' },\n  { value: '2', label: 'Next.js' },\n  { value: '3', label: 'SvelteKit' },\n  { value: '4', label: 'Nuxt' },\n  { value: '5', label: 'Remix' },\n  { value: '6', label: 'Astro' }\n];\n</script>\n\n<template>\n  <SCard title=\"Combobox Size\" split>\n    <div class=\"w-60 lt-sm:w-auto\">\n      <div class=\"flex-c-stretch gap-3\">\n        <div v-for=\"size in sizes\" :key=\"size\">\n          <div>{{ size }}</div>\n          <SCombobox\n            v-model=\"framework\"\n            :items=\"frameworks\"\n            trigger-label=\"Select framework\"\n            empty-label=\"No framework found.\"\n            :size=\"size\"\n            :input-props=\"{ placeholder: 'Select framework...' }\"\n          />\n        </div>\n      </div>\n      <div class=\"py-3 text-18px\">Traditional Mode</div>\n      <SCombobox\n        v-model=\"framework\"\n        :items=\"frameworks\"\n        mode=\"traditional\"\n        empty-label=\"No framework found.\"\n        :input-props=\"{ placeholder: 'Select framework...' }\"\n      />\n    </div>\n  </SCard>\n</template>\n",
   "command": "<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport { useMagicKeys } from '@vueuse/core';\nimport { SCard, SCommand, SCommandDialog, SKeyboardKey } from 'soy-ui';\nimport type { CommandGroupOptionData, CommandOptionData, SelectEvent } from 'soy-ui';\nimport { Calendar, HelpCircle, Mail, Rocket, Settings, Smile, User } from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoCommand'\n});\n\nconst keys = useMagicKeys();\n\nconst items: (CommandGroupOptionData | CommandOptionData)[] = [\n  {\n    label: 'Suggestions',\n    separator: true,\n    items: [\n      {\n        label: 'Calendar',\n        value: 'calendar',\n        icon: Calendar\n      },\n      {\n        label: 'Search Emoji',\n        value: 'search-emoji',\n        icon: Smile\n      },\n      {\n        label: 'Launch',\n        value: 'launch',\n        icon: Rocket\n      }\n    ]\n  },\n  {\n    label: 'Settings',\n    separator: true,\n    items: [\n      {\n        label: 'Profile',\n        value: 'profile',\n        icon: User,\n        shortcut: ['command', 'p']\n      },\n      {\n        label: 'Mail',\n        value: 'mail',\n        icon: Mail,\n        shortcut: ['command', 'm']\n      },\n      {\n        label: 'Settings',\n        value: 'settings',\n        icon: Settings,\n        shortcut: ['command', 's']\n      }\n    ]\n  },\n  {\n    label: 'Help',\n    value: 'help',\n    icon: HelpCircle,\n    shortcut: ['command', 'h']\n  }\n];\n\nfunction handleSelect(item: CommandOptionData, event: SelectEvent) {\n  console.log(item, event);\n}\n\nconst open = ref(false);\n\nconst CmdJ = keys['Cmd+J'];\n\nfunction handleOpenChange() {\n  open.value = !open.value;\n}\n\nwatch(CmdJ, v => {\n  if (v) {\n    handleOpenChange();\n  }\n});\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Command\" split>\n      <SCommand class=\"border rounded-lg shadow-md\" :items=\"items\" />\n    </SCard>\n    <SCard title=\"Dialog Command\" split>\n      <SKeyboardKey :value=\"['command', 'j']\" />\n      <SCommandDialog v-model:open=\"open\">\n        <SCommand\n          :items=\"items\"\n          :input-props=\"{ placeholder: 'Type a command or search...' }\"\n          empty-label=\"No option found\"\n          @select=\"handleSelect\"\n        />\n      </SCommandDialog>\n    </SCard>\n  </div>\n</template>\n",
   "context-menu": "<script setup lang=\"ts\">\nimport { SCard, SContextMenu } from 'soy-ui';\nimport type { MenuOptionData } from 'soy-ui';\nimport {\n  CirclePlus,\n  Cloud,\n  CreditCard,\n  Facebook,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageCircle,\n  Settings,\n  Twitter,\n  User,\n  UserPlus,\n  Users\n} from 'lucide-vue-next';\n\ndefineOptions({\n  name: 'DemoContextMenu'\n});\n\nconst menus: MenuOptionData<string>[] = [\n  {\n    isGroupLabel: true,\n    value: 'myAccount',\n    label: 'My Account',\n    separator: true\n  },\n  { value: '01', label: 'Profile', icon: User, shortcut: ['command', 'shift', 'p'] },\n  { value: '02', label: 'Billing', icon: CreditCard, shortcut: ['command', 'b'] },\n  { value: '03', label: 'Settings', icon: Settings, shortcut: ['command', 's'] },\n  { value: '04', label: 'Keyboard shortcuts', icon: Keyboard, shortcut: ['command', 'k'], separator: true },\n  { value: '05', label: 'Team', icon: Users, shortcut: ['command', 'shift', 't'] },\n  {\n    value: '06',\n    label: 'Invite Users',\n    icon: UserPlus,\n    separator: true,\n    children: [\n      { value: '0601', label: 'Email', icon: Mail, shortcut: ['command', 'shift', 'e'] },\n      { value: '0602', label: 'Facebook', icon: Facebook, shortcut: ['command', 'shift', 'f'] },\n      { value: '0603', label: 'Twitter', icon: Twitter, shortcut: ['command', 'shift', 't'], separator: true },\n      {\n        value: '0604',\n        label: 'More',\n        icon: CirclePlus,\n        children: [{ value: '060401', label: 'Message', icon: MessageCircle, shortcut: ['command', 'm'] }]\n      }\n    ]\n  },\n  {\n    value: '07',\n    label: 'Github',\n    icon: Github,\n    linkProps: { href: 'https://github.com', target: '_blank' }\n  },\n  { value: '08', label: 'Support', icon: LifeBuoy },\n  { value: '09', label: 'API', icon: Cloud, disabled: true, separator: true },\n  { value: '10', label: 'Sign out', icon: LogOut, shortcut: ['command', 'shift', 'Q'] }\n];\n</script>\n\n<template>\n  <SCard title=\"ContextMenu\" split>\n    <SContextMenu :items=\"menus\">\n      <template #trigger>\n        <div class=\"h-50 w-80 flex items-center justify-center border rounded-md border-dashed text-sm\">\n          Right click here\n        </div>\n      </template>\n    </SContextMenu>\n  </SCard>\n</template>\n",
   "dialog": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SButton, SCard, SDialog, SDialogClose } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoDialog'\n});\n\nconst open = ref(false);\n\nfunction closeDialog() {\n  open.value = false;\n}\n</script>\n\n<template>\n  <SCard title=\"Dialog\">\n    <div class=\"flex-c gap-4\">\n      <SCard title=\"Default\" split>\n        <SDialog title=\"Dialog Title\">\n          <template #trigger>\n            <SButton variant=\"outline\">Open</SButton>\n          </template>\n          <div>Dialog Content</div>\n        </SDialog>\n      </SCard>\n      <SCard title=\"With Footer\" split>\n        <SDialog title=\"Dialog Title\">\n          <template #trigger>\n            <SButton variant=\"outline\">Open</SButton>\n          </template>\n          <div>Dialog Content</div>\n          <template #footer>\n            <SDialogClose as-child>\n              <SButton variant=\"plain\">Cancel</SButton>\n            </SDialogClose>\n            <SButton>Confirm</SButton>\n          </template>\n        </SDialog>\n      </SCard>\n      <SCard title=\"Control Open State\" split>\n        <SDialog v-model:open=\"open\" title=\"Dialog Title\">\n          <template #trigger>\n            <SButton variant=\"outline\">Open</SButton>\n          </template>\n          <div>Dialog Content</div>\n          <template #footer>\n            <SButton variant=\"plain\" @click=\"closeDialog\">Cancel</SButton>\n            <SButton @click=\"closeDialog\">Confirm</SButton>\n          </template>\n        </SDialog>\n      </SCard>\n      <SCard title=\"Disabled close when click outside or press escape key\" split>\n        <SDialog\n          title=\"Dialog Title\"\n          @pointer-down-outside=\"e => e.preventDefault()\"\n          @escape-key-down=\"e => e.preventDefault()\"\n        >\n          <template #trigger>\n            <SButton variant=\"outline\">Open</SButton>\n          </template>\n          <div>Dialog Content</div>\n          <template #footer>\n            <SDialogClose as-child>\n              <SButton variant=\"plain\">Cancel</SButton>\n            </SDialogClose>\n            <SButton>Confirm</SButton>\n          </template>\n        </SDialog>\n      </SCard>\n    </div>\n  </SCard>\n</template>\n",
@@ -47,5 +47,6 @@
   "toast": "<script setup lang=\"tsx\">\nimport { SButton, SCard, SToastAction, useToast } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoToast'\n});\n\nconst { toast } = useToast();\n\nfunction openToast() {\n  toast({\n    title: 'Hello',\n    description: 'This is a toast'\n  });\n}\n\nfunction openToastWithSuccessIcon() {\n  toast({\n    title: 'Success Icon',\n    description: 'This is a toast with success icon',\n    iconType: 'success'\n  });\n}\n\nfunction openDestructiveToast() {\n  toast({\n    title: 'Destructive',\n    description: 'This is a toast with destructive color',\n    richColor: 'destructive'\n  });\n}\n\nfunction openToastWithWarningColorAndIcon() {\n  toast({\n    title: 'Warning Icon',\n    description: 'This is a toast with warning icon',\n    iconType: 'warning',\n    richColor: 'warning'\n  });\n}\n\nfunction openToastWithAction() {\n  toast({\n    title: 'Action',\n    description: 'This is a toast with action',\n    action: <SToastAction altText=\"Click me\">Click me</SToastAction>\n  });\n}\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Default\" split>\n      <SButton variant=\"outline\" @click=\"openToast\">Open</SButton>\n    </SCard>\n    <SCard title=\"Destructive\" split>\n      <SButton variant=\"outline\" @click=\"openDestructiveToast\">Open</SButton>\n    </SCard>\n    <SCard title=\"Success Icon\" split>\n      <SButton variant=\"outline\" @click=\"openToastWithSuccessIcon\">Open</SButton>\n    </SCard>\n    <SCard title=\"With Action\" split>\n      <SButton variant=\"outline\" @click=\"openToastWithAction\">Open</SButton>\n    </SCard>\n    <SCard title=\"Warning Color And Icon\" split>\n      <SButton variant=\"outline\" @click=\"openToastWithWarningColorAndIcon\">Open</SButton>\n    </SCard>\n  </div>\n</template>\n",
   "toggle-group": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SCard, SToggleGroup } from 'soy-ui';\nimport type { ToggleGroupItemData } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoToggleGroup'\n});\n\nconst value = ref<string>('top');\n\nconst multi = ref<string[]>(['top', 'left']);\n\ninterface DemoData extends ToggleGroupItemData {\n  label: string;\n}\n\nconst items: DemoData[] = [\n  { value: 'top', label: 'Top', disabled: false },\n  { value: 'right', label: 'Right', disabled: false },\n  { value: 'bottom', label: 'Bottom', disabled: false },\n  { value: 'left', label: 'Left', disabled: false }\n];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Single\" split>\n      <SToggleGroup v-model=\"value\" :items=\"items\">\n        <template #item=\"{ label }\">{{ label }}</template>\n      </SToggleGroup>\n    </SCard>\n    <SCard title=\"Multi\" split>\n      <SToggleGroup v-model=\"multi\" :items=\"items\">\n        <template #item=\"{ label }\">{{ label }}</template>\n      </SToggleGroup>\n    </SCard>\n  </div>\n</template>\n",
   "toggle": "<script setup lang=\"ts\">\nimport { SCard, SToggle } from 'soy-ui';\nimport type { ToggleVariant } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoToggle'\n});\n\nconst variants: ToggleVariant[] = ['ghost', 'outline'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Variant\" split>\n      <div class=\"flex gap-12px\">\n        <SToggle v-for=\"variant in variants\" :key=\"variant\" :variant=\"variant\">{{ variant }}</SToggle>\n      </div>\n    </SCard>\n    <SCard title=\"Disabled\" split>\n      <div class=\"flex flex-wrap gap-12px\">\n        <SToggle size=\"md\" variant=\"ghost\" disabled>disabled</SToggle>\n        <SToggle size=\"md\" variant=\"outline\" disabled>disabled</SToggle>\n      </div>\n    </SCard>\n  </div>\n</template>\n",
-  "tooltip": "<script setup lang=\"ts\">\nimport { SButton, SCard, STooltip } from 'soy-ui';\nimport type { TooltipAlign, TooltipSide } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoTooltip'\n});\n\nconst sides: TooltipSide[] = ['top', 'right', 'bottom', 'left'];\n\nconst aligns: TooltipAlign[] = ['start', 'center', 'end'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Tooltip Position\" split>\n      <div v-for=\"side in sides\" :key=\"side\">\n        <div class=\"py-12px text-18px\">Side: {{ side }}</div>\n        <div class=\"flex flex-wrap gap-12px\">\n          <STooltip v-for=\"align in aligns\" :key=\"align\" :side=\"side\" :align=\"align\">\n            <template #trigger>\n              <SButton variant=\"plain\">align: {{ align }}</SButton>\n            </template>\n            <p>Tooltip content</p>\n          </STooltip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Tooltip Arrow\" split>\n      <STooltip show-arrow>\n        <template #trigger>\n          <SButton variant=\"plain\">with arrow</SButton>\n        </template>\n        <p>Tooltip content</p>\n      </STooltip>\n    </SCard>\n  </div>\n</template>\n"
+  "tooltip": "<script setup lang=\"ts\">\nimport { SButton, SCard, STooltip } from 'soy-ui';\nimport type { TooltipAlign, TooltipSide } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoTooltip'\n});\n\nconst sides: TooltipSide[] = ['top', 'right', 'bottom', 'left'];\n\nconst aligns: TooltipAlign[] = ['start', 'center', 'end'];\n</script>\n\n<template>\n  <div class=\"flex-c gap-4\">\n    <SCard title=\"Tooltip Position\" split>\n      <div v-for=\"side in sides\" :key=\"side\">\n        <div class=\"py-12px text-18px\">Side: {{ side }}</div>\n        <div class=\"flex flex-wrap gap-12px\">\n          <STooltip v-for=\"align in aligns\" :key=\"align\" :side=\"side\" :align=\"align\">\n            <template #trigger>\n              <SButton variant=\"plain\">align: {{ align }}</SButton>\n            </template>\n            <p>Tooltip content</p>\n          </STooltip>\n        </div>\n      </div>\n    </SCard>\n    <SCard title=\"Tooltip Arrow\" split>\n      <STooltip show-arrow>\n        <template #trigger>\n          <SButton variant=\"plain\">with arrow</SButton>\n        </template>\n        <p>Tooltip content</p>\n      </STooltip>\n    </SCard>\n  </div>\n</template>\n",
+  "button-color": "<script setup lang=\"ts\">\nimport { SButton, SCard } from 'soy-ui';\nimport type { ThemeColor } from 'soy-ui';\n\ndefineOptions({\n  name: 'DemoButtonColor'\n});\n\nconst colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];\n</script>\n\n<template>\n  <SCard title=\"Color\" split>\n    <div class=\"flex flex-wrap gap-12px\">\n      <SButton v-for=\"color in colors\" :key=\"color\" :color=\"color\">{{ color }}</SButton>\n    </div>\n  </SCard>\n</template>\n"
 }
diff --git a/docs/.vitepress/plugins/previewer.ts b/docs/.vitepress/plugins/previewer.ts
index ce9f6da5..6db55aa4 100644
--- a/docs/.vitepress/plugins/previewer.ts
+++ b/docs/.vitepress/plugins/previewer.ts
@@ -12,10 +12,20 @@ function ComponentPreview(md: MarkdownRenderer) {
         return defaultRender!(tokens, idx, options, env, self);
 
       const props = parseProps(content);
+      const demo = props.demo;
 
-      const componentName = pascalCase(`Demo${props.name}`);
+      let componentName;
+      if (demo) {
+        // if demo is a string, use it as the component name
+        componentName = pascalCase(`Demo${props.name}${demo}`);
+      } else {
+        // otherwise, use the original component naming method
+        componentName = pascalCase(`Demo${props.name}`);
+      }
+
+      const demoAttr = demo ? ` demo="${demo}"` : '';
+      const demoScripts = `<ComponentPreview name="${props.name}"${demoAttr}><${componentName} /></ComponentPreview>`;
 
-      const demoScripts = `<ComponentPreview name="${props.name}"><${componentName} /></ComponentPreview>`;
       return demoScripts;
     };
   }
diff --git a/docs/.vitepress/theme/components/component-preview.vue b/docs/.vitepress/theme/components/component-preview.vue
index 1b82e2be..65383ad7 100644
--- a/docs/.vitepress/theme/components/component-preview.vue
+++ b/docs/.vitepress/theme/components/component-preview.vue
@@ -13,15 +13,24 @@ defineOptions({
 
 interface Props {
   name: string;
+  demo?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  demo: undefined
+});
 
 const instance = getCurrentInstance();
 const { copy, copied } = useClipboard();
 
-function getCode(name: string) {
-  const pathName = kebabCase(name);
+function getCode(name: string, demo?: string) {
+  let pathName;
+
+  if (demo) {
+    pathName = kebabCase(`${name}-${demo}`);
+  } else {
+    pathName = kebabCase(name);
+  }
 
   const codeRecord = instance?.appContext?.config?.globalProperties?.$code as Record<string, string>;
 
@@ -29,7 +38,7 @@ function getCode(name: string) {
     return '';
   }
 
-  return codeRecord[pathName];
+  return codeRecord[pathName] || '';
 }
 
 const items = [
@@ -45,7 +54,7 @@ const items = [
 
 const active = ref('preview');
 
-const code = computed(() => getCode(props.name));
+const code = computed(() => getCode(props.name, props.demo));
 
 const codeHtml = computed(() => highlight(code.value, 'vue'));
 </script>
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 59c969ab..d570ec15 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -1,4 +1,3 @@
 # Button
 
-<ComponentPreview name="Button" />
-
+<ComponentPreview name="Button" demo="Color" />
diff --git a/examples/src/index.ts b/examples/src/index.ts
index c40f680d..478f6dcd 100644
--- a/examples/src/index.ts
+++ b/examples/src/index.ts
@@ -49,6 +49,8 @@ import DemoToggle from './ui/toggle.vue';
 import DemoToggleGroup from './ui/toggle-group.vue';
 import DemoTooltip from './ui/tooltip.vue';
 
+export * from './ui/button/index';
+
 export {
   ThemeCustomizer,
   DemoAccordion,
diff --git a/examples/src/ui/button/color.vue b/examples/src/ui/button/color.vue
new file mode 100644
index 00000000..f47f4341
--- /dev/null
+++ b/examples/src/ui/button/color.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { SButton, SCard } from 'soy-ui';
+import type { ThemeColor } from 'soy-ui';
+
+defineOptions({
+  name: 'DemoButtonColor'
+});
+
+const colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];
+</script>
+
+<template>
+  <SCard title="Color" split>
+    <div class="flex flex-wrap gap-12px">
+      <SButton v-for="color in colors" :key="color" :color="color">{{ color }}</SButton>
+    </div>
+  </SCard>
+</template>
diff --git a/examples/src/ui/button/index.ts b/examples/src/ui/button/index.ts
new file mode 100644
index 00000000..4362d076
--- /dev/null
+++ b/examples/src/ui/button/index.ts
@@ -0,0 +1,3 @@
+import DemoButtonColor from './color.vue';
+
+export { DemoButtonColor };
diff --git a/package.json b/package.json
index eb5b6454..724460d9 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "preview": "vite preview",
     "preview:docs": "pnpm -r --filter='./docs' run preview",
     "publish-pkg": "pnpm -r publish --access public",
+    "rebuild-code": "tsx scripts/code.ts",
     "release": "soy release",
     "restore": "tsx scripts/restore.ts",
     "stub": "tsx scripts/stub.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4dfab97a..058c5809 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,7 +107,7 @@ importers:
         version: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
       vite-plugin-vue-devtools:
         specifier: 7.7.2
-        version: 7.7.2(rollup@4.38.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2))
+        version: 7.7.2(rollup@4.39.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2))
       vue-eslint-parser:
         specifier: 10.1.1
         version: 10.1.1(eslint@9.23.0(jiti@2.4.2))
@@ -141,7 +141,7 @@ importers:
         version: 4.3.0(vue@3.5.13(typescript@5.8.2))
       vitepress:
         specifier: 1.6.3
-        version: 1.6.3(@algolia/client-search@5.23.1)(@types/node@22.13.16)(fuse.js@7.1.0)(postcss@8.5.3)(search-insights@2.17.3)(typescript@5.8.2)
+        version: 1.6.3(@algolia/client-search@5.23.2)(@types/node@22.13.16)(fuse.js@7.1.0)(postcss@8.5.3)(search-insights@2.17.3)(typescript@5.8.2)
 
   examples:
     dependencies:
@@ -219,7 +219,7 @@ importers:
         version: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.13.16)(rollup@4.38.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
+        version: 4.5.3(@types/node@22.13.16)(rollup@4.39.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
       vue:
         specifier: 3.5.13
         version: 3.5.13(typescript@5.8.2)
@@ -292,7 +292,7 @@ importers:
         version: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.13.16)(rollup@4.38.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
+        version: 4.5.3(@types/node@22.13.16)(rollup@4.39.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
       vue:
         specifier: 3.5.13
         version: 3.5.13(typescript@5.8.2)
@@ -310,14 +310,14 @@ importers:
         version: 3.1.0
       tailwind-variants:
         specifier: 1.0.0
-        version: 1.0.0(tailwindcss@4.0.17)
+        version: 1.0.0(tailwindcss@4.1.2)
     devDependencies:
       vite:
         specifier: 6.2.4
         version: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.13.16)(rollup@4.38.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
+        version: 4.5.3(@types/node@22.13.16)(rollup@4.39.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
 
   packages/unocss-preset:
     dependencies:
@@ -354,56 +354,56 @@ packages:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
-  '@algolia/client-abtesting@5.23.1':
-    resolution: {integrity: sha512-WZ9vKwHDiTCq6/F2+KHMeojT6MuqtVVvUJorbi6zGeOokKbOeeq7+RIPEezynsfq+Tl6SjuAbOWiQ0qTpJTWQw==}
+  '@algolia/client-abtesting@5.23.2':
+    resolution: {integrity: sha512-EudQGeYEzviwqPH8WoqP5VTQssE/PW6sEdL0zzOyKt2bWnWoUp5Rnm67sCbxYDR44JpUchbkul0PfWrSYsBPjQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-analytics@5.23.1':
-    resolution: {integrity: sha512-Pr/hVwl2YN7xw0R9HS8KzG+R7IQAArdMQIqi/QYRmW6+Mst3cqGqvVJEAYOJUS5lAQ93pkAkc5ns1kFxSfWRIg==}
+  '@algolia/client-analytics@5.23.2':
+    resolution: {integrity: sha512-zmJrkZqWFu+ft+VRcttZZJhw5ElkhBtOArRzQOu9sRnrSSodBOdPRhAfvu8tG93Hv67wh5qQaTBwLxM58AxuMg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-common@5.23.1':
-    resolution: {integrity: sha512-/xJtZl+A7GBNf1jkG/xsemur7JDkBWY8wh58iah1xvJxxxpi+WBYAtVkwS7Mn/D/PJFpuVNSHKkoC8+uT5jYKQ==}
+  '@algolia/client-common@5.23.2':
+    resolution: {integrity: sha512-xaE6o4BMdqYBe0iB7JjX6G9/Qeqx6TSs9T4d6VJ0JHPsEyklSwIbKRiomPeYD7vzt2P4t45Io6QBhifOUP+0qg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-insights@5.23.1':
-    resolution: {integrity: sha512-tmg7ovakc0uOfp5vZv9CPLuMkIqEEn7Ra3NzU0GOpSjXTgQmcsw7QvzLQtD6u9oFPCMk+OqJ+4V/94P5M0yWSw==}
+  '@algolia/client-insights@5.23.2':
+    resolution: {integrity: sha512-F85hpMszbr5ZGt8gFdl7WOugELRF4z3R1nD9n3t7PZ/2alV7IR75UQY8/jMQDwij/lrnVaKbLeIvKKy6K7ncZw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-personalization@5.23.1':
-    resolution: {integrity: sha512-jYsKIiCN5IlWG+F9vbrAXuXPy0u44HDYN3QrX+zfQ8Fr8cpdNHbQTuQAQfWpofhA6hYrrQ66Ms2KbXcdgkyPKw==}
+  '@algolia/client-personalization@5.23.2':
+    resolution: {integrity: sha512-TuGaGKiQvQqFNR4c3Vdl+JBe6dkEPmRzVyIdWLrurOPEmFmVCKRxtSnLr0TVFl6de/JfDAXuchvtvLHFxv9P2A==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-query-suggestions@5.23.1':
-    resolution: {integrity: sha512-BDFiGQ6UdFsEMEigFlOAeL7VDysqf05qn+yyQUnGuOuzSbsqtlB4W6ZyZC1+jpY2tXGpGOMDh9ej2BQOoji8UQ==}
+  '@algolia/client-query-suggestions@5.23.2':
+    resolution: {integrity: sha512-fg2tZf7Sf51Icjfrea0dnfbfwlJ7kXMcRsWSJN3DZhEi/Y4mMmK9L0Cq8sby6HDzxy5T8xEWNWC3TMx5FvrJ6w==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-search@5.23.1':
-    resolution: {integrity: sha512-5aW3B0F2aALh54rn/LLSZPigA0Wbpl4EZfI8g2KmAWHM3HLQtzFhpmeiItFMUklmmHwse4s/iDmRHlBhdHfFIQ==}
+  '@algolia/client-search@5.23.2':
+    resolution: {integrity: sha512-XiTjt0qgsJk9OqvDpMwTgUaPAYNSQcMILRfSYiorgiyc71yYM7Lq1vRSVxhB0m51mrViWj4rIR6kSiJRXebqvQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/ingestion@1.23.1':
-    resolution: {integrity: sha512-YlS7wL1vFGd79/gDXHejfjcbLJHwh5Y9ljA6TEbsHsXeZuN8galpcMIDl9qadHJgx3PgQbwmWV87+EHGiLzXoQ==}
+  '@algolia/ingestion@1.23.2':
+    resolution: {integrity: sha512-7ClIghvUFZTomBipD8Kor9Z5llcAM3lHUBG3VFOvUsOxOJcaMMONlBXyoFDfI1na+u14lVaGehY2oIEfY1eB0w==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/monitoring@1.23.1':
-    resolution: {integrity: sha512-qD79lqsLv9G/nu6EIo3hjBBQr7rBt7QatdABT59HnQI5exbJBDMbtynu3VdrvvCfZ9XEb7j/HFbglbN7fVYKfA==}
+  '@algolia/monitoring@1.23.2':
+    resolution: {integrity: sha512-kF7KKd0iIIlaD70flFS+8+DNxRvIzrG9A22iWG5LDX225Kl6pITroq+qIUweqqyyoqJBYuIXKZGDGtnahEwQxw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/recommend@5.23.1':
-    resolution: {integrity: sha512-kmQtotstkZCCojfqv4//XQhy+Y5rTkNTTadiJf/KsR1wBvLMIYDQtTR+1XZdHdVaJCnvW//gJA3KL84rQ91uPg==}
+  '@algolia/recommend@5.23.2':
+    resolution: {integrity: sha512-nAgS2O5ww8J4fgW6GAiybAdr0uH7MV74srPdx51cPJRpQBEge4WnYBaOWx1/a53qI0xwNtQudnEyBGUzsSYaAw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-browser-xhr@5.23.1':
-    resolution: {integrity: sha512-BJfxcOWj3vAr3r4Oe9T3O+pg54qRZdeEmp5Lmzocog05rhfH/wgEXv/stFnuB+6MgLOOiXJNP1kdaiAHLzRZYw==}
+  '@algolia/requester-browser-xhr@5.23.2':
+    resolution: {integrity: sha512-yw6IzgQcwr4cZuoQCEoQui9G0rhVRGCyhPhW+gmrXe6oVr4qB50FV6mWGLA170+iqGVjPn/DVuOhExjBzcViTQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-fetch@5.23.1':
-    resolution: {integrity: sha512-YTbslSbEpuCZn15eMx8djR1jYbJdELOIfvo5xLOBeSB/bGReHAOoQ9HHopCB17F40xaPQi6CJMXWx63ImMAN4w==}
+  '@algolia/requester-fetch@5.23.2':
+    resolution: {integrity: sha512-8rmSybTwIqmGx3P0qkOEUkkyeIewglaKq6yUnxnVkBJbd4USfIZsw9cME1YUEHeZI7aOhTQg9QteUHSKXclF5A==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-node-http@5.23.1':
-    resolution: {integrity: sha512-Jp/5Fqx+eREpmM179LOQpyvQOdsR3Pq2aVpsuoSdQ/8o4B6v38lmrkbbMrMsNayR59QQ9VkL2ImYKBysqB4Qug==}
+  '@algolia/requester-node-http@5.23.2':
+    resolution: {integrity: sha512-IHpUiW3d3oVE5tCYqQN7X71/EbXI7f8WxU85eWW1UYEWEknqW3csdGctyIW7+qMHFfxeDymI1Wln/gGHHIXLIw==}
     engines: {node: '>= 14.0.0'}
 
   '@ampproject/remapping@2.3.0':
@@ -880,8 +880,8 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.7':
-    resolution: {integrity: sha512-xvv7hJE32yhegJ8xNAnb62ggiAwTYHBpUCWhRxEj/ksvgDJuSXfoDkBcRYaYNFiJ+jH0IE3K16hd+xXzhBgNbg==}
+  '@eslint/compat@1.2.8':
+    resolution: {integrity: sha512-LqCYHdWL/QqKIJuZ/ucMAv8d4luKGs4oCPgpt8mWztQAtPrHfXKQ/XAUc8ljCHAfJCn6SvkpTcGt5Tsh8saowA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -893,14 +893,18 @@ packages:
     resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.2.0':
-    resolution: {integrity: sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==}
+  '@eslint/config-helpers@0.2.1':
+    resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.12.0':
     resolution: {integrity: sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/core@0.13.0':
+    resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/eslintrc@3.3.0':
     resolution: {integrity: sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -921,8 +925,8 @@ packages:
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.7':
-    resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
+  '@eslint/plugin-kit@0.2.8':
+    resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.9':
@@ -1055,114 +1059,114 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.38.0':
-    resolution: {integrity: sha512-ldomqc4/jDZu/xpYU+aRxo3V4mGCV9HeTgUBANI3oIQMOL+SsxB+S2lxMpkFp5UamSS3XuTMQVbsS24R4J4Qjg==}
+  '@rollup/rollup-android-arm-eabi@4.39.0':
+    resolution: {integrity: sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.38.0':
-    resolution: {integrity: sha512-VUsgcy4GhhT7rokwzYQP+aV9XnSLkkhlEJ0St8pbasuWO/vwphhZQxYEKUP3ayeCYLhk6gEtacRpYP/cj3GjyQ==}
+  '@rollup/rollup-android-arm64@4.39.0':
+    resolution: {integrity: sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.38.0':
-    resolution: {integrity: sha512-buA17AYXlW9Rn091sWMq1xGUvWQFOH4N1rqUxGJtEQzhChxWjldGCCup7r/wUnaI6Au8sKXpoh0xg58a7cgcpg==}
+  '@rollup/rollup-darwin-arm64@4.39.0':
+    resolution: {integrity: sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.38.0':
-    resolution: {integrity: sha512-Mgcmc78AjunP1SKXl624vVBOF2bzwNWFPMP4fpOu05vS0amnLcX8gHIge7q/lDAHy3T2HeR0TqrriZDQS2Woeg==}
+  '@rollup/rollup-darwin-x64@4.39.0':
+    resolution: {integrity: sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.38.0':
-    resolution: {integrity: sha512-zzJACgjLbQTsscxWqvrEQAEh28hqhebpRz5q/uUd1T7VTwUNZ4VIXQt5hE7ncs0GrF+s7d3S4on4TiXUY8KoQA==}
+  '@rollup/rollup-freebsd-arm64@4.39.0':
+    resolution: {integrity: sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.38.0':
-    resolution: {integrity: sha512-hCY/KAeYMCyDpEE4pTETam0XZS4/5GXzlLgpi5f0IaPExw9kuB+PDTOTLuPtM10TlRG0U9OSmXJ+Wq9J39LvAg==}
+  '@rollup/rollup-freebsd-x64@4.39.0':
+    resolution: {integrity: sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.38.0':
-    resolution: {integrity: sha512-mimPH43mHl4JdOTD7bUMFhBdrg6f9HzMTOEnzRmXbOZqjijCw8LA5z8uL6LCjxSa67H2xiLFvvO67PT05PRKGg==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.39.0':
+    resolution: {integrity: sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.38.0':
-    resolution: {integrity: sha512-tPiJtiOoNuIH8XGG8sWoMMkAMm98PUwlriOFCCbZGc9WCax+GLeVRhmaxjJtz6WxrPKACgrwoZ5ia/uapq3ZVg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.39.0':
+    resolution: {integrity: sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.38.0':
-    resolution: {integrity: sha512-wZco59rIVuB0tjQS0CSHTTUcEde+pXQWugZVxWaQFdQQ1VYub/sTrNdY76D1MKdN2NB48JDuGABP6o6fqos8mA==}
+  '@rollup/rollup-linux-arm64-gnu@4.39.0':
+    resolution: {integrity: sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.38.0':
-    resolution: {integrity: sha512-fQgqwKmW0REM4LomQ+87PP8w8xvU9LZfeLBKybeli+0yHT7VKILINzFEuggvnV9M3x1Ed4gUBmGUzCo/ikmFbQ==}
+  '@rollup/rollup-linux-arm64-musl@4.39.0':
+    resolution: {integrity: sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.38.0':
-    resolution: {integrity: sha512-hz5oqQLXTB3SbXpfkKHKXLdIp02/w3M+ajp8p4yWOWwQRtHWiEOCKtc9U+YXahrwdk+3qHdFMDWR5k+4dIlddg==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.39.0':
+    resolution: {integrity: sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.38.0':
-    resolution: {integrity: sha512-NXqygK/dTSibQ+0pzxsL3r4Xl8oPqVoWbZV9niqOnIHV/J92fe65pOir0xjkUZDRSPyFRvu+4YOpJF9BZHQImw==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.39.0':
+    resolution: {integrity: sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.38.0':
-    resolution: {integrity: sha512-GEAIabR1uFyvf/jW/5jfu8gjM06/4kZ1W+j1nWTSSB3w6moZEBm7iBtzwQ3a1Pxos2F7Gz+58aVEnZHU295QTg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.39.0':
+    resolution: {integrity: sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.38.0':
-    resolution: {integrity: sha512-9EYTX+Gus2EGPbfs+fh7l95wVADtSQyYw4DfSBcYdUEAmP2lqSZY0Y17yX/3m5VKGGJ4UmIH5LHLkMJft3bYoA==}
+  '@rollup/rollup-linux-riscv64-musl@4.39.0':
+    resolution: {integrity: sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.38.0':
-    resolution: {integrity: sha512-Mpp6+Z5VhB9VDk7RwZXoG2qMdERm3Jw07RNlXHE0bOnEeX+l7Fy4bg+NxfyN15ruuY3/7Vrbpm75J9QHFqj5+Q==}
+  '@rollup/rollup-linux-s390x-gnu@4.39.0':
+    resolution: {integrity: sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.38.0':
-    resolution: {integrity: sha512-vPvNgFlZRAgO7rwncMeE0+8c4Hmc+qixnp00/Uv3ht2x7KYrJ6ERVd3/R0nUtlE6/hu7/HiiNHJ/rP6knRFt1w==}
+  '@rollup/rollup-linux-x64-gnu@4.39.0':
+    resolution: {integrity: sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.38.0':
-    resolution: {integrity: sha512-q5Zv+goWvQUGCaL7fU8NuTw8aydIL/C9abAVGCzRReuj5h30TPx4LumBtAidrVOtXnlB+RZkBtExMsfqkMfb8g==}
+  '@rollup/rollup-linux-x64-musl@4.39.0':
+    resolution: {integrity: sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-win32-arm64-msvc@4.38.0':
-    resolution: {integrity: sha512-u/Jbm1BU89Vftqyqbmxdq14nBaQjQX1HhmsdBWqSdGClNaKwhjsg5TpW+5Ibs1mb8Es9wJiMdl86BcmtUVXNZg==}
+  '@rollup/rollup-win32-arm64-msvc@4.39.0':
+    resolution: {integrity: sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.38.0':
-    resolution: {integrity: sha512-mqu4PzTrlpNHHbu5qleGvXJoGgHpChBlrBx/mEhTPpnAL1ZAYFlvHD7rLK839LLKQzqEQMFJfGrrOHItN4ZQqA==}
+  '@rollup/rollup-win32-ia32-msvc@4.39.0':
+    resolution: {integrity: sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.38.0':
-    resolution: {integrity: sha512-jjqy3uWlecfB98Psxb5cD6Fny9Fupv9LrDSPTQZUROqjvZmcCqNu4UMl7qqhlUUGpwiAkotj6GYu4SZdcr/nLw==}
+  '@rollup/rollup-win32-x64-msvc@4.39.0':
+    resolution: {integrity: sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==}
     cpu: [x64]
     os: [win32]
 
@@ -1760,8 +1764,8 @@ packages:
   ajv@8.13.0:
     resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
 
-  algoliasearch@5.23.1:
-    resolution: {integrity: sha512-YgOhwpSIQjR/LrEN1FGOzEVhXTdkpfAn+MPGR1s3MQzvPvdTiGQgFDpPeIl5w/KvvXammMXTzazvaJpEie28xQ==}
+  algoliasearch@5.23.2:
+    resolution: {integrity: sha512-IhKP22Czzg8Y9HaF6aIb5aAHK2HBj4VAzLLnKEPUnxqDwxpryH9sXbm0NkeY7Cby9GlF81wF+AG/VulKDFBphg==}
     engines: {node: '>= 14.0.0'}
 
   alien-signals@0.4.14:
@@ -1876,6 +1880,14 @@ packages:
       magicast:
         optional: true
 
+  c12@3.0.3:
+    resolution: {integrity: sha512-uC3MacKBb0Z15o5QWCHvHWj5Zv34pGQj9P+iXKSpTuSGFS0KKhUWf4t9AJ+gWjYOdmWCPEGpEzm8sS0iqbpo1w==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -1884,8 +1896,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001707:
-    resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
+  caniuse-lite@1.0.30001709:
+    resolution: {integrity: sha512-NgL3vUTnDrPCZ3zTahp4fsugQ4dc7EKTSzwQDPEel6DMoMnfH2jhry9n2Zm8onbSR+f/QtKHFOA+iAQu4kbtWA==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1979,8 +1991,8 @@ packages:
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  confbox@0.2.1:
-    resolution: {integrity: sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==}
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
   consola@3.4.2:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
@@ -2063,8 +2075,8 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  destr@2.0.3:
-    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -2083,8 +2095,8 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.5.129:
-    resolution: {integrity: sha512-JlXUemX4s0+9f8mLqib/bHH8gOHf5elKS6KeWG3sk3xozb/JTq/RLXIv8OKUWiK4Ah00Wm88EFj5PYkFr4RUPA==}
+  electron-to-chromium@1.5.130:
+    resolution: {integrity: sha512-Ou2u7L9j2XLZbhqzyX0jWDj6gA8D3jIfVzt4rikLf3cGBa0VdReuFimBKS9tQJA4+XpeCxj1NoWlfBXzbMa9IA==}
 
   embla-carousel-reactive-utils@8.5.2:
     resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
@@ -3194,8 +3206,8 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rollup@4.38.0:
-    resolution: {integrity: sha512-5SsIRtJy9bf1ErAOiFMFzl64Ex9X5V7bnJ+WlFMb+zmP459OSWCEG7b0ERZ+PEU7xPt4OG3RHbrp1LJlXxYTrw==}
+  rollup@4.39.0:
+    resolution: {integrity: sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -3395,8 +3407,8 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
-  tailwindcss@4.0.17:
-    resolution: {integrity: sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==}
+  tailwindcss@4.1.2:
+    resolution: {integrity: sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -3474,8 +3486,8 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@4.39.0:
-    resolution: {integrity: sha512-w2IGJU1tIgcrepg9ZJ82d8UmItNQtOFJG0HCUE3SzMokKkTsruVDALl2fAdiEzJlfduoU+VyXJWIIUZ+6jV+nw==}
+  type-fest@4.39.1:
+    resolution: {integrity: sha512-uW9qzd66uyHYxwyVBYiwS4Oi0qZyUqwjU+Oevr6ZogYiXt99EOYtwvzMSLw1c3lYo2HzJsep/NB23iEVEgjG/w==}
     engines: {node: '>=16'}
 
   typescript@5.8.2:
@@ -3638,8 +3650,8 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0
 
-  vite@5.4.16:
-    resolution: {integrity: sha512-Y5gnfp4NemVfgOTDQAunSD4346fal44L9mszGGY/e+qxsRT5y1sMlS/8tiQ8AFAp+MFgYNSINdfEchJiPm41vQ==}
+  vite@5.4.17:
+    resolution: {integrity: sha512-5+VqZryDj4wgCs55o9Lp+p8GE78TLVg0lasCH5xFZ4jacZjtqZa6JUw9/p0WeAojaOfncSM6v77InkFPGnvPvg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -3826,110 +3838,110 @@ packages:
 
 snapshots:
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)(search-insights@2.17.3)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)(search-insights@2.17.3)
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)(search-insights@2.17.3)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
 
-  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)':
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)
-      '@algolia/client-search': 5.23.1
-      algoliasearch: 5.23.1
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)
+      '@algolia/client-search': 5.23.2
+      algoliasearch: 5.23.2
 
-  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)':
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)':
     dependencies:
-      '@algolia/client-search': 5.23.1
-      algoliasearch: 5.23.1
+      '@algolia/client-search': 5.23.2
+      algoliasearch: 5.23.2
 
-  '@algolia/client-abtesting@5.23.1':
+  '@algolia/client-abtesting@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/client-analytics@5.23.1':
+  '@algolia/client-analytics@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/client-common@5.23.1': {}
+  '@algolia/client-common@5.23.2': {}
 
-  '@algolia/client-insights@5.23.1':
+  '@algolia/client-insights@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/client-personalization@5.23.1':
+  '@algolia/client-personalization@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/client-query-suggestions@5.23.1':
+  '@algolia/client-query-suggestions@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/client-search@5.23.1':
+  '@algolia/client-search@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/ingestion@1.23.1':
+  '@algolia/ingestion@1.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/monitoring@1.23.1':
+  '@algolia/monitoring@1.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/recommend@5.23.1':
+  '@algolia/recommend@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+      '@algolia/client-common': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
-  '@algolia/requester-browser-xhr@5.23.1':
+  '@algolia/requester-browser-xhr@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
+      '@algolia/client-common': 5.23.2
 
-  '@algolia/requester-fetch@5.23.1':
+  '@algolia/requester-fetch@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
+      '@algolia/client-common': 5.23.2
 
-  '@algolia/requester-node-http@5.23.1':
+  '@algolia/requester-node-http@5.23.2':
     dependencies:
-      '@algolia/client-common': 5.23.1
+      '@algolia/client-common': 5.23.2
 
   '@ampproject/remapping@2.3.0':
     dependencies:
@@ -4138,9 +4150,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.23.1)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.23.2)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.23.1)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.23.2)(search-insights@2.17.3)
       preact: 10.26.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4149,12 +4161,12 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.23.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.23.2)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)(search-insights@2.17.3)
-      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.23.1)(algoliasearch@5.23.1)
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.23.2)(algoliasearch@5.23.2)
       '@docsearch/css': 3.8.2
-      algoliasearch: 5.23.1
+      algoliasearch: 5.23.2
     optionalDependencies:
       search-insights: 2.17.3
     transitivePeerDependencies:
@@ -4311,7 +4323,7 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.2.7(eslint@9.23.0(jiti@2.4.2))':
+  '@eslint/compat@1.2.8(eslint@9.23.0(jiti@2.4.2))':
     optionalDependencies:
       eslint: 9.23.0(jiti@2.4.2)
 
@@ -4323,12 +4335,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.2.0': {}
+  '@eslint/config-helpers@0.2.1': {}
 
   '@eslint/core@0.12.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/core@0.13.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/eslintrc@3.3.0':
     dependencies:
       ajv: 6.12.6
@@ -4363,9 +4379,9 @@ snapshots:
 
   '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.2.7':
+  '@eslint/plugin-kit@0.2.8':
     dependencies:
-      '@eslint/core': 0.12.0
+      '@eslint/core': 0.13.0
       levn: 0.4.1
 
   '@floating-ui/core@1.6.9':
@@ -4510,10 +4526,10 @@ snapshots:
 
   '@nuxt/kit@3.16.2':
     dependencies:
-      c12: 3.0.2
+      c12: 3.0.3
       consola: 3.4.2
       defu: 6.1.4
-      destr: 2.0.3
+      destr: 2.0.5
       errx: 0.1.0
       exsolve: 1.0.4
       globby: 14.1.0
@@ -4549,72 +4565,72 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@rollup/pluginutils@5.1.4(rollup@4.38.0)':
+  '@rollup/pluginutils@5.1.4(rollup@4.39.0)':
     dependencies:
       '@types/estree': 1.0.7
       estree-walker: 2.0.2
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.38.0
+      rollup: 4.39.0
 
-  '@rollup/rollup-android-arm-eabi@4.38.0':
+  '@rollup/rollup-android-arm-eabi@4.39.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.38.0':
+  '@rollup/rollup-android-arm64@4.39.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.38.0':
+  '@rollup/rollup-darwin-arm64@4.39.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.38.0':
+  '@rollup/rollup-darwin-x64@4.39.0':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.38.0':
+  '@rollup/rollup-freebsd-arm64@4.39.0':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.38.0':
+  '@rollup/rollup-freebsd-x64@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.38.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.38.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.38.0':
+  '@rollup/rollup-linux-arm64-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.38.0':
+  '@rollup/rollup-linux-arm64-musl@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.38.0':
+  '@rollup/rollup-linux-loongarch64-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.38.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.38.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.38.0':
+  '@rollup/rollup-linux-riscv64-musl@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.38.0':
+  '@rollup/rollup-linux-s390x-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.38.0':
+  '@rollup/rollup-linux-x64-gnu@4.39.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.38.0':
+  '@rollup/rollup-linux-x64-musl@4.39.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.38.0':
+  '@rollup/rollup-win32-arm64-msvc@4.39.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.38.0':
+  '@rollup/rollup-win32-ia32-msvc@4.39.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.38.0':
+  '@rollup/rollup-win32-x64-msvc@4.39.0':
     optional: true
 
   '@rushstack/node-core-library@5.13.0(@types/node@22.13.16)':
@@ -5130,7 +5146,7 @@ snapshots:
 
   '@vee-validate/valibot@4.15.0(valibot@1.0.0(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
-      type-fest: 4.39.0
+      type-fest: 4.39.1
       valibot: 1.0.0(typescript@5.8.2)
       vee-validate: 4.15.0(vue@3.5.13(typescript@5.8.2))
     transitivePeerDependencies:
@@ -5146,9 +5162,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.3(vite@5.4.16(@types/node@22.13.16))(vue@3.5.13(typescript@5.8.2))':
+  '@vitejs/plugin-vue@5.2.3(vite@5.4.17(@types/node@22.13.16))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
-      vite: 5.4.16(@types/node@22.13.16)
+      vite: 5.4.17(@types/node@22.13.16)
       vue: 3.5.13(typescript@5.8.2)
 
   '@vitejs/plugin-vue@5.2.3(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2))':
@@ -5405,21 +5421,21 @@ snapshots:
       require-from-string: 2.0.2
       uri-js: 4.4.1
 
-  algoliasearch@5.23.1:
-    dependencies:
-      '@algolia/client-abtesting': 5.23.1
-      '@algolia/client-analytics': 5.23.1
-      '@algolia/client-common': 5.23.1
-      '@algolia/client-insights': 5.23.1
-      '@algolia/client-personalization': 5.23.1
-      '@algolia/client-query-suggestions': 5.23.1
-      '@algolia/client-search': 5.23.1
-      '@algolia/ingestion': 1.23.1
-      '@algolia/monitoring': 1.23.1
-      '@algolia/recommend': 5.23.1
-      '@algolia/requester-browser-xhr': 5.23.1
-      '@algolia/requester-fetch': 5.23.1
-      '@algolia/requester-node-http': 5.23.1
+  algoliasearch@5.23.2:
+    dependencies:
+      '@algolia/client-abtesting': 5.23.2
+      '@algolia/client-analytics': 5.23.2
+      '@algolia/client-common': 5.23.2
+      '@algolia/client-insights': 5.23.2
+      '@algolia/client-personalization': 5.23.2
+      '@algolia/client-query-suggestions': 5.23.2
+      '@algolia/client-search': 5.23.2
+      '@algolia/ingestion': 1.23.2
+      '@algolia/monitoring': 1.23.2
+      '@algolia/recommend': 5.23.2
+      '@algolia/requester-browser-xhr': 5.23.2
+      '@algolia/requester-fetch': 5.23.2
+      '@algolia/requester-node-http': 5.23.2
 
   alien-signals@0.4.14: {}
 
@@ -5487,8 +5503,8 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001707
-      electron-to-chromium: 1.5.129
+      caniuse-lite: 1.0.30001709
+      electron-to-chromium: 1.5.130
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -5534,11 +5550,26 @@ snapshots:
       pkg-types: 2.1.0
       rc9: 2.1.2
 
+  c12@3.0.3:
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 16.4.7
+      exsolve: 1.0.4
+      giget: 2.0.0
+      jiti: 2.4.2
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.1.0
+      rc9: 2.1.2
+
   cac@6.7.14: {}
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001707: {}
+  caniuse-lite@1.0.30001709: {}
 
   ccount@2.0.1: {}
 
@@ -5620,7 +5651,7 @@ snapshots:
 
   confbox@0.1.8: {}
 
-  confbox@0.2.1: {}
+  confbox@0.2.2: {}
 
   consola@3.4.2: {}
 
@@ -5682,7 +5713,7 @@ snapshots:
 
   dequal@2.0.3: {}
 
-  destr@2.0.3: {}
+  destr@2.0.5: {}
 
   devlop@1.1.0:
     dependencies:
@@ -5698,7 +5729,7 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.5.129: {}
+  electron-to-chromium@1.5.130: {}
 
   embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
     dependencies:
@@ -5809,7 +5840,7 @@ snapshots:
 
   eslint-config-flat-gitignore@2.1.0(eslint@9.23.0(jiti@2.4.2)):
     dependencies:
-      '@eslint/compat': 1.2.7(eslint@9.23.0(jiti@2.4.2))
+      '@eslint/compat': 1.2.8(eslint@9.23.0(jiti@2.4.2))
       eslint: 9.23.0(jiti@2.4.2)
 
   eslint-config-prettier@10.1.1(eslint@9.23.0(jiti@2.4.2)):
@@ -5919,11 +5950,11 @@ snapshots:
       '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.19.2
-      '@eslint/config-helpers': 0.2.0
+      '@eslint/config-helpers': 0.2.1
       '@eslint/core': 0.12.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.23.0
-      '@eslint/plugin-kit': 0.2.7
+      '@eslint/plugin-kit': 0.2.8
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.2
@@ -6690,13 +6721,13 @@ snapshots:
 
   ofetch@1.3.4:
     dependencies:
-      destr: 2.0.3
+      destr: 2.0.5
       node-fetch-native: 1.6.6
       ufo: 1.5.4
 
   ofetch@1.4.1:
     dependencies:
-      destr: 2.0.3
+      destr: 2.0.5
       node-fetch-native: 1.6.6
       ufo: 1.5.4
 
@@ -6756,7 +6787,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.26.2
       index-to-position: 1.0.0
-      type-fest: 4.39.0
+      type-fest: 4.39.1
 
   parse-ms@4.0.0: {}
 
@@ -6804,7 +6835,7 @@ snapshots:
 
   pkg-types@2.1.0:
     dependencies:
-      confbox: 0.2.1
+      confbox: 0.2.2
       exsolve: 1.0.4
       pathe: 2.0.3
 
@@ -6873,20 +6904,20 @@ snapshots:
   rc9@2.1.2:
     dependencies:
       defu: 6.1.4
-      destr: 2.0.3
+      destr: 2.0.5
 
   read-package-up@11.0.0:
     dependencies:
       find-up-simple: 1.0.1
       read-pkg: 9.0.1
-      type-fest: 4.39.0
+      type-fest: 4.39.1
 
   read-pkg@9.0.1:
     dependencies:
       '@types/normalize-package-data': 2.4.4
       normalize-package-data: 6.0.2
       parse-json: 8.2.0
-      type-fest: 4.39.0
+      type-fest: 4.39.1
       unicorn-magic: 0.1.0
 
   readdirp@3.6.0:
@@ -6939,30 +6970,30 @@ snapshots:
       glob: 11.0.1
       package-json-from-dist: 1.0.1
 
-  rollup@4.38.0:
+  rollup@4.39.0:
     dependencies:
       '@types/estree': 1.0.7
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.38.0
-      '@rollup/rollup-android-arm64': 4.38.0
-      '@rollup/rollup-darwin-arm64': 4.38.0
-      '@rollup/rollup-darwin-x64': 4.38.0
-      '@rollup/rollup-freebsd-arm64': 4.38.0
-      '@rollup/rollup-freebsd-x64': 4.38.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.38.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.38.0
-      '@rollup/rollup-linux-arm64-gnu': 4.38.0
-      '@rollup/rollup-linux-arm64-musl': 4.38.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.38.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.38.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.38.0
-      '@rollup/rollup-linux-riscv64-musl': 4.38.0
-      '@rollup/rollup-linux-s390x-gnu': 4.38.0
-      '@rollup/rollup-linux-x64-gnu': 4.38.0
-      '@rollup/rollup-linux-x64-musl': 4.38.0
-      '@rollup/rollup-win32-arm64-msvc': 4.38.0
-      '@rollup/rollup-win32-ia32-msvc': 4.38.0
-      '@rollup/rollup-win32-x64-msvc': 4.38.0
+      '@rollup/rollup-android-arm-eabi': 4.39.0
+      '@rollup/rollup-android-arm64': 4.39.0
+      '@rollup/rollup-darwin-arm64': 4.39.0
+      '@rollup/rollup-darwin-x64': 4.39.0
+      '@rollup/rollup-freebsd-arm64': 4.39.0
+      '@rollup/rollup-freebsd-x64': 4.39.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.39.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.39.0
+      '@rollup/rollup-linux-arm64-gnu': 4.39.0
+      '@rollup/rollup-linux-arm64-musl': 4.39.0
+      '@rollup/rollup-linux-loongarch64-gnu': 4.39.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.39.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.39.0
+      '@rollup/rollup-linux-riscv64-musl': 4.39.0
+      '@rollup/rollup-linux-s390x-gnu': 4.39.0
+      '@rollup/rollup-linux-x64-gnu': 4.39.0
+      '@rollup/rollup-linux-x64-musl': 4.39.0
+      '@rollup/rollup-win32-arm64-msvc': 4.39.0
+      '@rollup/rollup-win32-ia32-msvc': 4.39.0
+      '@rollup/rollup-win32-x64-msvc': 4.39.0
       fsevents: 2.3.3
 
   run-applescript@7.0.0: {}
@@ -7140,12 +7171,12 @@ snapshots:
 
   tailwind-merge@3.1.0: {}
 
-  tailwind-variants@1.0.0(tailwindcss@4.0.17):
+  tailwind-variants@1.0.0(tailwindcss@4.1.2):
     dependencies:
       tailwind-merge: 3.0.2
-      tailwindcss: 4.0.17
+      tailwindcss: 4.1.2
 
-  tailwindcss@4.0.17: {}
+  tailwindcss@4.1.2: {}
 
   tapable@2.2.1: {}
 
@@ -7198,7 +7229,7 @@ snapshots:
       picocolors: 1.1.1
       postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.3)(yaml@2.7.1)
       resolve-from: 5.0.0
-      rollup: 4.38.0
+      rollup: 4.39.0
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tinyexec: 0.3.2
@@ -7225,7 +7256,7 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@4.39.0: {}
+  type-fest@4.39.1: {}
 
   typescript@5.8.2: {}
 
@@ -7383,7 +7414,7 @@ snapshots:
   vee-validate@4.15.0(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@vue/devtools-api': 7.7.2
-      type-fest: 4.39.0
+      type-fest: 4.39.1
       vue: 3.5.13(typescript@5.8.2)
 
   vfile-message@4.0.2:
@@ -7400,10 +7431,10 @@ snapshots:
     dependencies:
       vite: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
 
-  vite-plugin-dts@4.5.3(@types/node@22.13.16)(rollup@4.38.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)):
+  vite-plugin-dts@4.5.3(@types/node@22.13.16)(rollup@4.39.0)(typescript@5.8.2)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)):
     dependencies:
       '@microsoft/api-extractor': 7.52.2(@types/node@22.13.16)
-      '@rollup/pluginutils': 5.1.4(rollup@4.38.0)
+      '@rollup/pluginutils': 5.1.4(rollup@4.39.0)
       '@volar/typescript': 2.4.12
       '@vue/language-core': 2.2.0(typescript@5.8.2)
       compare-versions: 6.1.1
@@ -7419,10 +7450,10 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.8.9(rollup@4.38.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)):
+  vite-plugin-inspect@0.8.9(rollup@4.39.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.38.0)
+      '@rollup/pluginutils': 5.1.4(rollup@4.39.0)
       debug: 4.4.0
       error-stack-parser-es: 0.1.5
       fs-extra: 11.3.0
@@ -7435,7 +7466,7 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.2(rollup@4.38.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2)):
+  vite-plugin-vue-devtools@7.7.2(rollup@4.39.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@vue/devtools-core': 7.7.2(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.2))
       '@vue/devtools-kit': 7.7.2
@@ -7443,7 +7474,7 @@ snapshots:
       execa: 9.5.2
       sirv: 3.0.1
       vite: 6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1)
-      vite-plugin-inspect: 0.8.9(rollup@4.38.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
+      vite-plugin-inspect: 0.8.9(rollup@4.39.0)(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
       vite-plugin-vue-inspector: 5.3.1(vite@6.2.4(@types/node@22.13.16)(jiti@2.4.2)(tsx@4.19.3)(yaml@2.7.1))
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -7466,11 +7497,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.16(@types/node@22.13.16):
+  vite@5.4.17(@types/node@22.13.16):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
-      rollup: 4.38.0
+      rollup: 4.39.0
     optionalDependencies:
       '@types/node': 22.13.16
       fsevents: 2.3.3
@@ -7479,7 +7510,7 @@ snapshots:
     dependencies:
       esbuild: 0.25.2
       postcss: 8.5.3
-      rollup: 4.38.0
+      rollup: 4.39.0
     optionalDependencies:
       '@types/node': 22.13.16
       fsevents: 2.3.3
@@ -7487,16 +7518,16 @@ snapshots:
       tsx: 4.19.3
       yaml: 2.7.1
 
-  vitepress@1.6.3(@algolia/client-search@5.23.1)(@types/node@22.13.16)(fuse.js@7.1.0)(postcss@8.5.3)(search-insights@2.17.3)(typescript@5.8.2):
+  vitepress@1.6.3(@algolia/client-search@5.23.2)(@types/node@22.13.16)(fuse.js@7.1.0)(postcss@8.5.3)(search-insights@2.17.3)(typescript@5.8.2):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.23.1)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.23.2)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.30
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.3(vite@5.4.16(@types/node@22.13.16))(vue@3.5.13(typescript@5.8.2))
+      '@vitejs/plugin-vue': 5.2.3(vite@5.4.17(@types/node@22.13.16))(vue@3.5.13(typescript@5.8.2))
       '@vue/devtools-api': 7.7.2
       '@vue/shared': 3.5.13
       '@vueuse/core': 12.8.2(typescript@5.8.2)
@@ -7505,7 +7536,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.1.2
       shiki: 2.5.0
-      vite: 5.4.16(@types/node@22.13.16)
+      vite: 5.4.17(@types/node@22.13.16)
       vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       postcss: 8.5.3
diff --git a/scripts/code.ts b/scripts/code.ts
index f0102305..047c7603 100644
--- a/scripts/code.ts
+++ b/scripts/code.ts
@@ -2,15 +2,28 @@ import { readFile, writeFile } from 'node:fs/promises';
 import fg from 'fast-glob';
 
 async function generateCodeToJson() {
-  const components = fg.sync('examples/src/ui/*.vue');
+  // match components in root and subdirectories
+  const components = fg.sync([
+    'examples/src/ui/*.vue', // keep support for root directory components
+    'examples/src/ui/*/*.vue' // add support for subdirectory components
+  ]);
 
   const codeRecord: Record<string, string> = {};
 
   for await (const component of components) {
-    const name = component.replace('examples/src/ui/', '').replace('.vue', '');
+    let name;
 
-    const code = await readFile(component, 'utf-8');
+    if (component.includes('/ui/') && !component.split('/ui/')[1].includes('/')) {
+      // handle root directory components, keep original format: input
+      name = component.replace('examples/src/ui/', '').replace('.vue', '');
+    } else {
+      // handle subdirectory components, format: button/color -> button-color
+      const path = component.replace('examples/src/ui/', '').replace('.vue', '');
+      const [componentName, demoName] = path.split('/');
+      name = `${componentName}-${demoName}`;
+    }
 
+    const code = await readFile(component, 'utf-8');
     codeRecord[name] = code;
   }