@brumaombra/ui-vintage 0.7.4 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.7.4",
+    "version": "0.7.7",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -37,6 +37,7 @@
         "./style.css": "./src/styles.css",
         "./alert": "./src/components/ui/alert/index.ts",
         "./alert-dialog": "./src/components/ui/alert-dialog/index.ts",
+        "./accordion": "./src/components/ui/accordion/index.ts",
         "./background-grid": "./src/components/background-grid/index.ts",
         "./badge": "./src/components/ui/badge/index.ts",
         "./blog": "./src/components/blog/index.ts",
@@ -120,7 +121,7 @@
         "clsx": "2.1.1",
         "reka-ui": "2.9.2",
         "tailwind-merge": "3.5.0",
-        "tailwindcss": "4.2.2",
+        "tailwindcss": "4.2.4",
         "tw-animate-css": "1.4.0"
     },
     "devDependencies": {

package/src/components/blog/BlogFAQSection.vue

@@ -1,9 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
+import { Accordion } from '@brumaombra/ui-vintage/accordion';
 import BlogSectionTitle from './BlogSectionTitle.vue';
 
 // Props
@@ -12,23 +10,7 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-const expandedItems = ref({});
 const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
-
-// Toggle expanded state
-const toggleItem = index => {
-    expandedItems.value[index] = !expandedItems.value[index];
-};
-
-// Check if item is expanded
-const isExpanded = index => {
-    return expandedItems.value[index] || false;
-};
-
-// Auto-open first FAQ for better UX
-if (hasValidFAQs.value) {
-    expandedItems.value[0] = true;
-}
 </script>
 
 <template>
@@ -37,35 +19,17 @@ if (hasValidFAQs.value) {
         <BlogSectionTitle :title="t('uiVintage.blog.faq.title')" />
 
         <!-- Description -->
-        <p class="text-base md:text-lg text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-8">
+        <p class="text-base md:text-lg text-(--text-secondary-light) dark:text-(--text-secondary-dark) mb-8">
             {{ t('uiVintage.blog.faq.description') }}
         </p>
 
         <!-- FAQ Items -->
         <div class="space-y-4">
-            <Card v-for="(faq, index) in props.faqs" :key="index" class="!p-0 cursor-pointer" @click="toggleItem(index)">
-                <CardContent class="!p-0 gap-0">
-                    <!-- Question -->
-                    <div class="flex items-center justify-between p-5 gap-4">
-                        <!-- Question text -->
-                        <h3 class="text-sm md:!text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] text-left">
-                            {{ faq.question }}
-                        </h3>
-
-                        <!-- Toggle icon -->
-                        <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] transition-transform duration-300" :class="{ 'rotate-180': isExpanded(index) }">
-                            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
-                        </div>
-                    </div>
-
-                    <!-- Answer -->
-                    <div class="overflow-hidden transition-all duration-300 ease-in-out" :class="isExpanded(index) ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'">
-                        <p class="px-5 pb-5 text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed">
-                            {{ faq.answer }}
-                        </p>
-                    </div>
-                </CardContent>
-            </Card>
+            <Accordion v-for="(faq, index) in props.faqs" :key="index" :title="faq.question" :initially-expanded="index === 0">
+                <p class="text-xs md:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) leading-relaxed">
+                    {{ faq.answer }}
+                </p>
+            </Accordion>
         </div>
     </div>
 </template>

package/src/components/blog/TableOfContents.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowDown01Icon, Bookmark01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
+import { Bookmark01Icon } from '@hugeicons/core-free-icons';
+import { Accordion } from '../ui/accordion';
 
 // Props
 const props = defineProps({
@@ -11,8 +10,6 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-const isExpanded = ref(false);
-const contentBodyRef = ref(null);
 
 // Create the headings list
 const headings = computed(() => {
@@ -50,27 +47,17 @@ const scrollToHeading = id => {
     }
 };
 
-// Toggle expanded state
-const toggleExpanded = () => {
-    isExpanded.value = !isExpanded.value;
-};
-
-// Get the current content height for the expand/collapse animation
-const contentHeight = computed(() => {
-    return contentBodyRef.value?.scrollHeight ?? 0;
-});
-
 // Get classes for heading button
 const getHeadingButtonClasses = heading => {
     // Base classes for all titles
-    const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-[var(--bg-selected-light)] dark:hover:bg-[var(--bg-selected-dark)] cursor-pointer';
+    const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-(--bg-selected-light) dark:hover:bg-(--bg-selected-dark) cursor-pointer';
 
     // Add classes based on heading level
     let levelClasses = '';
     if (heading.level === 2) {
-        levelClasses = 'text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] font-semibold text-xs md:text-sm';
+        levelClasses = 'text-(--text-primary-light) dark:text-(--text-primary-dark) font-semibold text-xs md:text-sm';
     } else {
-        levelClasses = 'text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] !pl-6 text-xs md:text-sm';
+        levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) !pl-6 text-xs md:text-sm';
     }
 
     // Return combined classes
@@ -79,36 +66,11 @@ const getHeadingButtonClasses = heading => {
 </script>
 
 <template>
-    <Card v-if="headings.length > 0" class="!p-0 overflow-hidden">
-        <CardContent class="!p-0 gap-0">
-            <!-- Header -->
-            <button @click="toggleExpanded" class="flex items-center justify-between w-full p-5 gap-4 text-left cursor-pointer">
-                <div class="flex items-center gap-3 min-w-0">
-                    <!-- Icon -->
-                    <div class="flex items-center justify-center w-8 h-8 md:!w-10 md:!h-10 bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] rounded-none flex-shrink-0">
-                        <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
-                    </div>
-
-                    <!-- Title -->
-                    <span class="text-sm md:!text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
-                        {{ t('uiVintage.blog.tableOfContents') }}
-                    </span>
-                </div>
-
-                <!-- Expand/Collapse icon -->
-                <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] transition-transform duration-300" :class="{ 'rotate-180': isExpanded }">
-                    <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
-                </div>
+    <Accordion v-if="headings.length > 0" :title="t('uiVintage.blog.tableOfContents')" :icon="Bookmark01Icon">
+        <nav class="space-y-1">
+            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading)">
+                {{ heading.text }}
             </button>
-
-            <!-- Table of contents list with smooth transition -->
-            <div class="overflow-hidden transition-[height,opacity] duration-300 ease-in-out" :style="{ height: isExpanded ? `${contentHeight}px` : '0px' }" :class="isExpanded ? 'opacity-100' : 'opacity-0'">
-                <nav ref="contentBodyRef" class="px-5 pb-5 space-y-1">
-                    <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading)">
-                        {{ heading.text }}
-                    </button>
-                </nav>
-            </div>
-        </CardContent>
-    </Card>
+        </nav>
+    </Accordion>
 </template>

package/src/components/dashboard-shell/DashboardShell.vue

@@ -117,7 +117,7 @@ const getSidebarItemLinkProps = (item: DashboardSidebarItem) => {
 
             <!-- Sidebar sections -->
             <SidebarContent v-if="props.sidebarSections.length">
-                <SidebarGroup v-for="section in props.sidebarSections" :key="section.id">
+                <SidebarGroup v-for="section in props.sidebarSections" :key="section.id" class="space-y-1">
                     <!-- Section label -->
                     <SidebarGroupLabel v-if="section.label">
                         {{ section.label }}
@@ -125,9 +125,9 @@ const getSidebarItemLinkProps = (item: DashboardSidebarItem) => {
 
                     <!-- Section content -->
                     <SidebarGroupContent>
-                        <SidebarMenu class="gap-3">
+                        <SidebarMenu :class="cn('gap-3', props.compact && 'gap-2')">
                             <SidebarMenuItem v-for="item in section.items" :key="item.id">
-                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group h-auto min-h-12 rounded border border-[var(--border-light)] px-3 py-2.5 text-[var(--text-secondary-light)] transition-all duration-200 hover:border-[var(--border-hover-light)] hover:bg-[var(--bg-selected-light)] hover:text-[var(--text-primary-light)] data-[active=true]:border-[var(--border-hover-light)] data-[active=true]:bg-[var(--bg-selected-light)] data-[active=true]:text-[var(--text-primary-light)] dark:border-[var(--border-dark)] dark:text-[var(--text-secondary-dark)] dark:hover:border-[var(--border-hover-dark)] dark:hover:bg-[var(--bg-selected-dark)] dark:hover:text-[var(--text-primary-dark)] dark:data-[active=true]:border-[var(--border-hover-dark)] dark:data-[active=true]:bg-[var(--bg-selected-dark)] dark:data-[active=true]:text-[var(--text-primary-dark)] sm:px-4 sm:py-3', item.description ? 'items-start' : 'items-center')">
+                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group h-auto min-h-12 rounded border border-(--border-light) px-3 py-2.5 text-(--text-secondary-light) transition-all duration-200 hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) data-[active=true]:border-(--border-hover-light) data-[active=true]:bg-(--bg-selected-light) data-[active=true]:text-(--text-primary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark) dark:hover:border-(--border-hover-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) dark:data-[active=true]:border-(--border-hover-dark) dark:data-[active=true]:bg-(--bg-selected-dark) dark:data-[active=true]:text-(--text-primary-dark) sm:px-4 sm:py-3', item.description ? 'items-start' : 'items-center')">
                                     <component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)">
                                         <!-- Icon -->
                                         <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-opacity duration-200 group-hover:opacity-100', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -24,6 +24,7 @@ export interface LandingFooterSection {
 interface LandingFooterProps {
     appName: string;
     appLogo?: string;
+    appLinkTo?: string;
     appDescription?: string;
     sections?: LandingFooterSection[];
     linkComponent?: Component | string;
@@ -40,6 +41,7 @@ interface LandingFooterProps {
 
 // Props
 const props = withDefaults(defineProps<LandingFooterProps>(), {
+    appLinkTo: "/",
     appDescription: "",
     sections: () => [],
     linkComponent: "a",
@@ -79,10 +81,10 @@ const getLinkProps = (link: LandingFooterLink) => {
                 <!-- Brand section -->
                 <div :class="cn('max-w-md flex-1', props.brandClass)">
                     <!-- App logo and name -->
-                    <div class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground">
+                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity hover:opacity-80">
                         <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" class="size-8 shrink-0 object-contain" />
                         <span>{{ props.appName }}</span>
-                    </div>
+                    </a>
 
                     <!-- App description -->
                     <p v-if="props.appDescription" class="max-w-sm text-xs md:text-sm leading-relaxed text-muted-foreground">

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -7,6 +7,7 @@ interface LandingNavbarProps {
     appName?: string;
     appLogo?: string;
     appLinkTo?: string;
+    logoClass?: HTMLAttributes["class"];
     class?: HTMLAttributes["class"];
     containerClass?: HTMLAttributes["class"];
     leftClass?: HTMLAttributes["class"];
@@ -29,7 +30,7 @@ const props = withDefaults(defineProps<LandingNavbarProps>(), {
                 <slot name="left">
                     <a :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity hover:opacity-80">
                         <!-- App logo -->
-                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" preload class="size-11 sm:size-9 shrink-0 object-contain" />
+                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
 
                         <!-- App name -->
                         <span v-if="props.appName" class="hidden sm:!inline text-xl font-bold tracking-tight text-foreground">

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -39,7 +39,7 @@ const handleUpdateModelValue = (value?: number[]) => {
 </script>
 
 <template>
-    <Card class="space-y-3 px-4 py-4">
+    <Card class="px-4 py-4">
         <!-- Slider header -->
         <div class="flex items-center justify-between gap-3">
             <!-- Label and description block -->

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { ref } from "vue";
+import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { Card, CardContent } from "@brumaombra/ui-vintage/card";
+
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+
+interface AccordionProps {
+    title: string;
+    initiallyExpanded?: boolean;
+    icon?: HugeiconsIconDefinition | null;
+    iconClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<AccordionProps>(), {
+    initiallyExpanded: false
+});
+
+const expanded = ref(props.initiallyExpanded);
+
+// Toggle expanded state
+const toggleExpanded = () => {
+    expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+    <Card class="p-0! overflow-hidden" @click="toggleExpanded">
+        <CardContent class="p-0! gap-0">
+            <!-- Header -->
+            <div class="flex items-center justify-between p-5 gap-4 text-left cursor-pointer">
+                <div class="flex items-center gap-3 min-w-0">
+                    <!-- Icon -->
+                    <div v-if="props.icon" class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-(--bg-card-light) border border-(--border-light) dark:bg-(--bg-card-dark) dark:border-(--border-dark) md:h-10 md:w-10">
+                        <HugeiconsIcon :icon="props.icon" :class="['size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)', props.iconClass]" />
+                    </div>
+
+                    <!-- Title -->
+                    <div class="text-sm md:text-base! font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark) text-left">
+                        {{ props.title }}
+                    </div>
+                </div>
+
+                <!-- Toggle icon -->
+                <div class="shrink-0 w-8 h-8 flex items-center justify-center rounded bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark) transition-transform duration-300 cursor-pointer" :class="{ 'rotate-180': expanded }">
+                    <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                </div>
+            </div>
+
+            <!-- Content -->
+            <div :class="['grid transition-all duration-300 ease-in-out', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
+                <div :class="['overflow-hidden px-5 transition-[padding] duration-300 ease-in-out', expanded ? 'pb-5' : 'pb-0']">
+                    <slot />
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/components/ui/accordion/index.ts

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

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
     data-slot="breadcrumb-link"
     :as="as"
     :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors', props.class)"
+    :class="cn('text-muted-foreground hover:underline', props.class)"
   >
     <slot />
   </Primitive>

package/src/components/ui/button/index.ts

@@ -27,10 +27,10 @@ export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cv
       size: {
         "default": "min-h-12 px-4 py-3 has-[>svg]:px-3",
         "sm": "min-h-10 gap-1.5 px-3 py-2 has-[>svg]:px-2.5",
-        "lg": "min-h-12 px-6 py-3 has-[>svg]:px-4",
+        "lg": "min-h-[52px] px-4 py-3 has-[>svg]:px-4",
         "icon": "size-12",
         "icon-sm": "size-10",
-        "icon-lg": "size-12",
+        "icon-lg": "size-[52px]",
       },
     },
     defaultVariants: {

package/src/components/ui/dialog/DialogDescription.vue

@@ -13,7 +13,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-xs sm:text-sm leading-6 text-muted-foreground', props.class)">
+  <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-xs sm:text-sm leading-5 text-muted-foreground', props.class)">
     <slot />
   </DialogDescription>
 </template>

package/src/components/ui/field/FieldDescription.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <p data-slot="field-description" :class="cn(
-    '!text-xs sm:!text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-[[data-orientation=horizontal]]/field:text-balance',
+    'text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-[[data-orientation=horizontal]]/field:text-balance',
     'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
     '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
     props.class,

package/src/components/ui/select/SelectContent.vue

@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <SelectPortal>
     <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded border border-border transition-colors duration-300 ease-in-out max-sm:w-[calc(100vw-1rem)] max-sm:max-w-[calc(100vw-1rem)] max-sm:min-w-0',
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border transition-colors duration-300 ease-in-out max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
       position === 'popper'
       && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
       props.class,

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -72,7 +72,7 @@ provideSidebarContext({
     <div data-slot="sidebar-wrapper" :style="{
       '--sidebar-width': SIDEBAR_WIDTH,
       '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-    }" :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" v-bind="$attrs">
+    }" :data-compact="props.compact ? 'true' : 'false'" :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" v-bind="$attrs">
       <slot />
     </div>
   </TooltipProvider>

package/src/components/ui/sidebar/index.ts

@@ -51,8 +51,8 @@ export const sidebarMenuButtonVariants: (props?: SidebarMenuButtonVariants & Cla
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: "min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs",
-        sm: "min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6",
+        default: "min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs group-data-[compact=true]/sidebar-wrapper:py-3",
+        sm: "min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:py-2.5",
         lg: "min-h-12 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-10 group-data-[collapsible=icon]:p-0!",
       },
     },