@shwfed/nuxt 0.1.49 → 0.1.51

package/dist/runtime/components/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue";
+import { useSidebar } from "./utils";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  variant: { type: null, required: false, default: "default" },
+  size: { type: null, required: false, default: "default" },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "button" },
+  tooltip: { type: null, required: false }
+});
+const { isMobile, state } = useSidebar();
+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 }">
+        <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/dist/runtime/components/ui/sidebar/SidebarMenuButton.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Component } from 'vue';
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue.js';
+type __VLS_Props = SidebarMenuButtonProps & {
+    tooltip?: string | Component;
+};
+declare var __VLS_8: {}, __VLS_29: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | Component;
+    size: "default" | "sm" | "lg" | null;
+    variant: "default" | "outline" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuButtonChild.d.vue.ts

@@ -0,0 +1,26 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { SidebarMenuButtonVariants } from '.';
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants['variant'];
+    size?: SidebarMenuButtonVariants['size'];
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SidebarMenuButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarMenuButtonProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    size: "default" | "sm" | "lg" | null;
+    variant: "default" | "outline" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { cn } from "../../../utils/cn";
+import { sidebarMenuButtonVariants } from ".";
+const props = defineProps({
+  variant: { type: null, required: false, default: "default" },
+  size: { type: null, required: false, default: "default" },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "button" }
+});
+</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>

package/dist/runtime/components/ui/sidebar/SidebarMenuButtonChild.vue.d.ts

@@ -0,0 +1,26 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { SidebarMenuButtonVariants } from '.';
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants['variant'];
+    size?: SidebarMenuButtonVariants['size'];
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SidebarMenuButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarMenuButtonProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    size: "default" | "sm" | "lg" | null;
+    variant: "default" | "outline" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuItem.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>

package/dist/runtime/components/ui/sidebar/SidebarMenuItem.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSkeleton.d.vue.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    showIcon?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from "vue";
+import { cn } from "../../../utils/cn";
+import { Skeleton } from "../skeleton";
+const props = defineProps({
+  showIcon: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</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', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      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>

package/dist/runtime/components/ui/sidebar/SidebarMenuSkeleton.vue.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    showIcon?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/sidebar/SidebarMenuSub.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="cn(
+  'border-zinc-200 mx-3.5 mr-0 flex min-w-0 translate-x-px flex-col gap-1 border-l pl-2 py-0.5',
+  'group-data-[collapsible=icon]:hidden',
+  props.class
+)"
+  >
+    <slot />
+  </ul>
+</template>

package/dist/runtime/components/ui/sidebar/SidebarMenuSub.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSubButton.d.vue.ts

@@ -0,0 +1,23 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = PrimitiveProps & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    size: "sm" | "md";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "a" },
+  size: { type: String, required: false, default: "md" },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+</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-zinc-700 cursor-pointer hover:bg-zinc-100 hover:text-zinc-900 active:bg-zinc-100 active:text-zinc-900 group-hover/menu-sub-item:bg-zinc-100 group-hover/menu-sub-item:text-zinc-900 group-focus-within/menu-sub-item:bg-zinc-100 group-focus-within/menu-sub-item:text-zinc-900 [&>svg]:text-zinc-900 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'data-[active=true]:bg-[color-mix(in_srgb,var(--primary)_10%,white)] data-[active=true]:text-(--primary)',
+  size === 'sm' && 'text-xs',
+  size === 'md' && 'text-sm',
+  'group-data-[collapsible=icon]:hidden',
+  props.class
+)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/ui/sidebar/SidebarMenuSubButton.vue.d.ts

@@ -0,0 +1,23 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = PrimitiveProps & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+    size: "sm" | "md";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSubItem.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</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>

package/dist/runtime/components/ui/sidebar/SidebarMenuSubItem.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarProvider.d.vue.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { TooltipProvider } from "reka-ui";
+import { computed, ref } from "vue";
+import { cn } from "../../../utils/cn";
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils";
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false, default: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`) },
+  open: { type: Boolean, required: false, default: void 0 },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["update:open"]);
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
+const open = useVModel(props, "open", emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: props.open === void 0
+});
+function setOpen(value) {
+  open.value = value;
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+function setOpenMobile(value) {
+  openMobile.value = value;
+}
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+useEventListener("keydown", (event) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+});
+const state = computed(() => open.value ? "expanded" : "collapsed");
+provideSidebarContext({
+  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
+}"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-zinc-50 flex min-h-svh', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>

package/dist/runtime/components/ui/sidebar/SidebarProvider.vue.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarRail.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+import { useSidebar } from "./utils";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+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-zinc-200 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-zinc-100 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/dist/runtime/components/ui/sidebar/SidebarRail.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};