@plexui/vue 0.0.0-stage → 0.1.0

package/dist/es/components/ShimmerText/ShimmerText.js

@@ -0,0 +1,41 @@
+import { defineComponent, h, ref, watch } from "vue";
+import s from "@plexui/styles/components/ShimmerText/ShimmerText.module.css";
+/** If text will always shimmer, use the simpler interface. Like React, only `class` is applied. */
+export const ShimmerText = defineComponent({
+    name: "ShimmerText",
+    inheritAttrs: false,
+    props: {
+        as: { type: String, default: "div" },
+    },
+    setup(props, { slots, attrs }) {
+        return () => h(props.as, { class: [s.Shimmer, attrs.class] }, slots.default?.());
+    },
+});
+/** If text may end shimmering after playing for a time, or resume, use shimmerable text. */
+export const ShimmerableText = defineComponent({
+    name: "ShimmerableText",
+    inheritAttrs: false,
+    props: {
+        as: { type: String, default: "div" },
+        shimmer: { type: Boolean, default: false },
+    },
+    setup(props, { slots, attrs }) {
+        const paused = ref(!props.shimmer);
+        // Pauses the animation at the start of (what would be) the next iteration.
+        const handleAnimationIteration = () => {
+            paused.value = true;
+        };
+        watch(() => props.shimmer, (shimmer) => {
+            // Ensure pause is cleared if shimmer is re-enabled
+            if (shimmer)
+                paused.value = false;
+        });
+        return () => h(props.as, {
+            ...attrs,
+            "class": [s.Shimmer, attrs.class],
+            "onAnimationiteration": props.shimmer ? undefined : handleAnimationIteration,
+            "data-idle": paused.value ? "" : undefined,
+        }, slots.default?.());
+    },
+});
+//# sourceMappingURL=ShimmerText.js.map

package/dist/es/components/ShimmerText/ShimmerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerText.js","sourceRoot":"","sources":["../../../../src/components/ShimmerText/ShimmerText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAiB,MAAM,KAAK,CAAA;AACnE,OAAO,CAAC,MAAM,8DAA8D,CAAA;AAI5E,mGAAmG;AACnG,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,MAA8B,EAAE,OAAO,EAAE,KAAK,EAAE;KAC7D;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAClF,CAAC;CACF,CAAC,CAAA;AAEF,4FAA4F;AAC5F,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,MAA8B,EAAE,OAAO,EAAE,KAAK,EAAE;QAC5D,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;KAC3C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAElC,2EAA2E;QAC3E,MAAM,wBAAwB,GAAG,GAAG,EAAE;YACpC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAA;QACrB,CAAC,CAAA;QAED,KAAK,CACH,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EACnB,CAAC,OAAO,EAAE,EAAE;YACV,mDAAmD;YACnD,IAAI,OAAO;gBAAE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;QACnC,CAAC,CACF,CAAA;QAED,OAAO,GAAG,EAAE,CACV,CAAC,CACC,KAAK,CAAC,EAAE,EACR;YACE,GAAG,KAAK;YACR,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;YACjC,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB;YAC5E,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;SAC3C,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAA;IACL,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, h, ref, watch, type PropType } from \"vue\"\nimport s from \"@plexui/styles/components/ShimmerText/ShimmerText.module.css\"\n\ntype ShimmerTag = \"p\" | \"span\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"div\"\n\n/** If text will always shimmer, use the simpler interface. Like React, only `class` is applied. */\nexport const ShimmerText = defineComponent({\n  name: \"ShimmerText\",\n  inheritAttrs: false,\n  props: {\n    as: { type: String as PropType<ShimmerTag>, default: \"div\" },\n  },\n  setup(props, { slots, attrs }) {\n    return () => h(props.as, { class: [s.Shimmer, attrs.class] }, slots.default?.())\n  },\n})\n\n/** If text may end shimmering after playing for a time, or resume, use shimmerable text. */\nexport const ShimmerableText = defineComponent({\n  name: \"ShimmerableText\",\n  inheritAttrs: false,\n  props: {\n    as: { type: String as PropType<ShimmerTag>, default: \"div\" },\n    shimmer: { type: Boolean, default: false },\n  },\n  setup(props, { slots, attrs }) {\n    const paused = ref(!props.shimmer)\n\n    // Pauses the animation at the start of (what would be) the next iteration.\n    const handleAnimationIteration = () => {\n      paused.value = true\n    }\n\n    watch(\n      () => props.shimmer,\n      (shimmer) => {\n        // Ensure pause is cleared if shimmer is re-enabled\n        if (shimmer) paused.value = false\n      },\n    )\n\n    return () =>\n      h(\n        props.as,\n        {\n          ...attrs,\n          \"class\": [s.Shimmer, attrs.class],\n          \"onAnimationiteration\": props.shimmer ? undefined : handleAnimationIteration,\n          \"data-idle\": paused.value ? \"\" : undefined,\n        },\n        slots.default?.(),\n      )\n  },\n})\n"]}

package/dist/es/components/ShimmerText/index.js

@@ -0,0 +1,2 @@
+export { ShimmerableText, ShimmerText } from "./ShimmerText.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/ShimmerText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ShimmerText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export { ShimmerableText, ShimmerText } from \"./ShimmerText.js\"\n"]}

package/dist/es/components/Sidebar/Sidebar.js

@@ -0,0 +1,570 @@
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, Text, } from "vue";
+import { Button } from "../Button/index.js";
+import { ChevronRightMd, Search as SearchIcon, SidebarLeft, X } from "../Icon/index.js";
+import { Input } from "../Input/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { composeEventHandlers, firstElementChild, flattenSlot, mergeSlotProps } from "../Tooltip/slot.js";
+import s from "@plexui/styles/components/Sidebar/Sidebar.module.css";
+import { SidebarProvider, useSidebar, } from "./useSidebarContext.js";
+// Vue port of packages/ui/src/components/Sidebar/Sidebar.tsx. Exports are
+// flat, as in React's index. Every part renders its React element with the
+// caller's attributes applied after its own (React spreads `...props` last),
+// so a caller's attribute or listener replaces the part's own. `class` is
+// merged. An `@click` on SidebarTrigger or SidebarMobileMenuButton runs before
+// the toggle and cancels it with `preventDefault()`, as `onClick` does in
+// React. `data-toggle` (injected by MDX) is dropped, as React's `cleanProps`
+// does.
+// - `asChild` (SidebarGroupLabel, SidebarMenuButton, SidebarMenuSubButton)
+//   merges into the first element of the default slot the way Radix's Slot
+//   does. SidebarMenuButton puts its inner `<span>` inside that element,
+//   around the element's own content, as React clones it; with no single
+//   element child it merges into the inner `<span>` instead.
+// - ReactNode props are slots: SidebarMenuButton `tooltip` (prop or
+//   `#tooltip` slot), SidebarTrigger's icon (default slot), SidebarInput's
+//   `startAdornment` (slot, Search icon by default).
+// - Parts whose React children are fixed (SidebarMenuChevron,
+//   SidebarMenuSkeleton, SidebarMobileMenuButton) ignore the default slot.
+// Re-export provider and composable
+export { SidebarProvider, useSidebar };
+// Filter out attributes that shouldn't reach the DOM (e.g. injected by MDX)
+const cleanAttrs = (attrs) => {
+    const { "data-toggle": _, class: className, ...rest } = attrs;
+    return { className, rest };
+};
+/** A part that renders one element with its class and the caller's attributes. */
+const part = (name, tag, className) => {
+    const component = defineComponent({
+        name,
+        inheritAttrs: false,
+        setup(_props, { attrs, slots }) {
+            return () => {
+                const { className: userClass, rest } = cleanAttrs(attrs);
+                return h(tag, { ...rest, class: [className, userClass] }, slots.default?.());
+            };
+        },
+    });
+    return component;
+};
+// =============================================
+// Sidebar Root
+// =============================================
+const SidebarComponent = defineComponent({
+    name: "Sidebar",
+    inheritAttrs: false,
+    props: {
+        /** The side the sidebar is on. @default "left" */
+        side: { type: String, default: "left" },
+        /** The visual variant of the sidebar. @default "sidebar" */
+        variant: { type: String, default: "sidebar" },
+    },
+    setup(props, { attrs, slots }) {
+        const sidebar = useSidebar();
+        return () => {
+            // Skip rendering sidebar on mobile for offcanvas mode
+            if (sidebar.isMobile && sidebar.collapsible === "offcanvas") {
+                return null;
+            }
+            const { className, rest } = cleanAttrs(attrs);
+            return h("aside", { "data-side": props.side, "data-variant": props.variant, "class": [s.Sidebar, className], ...rest }, slots.default?.());
+        };
+    },
+});
+/** The sidebar container, an `<aside>`. Renders nothing on mobile in offcanvas mode. */
+export const Sidebar = SidebarComponent;
+/** Sticky top area of the sidebar. */
+export const SidebarHeader = part("SidebarHeader", "div", s.Header);
+/**
+ * Scrollable content area. Sets `data-content-scrollable` on the sidebar
+ * while its content overflows.
+ */
+export const SidebarContent = defineComponent({
+    name: "SidebarContent",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        const contentEl = ref(null);
+        let observer;
+        onMounted(() => {
+            const el = contentEl.value;
+            if (!el)
+                return;
+            const sidebar = el.parentElement;
+            if (!sidebar)
+                return;
+            const update = () => {
+                const hasOverflow = el.scrollHeight > el.clientHeight;
+                sidebar.setAttribute("data-content-scrollable", hasOverflow ? "true" : "false");
+            };
+            update();
+            observer = new ResizeObserver(update);
+            observer.observe(el);
+        });
+        onBeforeUnmount(() => observer?.disconnect());
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { ref: contentEl, class: [s.Content, className], ...rest }, slots.default?.());
+        };
+    },
+});
+/** Sticky bottom area of the sidebar, with a separator line on top. */
+export const SidebarFooter = defineComponent({
+    name: "SidebarFooter",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { class: [s.Footer, className], ...rest }, [
+                h("div", { class: s.FooterSeparator }),
+                slots.default?.(),
+            ]);
+        };
+    },
+});
+export const SidebarRail = part("SidebarRail", "div", s.Rail);
+// =============================================
+// Groups
+// =============================================
+const SidebarGroupComponent = defineComponent({
+    name: "SidebarGroup",
+    inheritAttrs: false,
+    props: {
+        /** Whether the group is open initially. A closed group hides its `SidebarGroupContent`. @default true */
+        defaultOpen: { type: Boolean, default: true },
+        /** Controlled open state. The group has no toggle of its own: change `open` from your own control. */
+        open: { type: Boolean, default: undefined },
+    },
+    setup(props, { attrs, slots }) {
+        // The initial value only, like an uncontrolled input's defaultValue
+        const internalOpen = ref(props.defaultOpen);
+        return () => {
+            const open = props.open ?? internalOpen.value;
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { "data-state": open ? "open" : "closed", "class": [s.Group, className], ...rest }, slots.default?.());
+        };
+    },
+});
+/** Section within the content. `data-state` follows `open` / `defaultOpen`. */
+export const SidebarGroup = SidebarGroupComponent;
+/** Radix Slot: the first element of the slot, with `slotProps` merged in. */
+const renderAsChild = (children, slotProps) => {
+    const child = firstElementChild(children);
+    return child ? mergeSlotProps(child, slotProps) : null;
+};
+/**
+ * React's `cloneElement(child, undefined, wrap(child.props.children))`: the
+ * same element (key and ref kept) with its content, or its default slot for a
+ * component such as RouterLink, passed through `wrap`.
+ */
+const wrapChildContent = (child, wrap) => {
+    const content = child.children;
+    let children;
+    if (content && typeof content === "object" && !Array.isArray(content)) {
+        // Drop the compiled-slots flag so the new default slot is always used
+        const { _: _compiled, ...slotFns } = content;
+        children = { ...slotFns, default: () => [wrap(slotFns.default?.())] };
+    }
+    else {
+        children = [wrap(typeof content === "string" ? [content] : (content ?? undefined))];
+    }
+    return h(child.type, { ...child.props, key: child.key ?? undefined, ref: child.ref }, children);
+};
+const SidebarGroupLabelComponent = defineComponent({
+    name: "SidebarGroupLabel",
+    inheritAttrs: false,
+    props: {
+        /** Merges into the slot's first element instead of rendering a `<span>`. @default false */
+        asChild: { type: Boolean, default: false },
+        /**
+         * Size variant for the label.
+         * - "sm": Compact style for dashboard/settings sidebars
+         * - "lg": Documentation style with larger text and more spacing
+         * @default "lg"
+         */
+        size: { type: String, default: "lg" },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            const ownProps = { "data-size": props.size, "class": [s.GroupLabel, className], ...rest };
+            return props.asChild ? renderAsChild(slots.default?.(), ownProps) : h("span", ownProps, slots.default?.());
+        };
+    },
+});
+/** Section label within a SidebarGroup. */
+export const SidebarGroupLabel = SidebarGroupLabelComponent;
+export const SidebarGroupAction = part("SidebarGroupAction", "div", s.GroupAction);
+export const SidebarGroupContent = part("SidebarGroupContent", "div", s.GroupContent);
+/** Navigation menu, a `<ul>`. */
+export const SidebarMenu = part("SidebarMenu", "ul", s.Menu);
+const SidebarMenuItemComponent = defineComponent({
+    name: "SidebarMenuItem",
+    inheritAttrs: false,
+    props: {
+        /** Marks the item as expanded (`data-expanded`), for chevrons and sub menus. */
+        expanded: { type: Boolean, default: undefined },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("li", { "data-expanded": props.expanded ? "true" : undefined, "class": [s.MenuItem, className], ...rest }, slots.default?.());
+        };
+    },
+});
+/** Menu item, an `<li>`. */
+export const SidebarMenuItem = SidebarMenuItemComponent;
+// =============================================
+// Menu Button
+// =============================================
+const SidebarMenuButtonComponent = defineComponent({
+    name: "SidebarMenuButton",
+    inheritAttrs: false,
+    props: {
+        /** Whether the button is in an active/highlighted state. @default false */
+        isActive: { type: Boolean, default: false },
+        /**
+         * Optional tooltip to show when the sidebar is collapsed (or the
+         * `#tooltip` slot). Hidden on mobile.
+         */
+        tooltip: String,
+        /** Whether to render the button as a custom element via Slot. @default false */
+        asChild: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        const sidebar = useSidebar();
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            const ownProps = {
+                "data-active": props.isActive ? "true" : "false",
+                "aria-current": props.isActive ? "page" : undefined,
+                "class": [s.MenuButton, className],
+                ...rest,
+            };
+            const content = slots.default?.();
+            const wrap = (children) => h("span", { class: s.MenuButtonInner }, children);
+            let button;
+            if (props.asChild) {
+                // With asChild the child element is the button, so the inner wrapper
+                // goes inside it. Wrapping the child instead would merge the button
+                // attributes onto the wrapper span.
+                // A lone text child is wrapped below rather than slotted
+                const nodes = flattenSlot(content);
+                const child = nodes.length === 1 && nodes[0].type !== Text ? nodes[0] : undefined;
+                button = mergeSlotProps(child ? wrapChildContent(child, wrap) : wrap(content), ownProps);
+            }
+            else {
+                button = h("button", ownProps, [wrap(content)]);
+            }
+            // Show tooltip when collapsed (icon mode) and not mobile
+            if ((props.tooltip || slots.tooltip) && sidebar.state === "collapsed" && !sidebar.isMobile) {
+                return h(Tooltip, { content: props.tooltip, side: "right" }, { default: () => button, ...(slots.tooltip ? { content: slots.tooltip } : {}) });
+            }
+            return button;
+        };
+    },
+});
+/** Menu item button. Shows its `tooltip` when the sidebar is collapsed to icons. */
+export const SidebarMenuButton = SidebarMenuButtonComponent;
+export const SidebarMenuButtonIcon = part("SidebarMenuButtonIcon", "span", s.MenuButtonIcon);
+const SidebarMenuButtonLabelComponent = defineComponent({
+    name: "SidebarMenuButtonLabel",
+    inheritAttrs: false,
+    props: {
+        /** Shorter label rendered next to the full one (`data-short-label`). */
+        shortLabel: String,
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return [
+                h("span", { "data-long-label": "true", "class": [s.MenuButtonLabel, className], ...rest }, slots.default?.()),
+                props.shortLabel
+                    ? h("span", { "data-short-label": "true", "class": [s.MenuButtonLabel, className] }, props.shortLabel)
+                    : null,
+            ];
+        };
+    },
+});
+export const SidebarMenuButtonLabel = SidebarMenuButtonLabelComponent;
+export const SidebarMenuChevron = defineComponent({
+    name: "SidebarMenuChevron",
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("span", { class: [s.MenuChevron, className], ...rest }, [h(ChevronRightMd)]);
+        };
+    },
+});
+export const SidebarMenuBadge = part("SidebarMenuBadge", "span", s.MenuBadge);
+export const SidebarMenuAction = part("SidebarMenuAction", "div", s.MenuAction);
+// =============================================
+// Menu Skeleton
+// =============================================
+const SidebarMenuSkeletonComponent = defineComponent({
+    name: "SidebarMenuSkeleton",
+    inheritAttrs: false,
+    props: {
+        /** Renders the icon placeholder. @default true */
+        showIcon: { type: Boolean, default: true },
+        /** Width of the label skeleton (e.g., "60%", "80%", "100px"). @default "60%" */
+        labelWidth: { type: String, default: "60%" },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { "data-skeleton": "true", "class": [s.MenuSkeleton, className], ...rest }, [
+                props.showIcon ? h("div", { class: s.MenuSkeletonIcon }) : null,
+                h("div", { class: s.MenuSkeletonLabel, style: { width: props.labelWidth } }),
+            ]);
+        };
+    },
+});
+export const SidebarMenuSkeleton = SidebarMenuSkeletonComponent;
+// =============================================
+// Submenu
+// =============================================
+const SidebarMenuSubComponent = defineComponent({
+    name: "SidebarMenuSub",
+    inheritAttrs: false,
+    props: {
+        /** Whether the submenu is expanded. @default true */
+        open: { type: Boolean, default: true },
+        /**
+         * When true, child items align with parent text that has icons.
+         * This adjusts the padding so level 2 text aligns with level 1 text.
+         * @default false
+         */
+        hasIcons: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("ul", {
+                "data-state": props.open ? "open" : "closed",
+                "data-has-icons": props.hasIcons ? "true" : undefined,
+                // Collapsed items are only hidden visually: keep them out of the tab
+                // order. "" renders `inert=""` (a DOM property in browsers)
+                "inert": props.open ? undefined : "",
+                "class": [s.MenuSub, className],
+                ...rest,
+            }, slots.default?.());
+        };
+    },
+});
+export const SidebarMenuSub = SidebarMenuSubComponent;
+export const SidebarMenuSubItem = part("SidebarMenuSubItem", "li", s.MenuSubItem);
+const SidebarMenuSubButtonComponent = defineComponent({
+    name: "SidebarMenuSubButton",
+    inheritAttrs: false,
+    props: {
+        /** Whether the button is in an active/highlighted state. @default false */
+        isActive: { type: Boolean, default: false },
+        /** Merges into the slot's first element instead of rendering a `<button>`. @default false */
+        asChild: { type: Boolean, default: false },
+        /**
+         * Indent level for nested items (0-3).
+         * Each level adds 12px of left margin.
+         * @default 0
+         */
+        indent: { type: Number, default: 0 },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            const ownProps = {
+                "data-active": props.isActive ? "true" : "false",
+                "aria-current": props.isActive ? "page" : undefined,
+                "class": [s.MenuSubButton, s[`indent${props.indent}`], className],
+                ...rest,
+            };
+            return props.asChild ? renderAsChild(slots.default?.(), ownProps) : h("button", ownProps, slots.default?.());
+        };
+    },
+});
+export const SidebarMenuSubButton = SidebarMenuSubButtonComponent;
+export const SidebarSeparator = defineComponent({
+    name: "SidebarSeparator",
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("hr", { class: [s.Separator, className], ...rest });
+        };
+    },
+});
+// =============================================
+// Card
+// =============================================
+const SidebarCardComponent = defineComponent({
+    name: "SidebarCard",
+    inheritAttrs: false,
+    props: {
+        /** Visual variant. @default "default" */
+        variant: { type: String, default: "default" },
+        /** Shows a dismiss button. @default false */
+        dismissible: { type: Boolean, default: false },
+    },
+    emits: {
+        /** The dismiss button was clicked */
+        dismiss: (_event) => true,
+    },
+    setup(props, { attrs, slots, emit }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { "data-variant": props.variant, "class": [s.Card, className], ...rest }, [
+                props.dismissible
+                    ? h(Button, {
+                        "uniform": true,
+                        "size": "3xs",
+                        "variant": "ghost",
+                        "color": "secondary",
+                        "class": s.CardDismiss,
+                        "onClick": (event) => emit("dismiss", event),
+                        "aria-label": "Dismiss",
+                    }, { default: () => h(X) })
+                    : null,
+                slots.default?.(),
+            ]);
+        };
+    },
+});
+/** Promotional card for CTAs, upgrades or announcements. */
+export const SidebarCard = SidebarCardComponent;
+export const SidebarCardHeader = part("SidebarCardHeader", "div", s.CardHeader);
+export const SidebarCardTitle = part("SidebarCardTitle", "div", s.CardTitle);
+export const SidebarCardTitleLink = defineComponent({
+    name: "SidebarCardTitleLink",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("a", { class: [s.CardTitleLink, className], ...rest }, [
+                slots.default?.(),
+                h(ChevronRightMd, { class: s.CardTitleChevron }),
+            ]);
+        };
+    },
+});
+export const SidebarCardContent = part("SidebarCardContent", "div", s.CardContent);
+export const SidebarCardFooter = part("SidebarCardFooter", "div", s.CardFooter);
+/** Main content area next to the sidebar, a `<main>`. */
+export const SidebarInset = part("SidebarInset", "main", s.Inset);
+/** Wrapper for the sidebar and the main content. */
+export const SidebarLayout = part("SidebarLayout", "div", s.SidebarLayout);
+/**
+ * Collapse button. The default slot replaces the icon. Renders nothing when
+ * `collapsible="none"`.
+ */
+export const SidebarTrigger = defineComponent({
+    name: "SidebarTrigger",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        const sidebar = useSidebar();
+        return () => {
+            // Don't render if collapsible="none" (text-only sidebars)
+            if (sidebar.collapsible === "none") {
+                return null;
+            }
+            const { className, rest } = cleanAttrs(attrs);
+            const { onClick, ...others } = rest;
+            return h("button", {
+                "type": "button",
+                "class": [s.Trigger, className],
+                // The caller's listener runs first and can cancel the toggle
+                "onClick": composeEventHandlers(onClick, () => sidebar.toggleSidebar()),
+                "aria-label": sidebar.isMobile
+                    ? "Open menu"
+                    : sidebar.state === "expanded"
+                        ? "Collapse sidebar"
+                        : "Expand sidebar",
+                ...others,
+            }, [
+                h("span", { class: s.TriggerInner }, [
+                    // Default icon (same for both states, as per reference)
+                    h("span", { class: s.TriggerIcon }, slots.default ? slots.default() : [h(SidebarLeft)]),
+                ]),
+            ]);
+        };
+    },
+});
+export const SidebarMobileMenuButton = defineComponent({
+    name: "SidebarMobileMenuButton",
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+        const sidebar = useSidebar();
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            const { onClick, ...others } = rest;
+            return h("button", {
+                "type": "button",
+                "data-expanded": sidebar.openMobile ? "" : undefined,
+                "class": [s.MobileMenuButton, className],
+                // The caller's listener runs first and can cancel the toggle
+                "onClick": composeEventHandlers(onClick, () => sidebar.setOpenMobile(!sidebar.openMobile)),
+                "aria-label": sidebar.openMobile ? "Close menu" : "Open menu",
+                ...others,
+            }, [
+                h("span", { class: s.MobileMenuIcon }, [
+                    h("span", { "class": s.MobileMenuLine, "data-top": "true" }),
+                    h("span", { class: s.MobileMenuMiddle }, [h("span", { "class": s.MobileMenuLine, "data-bottom": "true" })]),
+                ]),
+            ]);
+        };
+    },
+});
+// =============================================
+// Mobile Sidebar
+// =============================================
+const SidebarMobileComponent = defineComponent({
+    name: "SidebarMobile",
+    inheritAttrs: false,
+    props: {
+        /** When true, drawer is positioned absolute instead of fixed (for contained demos) */
+        contained: { type: Boolean, default: undefined },
+    },
+    setup(props, { attrs, slots }) {
+        const sidebar = useSidebar();
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            const contained = props.contained && s.contained;
+            return [
+                // Backdrop
+                h("div", {
+                    "class": [s.MobileBackdrop, contained],
+                    "onClick": () => sidebar.setOpenMobile(false),
+                    "aria-hidden": "true",
+                }),
+                // Drawer
+                h("div", { class: [s.MobileSidebar, contained, className], ...rest }, slots.default?.()),
+            ];
+        };
+    },
+});
+export const SidebarMobile = SidebarMobileComponent;
+export const SidebarMobileHeader = part("SidebarMobileHeader", "div", s.MobileHeader);
+export const SidebarMobileFooter = part("SidebarMobileFooter", "div", s.MobileFooter);
+/**
+ * Search input: an Input with a Search icon in its `startAdornment` slot.
+ * Every attribute, listener and slot goes to the Input (`v-model:value`,
+ * `@clear`, ...). A template ref gets the Input's `focus()` and `input`
+ * (React forwards its ref to the <input>).
+ */
+export const SidebarInput = defineComponent({
+    name: "SidebarInput",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots, expose }) {
+        // Input's exposed API
+        const inputComponent = ref(null);
+        expose({
+            focus: () => inputComponent.value?.focus(),
+            input: computed(() => inputComponent.value?.input ?? null),
+        });
+        return () => {
+            const { className, rest } = cleanAttrs(attrs);
+            return h("div", { class: s.Input }, [
+                h(Input, { class: className, ...rest, ref: inputComponent }, { ...slots, startAdornment: slots.startAdornment ?? (() => h(SearchIcon)) }),
+            ]);
+        };
+    },
+});
+export const SidebarFooterLinks = part("SidebarFooterLinks", "div", s.FooterLinks);
+//# sourceMappingURL=Sidebar.js.map