frappe-ui 0.1.172 → 0.1.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.172",
+  "version": "0.1.174",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Charts/NumberChart.vue

@@ -19,11 +19,11 @@
         :class="[
           config.negativeIsBetter
             ? config.delta >= 0
-              ? 'text-red-500'
-              : 'text-green-500'
+              ? 'text-ink-red-4'
+              : 'text-ink-green-3'
             : config.delta >= 0
-              ? 'text-green-500'
-              : 'text-red-500',
+              ? 'text-ink-green-3'
+              : 'text-ink-red-4',
         ]"
       >
         <span class="">

package/src/components/Charts/donutChartOptions.ts

@@ -94,7 +94,7 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
           },
           textStyle: {
             padding: [0, 0, 0, -5],
-            color: '#000',
+            color: 'var(--ink-gray-8)',
           },
           icon: 'circle',
           pageIcons: {
@@ -103,11 +103,11 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
               'M 12 27 h -2 c -0.386 0 -0.738 -0.223 -0.904 -0.572 s -0.115 -0.762 0.13 -1.062 L 17.708 15 L 9.226 4.633 c -0.245 -0.299 -0.295 -0.712 -0.13 -1.062 S 9.614 3 10 3 h 2 c 0.3 0 0.584 0.135 0.774 0.367 l 9 11 c 0.301 0.369 0.301 0.898 0 1.267 l -9 11 C 12.584 26.865 12.3 27 12 27 Z',
             ],
           },
-          pageIconColor: '#64748B',
-          pageInactiveColor: '#C0CCDA',
+          pageIconColor: 'var(--ink-gray-6)',
+          pageInactiveColor: 'var(--ink-gray-4)',
           pageIconSize: 10,
           pageTextStyle: {
-            color: '#64748B',
+            color: 'var(--ink-gray-6)',
           },
           animationDurationUpdate: 300,
         }

package/src/components/Charts/eChartOptions.ts

@@ -110,7 +110,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
       },
       textStyle: {
         padding: [0, 0, 0, -5],
-        color: '#000',
+        color: 'var(--ink-gray-8)',
       },
       icon: 'circle',
       pageIcons: {
@@ -119,11 +119,11 @@ export default function useEchartsOptions(config: AxisChartConfig) {
           'M 12 27 h -2 c -0.386 0 -0.738 -0.223 -0.904 -0.572 s -0.115 -0.762 0.13 -1.062 L 17.708 15 L 9.226 4.633 c -0.245 -0.299 -0.295 -0.712 -0.13 -1.062 S 9.614 3 10 3 h 2 c 0.3 0 0.584 0.135 0.774 0.367 l 9 11 c 0.301 0.369 0.301 0.898 0 1.267 l -9 11 C 12.584 26.865 12.3 27 12 27 Z',
         ],
       },
-      pageIconColor: '#64748B',
-      pageInactiveColor: '#C0CCDA',
+      pageIconColor: 'var(--ink-gray-6)',
+      pageInactiveColor: 'var(--ink-gray-4)',
       pageIconSize: 10,
       pageTextStyle: {
-        color: '#64748B',
+        color: 'var(--ink-gray-6)',
       },
       animationDurationUpdate: 300,
     },
@@ -142,13 +142,13 @@ export function getTitleOptions(title: string, subtitle?: string) {
       fontSize: 14,
       fontWeight: 500,
       lineHeight: 24,
-      // color: titleColor
+      color: 'var(--ink-gray-8)',
     },
     subtextStyle: {
       fontSize: 13,
       fontWeight: 400,
       lineHeight: 20,
-      // color: subtitleColor,
+      color: 'var(--ink-gray-6)',
     },
   }
 }
@@ -169,14 +169,17 @@ function getXAxisOptions(config: AxisChartConfig) {
           align: 'right',
           verticalAlign: 'bottom',
           padding: [0, 0, 26, 0],
-          // color: '#000',
-          backgroundColor: '#fff',
-          borderColor: '#fff',
+          backgroundColor: 'var(--surface-white)',
+          borderColor: 'var(--surface-white)',
+          color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
         splitLine: {
           show: true,
           width: 1,
+          lineStyle: {
+            color: 'var(--ink-gray-3)',
+          },
         },
         axisLine: {
           show: false,
@@ -261,14 +264,17 @@ function getYAxisOptions(config: AxisChartConfig) {
           align: 'left',
           verticalAlign: 'top',
           padding: [0, 0, 0, -2],
-          // color: '#000',
-          backgroundColor: '#fff',
-          borderColor: '#fff',
+          backgroundColor: 'var(--surface-white)',
+          borderColor: 'var(--surface-white)',
+          color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
         splitLine: {
           show: true,
           width: 1,
+          lineStyle: {
+            color: 'var(--ink-gray-3)',
+          },
         },
         axisLine: {
           show: false,
@@ -308,13 +314,17 @@ function getYAxisOptions(config: AxisChartConfig) {
       align: 'right',
       verticalAlign: 'top',
       padding: [0, 5, 0, 0],
-      // color: '#000',
-      backgroundColor: '#fff',
+      backgroundColor: 'var(--surface-white)',
+      borderColor: 'var(--surface-white)',
+      color: 'var(--ink-gray-8)',
     },
     nameGap: 6,
     splitLine: {
       show: true,
       width: 1,
+      lineStyle: {
+        color: 'var(--ink-gray-3)',
+      },
     },
     axisLine: {
       show: false,

package/src/components/Dropdown/Dropdown.story.vue

@@ -1,98 +1,188 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import Dropdown from './Dropdown.vue'
-import FeatherIcon from '../FeatherIcon.vue'
+import { Dropdown } from './index'
 import { Button } from '../Button'
-</script>
 
-<template>
-  <Story :layout="{ type: 'grid', width: 300 }">
-    <Variant title="Basic">
-      <Dropdown
-        :options="[
+const actions = [
+  {
+    label: 'Edit',
+    icon: 'edit',
+    onClick: () => console.log('Edit clicked'),
+  },
+  {
+    label: 'Delete',
+    icon: 'trash-2',
+    onClick: () => console.log('Delete clicked'),
+  },
+]
+
+const groupedActions = [
+  {
+    group: 'Actions',
+    items: [
+      {
+        label: 'Edit',
+        icon: 'edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        label: 'Duplicate',
+        icon: 'copy',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      {
+        label: 'More Actions',
+        icon: 'more-horizontal',
+        submenu: [
           {
-            label: 'Edit Title',
-            onClick: () => {},
-            icon: () => h(FeatherIcon, { name: 'edit-2' }),
+            label: 'Archive',
+            icon: 'archive',
+            onClick: () => console.log('Archive clicked'),
           },
           {
-            label: 'Manage Members',
-            onClick: () => {},
-            icon: () => h(FeatherIcon, { name: 'users' }),
+            label: 'Export',
+            icon: 'download',
+            submenu: [
+              {
+                label: 'Export as PDF',
+                icon: 'file-text',
+                onClick: () => console.log('Export as PDF clicked'),
+              },
+              {
+                label: 'Export as CSV',
+                icon: 'file',
+                onClick: () => console.log('Export as CSV clicked'),
+              },
+            ],
           },
           {
-            label: 'Delete this project',
-            onClick: () => {},
-            icon: () => h(FeatherIcon, { name: 'trash' }),
+            label: 'Share',
+            icon: 'share',
+            onClick: () => console.log('Share clicked'),
           },
-        ]"
-      />
-    </Variant>
+        ],
+      },
+    ],
+  },
+  {
+    group: 'Danger',
+    items: [
+      {
+        label: 'Delete',
+        icon: 'trash-2',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+]
 
-    <Variant title="Button prop">
-      <Dropdown
-        :options="[
+const submenuActions = [
+  {
+    label: 'New',
+    icon: 'plus',
+    submenu: [
+      {
+        group: 'Documents',
+        items: [
           {
-            label: 'Edit Title',
-            onClick: () => {},
+            label: 'New Document',
+            icon: 'file-plus',
+            onClick: () => console.log('New Document clicked'),
           },
           {
-            label: 'Manage Members',
-            onClick: () => {},
+            label: 'New Template',
+            icon: 'file-text',
+            onClick: () => console.log('New Template clicked'),
           },
+        ],
+      },
+      {
+        group: 'Organization',
+        items: [
           {
-            label: 'Delete this project',
-            onClick: () => {},
+            label: 'New Folder',
+            icon: 'folder-plus',
+            onClick: () => console.log('New Folder clicked'),
           },
-        ]"
-        :button="{
-          label: 'Actions',
-        }"
-      />
-    </Variant>
-
-    <Variant title="Custom Button and Groups">
-      <Dropdown
-        :options="[
           {
-            group: 'Manage',
-            items: [
-              {
-                label: 'Edit Title',
-                icon: () => h(FeatherIcon, { name: 'edit' }),
-              },
-              {
-                label: 'Manage Members',
-                icon: () => h(FeatherIcon, { name: 'users' }),
-              },
-            ],
+            label: 'New Project',
+            icon: 'briefcase',
+            onClick: () => console.log('New Project clicked'),
           },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Edit',
+    icon: 'edit',
+    onClick: () => console.log('Edit clicked'),
+  },
+  {
+    label: 'Share',
+    icon: 'share',
+    submenu: [
+      {
+        label: 'Share with Link',
+        icon: 'link',
+        onClick: () => console.log('Share with Link clicked'),
+      },
+      {
+        label: 'Share with Email',
+        icon: 'mail',
+        onClick: () => console.log('Share with Email clicked'),
+      },
+      {
+        group: 'Advanced',
+        items: [
           {
-            group: 'Delete',
-            items: [
-              {
-                label: 'Delete users',
-                icon: () => h(FeatherIcon, { name: 'edit' }),
-              },
-              {
-                label: 'Delete this project',
-                icon: () => h(FeatherIcon, { name: 'trash' }),
-              },
-            ],
+            label: 'Share Settings',
+            icon: 'settings',
+            onClick: () => console.log('Share Settings clicked'),
           },
-        ]"
-      >
-        <Button>
-          <template #icon>
-            <FeatherIcon name="more-horizontal" class="h-4 w-4" />
-          </template>
-        </Button>
+          {
+            label: 'Permission Management',
+            icon: 'shield',
+            onClick: () => console.log('Permission Management clicked'),
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <Story title="Dropdown" :layout="{ type: 'grid', width: '200px' }">
+    <Variant title="Default">
+      <div class="asdf">
+        <Dropdown :options="actions" />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Button">
+      <Dropdown :options="actions">
+        <Button variant="solid">Custom Trigger</Button>
       </Dropdown>
     </Variant>
 
-    <template #controls>
-      <!-- <HstText v-model="state.label" title="Label" />
-      <HstSelect v-model="state.size" :options="sizes" title="Size" /> -->
-    </template>
+    <Variant title="With Groups">
+      <Dropdown :options="groupedActions" />
+    </Variant>
+
+    <Variant title="Right Aligned">
+      <Dropdown :options="actions" placement="right" />
+    </Variant>
+
+    <Variant title="Center Aligned">
+      <Dropdown :options="actions" placement="center" />
+    </Variant>
+
+    <Variant title="With Submenus">
+      <Dropdown :options="submenuActions" />
+    </Variant>
+
+    <Variant title="With Nested Submenus">
+      <Dropdown :options="groupedActions" />
+    </Variant>
   </Story>
 </template>

package/src/components/Dropdown/Dropdown.vue

@@ -1,79 +1,159 @@
 <template>
-  <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
-    <Popover
-      :transition="dropdownTransition"
-      :show="open"
-      :placement="popoverPlacement"
-    >
-      <template #target>
-        <MenuButton as="div">
-          <slot v-if="$slots.default" v-bind="{ open }" />
-          <Button v-else :active="open" v-bind="button">
-            {{ button ? button?.label || null : 'Options' }}
-          </Button>
-        </MenuButton>
-      </template>
-
-      <template #body>
-        <MenuItems
-          class="mt-2 min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-          :class="{
-            'left-0 origin-top-left': placement == 'left',
-            'right-0 origin-top-right': placement == 'right',
-            'inset-x-0 origin-top': placement == 'center',
-          }"
+  <DropdownMenuRoot v-slot="{ open }">
+    <DropdownMenuTrigger as-child>
+      <slot v-if="$slots.default" v-bind="{ open }" />
+      <Button v-else :active="false" v-bind="button">
+        {{ button ? button?.label || null : 'Options' }}
+      </Button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        :class="[
+          cssClasses.dropdownContent,
+          {
+            'origin-top-left': placement == 'left',
+            'origin-top-right': placement == 'right',
+            'origin-top': placement == 'center',
+          },
+        ]"
+        :side="contentSide"
+        :align="contentAlign"
+        :side-offset="4"
+      >
+        <div
+          v-for="group in groups"
+          :key="group.key"
+          :class="cssClasses.groupContainer"
         >
-          <div v-for="group in groups" :key="group.key" class="p-1.5">
-            <div
-              v-if="group.group && !group.hideLabel"
-              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6"
-            >
-              {{ group.group }}
-            </div>
-            <MenuItem
-              v-for="item in group.items"
-              :key="item.label"
-              v-slot="{ active }"
-            >
+          <DropdownMenuLabel
+            v-if="group.group && !group.hideLabel"
+            :class="cssClasses.groupLabel"
+          >
+            {{ group.group }}
+          </DropdownMenuLabel>
+
+          <DropdownMenuItem
+            v-for="item in group.items"
+            :key="item.label"
+            as-child
+            @select="item.onClick"
+          >
+            <component
+              v-if="item.component"
+              :is="item.component"
+              :active="false"
+            />
+            <DropdownMenuSub v-else-if="item.submenu">
+              <DropdownMenuSubTrigger as-child>
+                <button :class="cssClasses.submenuTrigger">
+                  <FeatherIcon
+                    v-if="item.icon && typeof item.icon === 'string'"
+                    :name="item.icon"
+                    :class="cssClasses.itemIcon"
+                    aria-hidden="true"
+                  />
+                  <component
+                    :class="cssClasses.itemIcon"
+                    v-else-if="item.icon"
+                    :is="item.icon"
+                  />
+                  <span :class="cssClasses.itemLabel">
+                    {{ item.label }}
+                  </span>
+                  <FeatherIcon
+                    name="chevron-right"
+                    :class="cssClasses.chevronIcon"
+                    aria-hidden="true"
+                  />
+                </button>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent
+                  :class="cssClasses.dropdownContent"
+                  :side-offset="4"
+                >
+                  <div
+                    v-for="submenuGroup in getSubmenuGroups(item.submenu)"
+                    :key="submenuGroup.key"
+                    :class="cssClasses.groupContainer"
+                  >
+                    <DropdownMenuLabel
+                      v-if="submenuGroup.group && !submenuGroup.hideLabel"
+                      :class="cssClasses.groupLabel"
+                    >
+                      {{ submenuGroup.group }}
+                    </DropdownMenuLabel>
+
+                    <DropdownMenuItem
+                      v-for="subItem in submenuGroup.items"
+                      :key="subItem.label"
+                      as-child
+                      @select="() => handleItemClick(subItem)"
+                    >
+                      <component
+                        v-if="subItem.component"
+                        :is="subItem.component"
+                        :active="false"
+                      />
+                      <button v-else :class="cssClasses.itemButton">
+                        <FeatherIcon
+                          v-if="
+                            subItem.icon && typeof subItem.icon === 'string'
+                          "
+                          :name="subItem.icon"
+                          :class="cssClasses.itemIcon"
+                          aria-hidden="true"
+                        />
+                        <component
+                          :class="cssClasses.itemIcon"
+                          v-else-if="subItem.icon"
+                          :is="subItem.icon"
+                        />
+                        <span :class="cssClasses.itemLabel">
+                          {{ subItem.label }}
+                        </span>
+                      </button>
+                    </DropdownMenuItem>
+                  </div>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <button v-else :class="cssClasses.itemButton">
+              <FeatherIcon
+                v-if="item.icon && typeof item.icon === 'string'"
+                :name="item.icon"
+                :class="cssClasses.itemIcon"
+                aria-hidden="true"
+              />
               <component
-                v-if="item.component"
-                :is="item.component"
-                :active="active"
+                :class="cssClasses.itemIcon"
+                v-else-if="item.icon"
+                :is="item.icon"
               />
-              <button
-                v-else
-                :class="[
-                  active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
-                  'group flex h-7 w-full items-center rounded px-2 text-base',
-                ]"
-                @click="item.onClick"
-              >
-                <FeatherIcon
-                  v-if="item.icon && typeof item.icon === 'string'"
-                  :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
-                  aria-hidden="true"
-                />
-                <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
-                  v-else-if="item.icon"
-                  :is="item.icon"
-                />
-                <span class="whitespace-nowrap text-ink-gray-7">
-                  {{ item.label }}
-                </span>
-              </button>
-            </MenuItem>
-          </div>
-        </MenuItems>
-      </template>
-    </Popover>
-  </Menu>
+              <span :class="cssClasses.itemLabel">
+                {{ item.label }}
+              </span>
+            </button>
+          </DropdownMenuItem>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 </template>
 
 <script setup lang="ts">
-import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
-import { Popover } from '../Popover'
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from 'reka-ui'
 import { Button } from '../Button'
 import FeatherIcon from '../FeatherIcon.vue'
 import { computed } from 'vue'
@@ -82,6 +162,7 @@ import type {
   DropdownProps,
   DropdownOption,
   DropdownGroupOption,
+  DropdownOptions,
 } from './types'
 
 const router = useRouter()
@@ -91,36 +172,34 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   placement: 'left',
 })
 
-const normalizeDropdownItem = (option: DropdownOption) => {
-  let onClick = () => {
-    if (option.route) {
-      router.push(option.route)
-    } else if (option.onClick) {
-      option.onClick()
-    }
+// Unified click handling for all dropdown items
+const handleItemClick = (item: DropdownOption) => {
+  if (item.route) {
+    router.push(item.route)
+  } else if (item.onClick) {
+    item.onClick()
   }
+}
 
+const normalizeDropdownItem = (option: DropdownOption) => {
   return {
     label: option.label,
     icon: option.icon,
     component: option.component,
-    onClick,
+    onClick: () => handleItemClick(option),
+    submenu: option.submenu,
   }
 }
 
-const filterOptions = (options: DropdownOption[]) => {
-  return (options || [])
-    .filter(Boolean)
-    .filter((option) => (option.condition ? option.condition() : true))
-    .map((option) => normalizeDropdownItem(option))
-}
-
-const groups = computed(() => {
+// Unified group processing for both main options and submenu options
+const processOptionsIntoGroups = (
+  options: DropdownOptions,
+): DropdownGroupOption[] => {
   let groups: DropdownGroupOption[] = []
   let currentGroup: DropdownGroupOption | null = null
   let i = 0
 
-  for (let option of props.options) {
+  for (let option of options) {
     if (option == null) {
       continue
     }
@@ -155,23 +234,85 @@ const groups = computed(() => {
   }
 
   return groups
+}
+
+const getSubmenuGroups = (submenuOptions: DropdownOptions) => {
+  return processOptionsIntoGroups(submenuOptions)
+}
+
+const filterOptions = (options: DropdownOption[]) => {
+  return (options || [])
+    .filter(Boolean)
+    .filter((option) => (option.condition ? option.condition() : true))
+    .map((option) => normalizeDropdownItem(option))
+}
+
+// Semantic CSS classes for consistent styling
+const cssClasses = {
+  // Container classes
+  dropdownContent:
+    'min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none dropdown-content',
+  groupContainer: 'p-1.5',
+
+  // Label classes
+  groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6',
+  itemLabel: 'whitespace-nowrap text-ink-gray-7',
+
+  // Icon classes
+  itemIcon: 'mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6',
+  chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0 text-ink-gray-6',
+
+  // Button classes
+  itemButton:
+    'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:bg-surface-gray-3 focus:outline-none data-[highlighted]:bg-surface-gray-3',
+  submenuTrigger:
+    'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:bg-surface-gray-3 focus:outline-none data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3',
+}
+
+const groups = computed(() => {
+  return processOptionsIntoGroups(props.options)
 })
 
-const dropdownTransition = computed(() => {
-  return {
-    enterActiveClass: 'transition duration-100 ease-out',
-    enterFromClass: 'transform scale-95 opacity-0',
-    enterToClass: 'transform scale-100 opacity-100',
-    leaveActiveClass: 'transition duration-75 ease-in',
-    leaveFromClass: 'transform scale-100 opacity-100',
-    leaveToClass: 'transform scale-95 opacity-0',
-  }
+const contentSide = computed(() => {
+  return 'bottom' as const
 })
 
-const popoverPlacement = computed(() => {
-  if (props.placement === 'left') return 'bottom-start'
-  if (props.placement === 'right') return 'bottom-end'
-  if (props.placement === 'center') return 'bottom-center'
-  return 'bottom'
+const contentAlign = computed(() => {
+  if (props.placement === 'left') return 'start' as const
+  if (props.placement === 'right') return 'end' as const
+  if (props.placement === 'center') return 'center' as const
+  return 'start' as const
 })
 </script>
+
+<style scoped>
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+:global(.dropdown-content[data-state='open']) {
+  animation: dropdown-in 100ms ease-out;
+}
+
+:global(.dropdown-content[data-state='closed']) {
+  animation: dropdown-out 75ms ease-in;
+}
+</style>

package/src/components/Dropdown/types.ts

@@ -8,6 +8,7 @@ export type DropdownOption = {
   onClick?: () => void
   route?: RouterLinkProps['to']
   condition?: () => boolean
+  submenu?: DropdownOptions
 }
 
 export type DropdownGroupOption = {
@@ -23,4 +24,4 @@ export interface DropdownProps {
   button?: ButtonProps
   options?: DropdownOptions
   placement?: string
-}
+}

package/src/components/TabButtons/TabButtons.vue

@@ -39,6 +39,7 @@
 <script>
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import FeatherIcon from '../FeatherIcon.vue'
+import Button from '../Button/Button.vue'
 
 export default {
   name: 'TabButtons',
@@ -53,6 +54,7 @@ export default {
   },
   emits: ['update:modelValue'],
   components: {
+    Button,
     FeatherIcon,
     RadioGroup,
     RadioGroupOption,