@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/shadcn/sidebar/MenuItemRenderer.vue

@@ -0,0 +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>

package/src/shadcn/sidebar/Sidebar.vue

@@ -0,0 +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>

package/src/shadcn/sidebar/SidebarDemoContent.vue

@@ -0,0 +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>

package/src/shadcn/sidebar/SidebarMenuGroupWithLabel.vue

@@ -0,0 +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>

package/src/shadcn/sidebar/SidebarMenuItemWithIcon.vue

@@ -0,0 +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>

package/src/shadcn/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <div :class="['sidebar-menu-sub', props.class]">
+    <slot />
+  </div>
+</template>

package/src/shadcn/sidebar/SidebarMenuSubItemStyled.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+const props = defineProps({
+  label: String,
+  isActive: { type: Boolean, default: false },
+  onClick: Function,
+  class: String,
+});
+// Gracefully handle when used outside SidebarProvider
+let state = 'expanded';
+let isMobile = false;
+try {
+  const ctx = inject('sidebarContext')
+
+  if (ctx) {
+    state = ctx?.state;
+    isMobile = ctx?.isMobile;
+  }
+} catch (e) {}
+const isCollapsed = computed(() => state === 'collapsed' && !isMobile);
+</script>
+<template>
+  <template v-if="!isCollapsed">
+    <button
+      @click="props.onClick"
+      :class="[
+        'w-full text-left px-4 py-1.5 text-sm rounded-md transition-colors duration-200',
+        'hover:bg-accent/50 hover:text-foreground',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+        props.isActive ? 'bg-primary/10 text-primary font-medium' : 'text-muted-foreground',
+        props.class
+      ].filter(Boolean).join(' ')"
+      type="button"
+    >
+      {{ props.label }}
+    </button>
+  </template>
+</template>

package/src/shadcn/sidebar/SidebarTrigger.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const emit = defineEmits(['toggle']);
+</script>
+<template>
+  <button class="p-2" @click="$emit('toggle')">
+    <slot />
+  </button>
+</template>

package/src/shadcn/sidebar/index.ts

@@ -0,0 +1,5 @@
+export { default as Sidebar } from './Sidebar.vue'
+export { default as MenuGroup } from './MenuGroup.vue'
+export { default as SidebarDemoContent } from './SidebarDemoContent.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+export { default as SidebarMenuItemWithIcon } from './SidebarMenuItemWithIcon.vue'

package/src/shadcn/slider/Slider.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="h-2 bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="h-full bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="data-[orientation=vertical]:-left-[7px] border-primary h-5 w-5 bg-slider-thumb bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>

package/src/shadcn/slider/index.ts

@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue"

package/src/shadcn/sonner/Sonner.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { Toaster as Sonner } from "vue-sonner"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+
+    }"
+  />
+</template>

package/src/shadcn/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"

package/src/shadcn/switch/Switch.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-switch-thumb dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block h-5 w-5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/src/shadcn/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"

package/src/shadcn/tabs/CardTabsContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TabsContent from '@/ui/tab-content.vue';
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <TabsContent
+    variant="card"
+    :class="props.class"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/shadcn/tabs/CornerCutTabsTrigger.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
+import { TabsTrigger } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+
+import type { HTMLAttributes } from 'vue';
+import { trigger } from '@vue/reactivity';
+
+const props = defineProps<{
+  value: string | number;
+  class?: string;
+  cornerPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  disabled?: boolean;
+  asChild?: boolean;
+  as?: string;
+  [key: string]: any;
+}>();
+
+const { value, class: className, cornerPosition: cornerPos = 'top-right', ...rest } = props;
+const cornerPosition = computed(() => cornerPos);
+const triggerRef = ref<HTMLElement | null>(null);
+
+const getClipPath = (position: string) => {
+  switch (position) {
+    case 'top-left':
+      return 'polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px)';
+    case 'top-right':
+      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
+    case 'bottom-left':
+      return 'polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px))';
+    case 'bottom-right':
+      return 'polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)';
+    default:
+      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
+  }
+};
+
+const clipPathValue = computed(() => getClipPath(cornerPosition.value));
+let observer: MutationObserver | null = null;
+
+watch(() => triggerRef.value, () => {
+  const el = triggerRef.value;
+  if (!el) return;
+  const parent = el.$el.parentElement;
+  const borderDiv = parent?.querySelector('div[style*="clip-path"]') as HTMLElement | null;
+
+  const updateStyle = () => {
+    const isActive = el.$el.getAttribute('data-state') === 'active';
+
+    if (isActive) {
+      el.$el.style.clipPath = clipPathValue.value;
+      if (borderDiv) borderDiv.style.opacity = '1';
+    } else {
+      el.$el.style.clipPath = 'none';
+      if (borderDiv) borderDiv.style.opacity = '0';
+    }
+  };
+  updateStyle();
+  observer = new MutationObserver(updateStyle);
+  observer.observe(el.$el, { attributes: true, attributeFilter: ['data-state'] });
+});
+
+onBeforeUnmount(() => {
+  if (observer) observer.disconnect();
+});
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <!-- Border container with corner cut - only visible when the trigger is active -->
+    <div
+      class="absolute inset-0 bg-primary transition-opacity duration-300 pointer-events-none opacity-0"
+      :style="{ clipPath: clipPathValue }"
+    />
+    <!-- Content container with the actual trigger -->
+    <TabsTrigger
+      ref="triggerRef"
+      data-slot="tabs-trigger"
+      :value="value"
+      v-bind="rest"
+      :class="cn(
+        'corner-cut-trigger relative flex items-center justify-center gap-2 px-3 py-1.5 transition-all duration-300',
+        'min-w-0 max-w-48 w-auto shrink-0',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'text-muted-foreground hover:text-foreground',
+        'data-[state=active]:text-foreground data-[state=active]:bg-background',
+        'data-[state=active]:m-[1px]',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
+        '[&>span]:truncate [&>span]:block',
+        className,
+      )"
+      :data-corner-position="cornerPosition"
+    >
+      <slot />
+    </TabsTrigger>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/src/shadcn/tabs/GridTabsList.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import TabsList from '@/ui/tab-list.vue';
+
+const props = defineProps({
+  cols: { type: Number, default: 2 },
+  class: { type: String, default: '' },
+});
+
+const gridClass = computed(() =>
+  cn(
+    props.cols === 2 && 'grid-cols-2',
+    props.cols === 3 && 'grid-cols-3',
+    props.cols === 4 && 'grid-cols-4',
+    props.cols === 5 && 'grid-cols-5',
+    props.cols === 6 && 'grid-cols-6',
+    props.class
+  )
+);
+</script>
+<template>
+  <TabsList
+    variant="grid"
+    :class="gridClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/shadcn/tabs/ScrollableTabsList.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex overflow-x-auto gap-1">
+    <slot />
+  </div>
+</template>
+<script setup lang="ts">
+// No props needed
+</script>

package/src/shadcn/tabs/Tabs.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col', props.class)"
+  >
+    <slot />
+  </TabsRoot>
+</template>

package/src/shadcn/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/shadcn/tabs/TabsList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex items-center justify-center p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/shadcn/tabs/TabsTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { TabsTrigger as RekaTabsTrigger } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"]; variant?: "default" | "vertical" }>()
+</script>
+
+<template>
+  <RekaTabsTrigger
+    data-slot="tabs-trigger"
+    v-bind="props"
+    :class="cn(
+      'relative inline-flex items-center justify-center gap-2 px-4 py-2 transition-all duration-200 ease-out',
+      'min-w-0 max-w-48 w-auto shrink-0',
+      'text-muted-foreground hover:text-foreground',
+      'border-b-2 border-transparent',
+      'data-[state=active]:text-primary data-[state=active]:border-primary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      '[&>span]:truncate [&>span]:block',
+      props.variant === 'vertical' && 'w-full justify-start border-b-0 border-r-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </RekaTabsTrigger>
+</template>