@brumaombra/ui-vintage 0.7.8 → 0.7.10

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

@@ -1,26 +1,30 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import type { SelectValueProps } from "reka-ui"
-import { SelectValue } from "reka-ui"
-import { cn } from "../../../lib/utils"
-
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { SelectValueProps } from 'reka-ui';
+import { SelectValue } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = defineProps<SelectValueProps & {
-    class?: HTMLAttributes["class"]
-    icon?: HugeiconsIconDefinition | null
-    label?: string | number | null
-    description?: string | number | null
-    iconClass?: HTMLAttributes["class"]
-    textClass?: HTMLAttributes["class"]
-    descriptionClass?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+    icon?: HugeiconsIconDefinition | null;
+    label?: string | number | null;
+    description?: string | number | null;
+    iconClass?: HTMLAttributes['class'];
+    textClass?: HTMLAttributes['class'];
+    descriptionClass?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-    <SelectValue data-slot="select-value-content" :placeholder="props.placeholder" :class="cn('flex min-w-0 flex-1 gap-1.5 text-left sm:gap-2', props.description ? 'items-start' : 'items-center', props.class)">
+    <SelectValue data-slot="select-value-content" :placeholder="props.placeholder" :class="cn(
+        'flex min-w-0 flex-1 gap-1.5 text-left sm:gap-2',
+        props.description ? 'items-start' : 'items-center',
+        props.class
+    )
+        ">
         <template v-if="props.label != null || props.description != null">
             <!-- Icon -->
             <div v-if="props.icon" data-slot="select-value-content-icon" :class="cn('shrink-0', props.iconClass)">
@@ -30,12 +34,20 @@ const props = defineProps<SelectValueProps & {
             <!-- Text and description -->
             <div class="flex min-w-0 flex-1 flex-col gap-0.5">
                 <!-- Text -->
-                <span data-slot="select-value-content-text" :class="cn('min-w-0 whitespace-normal break-words text-xs leading-5 sm:truncate sm:text-sm max-sm:[display:-webkit-box] max-sm:[overflow:hidden] max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:2]', props.textClass)">
+                <span data-slot="select-value-content-text" :class="cn(
+                    'min-w-0 whitespace-normal wrap-break-word text-xs leading-5 sm:truncate sm:text-sm max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:2]',
+                    props.textClass
+                )
+                    ">
                     {{ props.label }}
                 </span>
 
                 <!-- Description -->
-                <span v-if="props.description" data-slot="select-value-content-description" :class="cn('min-w-0 whitespace-normal break-words text-[11px] leading-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:[overflow:hidden] max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]', props.descriptionClass)">
+                <span v-if="props.description" data-slot="select-value-content-description" :class="cn(
+                    'min-w-0 whitespace-normal wrap-break-word text-[11px] leading-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]',
+                    props.descriptionClass
+                )
+                    ">
                     {{ props.description }}
                 </span>
             </div>

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

@@ -1,13 +1,13 @@
-export { default as Select } from "./Select.vue"
-export { default as SelectContent } from "./SelectContent.vue"
-export { default as SelectGroup } from "./SelectGroup.vue"
-export { default as SelectItem } from "./SelectItem.vue"
-export { default as SelectItemContent } from "./SelectItemContent.vue"
-export { default as SelectItemText } from "./SelectItemText.vue"
-export { default as SelectLabel } from "./SelectLabel.vue"
-export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
-export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
-export { default as SelectSeparator } from "./SelectSeparator.vue"
-export { default as SelectTrigger } from "./SelectTrigger.vue"
-export { default as SelectValue } from "./SelectValue.vue"
-export { default as SelectValueContent } from "./SelectValueContent.vue"
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemContent } from './SelectItemContent.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';
+export { default as SelectValueContent } from './SelectValueContent.vue';

package/src/components/ui/separator/Separator.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
->(), {
-  orientation: "horizontal",
-  decorative: true,
-})
+// Props
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
+    orientation: 'horizontal',
+    decorative: true
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <Separator data-slot="separator" v-bind="delegatedProps" :class="cn(
-    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-    props.class,
-  )
-    " />
-</template>
+    <Separator data-slot="separator" v-bind="delegatedProps" :class="cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class
+    )
+        " />
+</template>

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

@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue"
+export { default as Separator } from './Separator.vue';

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+// Props
+const props = defineProps<DialogRootProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </DialogRoot>
-</template>
+    <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DialogRoot>
+</template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from 'reka-ui';
+import { DialogClose } from 'reka-ui';
 
-const props = defineProps<DialogCloseProps>()
+// Props
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-  <DialogClose data-slot="sheet-close" v-bind="props">
-    <slot />
-  </DialogClose>
-</template>
+    <DialogClose data-slot="sheet-close" v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

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

@@ -1,49 +1,48 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
-import SheetOverlay from "./SheetOverlay.vue"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import SheetOverlay from './SheetOverlay.vue';
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: "top" | "right" | "bottom" | "left"
+    class?: HTMLAttributes['class'];
+    side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
+// Props
 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: "right",
-})
-const emits = defineEmits<DialogContentEmits>()
+    side: 'right'
+});
+// Emits
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "side")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class', 'side');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <SheetOverlay />
-    <DialogContent data-slot="sheet-content" :class="cn(
-      'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-      side === 'right'
-      && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-      side === 'left'
-      && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-      side === 'top'
-      && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-      side === 'bottom'
-      && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-      props.class)" v-bind="{ ...$attrs, ...forwarded }">
-      <slot />
-    </DialogContent>
-  </DialogPortal>
-</template>
+    <DialogPortal>
+        <SheetOverlay />
+        <DialogContent data-slot="sheet-content" :class="cn(
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+            side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+            side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+            side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+            side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+            props.class
+        )
+            " v-bind="{ ...$attrs, ...forwarded }">
+            <slot />
+        </DialogContent>
+    </DialogPortal>
+</template>

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

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <DialogDescription data-slot="sheet-description" :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
-    <slot />
-  </DialogDescription>
-</template>
+    <DialogDescription data-slot="sheet-description" :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogDescription>
+</template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogOverlayProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogOverlay } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <DialogOverlay data-slot="sheet-overlay" :class="cn('fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', props.class)" v-bind="delegatedProps">
-    <slot />
-  </DialogOverlay>
-</template>
+    <DialogOverlay data-slot="sheet-overlay" :class="cn(
+        'fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+    )
+        " v-bind="delegatedProps">
+        <slot />
+    </DialogOverlay>
+</template>

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

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
-    <slot />
-  </DialogTitle>
-</template>
+    <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogTitle>
+</template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from 'reka-ui';
+import { DialogTrigger } from 'reka-ui';
 
-const props = defineProps<DialogTriggerProps>()
+// Props
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
-    <slot />
-  </DialogTrigger>
-</template>
+    <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>

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

@@ -1,8 +1,8 @@
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';

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

@@ -1,77 +1,84 @@
 <script setup lang="ts">
-import type { SidebarProps } from "."
-import { cn } from "../../../lib/utils"
-import { Sheet, SheetContent } from '../sheet'
-import SheetDescription from '../sheet/SheetDescription.vue'
-import SheetHeader from '../sheet/SheetHeader.vue'
-import SheetTitle from '../sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
+import type { SidebarProps } from '.';
+import { cn } from '../../../lib/utils';
+import { Sheet, SheetContent } from '../sheet';
+import SheetDescription from '../sheet/SheetDescription.vue';
+import SheetHeader from '../sheet/SheetHeader.vue';
+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 { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+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>
-
-  <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 [&>button]:hidden" :style="{
-      '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-    }">
-      <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-      </SheetHeader>
-      <div class="flex h-full w-full flex-col" @click="handleMobileSidebarClick">
+    <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>
-    </SheetContent>
-  </Sheet>
+    </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-200 ease-linear',
-      '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-200 ease-linear md:flex',
-      side === 'left'
-        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-      // 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-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
-        <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 [&>button]:hidden" :style="{
+            '--sidebar-width': SIDEBAR_WIDTH_MOBILE
+        }">
+            <SheetHeader class="sr-only">
+                <SheetTitle>Sidebar</SheetTitle>
+                <SheetDescription>Displays the mobile sidebar.</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-200 ease-linear',
+            '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-200 ease-linear 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-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
+                <slot />
+            </div>
+        </div>
     </div>
-  </div>
-</template>
+</template>