@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/ui/sheet/SheetTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-    <DialogTrigger data-slot="sheet-trigger" v-bind="props">
-        <slot />
-    </DialogTrigger>
+	<DialogTrigger data-slot="sheet-trigger" v-bind="props">
+		<slot />
+	</DialogTrigger>
 </template>

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

@@ -9,78 +9,78 @@ import SheetTitle from '../sheet/SheetTitle.vue';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<SidebarProps>(), {
-    side: 'left',
-    variant: 'sidebar',
-    collapsible: 'offcanvas',
-    compact: false
+	side: 'left',
+	variant: 'sidebar',
+	collapsible: 'offcanvas',
+	compact: false
 });
 
 const { t } = useI18n();
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
 function handleMobileSidebarClick(event: MouseEvent) {
-    const target = event.target as HTMLElement | null;
+	const target = event.target as HTMLElement | null;
 
-    if (target?.closest('[data-sidebar="menu-button"]')) {
-        setOpenMobile(false);
-    }
+	if (target?.closest('[data-sidebar="menu-button"]')) {
+		setOpenMobile(false);
+	}
 }
 </script>
 
 <template>
-    <div v-if="collapsible === 'none'" data-slot="sidebar" :class="cn(
-        'group/sidebar-wrapper bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-        props.class
-    )
-        " v-bind="$attrs">
-        <slot />
-    </div>
+	<div v-if="collapsible === 'none'" data-slot="sidebar" :class="cn(
+		'group/sidebar-wrapper bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+		props.class
+	)
+		" v-bind="$attrs">
+		<slot />
+	</div>
 
-    <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-        <SheetContent data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" :data-compact="props.compact ? 'true' : 'false'" :side="side" class="group/sidebar-wrapper border-sidebar-border bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 data-[state=open]:[animation-duration:320ms] data-[state=open]:[animation-timing-function:var(--ease-out-expo)] [&>button]:hidden" :style="{
-            '--sidebar-width': SIDEBAR_WIDTH_MOBILE
-        }">
-            <SheetHeader class="sr-only">
-                <SheetTitle>{{ t('uiVintage.sidebar.title') }}</SheetTitle>
-                <SheetDescription>{{ t('uiVintage.sidebar.description') }}</SheetDescription>
-            </SheetHeader>
-            <div class="flex h-full w-full flex-col" @click="handleMobileSidebarClick">
-                <slot />
-            </div>
-        </SheetContent>
-    </Sheet>
+	<Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+		<SheetContent data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" :data-compact="props.compact ? 'true' : 'false'" :side="side" class="group/sidebar-wrapper border-sidebar-border bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 data-[state=open]:[animation-duration:320ms] data-[state=open]:[animation-timing-function:var(--ease-out-expo)] [&>button]:hidden" :style="{
+			'--sidebar-width': SIDEBAR_WIDTH_MOBILE
+		}">
+			<SheetHeader class="sr-only">
+				<SheetTitle>{{ t('uiVintage.sidebar.title') }}</SheetTitle>
+				<SheetDescription>{{ t('uiVintage.sidebar.description') }}</SheetDescription>
+			</SheetHeader>
+			<div class="flex h-full w-full flex-col" @click="handleMobileSidebarClick">
+				<slot />
+			</div>
+		</SheetContent>
+	</Sheet>
 
-    <div v-else class="group/sidebar-wrapper group peer text-sidebar-foreground hidden md:block" data-slot="sidebar" :data-state="state" :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side">
-        <!-- This is what handles the sidebar gap on desktop  -->
-        <div :class="cn(
-            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-out-expo',
-            'group-data-[collapsible=offcanvas]:w-0',
-            'group-data-[side=right]:rotate-180',
-            variant === 'floating' || variant === 'inset'
-                ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-                : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
-        )
-            " />
-        <div :class="cn(
-            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-out-expo md:flex',
-            side === 'left'
-                ? 'left-0 group-data-[collapsible=offcanvas]:-left-(--sidebar-width)'
-                : 'right-0 group-data-[collapsible=offcanvas]:-right-(--sidebar-width)',
-            // Adjust the padding for floating and inset variants.
-            variant === 'floating' || variant === 'inset'
-                ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                : 'border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-            props.class
-        )
-            " v-bind="$attrs">
-            <div data-sidebar="sidebar" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded group-data-[variant=floating]:border group-data-[variant=floating]:shadow-elevated-sm">
-                <slot />
-            </div>
-        </div>
-    </div>
+	<div v-else class="group/sidebar-wrapper group peer text-sidebar-foreground hidden md:block" data-slot="sidebar" :data-state="state" :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side">
+		<!-- This is what handles the sidebar gap on desktop  -->
+		<div :class="cn(
+			'relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-out-expo',
+			'group-data-[collapsible=offcanvas]:w-0',
+			'group-data-[side=right]:rotate-180',
+			variant === 'floating' || variant === 'inset'
+				? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+				: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+		)
+			" />
+		<div :class="cn(
+			'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-out-expo md:flex',
+			side === 'left'
+				? 'left-0 group-data-[collapsible=offcanvas]:-left-(--sidebar-width)'
+				: 'right-0 group-data-[collapsible=offcanvas]:-right-(--sidebar-width)',
+			// Adjust the padding for floating and inset variants.
+			variant === 'floating' || variant === 'inset'
+				? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+				: 'border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+			props.class
+		)
+			" v-bind="$attrs">
+			<div data-sidebar="sidebar" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded group-data-[variant=floating]:border group-data-[variant=floating]:shadow-elevated-sm">
+				<slot />
+			</div>
+		</div>
+	</div>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-content" data-sidebar="content" :class="cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[collapsible=icon]:overflow-hidden',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="sidebar-content" data-sidebar="content" :class="cn(
+		'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[collapsible=icon]:overflow-hidden',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-footer" data-sidebar="footer" :class="cn(
-        'flex flex-col gap-2 p-2 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="sidebar-footer" data-sidebar="footer" :class="cn(
+		'flex flex-col gap-2 p-2 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-group" data-sidebar="group" :class="cn(
-        'relative flex w-full min-w-0 flex-col p-2 group-data-[compact=true]/sidebar-wrapper:p-2.5',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="sidebar-group" data-sidebar="group" :class="cn(
+		'relative flex w-full min-w-0 flex-col p-2 group-data-[compact=true]/sidebar-wrapper:p-2.5',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -9,13 +9,13 @@ const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(
 </script>
 
 <template>
-    <Primitive data-slot="sidebar-group-action" data-sidebar="group-action" :as="as" :as-child="asChild" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'after:absolute after:-inset-2 md:after:hidden',
-        'group-data-[collapsible=icon]:hidden',
-        props.class
-    )
-        ">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="sidebar-group-action" data-sidebar="group-action" :as="as" :as-child="asChild" :class="cn(
+		'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+		'after:absolute after:-inset-2 md:after:hidden',
+		'group-data-[collapsible=icon]:hidden',
+		props.class
+	)
+		">
+		<slot />
+	</Primitive>
 </template>

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

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
-        <slot />
-    </div>
+	<div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+		<slot />
+	</div>
 </template>

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

@@ -9,12 +9,12 @@ const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(
 </script>
 
 <template>
-    <Primitive data-slot="sidebar-group-label" data-sidebar="group-label" :as="as" :as-child="asChild" :class="cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-semibold outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:px-1.5 [&>svg]:size-4 [&>svg]:shrink-0',
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-        props.class
-    )
-        ">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="sidebar-group-label" data-sidebar="group-label" :as="as" :as-child="asChild" :class="cn(
+		'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-semibold outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:px-1.5 [&>svg]:size-4 [&>svg]:shrink-0',
+		'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+		props.class
+	)
+		">
+		<slot />
+	</Primitive>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-header" data-sidebar="header" :class="cn(
-        'flex flex-col gap-2 p-2 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="sidebar-header" data-sidebar="header" :class="cn(
+		'flex flex-col gap-2 p-2 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -5,16 +5,16 @@ import { Input } from '../input';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <Input data-slot="sidebar-input" data-sidebar="input" :class="cn(
-        'bg-background h-8 w-full shadow-none group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:text-xs',
-        props.class
-    )
-        ">
-        <slot />
-    </Input>
+	<Input data-slot="sidebar-input" data-sidebar="input" :class="cn(
+		'bg-background h-8 w-full shadow-none group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:text-xs',
+		props.class
+	)
+		">
+		<slot />
+	</Input>
 </template>

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

@@ -4,17 +4,17 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <main data-slot="sidebar-inset" :class="cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-elevated-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-        props.class
-    )
-        ">
-        <slot />
-    </main>
+	<main data-slot="sidebar-inset" :class="cn(
+		'bg-background relative flex w-full flex-1 flex-col',
+		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-elevated-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+		props.class
+	)
+		">
+		<slot />
+	</main>
 </template>

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

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
-        <slot />
-    </ul>
+	<ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+		<slot />
+	</ul>
 </template>

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

@@ -6,27 +6,27 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<PrimitiveProps & {
-    showOnHover?: boolean;
-    class?: HTMLAttributes['class'];
+	showOnHover?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    as: 'button'
+	as: 'button'
 });
 </script>
 
 <template>
-    <Primitive data-slot="sidebar-menu-action" data-sidebar="menu-action" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[compact=true]/sidebar-wrapper:top-1',
-        'group-data-[collapsible=icon]:hidden',
-        showOnHover &&
-        'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-        props.class
-    )
-        " :as="as" :as-child="asChild">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="sidebar-menu-action" data-sidebar="menu-action" :class="cn(
+		'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+		'after:absolute after:-inset-2 md:after:hidden',
+		'peer-data-[size=sm]/menu-button:top-1',
+		'peer-data-[size=default]/menu-button:top-1.5',
+		'peer-data-[size=lg]/menu-button:top-2.5',
+		'group-data-[compact=true]/sidebar-wrapper:top-1',
+		'group-data-[collapsible=icon]:hidden',
+		showOnHover &&
+		'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+		props.class
+	)
+		" :as="as" :as-child="asChild">
+		<slot />
+	</Primitive>
 </template>

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

@@ -4,22 +4,22 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" :class="cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded px-1 text-xs font-semibold tabular-nums select-none',
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[compact=true]/sidebar-wrapper:top-1',
-        'group-data-[collapsible=icon]:hidden',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" :class="cn(
+		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded px-1 text-xs font-semibold tabular-nums select-none',
+		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+		'peer-data-[size=sm]/menu-button:top-1',
+		'peer-data-[size=default]/menu-button:top-1.5',
+		'peer-data-[size=lg]/menu-button:top-2.5',
+		'group-data-[compact=true]/sidebar-wrapper:top-1',
+		'group-data-[collapsible=icon]:hidden',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -7,16 +7,16 @@ import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
 import { useSidebar } from './utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-    tooltip?: string | Component;
+	tooltip?: string | Component;
 }>(), {
-    as: 'button',
-    variant: 'default',
-    size: 'default'
+	as: 'button',
+	variant: 'default',
+	size: 'default'
 });
 
 const { isMobile, state } = useSidebar();
@@ -25,21 +25,21 @@ const delegatedProps = reactiveOmit(props, 'tooltip');
 </script>
 
 <template>
-    <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-    </SidebarMenuButtonChild>
+	<SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+		<slot />
+	</SidebarMenuButtonChild>
 
-    <Tooltip v-else>
-        <TooltipTrigger as-child>
-            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-                <slot />
-            </SidebarMenuButtonChild>
-        </TooltipTrigger>
-        <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
-            <template v-if="typeof tooltip === 'string'">
-                {{ tooltip }}
-            </template>
-            <component :is="tooltip" v-else />
-        </TooltipContent>
-    </Tooltip>
+	<Tooltip v-else>
+		<TooltipTrigger as-child>
+			<SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+				<slot />
+			</SidebarMenuButtonChild>
+		</TooltipTrigger>
+		<TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+			<template v-if="typeof tooltip === 'string'">
+				{{ tooltip }}
+			</template>
+			<component :is="tooltip" v-else />
+		</TooltipContent>
+	</Tooltip>
 </template>

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

@@ -7,22 +7,22 @@ import { cn } from '../../../lib/utils';
 import { sidebarMenuButtonVariants } from '.';
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-    variant?: SidebarMenuButtonVariants['variant'];
-    size?: SidebarMenuButtonVariants['size'];
-    isActive?: boolean;
-    class?: HTMLAttributes['class'];
+	variant?: SidebarMenuButtonVariants['variant'];
+	size?: SidebarMenuButtonVariants['size'];
+	isActive?: boolean;
+	class?: HTMLAttributes['class'];
 }
 
 // Props
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-    as: 'button',
-    variant: 'default',
-    size: 'default'
+	as: 'button',
+	variant: 'default',
+	size: 'default'
 });
 </script>
 
 <template>
-    <Primitive data-slot="sidebar-menu-button" data-sidebar="menu-button" :data-size="size" :data-active="isActive" :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)" :as="as" :as-child="asChild" v-bind="$attrs">
-        <slot />
-    </Primitive>
+	<Primitive data-slot="sidebar-menu-button" data-sidebar="menu-button" :data-size="size" :data-active="isActive" :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)" :as="as" :as-child="asChild" v-bind="$attrs">
+		<slot />
+	</Primitive>
 </template>

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

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
-        <slot />
-    </li>
+	<li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+		<slot />
+	</li>
 </template>

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

@@ -5,21 +5,21 @@ import { Skeleton } from '../skeleton';
 
 // Props
 const props = defineProps<{
-    showIcon?: boolean;
-    class?: HTMLAttributes['class'];
+	showIcon?: boolean;
+	class?: HTMLAttributes['class'];
 }>();
 
 const width = '72%';
 </script>
 
 <template>
-    <div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" :class="cn(
-        'flex h-8 items-center gap-2 rounded px-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5',
-        props.class
-    )
-        ">
-        <Skeleton v-if="showIcon" class="size-4 rounded group-data-[compact=true]/sidebar-wrapper:size-3.5" data-sidebar="menu-skeleton-icon" />
+	<div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" :class="cn(
+		'flex h-8 items-center gap-2 rounded px-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5',
+		props.class
+	)
+		">
+		<Skeleton v-if="showIcon" class="size-4 rounded group-data-[compact=true]/sidebar-wrapper:size-3.5" data-sidebar="menu-skeleton-icon" />
 
-        <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
-    </div>
+		<Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+	</div>
 </template>