@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/app-shell/AppShell.js

@@ -0,0 +1,689 @@
+"use client";
+import { usePortalContainer } from "../../utils/portal.js";
+import { cx } from "../../utils/cx.js";
+import { createPrimitive } from "../../utils/primitive.js";
+import { ChevronLeftIcon, MenuIcon, XIcon } from "../../icons/index.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/app-shell/AppShell.tsx
+var NavbarCollapsedContext = React.createContext(false);
+var NavbarDrawerContext = React.createContext(false);
+function Navbar(t0) {
+	const $ = c(29);
+	const { variant: t1, collapsible: t2, collapsed: collapsedProp, defaultCollapsed: t3, onCollapsedChange, expandOnHover: t4, collapseLabel: t5, expandLabel: t6, render, children, ref, ...props } = t0;
+	const variant = t1 === void 0 ? "inverse" : t1;
+	const collapsible = t2 === void 0 ? true : t2;
+	const defaultCollapsed = t3 === void 0 ? false : t3;
+	const expandOnHover = t4 === void 0 ? true : t4;
+	const collapseLabel = t5 === void 0 ? "Collapse" : t5;
+	const expandLabel = t6 === void 0 ? "Expand" : t6;
+	const inDrawer = React.useContext(NavbarDrawerContext);
+	const canCollapse = collapsible && !inDrawer;
+	const [internal, setInternal] = React.useState(defaultCollapsed);
+	const collapsed = canCollapse && (collapsedProp ?? internal);
+	const label = collapsed ? expandLabel : collapseLabel;
+	const [pointerInside, setPointerInside] = React.useState(false);
+	const [hovered, setHovered] = React.useState(false);
+	let t7;
+	let t8;
+	if ($[0] !== pointerInside) {
+		t7 = () => {
+			if (!pointerInside) return;
+			const timer = setTimeout(() => setHovered(true), 120);
+			return () => clearTimeout(timer);
+		};
+		t8 = [pointerInside];
+		$[0] = pointerInside;
+		$[1] = t7;
+		$[2] = t8;
+	} else {
+		t7 = $[1];
+		t8 = $[2];
+	}
+	React.useEffect(t7, t8);
+	const peek = collapsed && expandOnHover && hovered;
+	let t9;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => {
+			setPointerInside(false);
+			setHovered(false);
+		};
+		$[3] = t9;
+	} else t9 = $[3];
+	const endHover = t9;
+	let t10;
+	if ($[4] !== collapsed || $[5] !== collapsedProp || $[6] !== onCollapsedChange) {
+		t10 = () => {
+			endHover();
+			if (collapsedProp === void 0) setInternal(!collapsed);
+			onCollapsedChange?.(!collapsed);
+		};
+		$[4] = collapsed;
+		$[5] = collapsedProp;
+		$[6] = onCollapsedChange;
+		$[7] = t10;
+	} else t10 = $[7];
+	const toggle = t10;
+	let t11;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (event) => {
+			if (event.pointerType === "mouse") setPointerInside(true);
+		};
+		$[8] = t11;
+	} else t11 = $[8];
+	const onPointerEnter = t11;
+	const t12 = collapsed && !peek;
+	let t13;
+	if ($[9] !== peek || $[10] !== t12 || $[11] !== variant) {
+		t13 = {
+			variant,
+			collapsed: t12,
+			peek
+		};
+		$[9] = peek;
+		$[10] = t12;
+		$[11] = variant;
+		$[12] = t13;
+	} else t13 = $[12];
+	const state = t13;
+	const t14 = "nav";
+	let t15;
+	if ($[13] !== canCollapse || $[14] !== collapsed || $[15] !== label || $[16] !== toggle) {
+		t15 = canCollapse && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "oui-navbar__toggle",
+			"aria-label": label,
+			"aria-expanded": !collapsed,
+			title: label,
+			onClick: toggle,
+			children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+		});
+		$[13] = canCollapse;
+		$[14] = collapsed;
+		$[15] = label;
+		$[16] = toggle;
+		$[17] = t15;
+	} else t15 = $[17];
+	let t16;
+	if ($[18] !== children || $[19] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t15, children] });
+		$[18] = children;
+		$[19] = t15;
+		$[20] = t16;
+	} else t16 = $[20];
+	const t17 = mergeProps({
+		className: "oui-navbar",
+		onPointerEnter: collapsed && expandOnHover ? onPointerEnter : void 0,
+		onPointerLeave: collapsed && expandOnHover ? endHover : void 0,
+		children: t16
+	}, props);
+	let t18;
+	if ($[21] !== ref || $[22] !== render || $[23] !== state || $[24] !== t17) {
+		t18 = {
+			defaultTagName: t14,
+			render,
+			ref,
+			state,
+			props: t17
+		};
+		$[21] = ref;
+		$[22] = render;
+		$[23] = state;
+		$[24] = t17;
+		$[25] = t18;
+	} else t18 = $[25];
+	const element = useRender(t18);
+	const t19 = collapsed && !peek;
+	let t20;
+	if ($[26] !== element || $[27] !== t19) {
+		t20 = /* @__PURE__ */ jsx(NavbarCollapsedContext, {
+			value: t19,
+			children: element
+		});
+		$[26] = element;
+		$[27] = t19;
+		$[28] = t20;
+	} else t20 = $[28];
+	return t20;
+}
+var NavbarHeader = createPrimitive("div", "oui-navbar__header", "NavbarHeader");
+var NavbarFooter = createPrimitive("div", "oui-navbar__footer", "NavbarFooter");
+var NavbarSection = createPrimitive("div", "oui-navbar__section", "NavbarSection");
+var NavbarSectionLabel = createPrimitive("div", "oui-navbar__section-label", "NavbarSectionLabel");
+function NavbarBrand(t0) {
+	const $ = c(23);
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		const { logo, title, subtitle, render, ref, ...props } = t0;
+		t5 = useRender;
+		t1 = "div";
+		t2 = render;
+		t3 = ref;
+		let t6;
+		if ($[6] !== logo) {
+			t6 = logo && /* @__PURE__ */ jsx("span", {
+				className: "oui-navbar__logo",
+				children: logo
+			});
+			$[6] = logo;
+			$[7] = t6;
+		} else t6 = $[7];
+		let t7;
+		if ($[8] !== title) {
+			t7 = /* @__PURE__ */ jsx("span", {
+				className: "oui-navbar__brand-title",
+				children: title
+			});
+			$[8] = title;
+			$[9] = t7;
+		} else t7 = $[9];
+		let t8;
+		if ($[10] !== subtitle) {
+			t8 = subtitle && /* @__PURE__ */ jsx("span", {
+				className: "oui-navbar__brand-subtitle",
+				children: subtitle
+			});
+			$[10] = subtitle;
+			$[11] = t8;
+		} else t8 = $[11];
+		let t9;
+		if ($[12] !== t7 || $[13] !== t8) {
+			t9 = /* @__PURE__ */ jsxs("span", {
+				className: "oui-navbar__brand-text",
+				children: [t7, t8]
+			});
+			$[12] = t7;
+			$[13] = t8;
+			$[14] = t9;
+		} else t9 = $[14];
+		let t10;
+		if ($[15] !== t6 || $[16] !== t9) {
+			t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t9] });
+			$[15] = t6;
+			$[16] = t9;
+			$[17] = t10;
+		} else t10 = $[17];
+		t4 = mergeProps({
+			className: "oui-navbar__brand",
+			children: t10
+		}, props);
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[18] !== t1 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
+		t6 = {
+			defaultTagName: t1,
+			render: t2,
+			ref: t3,
+			props: t4
+		};
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t6;
+	} else t6 = $[22];
+	return t5(t6);
+}
+/**
+* Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a
+* router link or `render={<button />}` for an action.
+*/
+function NavbarItem(t0) {
+	const $ = c(17);
+	const { icon, active: t1, badge, render, children, ref, ...props } = t0;
+	const active = t1 === void 0 ? false : t1;
+	const collapsed = React.useContext(NavbarCollapsedContext);
+	let t2;
+	if ($[0] !== active) {
+		t2 = { active };
+		$[0] = active;
+		$[1] = t2;
+	} else t2 = $[1];
+	const state = t2;
+	const t3 = "a";
+	let t4;
+	if ($[2] !== icon) {
+		t4 = icon && /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-icon",
+			children: icon
+		});
+		$[2] = icon;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-label",
+			children
+		});
+		$[4] = children;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== badge) {
+		t6 = badge != null && /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-badge",
+			children: badge
+		});
+		$[6] = badge;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t4,
+			t5,
+			t6
+		] });
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	const t8 = mergeProps({
+		className: "oui-navbar__item",
+		"aria-current": active ? "page" : void 0,
+		title: collapsed && typeof children === "string" ? children : void 0,
+		children: t7
+	}, props);
+	let t9;
+	if ($[12] !== ref || $[13] !== render || $[14] !== state || $[15] !== t8) {
+		t9 = {
+			defaultTagName: t3,
+			render,
+			ref,
+			state,
+			props: t8
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = state;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	return useRender(t9);
+}
+/**
+* Full-height layout with a fixed navbar and an internally scrolling main
+* area. Below 900px the navbar moves into a slide-in drawer.
+* Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
+*/
+function AppShell(t0) {
+	const $ = c(48);
+	let children;
+	let className;
+	let mainProps;
+	let mobileActions;
+	let mobileBrand;
+	let navbar;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({navbar, mobileBrand, mobileActions, menuLabel: t1, mainProps, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = mainProps;
+		$[4] = mobileActions;
+		$[5] = mobileBrand;
+		$[6] = navbar;
+		$[7] = props;
+		$[8] = ref;
+		$[9] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		mainProps = $[3];
+		mobileActions = $[4];
+		mobileBrand = $[5];
+		navbar = $[6];
+		props = $[7];
+		ref = $[8];
+		t1 = $[9];
+	}
+	const menuLabel = t1 === void 0 ? "Open navigation" : t1;
+	const [open, setOpen] = React.useState(false);
+	const container = usePortalContainer();
+	let t2;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (event) => {
+			if (event.target.closest("a, .oui-navbar__item")) setOpen(false);
+		};
+		$[10] = t2;
+	} else t2 = $[10];
+	const closeOnNavigate = t2;
+	let t3;
+	if ($[11] !== className) {
+		t3 = cx("oui-app-shell", className);
+		$[11] = className;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== navbar) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "oui-app-shell__navbar",
+			children: navbar
+		});
+		$[13] = navbar;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(MenuIcon, {});
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== menuLabel) {
+		t6 = /* @__PURE__ */ jsx(Dialog.Trigger, {
+			className: "oui-app-shell__menu-button",
+			"aria-label": menuLabel,
+			children: t5
+		});
+		$[16] = menuLabel;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== mobileBrand) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "oui-app-shell__mobile-brand",
+			children: mobileBrand
+		});
+		$[18] = mobileBrand;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== mobileActions || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("header", {
+			className: "oui-app-shell__mobile-bar",
+			children: [
+				t6,
+				t7,
+				mobileActions
+			]
+		});
+		$[20] = mobileActions;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oui-dialog__backdrop" });
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Dialog.Close, {
+			className: "oui-app-shell__drawer-close",
+			"aria-label": "Close navigation",
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		});
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== navbar) {
+		t11 = /* @__PURE__ */ jsxs(Dialog.Popup, {
+			className: "oui-app-shell__drawer",
+			"aria-label": "Navigation",
+			onClick: closeOnNavigate,
+			children: [t10, /* @__PURE__ */ jsx(NavbarDrawerContext, {
+				value: true,
+				children: navbar
+			})]
+		});
+		$[26] = navbar;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== container || $[29] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [t9, t11]
+		});
+		$[28] = container;
+		$[29] = t11;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== open || $[32] !== t12 || $[33] !== t8) {
+		t13 = /* @__PURE__ */ jsxs(Dialog.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [t8, t12]
+		});
+		$[31] = open;
+		$[32] = t12;
+		$[33] = t8;
+		$[34] = t13;
+	} else t13 = $[34];
+	const t14 = mainProps?.className;
+	let t15;
+	if ($[35] !== t14) {
+		t15 = cx("oui-app-shell__main", t14);
+		$[35] = t14;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== children || $[38] !== mainProps || $[39] !== t15) {
+		t16 = /* @__PURE__ */ jsx("main", {
+			...mainProps,
+			className: t15,
+			children
+		});
+		$[37] = children;
+		$[38] = mainProps;
+		$[39] = t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	let t17;
+	if ($[41] !== props || $[42] !== ref || $[43] !== t13 || $[44] !== t16 || $[45] !== t3 || $[46] !== t4) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t13,
+				t16
+			]
+		});
+		$[41] = props;
+		$[42] = ref;
+		$[43] = t13;
+		$[44] = t16;
+		$[45] = t3;
+		$[46] = t4;
+		$[47] = t17;
+	} else t17 = $[47];
+	return t17;
+}
+function PageHeader(t0) {
+	const $ = c(32);
+	let actions;
+	let breadcrumbs;
+	let className;
+	let description;
+	let eyebrow;
+	let props;
+	let ref;
+	let title;
+	if ($[0] !== t0) {
+		({breadcrumbs, eyebrow, title, description, actions, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = actions;
+		$[2] = breadcrumbs;
+		$[3] = className;
+		$[4] = description;
+		$[5] = eyebrow;
+		$[6] = props;
+		$[7] = ref;
+		$[8] = title;
+	} else {
+		actions = $[1];
+		breadcrumbs = $[2];
+		className = $[3];
+		description = $[4];
+		eyebrow = $[5];
+		props = $[6];
+		ref = $[7];
+		title = $[8];
+	}
+	let t1;
+	if ($[9] !== className) {
+		t1 = cx("oui-page-header", className);
+		$[9] = className;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== breadcrumbs) {
+		t2 = breadcrumbs && /* @__PURE__ */ jsx("div", {
+			className: "oui-page-header__breadcrumbs",
+			children: breadcrumbs
+		});
+		$[11] = breadcrumbs;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== eyebrow) {
+		t3 = eyebrow && /* @__PURE__ */ jsx("span", {
+			className: "oui-eyebrow",
+			children: eyebrow
+		});
+		$[13] = eyebrow;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== title) {
+		t4 = /* @__PURE__ */ jsx("h1", {
+			className: "oui-page-header__title",
+			children: title
+		});
+		$[15] = title;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== description) {
+		t5 = description && /* @__PURE__ */ jsx("p", {
+			className: "oui-page-header__description",
+			children: description
+		});
+		$[17] = description;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-page-header__text",
+			children: [
+				t2,
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[24] !== actions) {
+		t7 = actions && /* @__PURE__ */ jsx("div", {
+			className: "oui-page-header__actions",
+			children: actions
+		});
+		$[24] = actions;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== props || $[27] !== ref || $[28] !== t1 || $[29] !== t6 || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("header", {
+			ref,
+			className: t1,
+			...props,
+			children: [t6, t7]
+		});
+		$[26] = props;
+		$[27] = ref;
+		$[28] = t1;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
+}
+/** Responsive dashboard grid. */
+function Grid(t0) {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({columns: t1, gap: t2, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const columns = t1 === void 0 ? 3 : t1;
+	const gap = t2 === void 0 ? "md" : t2;
+	let t3;
+	if ($[6] !== className) {
+		t3 = cx("oui-grid", className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== columns || $[9] !== gap || $[10] !== props || $[11] !== ref || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t3,
+			"data-columns": columns,
+			"data-gap": gap,
+			...props
+		});
+		$[8] = columns;
+		$[9] = gap;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+//#endregion
+export { AppShell, Grid, Navbar, NavbarBrand, NavbarFooter, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, PageHeader };
+
+//# sourceMappingURL=AppShell.js.map