@brumaombra/ui-vintage 0.7.7 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.7.7",
+    "version": "0.7.8",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",

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

@@ -3,6 +3,7 @@ import { NuxtImg } from "#components";
 import type { Component, HTMLAttributes } from "vue";
 import { HugeiconsIcon } from "@hugeicons/vue";
 import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
+import { ThemeSelector } from "../theme-selector";
 import { Separator } from "../ui/separator";
 import {
     Sidebar,
@@ -151,8 +152,12 @@ const getSidebarItemLinkProps = (item: DashboardSidebarItem) => {
             </SidebarContent>
 
             <!-- Sidebar footer -->
-            <SidebarFooter v-if="$slots['sidebar-footer']" class="border-t border-sidebar-border">
-                <slot name="sidebar-footer" />
+            <SidebarFooter class="border-t border-sidebar-border">
+                <slot name="sidebar-footer">
+                    <div class="flex items-center gap-2">
+                        <ThemeSelector />
+                    </div>
+                </slot>
             </SidebarFooter>
         </Sidebar>
 

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ComputerIcon, GibbousMoonIcon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
@@ -18,9 +18,9 @@ const getThemeIcon = (theme: string) => {
     if (theme === 'light') {
         return Sun01Icon;
     } else if (theme === 'dark') {
-        return GibbousMoonIcon;
+        return Moon01Icon;
     } else {
-        return ComputerIcon;
+        return LaptopIcon;
     }
 };
 
@@ -112,7 +112,7 @@ onUnmounted(() => {
         </PopoverTrigger>
 
         <!-- Theme options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="currentTheme">
                 <CommandList>
                     <CommandGroup :heading="t('uiVintage.theme.title')">

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

@@ -28,10 +28,10 @@ const toggleExpanded = () => {
 </script>
 
 <template>
-    <Card class="p-0! overflow-hidden" @click="toggleExpanded">
+    <Card class="p-0! overflow-hidden">
         <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 justify-between p-5 gap-4 text-left cursor-pointer" @click="toggleExpanded">
                 <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">

package/src/components/ui/tabs/TabsTrigger.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'text-muted-foreground hover:text-foreground focus-visible:outline-none inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-sm border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap transition-colors duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 data-[state=active]:cursor-pointer data-[state=active]:border-foreground data-[state=active]:bg-muted data-[state=active]:font-semibold data-[state=active]:outline-1 data-[state=active]:outline-border data-[state=active]:outline-offset-0 data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'text-muted-foreground hover:text-foreground focus-visible:outline-none inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap transition-colors duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 data-[state=active]:cursor-pointer data-[state=active]:border-(--button-primary-light) data-[state=active]:bg-gray-50 data-[state=active]:text-(--button-primary-light) data-[state=active]:font-semibold data-[state=active]:outline-1 data-[state=active]:outline-border data-[state=active]:outline-offset-0 data-[state=active]:shadow-none dark:data-[state=active]:border-(--button-primary-dark) dark:data-[state=active]:bg-(--bg-card-dark) dark:data-[state=active]:text-(--button-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"