@bridge-ui/vue 0.0.1-beta.6 → 0.0.1

package/dist/Components/Drawer/composables/useDrawer.js

@@ -0,0 +1,208 @@
+import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as te } from "../../../Utils/index.js";
+import { computed as n, nextTick as r, onBeforeUnmount as ne, ref as i, toValue as a, useAttrs as o, watch as s } from "vue";
+import { get as c } from "es-toolkit/compat";
+import { DRAWER_LEAVE_FALLBACK_MS as re, LAYER_STACK_BASE_Z_INDEX as l, acquireLayerStackOrder as ie, cn as u, countDrawerTransitionLayers as d, createFocusTrap as ae, getDrawerOverlayTransitionClass as oe, getDrawerPanelTransitionClass as se, getLayerStackEntry as ce, hasDrawerTransition as le, mergeBridgeUILayeredClasses as f, pushLayerStack as p, resolveEffectiveDrawerTransition as m, splitComponentProps as h, subscribeLayerStack as g } from "@bridge-ui/core";
+import { isModalBackdropClick as ue } from "@bridge-ui/core/Utils";
+import { blurProps as de, placementPanelProps as fe, placementProps as pe, sizeProps as me } from "@bridge-ui/core/Components/Drawer";
+//#region src/Components/Drawer/composables/useDrawer.ts
+var he = [
+	"blur",
+	"size",
+	"scroll",
+	"classes",
+	"stackId",
+	"ariaLabel",
+	"autoFocus",
+	"placement",
+	"persistent",
+	"teleportTo",
+	"transition",
+	"customProps",
+	"keepMounted",
+	"hideBackdrop",
+	"closeOnEscape",
+	"ariaLabelledBy",
+	"closeOnOverlay",
+	"disableScrollLock",
+	"disableEnforceFocus",
+	"disableRestoreFocus"
+];
+function _(_, ge, v = {}) {
+	let _e = o(), y = i(!1), b = i(!1), x = i(""), S = 0, C = null, w = null, T = i(null), E = null, D = i(l), O = null, k = i("closed"), A = null, j = n(() => a(v.show ?? !1));
+	function M(e) {
+		e || v.onClose?.(), v.show && (v.show.value = e), v.onShowChange?.(e);
+	}
+	let N = n(() => h({
+		bridgeKeys: he,
+		props: {
+			..._e,
+			..._
+		}
+	})), { merged: P, entry: F } = ee({
+		libDefaults: ge,
+		componentName: "Drawer",
+		props: () => N.value.componentProps
+	}), I = n(() => P.value.customProps), L = te({
+		entry: F,
+		props: () => N.value.componentProps
+	}), R = n(() => m(P.value.transition ?? "none")), z = n(() => le(R.value)), B = n(() => P.value.scroll ?? "paper"), V = n(() => P.value.keepMounted && !y.value), H = n(() => P.value.placement ?? "left"), U = n(() => H.value === "left" || H.value === "right" ? "horizontal" : "vertical"), ve = n(() => c(f(pe, F.value?.customProps?.placement), H.value)), ye = n(() => c(fe, H.value)), be = n(() => c(f(de, F.value?.customProps?.blur), P.value.blur)), xe = n(() => c(f(me, F.value?.customProps?.size), [P.value.size, U.value])), Se = n(() => oe(R.value)), Ce = n(() => se(R.value, H.value)), W = n(() => !P.value.persistent), we = n(() => N.value.inheritedAttrs), Te = n(() => e(I.value?.root, we.value, {
+		onTransitionend: je,
+		style: { zIndex: D.value },
+		"aria-hidden": V.value ? !0 : void 0,
+		class: u({
+			"fixed inset-0": !0,
+			"overflow-y-auto": B.value === "body",
+			"overflow-hidden": B.value === "paper",
+			"invisible pointer-events-none": V.value,
+			[c(L.value, "root") ?? ""]: !0
+		})
+	})), Ee = n(() => e(I.value?.overlay, { onClick: Z }, {
+		"data-drawer-part": "overlay",
+		"data-state": k.value,
+		class: u({
+			"fixed inset-0 bg-black/50": !0,
+			[be.value ?? ""]: !0,
+			[Se.value]: z.value,
+			[c(L.value, "overlay") ?? ""]: !0
+		})
+	})), De = n(() => e(I.value?.wrapper, { onClick: Q }, u({
+		"flex min-h-full w-full transform": !0,
+		[ve.value ?? ""]: !0,
+		[c(L.value, "wrapper") ?? ""]: !0
+	}))), Oe = n(() => e(I.value?.panel, {
+		role: "dialog",
+		"aria-modal": !0,
+		"aria-label": P.value.ariaLabel,
+		"aria-labelledby": P.value.ariaLabelledBy
+	}, {
+		"data-drawer-part": "panel",
+		"data-state": k.value,
+		class: u({
+			"relative rounded-none": !0,
+			[ye.value ?? ""]: !0,
+			[xe.value ?? ""]: !0,
+			"overflow-y-auto": B.value === "paper",
+			[Ce.value]: z.value,
+			[c(L.value, "panel") ?? ""]: !0
+		})
+	}));
+	function G() {
+		w?.release(), w = null;
+	}
+	function K() {
+		if (!y.value || k.value !== "open" || !T.value) {
+			G();
+			return;
+		}
+		G(), w = ae({
+			container: T.value,
+			disableAutoFocus: !P.value.autoFocus,
+			disableEnforceFocus: P.value.disableEnforceFocus,
+			disableRestoreFocus: P.value.disableRestoreFocus
+		});
+	}
+	function ke(e) {
+		T.value = t(e), K();
+	}
+	function q() {
+		A !== null && (clearTimeout(A), A = null);
+	}
+	function J() {
+		q(), S = 0, y.value = !1, G(), j.value ? M(!1) : v.onShowChange?.(!1), k.value = "closed", P.value.keepMounted || (b.value = !1);
+	}
+	function Y() {
+		if (E?.releaseScrollLock(), !z.value) {
+			J();
+			return;
+		}
+		if (k.value = "closed", S = d(R.value, { hideBackdrop: P.value.hideBackdrop }), S === 0) {
+			J();
+			return;
+		}
+		q(), A = setTimeout(() => {
+			A = null, S > 0 && J();
+		}, re);
+	}
+	function Ae() {
+		if (!z.value) {
+			k.value = "open";
+			return;
+		}
+		k.value = "closed", r(() => {
+			requestAnimationFrame(() => {
+				k.value = "open";
+			});
+		});
+	}
+	function je(e) {
+		if (!b.value || k.value !== "closed") return;
+		let t = e.target;
+		t?.dataset.drawerPart !== "overlay" && t?.dataset.drawerPart !== "panel" || e.propertyName === "none" || e.elapsedTime === 0 || (--S, S <= 0 && J());
+	}
+	function X() {
+		if (W.value) {
+			if (!z.value) {
+				M(!1);
+				return;
+			}
+			b.value && Y();
+		}
+	}
+	function Z() {
+		P.value.closeOnOverlay === !1 || !W.value || X();
+	}
+	function Q(e) {
+		ue(e) && Z();
+	}
+	function Me() {
+		!j.value || P.value.closeOnEscape === !1 || !W.value || X();
+	}
+	s(j, (e) => {
+		if (e) {
+			b.value = !0, y.value = !0, Ae();
+			return;
+		}
+		b.value && Y();
+	}, { immediate: !0 }), s([
+		y,
+		k,
+		() => P.value.autoFocus,
+		() => P.value.disableEnforceFocus,
+		() => P.value.disableRestoreFocus
+	], () => {
+		r(() => {
+			K();
+		});
+	});
+	function $() {
+		let e = ce(x.value);
+		e && (D.value = e.zIndex);
+	}
+	return s(y, (e) => {
+		if (e) {
+			C === null && (C = ie()), E = p({
+				order: C,
+				id: v.stackId,
+				onEscape: Me,
+				lockScroll: P.value.disableScrollLock !== !0
+			}), x.value = E.id, D.value = E.zIndex, $(), O = g($);
+			return;
+		}
+		O?.(), O = null, E?.release(), E = null, x.value = "", D.value = l, b.value || (C = null);
+	}, { immediate: !0 }), ne(() => {
+		q(), O?.(), O = null, G(), E?.release(), E = null, C = null;
+	}), {
+		merged: P,
+		mounted: b,
+		rootBind: Te,
+		panelBind: Oe,
+		overlayBind: Ee,
+		wrapperBind: De,
+		setPanelRef: ke,
+		layerStackId: x,
+		handleOverlayClick: Z,
+		handleWrapperClick: Q
+	};
+}
+//#endregion
+export { _ as useDrawer };

package/dist/Components/Drawer/drawer.types.d.ts

@@ -0,0 +1,188 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { DrawerBlur, DrawerPlacement, DrawerScroll, DrawerSize, DrawerTransition, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+export interface DrawerBlurOverrides {}
+export interface DrawerSizeOverrides {}
+export interface DrawerScrollOverrides {}
+export interface DrawerPlacementOverrides {}
+export interface DrawerTransitionOverrides {}
+export interface DrawerClasses {
+    /**
+     * The classes to apply to the overlay.
+     */
+    overlay?: string;
+    /**
+     * The classes to apply to the dialog panel.
+     */
+    panel?: string;
+    /**
+     * The classes to apply to the root portal container.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the placement wrapper.
+     */
+    wrapper?: string;
+}
+export interface DrawerCustomProps {
+    /**
+     * Props forwarded to the overlay.
+     */
+    overlay?: HTMLAttributes;
+    /**
+     * Props forwarded to the dialog panel.
+     */
+    panel?: HTMLAttributes;
+    /**
+     * Props forwarded to the root portal container.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the placement wrapper.
+     */
+    wrapper?: HTMLAttributes;
+}
+export interface DrawerEmits {
+    /**
+     * Emitted when the user dismisses the drawer (overlay or Escape).
+     * Not emitted when the parent sets `v-model` to `false` directly.
+     */
+    close: [];
+    /**
+     * Emitted when `show` should change (controlled state).
+     * Listen with `@show-change` / `v-on:show-change`.
+     */
+    "show-change": [show: boolean];
+}
+/**
+ * Drawer shell (overlay, portal, backdrop). Put any content in the default slot.
+ * Visibility is controlled with `v-model` (not listed here — `defineModel` handles it).
+ */
+export interface DrawerOwnProps {
+    /**
+     * Accessible name for the dialog panel (`aria-label`).
+     *
+     * @default undefined
+     */
+    ariaLabel?: string;
+    /**
+     * Id of the element that labels the dialog (`aria-labelledby`). Prefer over `ariaLabel` when a visible title exists.
+     *
+     * @default undefined
+     */
+    ariaLabelledBy?: string;
+    /**
+     * When true, focuses the first focusable element inside the drawer on open.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Backdrop blur on the overlay.
+     *
+     * @default "none"
+     */
+    blur?: MergeProps<DrawerBlur, DrawerBlurOverrides>;
+    /**
+     * The classes to apply to the drawer.
+     *
+     * @default undefined
+     */
+    classes?: DrawerClasses;
+    /**
+     * Whether the drawer closes on escape key press.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the drawer closes on overlay click.
+     *
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * Props forwarded to each drawer part.
+     *
+     * @default undefined
+     */
+    customProps?: DrawerCustomProps;
+    /**
+     * When true, focus is not trapped inside the drawer while open.
+     *
+     * @default false
+     */
+    disableEnforceFocus?: boolean;
+    /**
+     * When true, focus is not restored to the previously focused element on close.
+     *
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * When true, body scroll is not locked while the drawer is open.
+     *
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * When true, the backdrop overlay is not rendered.
+     *
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * When true, the drawer stays mounted in the DOM after closing (hidden).
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * When true, escape and overlay clicks do not close the drawer.
+     *
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Edge the panel docks to.
+     *
+     * @default "left"
+     */
+    placement?: MergeProps<DrawerPlacement, DrawerPlacementOverrides>;
+    /**
+     * Where scroll happens: the page (`body`) or the drawer panel (`paper`).
+     *
+     * @default "paper"
+     */
+    scroll?: MergeProps<DrawerScroll, DrawerScrollOverrides>;
+    /**
+     * Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`).
+     *
+     * @default "md"
+     */
+    size?: MergeProps<DrawerSize, DrawerSizeOverrides>;
+    /**
+     * Stack id assigned when the drawer opens. Set by BridgeDrawerHost; do not set in app code.
+     *
+     * @internal
+     */
+    stackId?: string;
+    /**
+     * Where to teleport the drawer. Pass `false` to render in place.
+     *
+     * @default "body"
+     */
+    teleportTo?: false | string;
+    /**
+     * Enter/leave animation for overlay and panel.
+     *
+     * @default "slide"
+     */
+    transition?: MergeProps<DrawerTransition, DrawerTransitionOverrides>;
+}
+export interface DrawerSlots {
+    /**
+     * Drawer content.
+     */
+    default?: Slot<undefined>;
+}
+export type DrawerProps = MergeHtmlProps<DrawerOwnProps, HTMLAttributes>;

package/dist/Components/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { useDrawer } from './composables/useDrawer';
+export type { DrawerOptions } from './composables/useDrawer';
+export type { DrawerBlurOverrides, DrawerClasses, DrawerCustomProps, DrawerEmits, DrawerOwnProps, DrawerPlacementOverrides, DrawerProps, DrawerScrollOverrides, DrawerSizeOverrides, DrawerSlots, DrawerTransitionOverrides, } from './drawer.types';
+export { default as Drawer } from './Drawer.vue';

package/dist/Components/Drawer/index.js

@@ -0,0 +1,3 @@
+import { useDrawer as e } from "./composables/useDrawer.js";
+import t from "./Drawer.js";
+export { t as Drawer, e as useDrawer };

package/dist/Components/FormControl/formControl.types.d.ts

@@ -173,26 +173,26 @@ export interface FormControlSlots {
     /**
      * The form control (checkbox, radio, switch, …).
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Helper text below the control row (hidden when invalid).
      */
-    description?: Slot;
+    description?: Slot<undefined>;
     /**
      * Inline-end label after the main label.
      */
-    endLabel?: Slot;
+    endLabel?: Slot<undefined>;
     /**
      * Custom error message content.
      */
-    errorMessage?: Slot;
+    errorMessage?: Slot<undefined>;
     /**
      * Main label next to the control.
      */
-    mainLabel?: Slot;
+    mainLabel?: Slot<undefined>;
     /**
      * Inline-start label before the control.
      */
-    startLabel?: Slot;
+    startLabel?: Slot<undefined>;
 }
 export type FormControlProps = MergeHtmlProps<FormControlOwnProps, HTMLAttributes>;

package/dist/Components/FormField/formField.types.d.ts

@@ -263,32 +263,32 @@ export interface FormFieldSlots {
     /**
      * Slot at the inline end of the header row (secondary label).
      */
-    corner?: Slot;
+    corner?: Slot<undefined>;
     /**
      * The form control (input, textarea, select trigger, etc.).
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Helper text below the control (hidden when the field is invalid).
      */
-    description?: Slot;
+    description?: Slot<undefined>;
     /**
      * Inline-end slot for custom content (e.g. a `Button`). Prefer the `end` prop
      * for plain suffix text.
      */
-    end?: Slot;
+    end?: Slot<undefined>;
     /**
      * Custom error message content.
      */
-    errorMessage?: Slot;
+    errorMessage?: Slot<undefined>;
     /**
      * Slot at the inline start of the header row (primary label).
      */
-    label?: Slot;
+    label?: Slot<undefined>;
     /**
      * Inline-start slot for custom content (e.g. a `Button`). Prefer the `start`
      * prop for plain prefix text.
      */
-    start?: Slot;
+    start?: Slot<undefined>;
 }
 export type FormFieldProps = MergeHtmlProps<FormFieldOwnProps, HTMLAttributes>;

package/dist/Components/Label/label.types.d.ts

@@ -47,6 +47,6 @@ export interface LabelSlots {
     /**
      * Label content.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
 }
 export type LabelProps = MergeHtmlProps<LabelOwnProps, HTMLAttributes>;

package/dist/Components/Link/link.types.d.ts

@@ -100,14 +100,14 @@ export interface LinkSlots {
     /**
      * Content after the label (inline end).
      */
-    append?: Slot;
+    append?: Slot<undefined>;
     /**
      * The link label.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Content before the label (inline start).
      */
-    prepend?: Slot;
+    prepend?: Slot<undefined>;
 }
 export type LinkProps = MergeHtmlProps<LinkOwnProps, AnchorHTMLAttributes>;

package/dist/Components/List/composables/useList.js

@@ -30,7 +30,7 @@ function f(f) {
 	return {
 		merged: h,
 		rootBind: i(() => e(_.value?.root, y.value, l({
-			"m-0 list-none py-2": !0,
+			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[s(v.value, "root") ?? ""]: !0
 		})))

package/dist/Components/List/list.types.d.ts

@@ -13,7 +13,7 @@ export interface ListCustomProps {
     root?: HTMLAttributes;
 }
 /**
- * Vertical list container (MUI `List`-like). Use with `ListItem` and `ListSection`.
+ * Vertical list container. Use with `ListItem` and `ListSection`.
  */
 export interface ListOwnProps {
     /**

package/dist/Components/ListItem/composables/useListItem.js

@@ -56,7 +56,7 @@ function C(t, n, C) {
 	}), B = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : T ? p(T).dense : !1), V = l(() => e(C, "primary") || e(C, "default") || !!k.value.primary), H = l(() => e(C, "secondary") || !!k.value.secondary), U = l(() => e(C, "start")), W = l(() => P.value ? !F.value || !j.value?.showCheckmark ? null : x : !k.value.selected || _(k.value.selectedIcon) ? null : k.value.selectedIcon ?? x), G = l(() => e(C, "end") || W.value != null), K = l(() => v(O.value.inheritedAttrs, [])), q = l(() => r(R.value?.root, K.value, {
 		class: y({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0": k.value.divider,
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": k.value.divider,
 			[g(z.value, "root") ?? ""]: !0
 		}),
 		id: P.value && j.value?.listboxId && I.value >= 0 ? s(j.value.listboxId, I.value) : void 0
@@ -73,13 +73,13 @@ function C(t, n, C) {
 			M.value && j.value?.onSelect(M.value);
 		} : void 0,
 		class: y({
-			"flex w-full min-w-0 items-center gap-x-3 text-left outline-hidden transition-colors": !0,
+			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
 			"cursor-pointer select-none": !k.value.disabled,
 			"px-4": !0,
 			"py-2": !B.value,
 			"py-1.5": B.value,
-			"hover:bg-black/5 focus-visible:bg-black/5": !k.value.disabled && !P.value,
-			"bg-primary-50 text-primary-700": k.value.selected && !P.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !k.value.disabled && !P.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": k.value.selected && !P.value,
 			[j.value?.optionSelectedClass ?? ""]: P.value && F.value,
 			[j.value?.mergedClasses.optionSelected ?? ""]: P.value && F.value,
 			[j.value?.optionHighlightedClass ?? ""]: P.value && L.value && !F.value,
@@ -90,17 +90,17 @@ function C(t, n, C) {
 		})
 	}) : null), Y = l(() => y({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"items-center": !k.value.interactive,
+		"items-center text-dark-900 dark:text-dark-100": !k.value.interactive,
 		"px-4": !k.value.interactive,
 		"py-2": !k.value.interactive && !B.value,
 		"py-1.5": !k.value.interactive && B.value
 	})), X = l(() => r(R.value?.start, {}, y({
-		"flex shrink-0": !0,
+		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
 		[g(z.value, "start") ?? ""]: !0
 	}))), Z = l(() => r(R.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
 		[g(z.value, "content") ?? ""]: !0
-	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
+	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
 	return {
 		merged: k,
 		hasEnd: G,

package/dist/Components/ListItem/listItem.types.d.ts

@@ -71,7 +71,7 @@ export interface ListItemCustomProps {
     start?: HTMLAttributes;
 }
 /**
- * List row (MUI `ListItem` / `ListItemButton`-like).
+ * List row.
  */
 export interface ListItemOwnProps {
     /**

package/dist/Components/ListSection/composables/useListSection.js

@@ -32,13 +32,13 @@ function m(m, h) {
 		merged: y,
 		rootBind: a(() => t(x.value?.root, T.value, d({
 			"list-none": !0,
-			"sticky top-0 z-10 bg-white dark:bg-dark-950": y.value.sticky && !E.value,
+			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
 			[l(S.value, "root") ?? ""]: !0
 		}))),
 		titleBind: a(() => t(x.value?.title, {}, {
 			role: "presentation",
 			class: d({
-				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-950 dark:text-dark-400": !0,
+				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
 				"sticky top-0 z-10": y.value.sticky && E.value,
 				"py-2": !C.value,
 				"py-1.5": C.value,

package/dist/Components/ListSection/listSection.types.d.ts

@@ -22,7 +22,7 @@ export interface ListSectionCustomProps {
 }
 export type ListSectionLabel = VNode | string | VNode[] | undefined;
 /**
- * Section heading inside a `List` (MUI `ListSubheader`-like).
+ * Section heading inside a `List`.
  */
 export interface ListSectionOwnProps {
     /**