@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/ui/sheet.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent, useId, computed, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { cn } from "../../lib/utils.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "fixed inset-0 z-50",
+  "data-slot": "sheet"
+};
+const _hoisted_2 = ["aria-labelledby", "data-side"];
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-col gap-1.5 p-4",
+  "data-slot": "sheet-header"
+};
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
+  key: 1,
+  class: "text-sm text-muted-foreground",
+  "data-slot": "sheet-description"
+};
+const _hoisted_6 = { class: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4" };
+const _hoisted_7 = {
+  key: 1,
+  class: "mt-auto flex flex-col gap-2 p-4",
+  "data-slot": "sheet-footer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sheet",
+  props: {
+    open: { type: Boolean, default: false },
+    side: { default: "right" },
+    title: {},
+    description: {},
+    class: {}
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const titleId = useId();
+    const sideClass = {
+      right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+      left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      top: "inset-x-0 top-0 h-auto border-b",
+      bottom: "inset-x-0 bottom-0 h-auto border-t"
+    };
+    const panelClass = computed(
+      () => cn(
+        "fixed z-50 flex flex-col gap-4 bg-background shadow-lg",
+        sideClass[props.side],
+        props.class
+      )
+    );
+    function close() {
+      emit("update:open", false);
+    }
+    function onKeydown(event) {
+      if (event.key === "Escape") close();
+    }
+    watch(
+      () => props.open,
+      (open) => {
+        if (typeof document === "undefined") return;
+        if (open) document.addEventListener("keydown", onKeydown);
+        else document.removeEventListener("keydown", onKeydown);
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      if (typeof document !== "undefined")
+        document.removeEventListener("keydown", onKeydown);
+    });
+    return (_ctx, _cache) => {
+      return __props.open ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "absolute inset-0 bg-black/50",
+          "data-slot": "sheet-overlay",
+          onClick: close
+        }),
+        createElementVNode("div", {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": __props.title ? unref(titleId) : void 0,
+          class: normalizeClass(panelClass.value),
+          "data-side": __props.side,
+          "data-slot": "sheet-content"
+        }, [
+          __props.title || __props.description ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            __props.title ? (openBlock(), createElementBlock("h2", {
+              key: 0,
+              id: unref(titleId),
+              class: "font-semibold text-foreground",
+              "data-slot": "sheet-title"
+            }, toDisplayString(__props.title), 9, _hoisted_4)) : createCommentVNode("", true),
+            __props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "footer")
+          ])) : createCommentVNode("", true)
+        ], 10, _hoisted_2)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sheet2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./sheet.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/index.d.ts

@@ -0,0 +1,11 @@
+export type { SidebarProps } from "./sidebar.vue.js";
+export { default as Sidebar } from "./sidebar.vue.js";
+export type { SidebarContext, SidebarState, } from "./sidebar-context.js";
+export { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SidebarContextKey, useSidebar, } from "./sidebar-context.js";
+export type { SidebarMenuButtonProps } from "./sidebar-menu-button.vue.js";
+export { default as SidebarMenuButton } from "./sidebar-menu-button.vue.js";
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, } from "./sidebar-parts.js";
+export type { SidebarProviderProps } from "./sidebar-provider.vue.js";
+export { default as SidebarProvider } from "./sidebar-provider.vue.js";
+export { default as SidebarTrigger } from "./sidebar-trigger.vue.js";
+export { useIsMobile } from "./use-is-mobile.js";

package/dist/components/ui/sidebar/sidebar-context.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The sidebar context + `useSidebar` composable — the non-component sibling of
+ * `sidebar-provider.vue`, keeping the provider SFC component-only. The Vue analog
+ * of `@chelone/react`'s `ui/sidebar.tsx` `SidebarContext` / `useSidebar`.
+ *
+ * DEPENDENCY-FREE: React's shadcn sidebar leans on reka/radix + `use-mobile`;
+ * this Vue slice models the same open/collapsed + mobile-drawer state with plain
+ * refs provided under a typed `InjectionKey` (no reka-ui). The state shape
+ * (`state`/`open`/`setOpen`/`openMobile`/`setOpenMobile`/`isMobile`/
+ * `toggleSidebar`) mirrors the members the ported layout components consume.
+ */
+import { type InjectionKey, type Ref } from "vue";
+/** The sidebar's expanded/collapsed visual state (drives `data-state`). */
+export type SidebarState = "expanded" | "collapsed";
+/** The reactive sidebar contract `<SidebarProvider>` provides. */
+export interface SidebarContext {
+    /** `"expanded"` when open, `"collapsed"` otherwise. */
+    state: Ref<SidebarState>;
+    /** Whether the (desktop) sidebar is open. */
+    open: Ref<boolean>;
+    /** Set the desktop open state. */
+    setOpen: (open: boolean) => void;
+    /** Whether the mobile drawer is open. */
+    openMobile: Ref<boolean>;
+    /** Set the mobile drawer open state. */
+    setOpenMobile: (open: boolean) => void;
+    /** Whether the viewport is in the mobile breakpoint (drawer mode). */
+    isMobile: Ref<boolean>;
+    /** Toggle the sidebar (mobile drawer on mobile, desktop collapse otherwise). */
+    toggleSidebar: () => void;
+}
+/** Default sidebar width when expanded (CSS var `--sidebar-width`). */
+export declare const SIDEBAR_WIDTH = "16rem";
+/** Default sidebar width when collapsed to icons (`--sidebar-width-icon`). */
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+/** The provide/inject key for the sidebar context. */
+export declare const SidebarContextKey: InjectionKey<SidebarContext>;
+/**
+ * Read the ambient sidebar context. Throws when used outside a
+ * `<SidebarProvider>` — parity with the React twin's `useSidebar`.
+ */
+export declare function useSidebar(): SidebarContext;

package/dist/components/ui/sidebar/sidebar-context.js

@@ -0,0 +1,17 @@
+import { inject } from "vue";
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SidebarContextKey = /* @__PURE__ */ Symbol("chelone-sidebar");
+function useSidebar() {
+  const ctx = inject(SidebarContextKey, null);
+  if (!ctx) {
+    throw new Error("useSidebar must be used within a <SidebarProvider>.");
+  }
+  return ctx;
+}
+export {
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SidebarContextKey,
+  useSidebar
+};

package/dist/components/ui/sidebar/sidebar-menu-button.vue.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from "vue";
+/** Props for {@link SidebarMenuButton}. */
+export interface SidebarMenuButtonProps {
+    /**
+     * The element/component to render as. Defaults to `"button"`; pass a link
+     * component (e.g. vue-router's `RouterLink`) to render a navigable entry —
+     * the Vue idiom replacing the React twin's `asChild` + `<Slot>`. Extra attrs
+     * (`to`, `href`, …) fall through to the rendered element.
+     */
+    as?: string | Component;
+    /** Highlights the entry as the active route. */
+    isActive?: boolean;
+    /** Size preset. Defaults to `default`. */
+    size?: "default" | "sm" | "lg";
+    /** Extra class appended to the button. */
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarMenuButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarMenuButtonProps> & Readonly<{}>, {
+    size: "default" | "sm" | "lg";
+    as: string | Component;
+    isActive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/sidebar/sidebar-menu-button.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
+import { cn } from "../../../lib/utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sidebar-menu-button",
+  props: {
+    as: { default: "button" },
+    isActive: { type: Boolean, default: false },
+    size: { default: "default" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(
+      () => cn(
+        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+        props.isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+        props.size === "sm" && "h-7 text-xs",
+        props.size === "lg" && "h-12 text-sm",
+        props.class
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+        class: normalizeClass(classes.value),
+        "data-active": __props.isActive || void 0,
+        "data-slot": "sidebar-menu-button"
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "data-active"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar-menu-button2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./sidebar-menu-button.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar-parts.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The structural sidebar wrappers — thin styled containers with no behavior, the
+ * Vue analog of shadcn's `SidebarHeader` / `SidebarContent` / `SidebarFooter` /
+ * `SidebarGroup*` / `SidebarMenu` / `SidebarMenuItem`. Each is a functional
+ * component (a `div`/`ul`/`li` with the shadcn class recipe + a `data-slot`),
+ * so the whole family lives in one dependency-free module instead of eight
+ * near-empty SFCs. Interactive parts (`SidebarProvider`, `Sidebar`,
+ * `SidebarTrigger`, `SidebarMenuButton`) stay as SFCs.
+ */
+import { type FunctionalComponent } from "vue";
+interface StructuralProps {
+    class?: string;
+}
+export declare const SidebarHeader: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarContent: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarFooter: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarGroup: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarGroupContent: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarGroupLabel: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarMenu: FunctionalComponent<StructuralProps, {}, any, {}>;
+export declare const SidebarMenuItem: FunctionalComponent<StructuralProps, {}, any, {}>;
+export {};

package/dist/components/ui/sidebar/sidebar-parts.js

@@ -0,0 +1,62 @@
+import { h } from "vue";
+import { cn } from "../../../lib/utils.js";
+function structural(slot, tag, base) {
+  const component = (props, { slots }) => h(
+    tag,
+    { "data-slot": slot, class: cn(base, props.class) },
+    slots.default?.()
+  );
+  component.props = ["class"];
+  component.displayName = slot;
+  return component;
+}
+const SidebarHeader = structural(
+  "sidebar-header",
+  "div",
+  "flex flex-col gap-2 p-2"
+);
+const SidebarContent = structural(
+  "sidebar-content",
+  "div",
+  "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2"
+);
+const SidebarFooter = structural(
+  "sidebar-footer",
+  "div",
+  "flex flex-col gap-2 p-2"
+);
+const SidebarGroup = structural(
+  "sidebar-group",
+  "div",
+  "relative flex w-full min-w-0 flex-col p-2"
+);
+const SidebarGroupContent = structural(
+  "sidebar-group-content",
+  "div",
+  "w-full text-sm"
+);
+const SidebarGroupLabel = structural(
+  "sidebar-group-label",
+  "div",
+  "flex h-8 shrink-0 items-center px-2 text-xs font-medium text-sidebar-foreground/70"
+);
+const SidebarMenu = structural(
+  "sidebar-menu",
+  "ul",
+  "flex w-full min-w-0 flex-col gap-1"
+);
+const SidebarMenuItem = structural(
+  "sidebar-menu-item",
+  "li",
+  "group/menu-item relative"
+);
+export {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem
+};

package/dist/components/ui/sidebar/sidebar-provider.vue.d.ts

@@ -0,0 +1,18 @@
+/** Props for {@link SidebarProvider}. */
+export interface SidebarProviderProps {
+    /** Initial open state of the desktop sidebar. Defaults to `true`. */
+    defaultOpen?: boolean;
+    /** Extra class appended to the wrapper element. */
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarProviderProps> & Readonly<{}>, {
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/sidebar/sidebar-provider.vue.js

@@ -0,0 +1,59 @@
+import { defineComponent, ref, computed, provide, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { SidebarContextKey, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH } from "./sidebar-context.js";
+import { useIsMobile } from "./use-is-mobile.js";
+const _hoisted_1 = ["data-state"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sidebar-provider",
+  props: {
+    defaultOpen: { type: Boolean, default: true },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const open = ref(props.defaultOpen);
+    const openMobile = ref(false);
+    const isMobile = useIsMobile();
+    const state = computed(
+      () => open.value ? "expanded" : "collapsed"
+    );
+    function setOpen(value) {
+      open.value = value;
+    }
+    function setOpenMobile(value) {
+      openMobile.value = value;
+    }
+    function toggleSidebar() {
+      if (isMobile.value) {
+        openMobile.value = !openMobile.value;
+      } else {
+        open.value = !open.value;
+      }
+    }
+    provide(SidebarContextKey, {
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "sidebar-wrapper",
+        "data-state": state.value,
+        style: normalizeStyle({
+          "--sidebar-width": unref(SIDEBAR_WIDTH),
+          "--sidebar-width-icon": unref(SIDEBAR_WIDTH_ICON)
+        }),
+        class: normalizeClass(unref(cn)("group/sidebar-wrapper flex min-h-svh w-full", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 14, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar-provider2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./sidebar-provider.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar-trigger.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ui/sidebar/sidebar-trigger.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode } from "vue";
+import _sfc_main$1 from "../button.vue.js";
+import { useSidebar } from "./sidebar-context.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sidebar-trigger",
+  setup(__props) {
+    const { toggleSidebar } = useSidebar();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        variant: "ghost",
+        size: "icon",
+        class: "size-7",
+        "data-slot": "sidebar-trigger",
+        "aria-label": "Toggle Sidebar",
+        onClick: unref(toggleSidebar)
+      }, {
+        default: withCtx(() => [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "size-4",
+            "aria-hidden": "true"
+          }, [
+            createElementVNode("rect", {
+              width: "18",
+              height: "18",
+              x: "3",
+              y: "3",
+              rx: "2"
+            }),
+            createElementVNode("path", { d: "M9 3v18" })
+          ], -1),
+          createElementVNode("span", { class: "sr-only" }, "Toggle Sidebar", -1)
+        ])]),
+        _: 1
+      }, 8, ["onClick"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar-trigger2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./sidebar-trigger.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,26 @@
+/** Props for {@link Sidebar}. */
+export interface SidebarProps {
+    /** Visual variant. `floating` insets + rounds the panel. Defaults to `sidebar`. */
+    variant?: "sidebar" | "floating" | "inset";
+    /** Collapse behavior when closed. Defaults to `icon`. */
+    collapsible?: "offcanvas" | "icon" | "none";
+    /** Which edge the sidebar docks to. Defaults to `left`. */
+    side?: "left" | "right";
+    /** Extra class appended to the inner panel. */
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{}>, {
+    variant: "sidebar" | "floating" | "inset";
+    side: "left" | "right";
+    collapsible: "offcanvas" | "icon" | "none";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/sidebar/sidebar.vue.js

@@ -0,0 +1,91 @@
+import { defineComponent, watch, onBeforeUnmount, unref, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, renderSlot, createCommentVNode } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { useSidebar } from "./sidebar-context.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "fixed inset-0 z-50 text-sidebar-foreground",
+  "data-slot": "sidebar-drawer-root"
+};
+const _hoisted_2 = ["data-side"];
+const _hoisted_3 = ["data-state", "data-collapsible", "data-variant", "data-side"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sidebar",
+  props: {
+    variant: { default: "sidebar" },
+    collapsible: { default: "icon" },
+    side: { default: "left" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { state, isMobile, openMobile, setOpenMobile } = useSidebar();
+    function onKeydown(event) {
+      if (event.key === "Escape") setOpenMobile(false);
+    }
+    watch(
+      () => isMobile.value && openMobile.value,
+      (open) => {
+        if (typeof document === "undefined") return;
+        if (open) document.addEventListener("keydown", onKeydown);
+        else document.removeEventListener("keydown", onKeydown);
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      if (typeof document !== "undefined")
+        document.removeEventListener("keydown", onKeydown);
+    });
+    return (_ctx, _cache) => {
+      return unref(isMobile) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        unref(openMobile) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: "absolute inset-0 bg-black/50",
+            "data-slot": "sidebar-backdrop",
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(setOpenMobile)(false))
+          }),
+          createElementVNode("div", {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Sidebar",
+            class: normalizeClass(
+              unref(cn)(
+                "absolute inset-y-0 flex h-svh w-[--sidebar-width] flex-col bg-sidebar shadow-lg",
+                __props.side === "right" ? "right-0" : "left-0",
+                props.class
+              )
+            ),
+            "data-side": __props.side,
+            "data-slot": "sidebar-drawer"
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 10, _hoisted_2)
+        ])) : createCommentVNode("", true)
+      ], 64)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: "group peer hidden text-sidebar-foreground md:block",
+        "data-state": unref(state),
+        "data-collapsible": unref(state) === "collapsed" ? __props.collapsible : "",
+        "data-variant": __props.variant,
+        "data-side": __props.side,
+        "data-slot": "sidebar"
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(
+            unref(cn)(
+              "flex h-svh flex-col bg-sidebar transition-[width] duration-200 ease-linear",
+              unref(state) === "collapsed" && __props.collapsible === "icon" ? "w-[--sidebar-width-icon]" : "w-[--sidebar-width]",
+              __props.variant === "floating" && "p-2",
+              props.class
+            )
+          ),
+          "data-slot": "sidebar-inner"
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ], 8, _hoisted_3));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/sidebar2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./sidebar.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/sidebar/use-is-mobile.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from "vue";
+/**
+ * `true` when the viewport is narrower than {@link MOBILE_BREAKPOINT}. The Vue
+ * twin of `@chelone/react`'s `useIsMobile`. Starts `false` and corrects on mount,
+ * so server and first client render agree; stays `false` without `window` or
+ * `window.matchMedia` (SSR, jsdom).
+ */
+export declare function useIsMobile(): Readonly<Ref<boolean>>;

package/dist/components/ui/sidebar/use-is-mobile.js

@@ -0,0 +1,20 @@
+import { ref, onMounted, onScopeDispose, readonly } from "vue";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const isMobile = ref(false);
+  onMounted(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+      return;
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      isMobile.value = window.innerWidth < MOBILE_BREAKPOINT;
+    };
+    mql.addEventListener("change", onChange);
+    onScopeDispose(() => mql.removeEventListener("change", onChange));
+    onChange();
+  });
+  return readonly(isMobile);
+}
+export {
+  useIsMobile
+};

package/dist/components/ui/skeleton.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    class?: string;
+};
+declare const _default: 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>;
+export default _default;