@bridge-ui/vue 0.3.0 → 0.5.0

package/dist/Components/Sidebar/SidebarListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,120 @@
+import { hasNamedSlot as e } from "../../Utils/slotOrProp.js";
+import t from "../ListItem/ListItem.js";
+import { useSidebarListItem as n } from "./composables/useSidebarListItem.js";
+import r from "../Tooltip/Tooltip.js";
+import { computed as i, createBlock as a, createElementBlock as o, createSlots as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, unref as h, useAttrs as g, useSlots as _, withCtx as v } from "vue";
+import { cn as y } from "@bridge-ui/core/Utils";
+//#region src/Components/Sidebar/SidebarListItem.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	key: 0,
+	class: "list-none"
+}, x = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "SidebarListItem",
+	props: {
+		as: {},
+		classes: {},
+		customProps: {},
+		dense: { type: Boolean },
+		disabled: { type: Boolean },
+		divider: { type: Boolean },
+		interactive: { type: Boolean },
+		primary: {},
+		role: {},
+		secondary: {},
+		selected: { type: Boolean },
+		selectedIcon: {},
+		value: {},
+		tooltip: {},
+		tooltipPlacement: {}
+	},
+	setup(l) {
+		let x = l, S = g(), C = _(), { itemClasses: w, accessibleName: T, tooltip: E, tooltipPlacement: D } = n(x), O = i(() => {
+			let { classes: e, customProps: t, tooltip: n, tooltipPlacement: r, ...i } = x;
+			return {
+				...S,
+				...i,
+				...E.value ? { as: "div" } : {},
+				customProps: {
+					...t,
+					interactive: {
+						...T.value ? { "aria-label": T.value } : {},
+						...t?.interactive
+					}
+				},
+				classes: {
+					...e,
+					end: y(w.value.end, e?.end),
+					start: y(w.value.start, e?.start),
+					content: y(w.value.content, e?.content),
+					interactive: y(w.value.interactive, e?.interactive)
+				}
+			};
+		});
+		return (n, i) => h(E) ? (p(), o("li", b, [c(r, {
+			content: h(E),
+			placement: h(D),
+			classes: {
+				root: "flex w-full min-w-0",
+				trigger: "flex w-full min-w-0"
+			}
+		}, {
+			trigger: v(() => [c(t, f(u(O.value)), s({ _: 2 }, [
+				h(e)(h(C), "default") ? {
+					name: "default",
+					fn: v(() => [m(n.$slots, "default")]),
+					key: "0"
+				} : void 0,
+				h(e)(h(C), "start") ? {
+					name: "start",
+					fn: v(() => [m(n.$slots, "start")]),
+					key: "1"
+				} : void 0,
+				h(e)(h(C), "end") ? {
+					name: "end",
+					fn: v(() => [m(n.$slots, "end")]),
+					key: "2"
+				} : void 0,
+				h(e)(h(C), "primary") ? {
+					name: "primary",
+					fn: v(() => [m(n.$slots, "primary")]),
+					key: "3"
+				} : void 0,
+				h(e)(h(C), "secondary") ? {
+					name: "secondary",
+					fn: v(() => [m(n.$slots, "secondary")]),
+					key: "4"
+				} : void 0
+			]), 1040)]),
+			_: 3
+		}, 8, ["content", "placement"])])) : (p(), a(t, f(d({ key: 1 }, O.value)), s({ _: 2 }, [
+			h(e)(h(C), "default") ? {
+				name: "default",
+				fn: v(() => [m(n.$slots, "default")]),
+				key: "0"
+			} : void 0,
+			h(e)(h(C), "start") ? {
+				name: "start",
+				fn: v(() => [m(n.$slots, "start")]),
+				key: "1"
+			} : void 0,
+			h(e)(h(C), "end") ? {
+				name: "end",
+				fn: v(() => [m(n.$slots, "end")]),
+				key: "2"
+			} : void 0,
+			h(e)(h(C), "primary") ? {
+				name: "primary",
+				fn: v(() => [m(n.$slots, "primary")]),
+				key: "3"
+			} : void 0,
+			h(e)(h(C), "secondary") ? {
+				name: "secondary",
+				fn: v(() => [m(n.$slots, "secondary")]),
+				key: "4"
+			} : void 0
+		]), 1040));
+	}
+});
+//#endregion
+export { x as default };

package/dist/Components/Sidebar/SidebarProvider.js

@@ -0,0 +1,5 @@
+import e from "./SidebarProvider.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Sidebar/SidebarProvider.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Sidebar/SidebarProvider.vue.d.ts

@@ -0,0 +1,24 @@
+import { SidebarProviderOwnProps, SidebarProviderSlots } from './sidebar.types';
+type __VLS_Slots = SidebarProviderSlots;
+type __VLS_Props = SidebarProviderOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: unknown[]) => any;
+    openChange: (open: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+}>, {
+    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/Components/Sidebar/SidebarProvider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { useSidebarProvider as e } from "./composables/useSidebarProvider.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, mergeModels as i, normalizeProps as a, openBlock as o, renderSlot as s, unref as c, useModel as l } from "vue";
+//#region src/Components/Sidebar/SidebarProvider.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	name: "SidebarProvider",
+	__name: "SidebarProvider",
+	props: /*@__PURE__*/ i({
+		classes: {},
+		customProps: {},
+		defaultOpen: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["openChange", "update:modelValue"], ["update:modelValue"]),
+	setup(n, { emit: i }) {
+		let u = i, d = n, f = l(n, "modelValue"), { rootBind: p } = e(d, { defaultOpen: !0 }, f, u);
+		return (e, n) => (o(), t("div", a(r(c(p))), [s(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/Components/Sidebar/SidebarTrigger.js

@@ -0,0 +1,5 @@
+import e from "./SidebarTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Sidebar/SidebarTrigger.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Sidebar/SidebarTrigger.vue.d.ts

@@ -0,0 +1,11 @@
+import { SidebarTriggerOwnProps, SidebarTriggerSlots } from './sidebar.types';
+type __VLS_Slots = SidebarTriggerSlots;
+declare const __VLS_base: import('vue').DefineComponent<SidebarTriggerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SidebarTriggerOwnProps> & 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/Components/Sidebar/SidebarTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import e from "../Button/Button.js";
+import { useSidebarTrigger as t } from "./composables/useSidebarTrigger.js";
+import { createBlock as n, createCommentVNode as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u } from "vue";
+//#region src/Components/Sidebar/SidebarTrigger.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "SidebarTrigger",
+	setup(i) {
+		let d = l(), { attrs: f, panelId: p, expanded: m, iconClass: h, ariaLabel: g, handleClick: _, hasDefaultSlot: v } = t(d);
+		return (t, i) => (o(), n(c(e), a(c(f), {
+			color: "dark",
+			type: "button",
+			density: "mini",
+			variant: "light",
+			"aria-label": c(g),
+			onClick: c(_),
+			"aria-expanded": c(m),
+			classes: { icon: c(h) },
+			"aria-controls": c(p) || void 0,
+			icon: c(v) ? void 0 : "panelLeft"
+		}), {
+			default: u(() => [c(v) ? s(t.$slots, "default", {}, void 0, void 0, 0) : r("", !0)]),
+			_: 3
+		}, 16, [
+			"aria-label",
+			"onClick",
+			"aria-expanded",
+			"classes",
+			"aria-controls",
+			"icon"
+		]));
+	}
+});
+//#endregion
+export { d as default };

package/dist/Components/Sidebar/composables/useSidebar.d.ts

@@ -0,0 +1,6 @@
+import { SidebarContextValue } from '../sidebarInjectionKey';
+/**
+ * Reads the nearest `SidebarProvider` context. Throws when used outside it.
+ */
+export declare function useSidebar(): import('vue').ComputedRef<SidebarContextValue>;
+export type { SidebarContextValue };

package/dist/Components/Sidebar/composables/useSidebar.js

@@ -0,0 +1,10 @@
+import { SIDEBAR_INJECTION_KEY as e } from "../sidebarInjectionKey.js";
+import { inject as t } from "vue";
+//#region src/Components/Sidebar/composables/useSidebar.ts
+function n() {
+	let n = t(e);
+	if (!n) throw Error("useSidebar must be used within a SidebarProvider");
+	return n;
+}
+//#endregion
+export { n as useSidebar };

package/dist/Components/Sidebar/composables/useSidebarInset.d.ts

@@ -0,0 +1,7 @@
+import { SidebarInsetOwnProps, SidebarInsetProps } from '../sidebar.types';
+export declare function useSidebarInset(props: SidebarInsetOwnProps): {
+    merged: import('vue').ComputedRef<SidebarInsetOwnProps>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<SidebarInsetProps, "classes" | "customProps">, never>>>;
+};

package/dist/Components/Sidebar/composables/useSidebarInset.js

@@ -0,0 +1,32 @@
+import { mergePartBind as e, useBridgeUIComponent as t } from "../../../Utils/index.js";
+import { useSidebar as n } from "./useSidebar.js";
+import { computed as r, useAttrs as i } from "vue";
+import { get as a, omit as o } from "es-toolkit/compat";
+import { sidebarVariantProps as s } from "@bridge-ui/core/Tokens";
+import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core/Utils";
+//#region src/Components/Sidebar/composables/useSidebarInset.ts
+var d = ["classes", "customProps"];
+function f(f) {
+	let p = n(), m = i(), h = r(() => u({
+		props: {
+			...m,
+			...f
+		},
+		bridgeKeys: d
+	})), { merged: g, entry: _ } = t({
+		componentName: "Sidebar",
+		props: () => h.value.componentProps
+	}), v = r(() => g.value.customProps), y = r(() => {
+		let e = l(s, _.value?.tokens?.variant);
+		return a(e, p.value.variant);
+	}), b = r(() => o(h.value.inheritedAttrs, []));
+	return {
+		merged: g,
+		rootBind: r(() => e(v.value?.root, b.value, { class: c({
+			[a(y.value, "inset") ?? ""]: !0,
+			[a(g.value.classes, "root") ?? ""]: !0
+		}) }))
+	};
+}
+//#endregion
+export { f as useSidebarInset };

package/dist/Components/Sidebar/composables/useSidebarList.d.ts

@@ -0,0 +1,8 @@
+import { SidebarListProps } from '../sidebar.types';
+/**
+ * Binds icon-rail mode and applies nav chrome.
+ */
+export declare function useSidebarList(props: Pick<SidebarListProps, "nested" | "iconOnly">): {
+    iconOnly: import('vue').ComputedRef<boolean>;
+    rootClassName: import('vue').ComputedRef<string>;
+};

package/dist/Components/Sidebar/composables/useSidebarList.js

@@ -0,0 +1,27 @@
+import { useSidebar as e } from "./useSidebar.js";
+import { SIDEBAR_LIST_INJECTION_KEY as t } from "../sidebarListInjectionKey.js";
+import { computed as n, getCurrentInstance as r, inject as i, provide as a } from "vue";
+import { isSidebarIconOnly as o } from "@bridge-ui/core/Domain";
+import { cn as s } from "@bridge-ui/core/Utils";
+//#region src/Components/Sidebar/composables/useSidebarList.ts
+function c(c) {
+	let l = e(), u = r(), d = i(t, null), f = n(() => {
+		let e = u?.vnode.props ?? {};
+		return "iconOnly" in e || "icon-only" in e ? c.iconOnly === !0 : d ? d.value.iconOnly : o({
+			state: l.value.state,
+			isMobile: l.value.isMobile,
+			collapsible: l.value.collapsible
+		});
+	});
+	return a(t, n(() => ({ iconOnly: f.value }))), {
+		iconOnly: f,
+		rootClassName: n(() => s({
+			"flex flex-col gap-1": !0,
+			"px-2": c.nested !== !0,
+			"ml-3.5 translate-x-px border-l border-dark-200 py-0.5 pl-2.5 dark:border-dark-700": c.nested === !0,
+			hidden: c.nested === !0 && f.value
+		}))
+	};
+}
+//#endregion
+export { c as useSidebarList };

package/dist/Components/Sidebar/composables/useSidebarListItem.d.ts

@@ -0,0 +1,15 @@
+import { SidebarListItemProps } from '../sidebar.types';
+/**
+ * Tooltip and nav chrome for a rail item.
+ */
+export declare function useSidebarListItem(props: Pick<SidebarListItemProps, "primary" | "tooltip" | "secondary" | "tooltipPlacement">): {
+    tooltip: import('vue').ComputedRef<string | undefined>;
+    itemClasses: import('vue').ComputedRef<{
+        end: string;
+        content: string;
+        start: string;
+        interactive: string;
+    }>;
+    accessibleName: import('vue').ComputedRef<string | undefined>;
+    tooltipPlacement: import('vue').ComputedRef<import('@floating-ui/utils').Placement>;
+};

package/dist/Components/Sidebar/composables/useSidebarListItem.js

@@ -0,0 +1,44 @@
+import { isPropPresent as e } from "../../../Utils/slotOrProp.js";
+import { useSidebar as t } from "./useSidebar.js";
+import { SIDEBAR_LIST_INJECTION_KEY as n } from "../sidebarListInjectionKey.js";
+import { computed as r, inject as i } from "vue";
+import { isSidebarIconOnly as a, resolveSidebarListTooltipPlacement as o } from "@bridge-ui/core/Domain";
+import { cn as s } from "@bridge-ui/core/Utils";
+//#region src/Components/Sidebar/composables/useSidebarListItem.ts
+function c(c) {
+	let l = t(), u = i(n, null), d = r(() => u ? u.value.iconOnly : a({
+		state: l.value.state,
+		isMobile: l.value.isMobile,
+		collapsible: l.value.collapsible
+	})), f = r(() => {
+		if (d.value) {
+			if (c.tooltip !== void 0) return c.tooltip || void 0;
+			if (typeof c.primary == "string") return c.primary;
+		}
+	}), p = r(() => c.tooltipPlacement === void 0 ? o(l.value.side) : c.tooltipPlacement), m = r(() => {
+		if (!(!d.value || typeof c.primary != "string")) return c.primary;
+	});
+	return {
+		tooltip: f,
+		itemClasses: r(() => {
+			let t = e(c.secondary);
+			return {
+				end: s({ hidden: d.value }),
+				content: s({ hidden: d.value }),
+				start: s({ "items-center justify-center": !0 }),
+				interactive: s({
+					"gap-x-2 overflow-hidden rounded-lg px-2 transition-[width,height,padding] duration-200 ease-linear": !d.value,
+					"min-h-12 py-2": !d.value && t,
+					"min-h-8 py-0": !d.value && !t,
+					"gap-0 overflow-hidden rounded-lg p-0": d.value,
+					"size-8 justify-center": d.value && t,
+					"h-8 w-full px-2": d.value && !t
+				})
+			};
+		}),
+		accessibleName: m,
+		tooltipPlacement: p
+	};
+}
+//#endregion
+export { c as useSidebarListItem };

package/dist/Components/Sidebar/composables/useSidebarProvider.d.ts

@@ -0,0 +1,18 @@
+import { Ref, SetupContext } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { SidebarProviderEmits, SidebarProviderOwnProps, SidebarProviderProps } from '../sidebar.types';
+type SidebarProviderLibDefaults = LibDefaultsShape<SidebarProviderOwnProps, "defaultOpen">;
+type SidebarProviderMerged = MergeLibDefaults<SidebarProviderOwnProps, SidebarProviderLibDefaults>;
+export declare function useSidebarProvider(props: SidebarProviderOwnProps, libDefaults: SidebarProviderLibDefaults, openModel: Ref<boolean | undefined>, emit: SetupContext<SidebarProviderEmits>["emit"]): {
+    merged: import('vue').ComputedRef<SidebarProviderMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "data-side": keyof import('@bridge-ui/core/Tokens').SidebarSide;
+        class: string;
+        style: {
+            "--bridge-sidebar-width": string;
+            "--bridge-sidebar-width-icon": string;
+            "--bridge-sidebar-width-mobile": string;
+        };
+    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<SidebarProviderProps, "classes" | "customProps" | "defaultOpen">>>>;
+};
+export {};

package/dist/Components/Sidebar/composables/useSidebarProvider.js

@@ -0,0 +1,88 @@
+import { useBreakpoint as e } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { SIDEBAR_INJECTION_KEY as i } from "../sidebarInjectionKey.js";
+import { computed as a, provide as o, ref as s, useAttrs as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { SIDEBAR_DESKTOP_BREAKPOINT as d, SIDEBAR_WIDTH_ICON_VAR as f, SIDEBAR_WIDTH_MOBILE_VAR as p, SIDEBAR_WIDTH_VAR as m, resolveSidebarState as h, shouldToggleDesktopSidebar as g, toggleSidebarOpen as _ } from "@bridge-ui/core/Domain";
+import { sidebarWidthProps as v } from "@bridge-ui/core/Tokens";
+import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
+import { toMerged as x } from "es-toolkit/object";
+//#region src/Components/Sidebar/composables/useSidebarProvider.ts
+var S = [
+	"classes",
+	"customProps",
+	"defaultOpen"
+], C = {
+	panelId: "",
+	side: "left",
+	variant: "sidebar",
+	collapsible: "offcanvas"
+};
+function w(w, T, E, D) {
+	let O = c(), k = e(), A = a(() => b({
+		props: {
+			...O,
+			...w
+		},
+		bridgeKeys: S
+	})), { merged: j, entry: M } = n({
+		libDefaults: T,
+		componentName: "Sidebar",
+		props: () => A.value.componentProps
+	}), N = a(() => j.value.customProps), P = r({
+		entry: M,
+		props: () => A.value.componentProps
+	}), F = a(() => k.lessThan(d)), I = s(j.value.defaultOpen), L = s(!1), R = s({ ...C }), z = a(() => E.value ?? I.value), B = (e) => {
+		E.value === void 0 && (I.value = e), E.value = e, D("openChange", e);
+	}, V = (e) => {
+		L.value = e;
+	}, H = (e) => {
+		let t = {
+			...R.value,
+			...e
+		};
+		(R.value.side !== t.side || R.value.panelId !== t.panelId || R.value.variant !== t.variant || R.value.collapsible !== t.collapsible) && (R.value = t);
+	}, U = () => {
+		if (F.value) {
+			V(_(L.value));
+			return;
+		}
+		g(R.value.collapsible) && B(_(z.value));
+	}, W = a(() => h(z.value, R.value.collapsible)), G = a(() => x(v, M.value?.tokens?.width ?? {})), K = a(() => ({
+		setOpen: B,
+		setLayout: H,
+		toggleSidebar: U,
+		setOpenMobile: V,
+		open: z.value,
+		state: W.value,
+		side: R.value.side,
+		isMobile: F.value,
+		openMobile: L.value,
+		panelId: R.value.panelId,
+		variant: R.value.variant,
+		collapsible: R.value.collapsible
+	}));
+	o(i, K);
+	let q = a(() => u(A.value.inheritedAttrs, ["modelValue", "onUpdate:modelValue"]));
+	return {
+		merged: j,
+		rootBind: a(() => {
+			let e = q.value.style;
+			return t(N.value?.root, q.value, {
+				"data-side": R.value.side,
+				class: y({
+					"flex min-h-svh w-full data-[side=right]:flex-row-reverse": !0,
+					[l(P.value, "root") ?? ""]: !0
+				}),
+				style: {
+					...e,
+					[m]: G.value.default,
+					[f]: G.value.icon,
+					[p]: G.value.mobile
+				}
+			});
+		})
+	};
+}
+//#endregion
+export { w as useSidebarProvider };

package/dist/Components/Sidebar/composables/useSidebarShell.d.ts

@@ -0,0 +1,41 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { SidebarOwnProps, SidebarProps } from '../sidebar.types';
+type SidebarLibDefaults = LibDefaultsShape<SidebarOwnProps, "side" | "variant" | "ariaLabel" | "collapsible">;
+type SidebarMerged = MergeLibDefaults<SidebarOwnProps, SidebarLibDefaults>;
+export declare function useSidebarShell(props: SidebarOwnProps, libDefaults: SidebarLibDefaults): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<SidebarMerged>;
+    panelId: string;
+    gapBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "data-side": NonNullable<keyof import('@bridge-ui/core/Tokens').SidebarSide | undefined>;
+        "data-state": import('@bridge-ui/core/Domain').SidebarState;
+        "data-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').SidebarVariant | undefined>;
+        "data-collapsible": "" | import('@bridge-ui/core/Domain').SidebarCollapsibleMode;
+        "data-mobile": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<SidebarProps, "classes" | "customProps" | "variant" | "ariaLabel" | "collapsible" | "side">, never>>>;
+    asideBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "data-side": NonNullable<keyof import('@bridge-ui/core/Tokens').SidebarSide | undefined>;
+        "aria-label": string;
+        inert: boolean | undefined;
+        id: string | undefined;
+        class: string;
+    }, "class", {}, {}>>;
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    mobileWidth: import('vue').ComputedRef<string>;
+    showAsDrawer: import('vue').ComputedRef<boolean>;
+    drawerPanelStyle: import('vue').ComputedRef<{
+        width: string;
+        maxWidth: string;
+    }>;
+    isMobile: import('vue').ComputedRef<boolean>;
+    openMobile: import('vue').ComputedRef<boolean>;
+    setOpenMobile: (next: boolean) => void;
+};
+export {};

package/dist/Components/Sidebar/composables/useSidebarShell.js

@@ -0,0 +1,116 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { useSidebar as r } from "./useSidebar.js";
+import { computed as i, useAttrs as a, useId as o, useSlots as s, watch as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { getSidebarPanelId as d, resolveSidebarCollapsibleData as f, shouldRenderSidebarAsDrawer as p } from "@bridge-ui/core/Domain";
+import { sidebarCollapsibleProps as m, sidebarSideProps as h, sidebarVariantProps as g, sidebarWidthProps as _ } from "@bridge-ui/core/Tokens";
+import { cn as v, mergeBridgeUILayeredClasses as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
+import { toMerged as x } from "es-toolkit/object";
+//#region src/Components/Sidebar/composables/useSidebarShell.ts
+var S = [
+	"side",
+	"classes",
+	"variant",
+	"ariaLabel",
+	"collapsible",
+	"customProps"
+];
+function C(C, w) {
+	let T = o(), E = d(`bridge-sidebar${T}`), D = a(), O = s(), k = r(), A = i(() => b({
+		props: {
+			...D,
+			...C
+		},
+		bridgeKeys: S
+	})), { merged: j, entry: M } = t({
+		libDefaults: w,
+		componentName: "Sidebar",
+		props: () => A.value.componentProps
+	}), N = i(() => j.value.customProps), P = n({
+		entry: M,
+		props: () => A.value.componentProps
+	});
+	c(() => ({
+		panelId: E,
+		side: j.value.side,
+		variant: j.value.variant,
+		collapsible: j.value.collapsible
+	}), (e) => {
+		k.value.setLayout(e);
+	}, { immediate: !0 });
+	let F = i(() => {
+		let e = y(g, M.value?.tokens?.variant);
+		return l(e, j.value.variant);
+	}), I = i(() => {
+		let e = y(m, M.value?.tokens?.collapsible);
+		return l(e, j.value.collapsible);
+	}), L = i(() => {
+		let e = y(h, M.value?.tokens?.side);
+		return l(e, j.value.side);
+	}), R = i(() => f(k.value.state, j.value.collapsible)), z = i(() => p(k.value.isMobile) && k.value.openMobile), B = i(() => u(A.value.inheritedAttrs, [])), V = i(() => e(N.value?.root, B.value, {
+		"data-side": j.value.side,
+		"data-state": k.value.state,
+		"data-variant": j.value.variant,
+		"data-collapsible": R.value,
+		"data-mobile": k.value.isMobile ? "true" : "false",
+		class: v({
+			"group peer hidden text-dark-900 md:block dark:text-dark-100": !0,
+			[l(P.value, "root") ?? ""]: !0
+		})
+	})), H = i(() => e(N.value?.gap, {}, v({
+		[l(F.value, "gap") ?? ""]: !0,
+		[l(I.value, "gap") ?? ""]: !0,
+		[l(P.value, "gap") ?? ""]: !0
+	}))), U = i(() => {
+		let t = R.value === "offcanvas";
+		return e({}, {}, {
+			"data-side": j.value.side,
+			"aria-label": j.value.ariaLabel,
+			inert: t ? !0 : void 0,
+			id: z.value ? void 0 : E,
+			class: v({
+				"fixed inset-y-0 z-10 hidden h-full w-[var(--bridge-sidebar-width)] overflow-hidden transition-[left,right,width] duration-200 ease-linear md:flex": !0,
+				[L.value ?? ""]: !0,
+				[l(I.value, "panel") ?? ""]: !0
+			})
+		});
+	}), W = i(() => e(N.value?.panel, {}, v({
+		"flex h-full w-full flex-col overflow-hidden": !0,
+		[l(F.value, "panel") ?? ""]: !0,
+		[l(P.value, "panel") ?? ""]: !0
+	}))), G = i(() => e(N.value?.header, {}, v({
+		"flex shrink-0 flex-col gap-2 px-2 py-2.5": !0,
+		[l(P.value, "header") ?? ""]: !0
+	}))), K = i(() => e(N.value?.content, {}, v({
+		"bridge-scroll-fade-y flex min-h-0 flex-1 flex-col overflow-y-auto": !0,
+		[l(P.value, "content") ?? ""]: !0
+	}))), q = i(() => e(N.value?.footer, {}, v({
+		"flex shrink-0 flex-col gap-2 px-2 py-2.5": !0,
+		[l(P.value, "footer") ?? ""]: !0
+	}))), J = i(() => x(_, M.value?.tokens?.width ?? {}).mobile);
+	return {
+		slots: O,
+		merged: j,
+		panelId: E,
+		gapBind: H,
+		rootBind: V,
+		asideBind: U,
+		panelBind: W,
+		headerBind: G,
+		footerBind: q,
+		contentBind: K,
+		mobileWidth: J,
+		showAsDrawer: z,
+		drawerPanelStyle: i(() => ({
+			width: J.value,
+			maxWidth: `min(${J.value}, 88vw)`
+		})),
+		isMobile: i(() => k.value.isMobile),
+		openMobile: i(() => k.value.openMobile),
+		setOpenMobile: (e) => {
+			k.value.setOpenMobile(e);
+		}
+	};
+}
+//#endregion
+export { C as useSidebarShell };