@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/shadcn/select/SelectTrigger.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { SelectTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronDown } from "lucide-vue-next"
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
-  { size: "default" },
-)
-
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectTrigger
-    data-slot="select-trigger"
-    :data-size="size"
-    v-bind="forwardedProps"
-    :class="cn(
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
-    </SelectIcon>
-  </SelectTrigger>
-</template>
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/shadcn/select/SelectValue.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-import type { SelectValueProps } from "reka-ui"
-import { SelectValue } from "reka-ui"
-
-const props = defineProps<SelectValueProps>()
-</script>
-
-<template>
-  <SelectValue
-    data-slot="select-value"
-    v-bind="props"
-  >
-    <slot />
-  </SelectValue>
-</template>
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>

package/src/shadcn/select/index.ts

@@ -1,11 +1,11 @@
-export { default as Select } from "./Select.vue"
-export { default as SelectContent } from "./SelectContent.vue"
-export { default as SelectGroup } from "./SelectGroup.vue"
-export { default as SelectItem } from "./SelectItem.vue"
-export { default as SelectItemText } from "./SelectItemText.vue"
-export { default as SelectLabel } from "./SelectLabel.vue"
-export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
-export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
-export { default as SelectSeparator } from "./SelectSeparator.vue"
-export { default as SelectTrigger } from "./SelectTrigger.vue"
-export { default as SelectValue } from "./SelectValue.vue"
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"

package/src/shadcn/separator/Separator.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
->(), {
-  orientation: "horizontal",
-  decorative: true,
-})
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <Separator
-    data-slot="separator-root"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </Separator>
-</template>
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="separator-root"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Separator>
+</template>

package/src/shadcn/separator/index.ts

@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue"
+export { default as Separator } from "./Separator.vue"

package/src/shadcn/sidebar/MenuGroup.vue

@@ -1,28 +1,28 @@
-<script setup lang="ts">
-import SidebarMenuGroupWithLabel from './SidebarMenuGroupWithLabel.vue';
-import MenuItemRenderer from './MenuItemRenderer.vue';
-
-const props = defineProps({
-  label: String,
-  items: Array,
-  activeItem: String,
-  activeSubItem: String,
-  onItemClick: Function,
-  onSubItemClick: Function,
-});
-</script>
-<template>
-  <SidebarMenuGroupWithLabel :label="props.label">
-    <div class="flex flex-col items-start ml-1">
-      <MenuItemRenderer
-        v-for="item in props.items"
-        :key="item.id"
-        :item="item"
-        :activeItem="props.activeItem"
-        :activeSubItem="props.activeSubItem"
-        :onItemClick="props.onItemClick"
-        :onSubItemClick="props.onSubItemClick"
-      />
-    </div>
-  </SidebarMenuGroupWithLabel>
-</template>
+<script setup lang="ts">
+import SidebarMenuGroupWithLabel from './SidebarMenuGroupWithLabel.vue';
+import MenuItemRenderer from './MenuItemRenderer.vue';
+
+const props = defineProps({
+  label: String,
+  items: Array,
+  activeItem: String,
+  activeSubItem: String,
+  onItemClick: Function,
+  onSubItemClick: Function,
+});
+</script>
+<template>
+  <SidebarMenuGroupWithLabel :label="props.label">
+    <div class="flex flex-col items-start ml-1">
+      <MenuItemRenderer
+        v-for="item in props.items"
+        :key="item.id"
+        :item="item"
+        :activeItem="props.activeItem"
+        :activeSubItem="props.activeSubItem"
+        :onItemClick="props.onItemClick"
+        :onSubItemClick="props.onSubItemClick"
+      />
+    </div>
+  </SidebarMenuGroupWithLabel>
+</template>

package/src/shadcn/sidebar/MenuItemRenderer.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { SidebarMenuItemWithIcon } from './index';
-import SidebarMenuSub from '@/ui/sidebar/SidebarMenuSub.vue';
-import SidebarMenuSubItemStyled from './SidebarMenuSubItemStyled.vue';
-
-const props = defineProps({
-  item: { type: Object, required: true },
-  activeItem: String,
-  activeSubItem: String,
-  onItemClick: Function,
-  onSubItemClick: Function,
-});
-</script>
-<template>
-  <SidebarMenuItemWithIcon :icon="props.item.icon" :label="props.item.label" :badge="props.item.badge"
-    :isActive="props.activeItem === props.item.id"
-    @click="() => props.onItemClick && props.onItemClick(props.item.id)" />
-  <SidebarMenuSub v-if="props.item.submenu && props.activeItem === props.item.id" class="relative w-full">
-    <SidebarMenuSubItemStyled v-for="subItem in props.item.submenu" :key="subItem.id" :label="subItem.label"
-      :isActive="props.activeSubItem === subItem.id"
-      @click="() => props.onSubItemClick && props.onSubItemClick(subItem.id)" />
-  </SidebarMenuSub>
-</template>
+<script setup lang="ts">
+import { SidebarMenuItemWithIcon } from './index';
+import SidebarMenuSub from '@/ui/sidebar/SidebarMenuSub.vue';
+import SidebarMenuSubItemStyled from './SidebarMenuSubItemStyled.vue';
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  activeItem: String,
+  activeSubItem: String,
+  onItemClick: Function,
+  onSubItemClick: Function,
+});
+</script>
+<template>
+  <SidebarMenuItemWithIcon :icon="props.item.icon" :label="props.item.label" :badge="props.item.badge"
+    :isActive="props.activeItem === props.item.id"
+    @click="() => props.onItemClick && props.onItemClick(props.item.id)" />
+  <SidebarMenuSub v-if="props.item.submenu && props.activeItem === props.item.id" class="relative w-full">
+    <SidebarMenuSubItemStyled v-for="subItem in props.item.submenu" :key="subItem.id" :label="subItem.label"
+      :isActive="props.activeSubItem === subItem.id"
+      @click="() => props.onSubItemClick && props.onSubItemClick(subItem.id)" />
+  </SidebarMenuSub>
+</template>

package/src/shadcn/sidebar/Sidebar.vue

@@ -1,14 +1,14 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-const props = defineProps({
-  class: { type: String, default: '' },
-  height: { type: String, default: '' },
-  footerUser: { type: String, default: '' },
-});
-</script>
-<template>
-  <aside :class="cn('flex flex-col bg-background border-r w-64', props.class)" :style="props.height ? { height: props.height } : {}">
-    <slot />
-    <footer v-if="props.footerUser" class="mt-auto p-4 border-t text-xs text-muted-foreground">{{ props.footerUser }}</footer>
-  </aside>
-</template>
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: { type: String, default: '' },
+  height: { type: String, default: '' },
+  footerUser: { type: String, default: '' },
+});
+</script>
+<template>
+  <aside :class="cn('flex flex-col bg-background border-r w-64', props.class)" :style="props.height ? { height: props.height } : {}">
+    <slot />
+    <footer v-if="props.footerUser" class="mt-auto p-4 border-t text-xs text-muted-foreground">{{ props.footerUser }}</footer>
+  </aside>
+</template>

package/src/shadcn/sidebar/SidebarDemoContent.vue

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: { type: String, default: '' },
-  description: { type: String, default: '' },
-  statusText: { type: String, default: '' },
-  features: { type: Array, default: () => [] },
-});
-</script>
-<template>
-  <div class="space-y-4">
-    <div class="flex items-center gap-3">
-      <div class="w-2 h-2 rounded-full bg-primary" />
-      <h3 class="text-lg font-medium">{{ props.title }}</h3>
-      <span v-if="props.statusText" class="text-sm text-muted-foreground">
-        {{ props.statusText }}
-      </span>
-    </div>
-    <p class="text-muted-foreground">{{ props.description }}</p>
-    <div class="p-4 bg-muted/50 rounded-lg">
-      <h4 class="font-medium mb-2">Features:</h4>
-      <ul class="space-y-1 text-sm text-muted-foreground">
-        <li v-for="(feature, index) in props.features" :key="index">• {{ feature }}</li>
-      </ul>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  statusText: { type: String, default: '' },
+  features: { type: Array, default: () => [] },
+});
+</script>
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <div class="w-2 h-2 rounded-full bg-primary" />
+      <h3 class="text-lg font-medium">{{ props.title }}</h3>
+      <span v-if="props.statusText" class="text-sm text-muted-foreground">
+        {{ props.statusText }}
+      </span>
+    </div>
+    <p class="text-muted-foreground">{{ props.description }}</p>
+    <div class="p-4 bg-muted/50 rounded-lg">
+      <h4 class="font-medium mb-2">Features:</h4>
+      <ul class="space-y-1 text-sm text-muted-foreground">
+        <li v-for="(feature, index) in props.features" :key="index">• {{ feature }}</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/shadcn/sidebar/SidebarMenuGroupWithLabel.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import Separator from '@/ui/separator.vue';
-
-const props = defineProps({
-  label: String,
-  class: String,
-});
-
-const sidebar = inject('sidebarContext');
-const isCollapsed = computed(() => sidebar && sidebar.state === 'collapsed' && !sidebar.isMobile);
-</script>
-<template>
-  <div :class="['space-y-1 mt-3 first:mt-0', props.class]">
-    <template v-if="isCollapsed">
-      <div class="h-[16px] flex items-center mb-1">
-        <Separator />
-      </div>
-    </template>
-    <template v-else>
-      <h3 class="px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground line-clamp-1">
-        {{ props.label }}
-      </h3>
-    </template>
-    <div class="space-y-1">
-      <slot />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import Separator from '@/ui/separator.vue';
+
+const props = defineProps({
+  label: String,
+  class: String,
+});
+
+const sidebar = inject('sidebarContext');
+const isCollapsed = computed(() => sidebar && sidebar.state === 'collapsed' && !sidebar.isMobile);
+</script>
+<template>
+  <div :class="['space-y-1 mt-3 first:mt-0', props.class]">
+    <template v-if="isCollapsed">
+      <div class="h-[16px] flex items-center mb-1">
+        <Separator />
+      </div>
+    </template>
+    <template v-else>
+      <h3 class="px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground line-clamp-1">
+        {{ props.label }}
+      </h3>
+    </template>
+    <div class="space-y-1">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/shadcn/sidebar/SidebarMenuItemWithIcon.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { cn } from '@/lib/utils';
-import Tooltip from '@/ui/tooltip.vue';
-import TooltipTrigger from '@/ui/tooltip-trigger.vue';
-import TooltipContent from '@/ui/tooltip-content.vue';
-
-const props = defineProps({
-  icon: [Object, Function],
-  label: String,
-  isActive: { type: Boolean, default: false },
-  badge: String,
-  onClick: Function,
-  class: String,
-});
-
-// Inject sidebar context
-const sidebar = inject('sidebarContext');
-const isCollapsed = computed(() => sidebar && sidebar.state === 'collapsed' && !sidebar.isMobile);
-
-const baseClasses = computed(() =>
-  cn(
-    'relative w-full flex items-center gap-2 pl-2 pr-3 py-2 rounded-lg text-left transition-all duration-200 group hover:bg-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
-    isCollapsed.value && 'justify-center px-2 w-10 h-10 min-w-10',
-    props.class
-  )
-);
-
-const stateClasses = computed(() =>
-  cn(
-    props.isActive
-      ? 'bg-primary/10 text-primary'
-      : 'text-muted-foreground hover:text-foreground'
-  )
-);
-
-const iconClasses = computed(() =>
-  cn(
-    'relative w-6 h-6 rounded-md flex items-center justify-center transition-colors duration-200',
-    isCollapsed.value
-      ? 'bg-transparent'
-      : props.isActive
-        ? 'bg-primary/15 text-primary'
-        : 'bg-muted group-hover:bg-accent text-muted-foreground group-hover:text-foreground'
-  )
-);
-</script>
-<template>
-  <Tooltip v-if="isCollapsed">
-    <TooltipTrigger as-child>
-      <button
-        :class="cn(baseClasses, stateClasses)"
-        @click="props.onClick"
-      >
-        <div :class="iconClasses">
-          <component v-if="props.icon" :is="props.icon" class="w-4 h-4" />
-        </div>
-      </button>
-    </TooltipTrigger>
-    <TooltipContent side="right" align="center">
-      <p>{{ props.label }}</p>
-      <span v-if="props.badge" class="ml-2 text-xs opacity-60">({{ props.badge }})</span>
-    </TooltipContent>
-  </Tooltip>
-  <button
-    v-else
-    type="button"
-    @click="(e) => props.onClick && props.onClick(e)"
-  :class="cn(baseClasses, stateClasses, props.class)"
-  >
-    <!-- Icon Container -->
-    <div
-      :class="cn(
-        'relative w-6 h-6 rounded-md flex items-center justify-center transition-colors duration-200',
-        isCollapsed
-          ? 'bg-transparent'
-          : props.isActive
-            ? 'bg-primary/15 text-primary'
-            : 'bg-muted group-hover:bg-accent text-muted-foreground group-hover:text-foreground'
-      )"
-    >
-      <component v-if="props.icon" :is="props.icon" class="w-4 h-4" />
-    </div>
-
-    <!-- Label - Hidden when collapsed -->
-    <span v-if="!isCollapsed" class="flex-1 text-sm font-medium leading-none truncate">
-      {{ props.label }}
-    </span>
-
-    <!-- Badge - Hidden when collapsed -->
-    <span
-      v-if="!isCollapsed && props.badge"
-      :class="cn(
-        'absolute right-3 inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full min-w-[1.25rem] h-5',
-        props.isActive
-          ? 'bg-primary/20 text-primary'
-          : 'bg-muted text-muted-foreground group-hover:bg-accent group-hover:text-foreground'
-      )"
-    >
-      {{ props.badge }}
-    </span>
-  </button>
-</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { cn } from '@/lib/utils';
+import Tooltip from '@/ui/tooltip.vue';
+import TooltipTrigger from '@/ui/tooltip-trigger.vue';
+import TooltipContent from '@/ui/tooltip-content.vue';
+
+const props = defineProps({
+  icon: [Object, Function],
+  label: String,
+  isActive: { type: Boolean, default: false },
+  badge: String,
+  onClick: Function,
+  class: String,
+});
+
+// Inject sidebar context
+const sidebar = inject('sidebarContext');
+const isCollapsed = computed(() => sidebar && sidebar.state === 'collapsed' && !sidebar.isMobile);
+
+const baseClasses = computed(() =>
+  cn(
+    'relative w-full flex items-center gap-2 pl-2 pr-3 py-2 rounded-lg text-left transition-all duration-200 group hover:bg-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+    isCollapsed.value && 'justify-center px-2 w-10 h-10 min-w-10',
+    props.class
+  )
+);
+
+const stateClasses = computed(() =>
+  cn(
+    props.isActive
+      ? 'bg-primary/10 text-primary'
+      : 'text-muted-foreground hover:text-foreground'
+  )
+);
+
+const iconClasses = computed(() =>
+  cn(
+    'relative w-6 h-6 rounded-md flex items-center justify-center transition-colors duration-200',
+    isCollapsed.value
+      ? 'bg-transparent'
+      : props.isActive
+        ? 'bg-primary/15 text-primary'
+        : 'bg-muted group-hover:bg-accent text-muted-foreground group-hover:text-foreground'
+  )
+);
+</script>
+<template>
+  <Tooltip v-if="isCollapsed">
+    <TooltipTrigger as-child>
+      <button
+        :class="cn(baseClasses, stateClasses)"
+        @click="props.onClick"
+      >
+        <div :class="iconClasses">
+          <component v-if="props.icon" :is="props.icon" class="w-4 h-4" />
+        </div>
+      </button>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center">
+      <p>{{ props.label }}</p>
+      <span v-if="props.badge" class="ml-2 text-xs opacity-60">({{ props.badge }})</span>
+    </TooltipContent>
+  </Tooltip>
+  <button
+    v-else
+    type="button"
+    @click="(e) => props.onClick && props.onClick(e)"
+  :class="cn(baseClasses, stateClasses, props.class)"
+  >
+    <!-- Icon Container -->
+    <div
+      :class="cn(
+        'relative w-6 h-6 rounded-md flex items-center justify-center transition-colors duration-200',
+        isCollapsed
+          ? 'bg-transparent'
+          : props.isActive
+            ? 'bg-primary/15 text-primary'
+            : 'bg-muted group-hover:bg-accent text-muted-foreground group-hover:text-foreground'
+      )"
+    >
+      <component v-if="props.icon" :is="props.icon" class="w-4 h-4" />
+    </div>
+
+    <!-- Label - Hidden when collapsed -->
+    <span v-if="!isCollapsed" class="flex-1 text-sm font-medium leading-none truncate">
+      {{ props.label }}
+    </span>
+
+    <!-- Badge - Hidden when collapsed -->
+    <span
+      v-if="!isCollapsed && props.badge"
+      :class="cn(
+        'absolute right-3 inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full min-w-[1.25rem] h-5',
+        props.isActive
+          ? 'bg-primary/20 text-primary'
+          : 'bg-muted text-muted-foreground group-hover:bg-accent group-hover:text-foreground'
+      )"
+    >
+      {{ props.badge }}
+    </span>
+  </button>
+</template>