@brumaombra/ui-vintage 0.7.8 → 0.7.9

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

@@ -1,44 +1,45 @@
 <script setup lang="ts">
-import type { Component } from "vue"
-import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
-import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
-import { useSidebar } from "./utils"
+import type { Component } from 'vue';
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+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()
+const { isMobile, state } = useSidebar();
 
-const delegatedProps = reactiveOmit(props, "tooltip")
+const delegatedProps = reactiveOmit(props, 'tooltip');
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-    <slot />
-  </SidebarMenuButtonChild>
-
-  <Tooltip v-else>
-    <TooltipTrigger as-child>
-      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+    <SidebarMenuButtonChild v-if="!tooltip" 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>
+    </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>
+</template>

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

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SidebarMenuButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { sidebarMenuButtonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { SidebarMenuButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+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>
-</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>
+</template>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+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>
-</template>
+    <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

@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { Skeleton } from '../skeleton'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Skeleton } from '../skeleton';
 
+// Props
 const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes["class"]
-}>()
+    showIcon?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
 
-const width = "72%"
+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-md 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-md 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-md 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-md 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>
-</template>
+        <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+    </div>
+</template>

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

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
-    'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-    'group-data-[collapsible=icon]:hidden',
-    props.class,
-  )">
-    <slot />
-  </ul>
-</template>
+    <ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+    )
+        ">
+        <slot />
+    </ul>
+</template>

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

@@ -1,28 +1,31 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: "sm" | "md"
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
 }>(), {
-  as: "a",
-  size: "md",
-})
+    as: 'a',
+    size: 'md'
+});
 </script>
 
 <template>
-  <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
-    'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
-    'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-    size === 'sm' && 'text-xs',
-    size === 'md' && 'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
-    'group-data-[collapsible=icon]:hidden',
-    props.class,
-  )">
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' &&
+        'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+    )
+        ">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
-    <slot />
-  </li>
-</template>
+    <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+        <slot />
+    </li>
+</template>

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

@@ -1,79 +1,89 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue"
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
-import { TooltipProvider } from "reka-ui"
-import { computed, ref } from "vue"
-import { cn } from "../../../lib/utils"
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
+import type { HTMLAttributes, Ref } from 'vue';
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils';
 
+// Props
 const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  compact?: boolean
-  class?: HTMLAttributes["class"]
+    defaultOpen?: boolean;
+    open?: boolean;
+    compact?: boolean;
+    class?: HTMLAttributes['class'];
 }>(), {
-  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
-  open: undefined,
-  compact: false,
-})
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+    compact: false
+});
 
+// Emits
 const emits = defineEmits<{
-  "update:open": [open: boolean]
-}>()
+    'update:open': [open: boolean];
+}>();
 
-const isMobile = useMediaQuery("(max-width: 768px)")
-const openMobile = ref(false)
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
 
-const open = useVModel(props, "open", emits, {
-  defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+const open = useVModel(props, 'open', emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false
+}) as Ref<boolean>;
 
 function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+    open.value = value; // emits('update:open', value)
 
-  // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 
 function setOpenMobile(value: boolean) {
-  openMobile.value = value
+    openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+    return isMobile.value
+        ? setOpenMobile(!openMobile.value)
+        : setOpen(!open.value);
 }
 
-useEventListener("keydown", (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
-  }
-})
+useEventListener('keydown', (event: KeyboardEvent) => {
+    if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+    ) {
+        event.preventDefault();
+        toggleSidebar();
+    }
+});
 
-// We add a state so that we can do data-state="expanded" or "collapsed".
-// This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? "expanded" : "collapsed")
+// We add a state so that we can do data-state="expanded" or "collapsed"
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
-  state,
-  open,
-  setOpen,
-  isMobile,
-  openMobile,
-  setOpenMobile,
-  toggleSidebar,
-})
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar
+});
 </script>
 
 <template>
-  <TooltipProvider :delay-duration="0">
-    <div data-slot="sidebar-wrapper" :style="{
-      '--sidebar-width': SIDEBAR_WIDTH,
-      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-    }" :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>
-</template>
+    <TooltipProvider :delay-duration="0">
+        <div data-slot="sidebar-wrapper" :style="{
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON
+        }" :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>
+</template>

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

@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { useSidebar } from './utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" :tabindex="-1" title="Toggle Sidebar" :class="cn(
-    'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-    'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-    '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-    'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-    props.class,
-  )" @click="toggleSidebar">
-    <slot />
-  </button>
-</template>
+    <button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" :tabindex="-1" title="Toggle Sidebar" :class="cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class
+    )
+        " @click="toggleSidebar">
+        <slot />
+    </button>
+</template>

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

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { Separator } from '../separator'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Separator } from '../separator';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
-    <slot />
-  </Separator>
-</template>
+    <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+        <slot />
+    </Separator>
+</template>

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

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { PanelLeftIcon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
-import { Button } from '../button'
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from 'vue';
+import { PanelLeftIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { useSidebar } from './utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
-    <HugeiconsIcon :icon="PanelLeftIcon" />
-    <span class="sr-only">Toggle Sidebar</span>
-  </Button>
-</template>
+    <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
+        <HugeiconsIcon :icon="PanelLeftIcon" />
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
+</template>