@optiaxiom/react 3.4.3 → 3.5.0

package/dist/cjs/menu.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_menu = require("./menu-BpIoYUbA.js");
+exports.Menu = require_menu.Menu;
+exports.MenuContent = require_menu.MenuContent;
+exports.MenuTrigger = require_menu.MenuTrigger;

package/dist/cjs/modal.js

@@ -0,0 +1,55 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let react_remove_scroll = require("react-remove-scroll");
+let _radix_ui_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
+let _radix_ui_react_focus_guards = require("@radix-ui/react-focus-guards");
+let _radix_ui_react_focus_scope = require("@radix-ui/react-focus-scope");
+//#region src/modal/ModalLayer.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/ModalLayer");
+/**
+* `ModalLayer` is a helper component intended to wrap components that are
+* rendered inside portals inside other dialogs or popovers.
+*
+* @since 0.7.8
+*/
+const ModalLayer = (0, react.forwardRef)(({ asChild, children, ...props }, outerRef) => {
+	const { shardRef } = (0, _optiaxiom_globals.useModalContext)("@optiaxiom/react/ModalLayer");
+	const [locked] = (0, react.useState)(() => document.body.dataset.scrollLocked);
+	const [guards] = (0, react.useState)(() => document.querySelector("[data-radix-focus-guard]"));
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	if (!shardRef.current) return asChild ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+		ref,
+		...props,
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	let result = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dismissable_layer.DismissableLayer, {
+		asChild,
+		ref,
+		...props,
+		children
+	});
+	if (locked) result = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
+		allowPinchZoom: true,
+		as: Slot,
+		shards: [shardRef],
+		children: result
+	});
+	if (guards) result = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_focus_guards.FocusGuards, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_focus_scope.FocusScope, {
+		onMountAutoFocus: (event) => event.preventDefault(),
+		onUnmountAutoFocus: (event) => event.preventDefault(),
+		children: result
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_globals.ModalProvider, {
+		shardRef: innerRef,
+		children: result
+	});
+});
+ModalLayer.displayName = "@optiaxiom/react/ModalLayer";
+//#endregion
+exports.ModalLayer = ModalLayer;

package/dist/cjs/nav-CoWC9NtP.js

@@ -0,0 +1,506 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_separator = require("./separator-DYd80dzd.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+const require_avatar = require("./avatar-QYjj8itt.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+const require_disclosure = require("./disclosure-UB_3FG5z.js");
+const require_SidebarContext = require("./SidebarContext-BgFk7dXx.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/ButtonGroup.css.ts.vanilla-Big2-ymt.css");
+require("./assets/ButtonRoot.css.ts.vanilla-BkvixQWK.css");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _optiaxiom_icons_IconEllipsisStroke = require("@optiaxiom/icons/IconEllipsisStroke");
+require("./assets/Nav.css.ts.vanilla-ROii1y8m.css");
+require("./assets/NavAccountItem.css.ts.vanilla-C20LZWOQ.css");
+require("./assets/NavItem.css.ts.vanilla-H9KFZHf8.css");
+//#region src/nav/Nav.css.ts
+var nav = require_recipeRuntime.recipeRuntime({ base: [{
+	bg: "bg.default",
+	flex: "1",
+	flexDirection: "column",
+	gap: "0",
+	overflow: "hidden",
+	pb: "8",
+	pt: "16"
+}, "czla5v"] });
+//#endregion
+//#region src/nav/Nav.tsx
+/**
+* Primary navigation menu that includes support for branding, links, and other navigation items.
+*
+* @group Sidebar
+* @since 0.4.0
+*/
+const Nav = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { expanded, navId } = require_SidebarContext.useSidebarContext("@optiaxiom/react/Nav");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		flexDirection: "column",
+		gap: "16",
+		h: "full",
+		ref,
+		w: "fit",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+			asChild: true,
+			id: navId,
+			w: expanded ? "224" : "56",
+			...nav(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				"aria-label": "Main",
+				children
+			})
+		})
+	});
+});
+Nav.displayName = "@optiaxiom/react/Nav";
+//#endregion
+//#region src/nav/NavAccountItem.css.ts
+var item$1 = require_recipeRuntime.recipeRuntime({
+	base: {
+		flex: "1",
+		fontSize: "md",
+		gap: "8",
+		overflowX: "hidden",
+		transition: "opacity"
+	},
+	variants: { expanded: {
+		false: "_1q6gv0i",
+		true: "_1hsjlom"
+	} }
+});
+//#endregion
+//#region src/nav/NavAccountItem.tsx
+/**
+* @group Sidebar
+*/
+const NavAccountItem = (0, react.forwardRef)(({ name, organization, src, ...props }, ref) => {
+	const { expanded } = require_SidebarContext.useSidebarContext("@optiaxiom/react/NavAccountItem");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		asChild: true,
+		flexDirection: "column",
+		gap: "16",
+		my: "8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+			asChild: true,
+			gap: "8",
+			p: "4",
+			textAlign: "start",
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				ref,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+					"aria-hidden": true,
+					flex: "none",
+					my: "2",
+					name,
+					rounded: "sm",
+					src
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+					...item$1({ expanded: Boolean(expanded) }),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+						flex: "1",
+						flexDirection: "column",
+						gap: "0",
+						overflowX: "hidden",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+							color: "fg.default",
+							fontWeight: "500",
+							truncate: true,
+							children: name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+							color: "fg.tertiary",
+							fontSize: "sm",
+							truncate: true,
+							children: organization
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconEllipsisStroke.IconEllipsisStroke, {})
+					})]
+				})]
+			})
+		}) })
+	});
+});
+NavAccountItem.displayName = "@optiaxiom/react/NavAccountItem";
+//#endregion
+//#region src/nav/NavBody.css.ts
+var body = require_recipeRuntime.recipeRuntime({
+	base: [{
+		flex: "1",
+		flexDirection: "column",
+		gap: "4",
+		justifyContent: "flex-start",
+		overflowX: "hidden",
+		py: "8",
+		w: "full"
+	}],
+	variants: { expanded: {
+		false: { overflowY: "hidden" },
+		true: { overflowY: "auto" }
+	} }
+});
+//#endregion
+//#region src/nav/NavBody.tsx
+/**
+* @group Sidebar
+*/
+const NavBody = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
+	const { expanded, spacing } = require_SidebarContext.useSidebarContext("@optiaxiom/react/NavBody");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		px: spacing,
+		ref,
+		...body({ expanded }, className),
+		...props,
+		children
+	});
+});
+NavBody.displayName = "@optiaxiom/react/NavBody";
+//#endregion
+//#region src/nav/NavFooter.tsx
+/**
+* @group Sidebar
+*/
+const NavFooter = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { spacing } = require_SidebarContext.useSidebarContext("@optiaxiom/react/NavFooter");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		flexDirection: "column",
+		gap: "8",
+		mt: "auto",
+		overflowX: "hidden",
+		px: spacing,
+		py: "8",
+		ref,
+		...props,
+		children
+	});
+});
+NavFooter.displayName = "@optiaxiom/react/NavFooter";
+//#endregion
+//#region src/nav/NavGroupContext.ts
+const [NavGroupProvider, useNavGroupContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/NavGroup", {
+	collapsible: false,
+	id: void 0
+});
+//#endregion
+//#region src/nav/NavGroup.tsx
+/**
+* @extends Disclosure
+* @group Sidebar
+*/
+const NavGroup = (0, react.forwardRef)(({ children, collapsible, defaultOpen = true, onOpenChange, open, ...props }, ref) => {
+	const groupId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		asChild: true,
+		flexDirection: "column",
+		gap: "16",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavGroupProvider, {
+			collapsible,
+			id: groupId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_disclosure.Disclosure, {
+				alignItems: "stretch",
+				"aria-labelledby": props["aria-label"] ? void 0 : groupId,
+				defaultOpen: true,
+				display: "flex",
+				flexDirection: "column",
+				ref,
+				role: "group",
+				...collapsible && {
+					defaultOpen,
+					onOpenChange,
+					open
+				},
+				...props,
+				children
+			})
+		}) })
+	});
+});
+NavGroup.displayName = "@optiaxiom/react/NavGroup";
+//#endregion
+//#region src/nav/NavGroupContent.tsx
+/**
+* @group Sidebar
+*/
+const NavGroupContent = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_disclosure.DisclosureContent, {
+		asChild: true,
+		"data-transition-scale": true,
+		display: "flex",
+		flexDirection: "column",
+		gap: "4",
+		pb: "0",
+		pt: "0",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			ref,
+			children
+		})
+	});
+});
+NavGroupContent.displayName = "@optiaxiom/react/NavGroupContent";
+//#endregion
+//#region src/nav/NavGroupTrigger.tsx
+/**
+* @group Sidebar
+*/
+const NavGroupTrigger = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { collapsible, id } = useNavGroupContext("@optiaxiom/react/NavGroupTrigger");
+	return collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_disclosure.DisclosureTrigger, {
+		chevronPosition: "end",
+		color: "fg.tertiary",
+		fontSize: "sm",
+		h: "sm",
+		id,
+		mb: "4",
+		mt: "8",
+		p: "0",
+		px: "12",
+		ref,
+		w: "auto",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+			fontFamily: "mono",
+			textTransform: "uppercase",
+			children
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		alignItems: "center",
+		color: "fg.tertiary",
+		display: "flex",
+		fontFamily: "mono",
+		fontSize: "sm",
+		h: "sm",
+		id,
+		mb: "4",
+		mt: "8",
+		p: "0",
+		px: "12",
+		ref,
+		textTransform: "uppercase",
+		w: "auto",
+		children
+	});
+});
+NavGroupTrigger.displayName = "@optiaxiom/react/NavGroupTrigger";
+//#endregion
+//#region src/nav/NavHeader.tsx
+/**
+* @group Sidebar
+*/
+const NavHeader = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { spacing } = require_SidebarContext.useSidebarContext("@optiaxiom/react/NavHeader");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		flexDirection: "column",
+		gap: "16",
+		px: spacing,
+		ref,
+		...props,
+		children
+	});
+});
+NavHeader.displayName = "@optiaxiom/react/NavHeader";
+//#endregion
+//#region src/nav/NavItem.css.ts
+var item = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	display: "flex",
+	fontSize: "md",
+	fontWeight: "500",
+	h: "lg",
+	justifyContent: "flex-start",
+	rounded: "md",
+	textAlign: "start",
+	transition: "colors"
+}, "_1tennlo"] });
+var label = require_recipeRuntime.recipeRuntime({
+	base: [{
+		alignItems: "center",
+		display: "flex",
+		flex: "1",
+		gap: "10",
+		justifyContent: "space-between",
+		mr: "10",
+		overflow: "hidden"
+	}, "c48814"],
+	variants: { expanded: {
+		false: "_24pr37",
+		true: "qidsrh"
+	} }
+});
+//#endregion
+//#region src/nav/NavItem.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/NavItem");
+/**
+* @group Sidebar
+*/
+const NavItem = (0, react.forwardRef)(({ active, addonAfter, asChild, children, className, disabled, icon, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	const { expanded } = require_SidebarContext.useSidebarContext("@optiaxiom/react/NavItem");
+	let tooltip = null;
+	children = require_decorateChildren.decorateChildren({
+		asChild,
+		children
+	}, (children) => {
+		tooltip = children;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			display: "grid",
+			flex: "none",
+			placeItems: "center",
+			size: "lg",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Icon, {
+				asChild: true,
+				children: icon
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			flex: "none",
+			size: "12"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_box.Box, {
+			...label({ expanded: Boolean(expanded) }),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+				truncate: true,
+				children
+			}), addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				display: "flex",
+				flex: "none",
+				children: require_button.fallbackSpan(addonAfter)
+			})]
+		})] });
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		asChild: true,
+		flexDirection: "column",
+		gap: "16",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+			content: props["aria-label"] || tooltip,
+			disabled: expanded,
+			side: "right",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				"data-disabled": disabled ? "" : void 0,
+				"data-state": active ? "active" : void 0,
+				...item({}, className),
+				...boxProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+					disabled,
+					ref,
+					...restProps,
+					children
+				})
+			})
+		}) })
+	});
+});
+NavItem.displayName = "@optiaxiom/react/NavItem";
+//#endregion
+//#region src/nav/NavList.tsx
+/**
+* @group Sidebar
+*/
+const NavList = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		display: "flex",
+		flexDirection: "column",
+		gap: "4",
+		p: "0",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			ref,
+			children
+		})
+	});
+});
+NavList.displayName = "@optiaxiom/react/NavList";
+//#endregion
+//#region src/nav/NavSeparator.tsx
+/**
+* @extends Separator
+* @group Sidebar
+*/
+const NavSeparator = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, {
+	flex: "none",
+	mx: "12",
+	my: "8",
+	ref,
+	...props
+}));
+NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
+//#endregion
+Object.defineProperty(exports, "Nav", {
+	enumerable: true,
+	get: function() {
+		return Nav;
+	}
+});
+Object.defineProperty(exports, "NavAccountItem", {
+	enumerable: true,
+	get: function() {
+		return NavAccountItem;
+	}
+});
+Object.defineProperty(exports, "NavBody", {
+	enumerable: true,
+	get: function() {
+		return NavBody;
+	}
+});
+Object.defineProperty(exports, "NavFooter", {
+	enumerable: true,
+	get: function() {
+		return NavFooter;
+	}
+});
+Object.defineProperty(exports, "NavGroup", {
+	enumerable: true,
+	get: function() {
+		return NavGroup;
+	}
+});
+Object.defineProperty(exports, "NavGroupContent", {
+	enumerable: true,
+	get: function() {
+		return NavGroupContent;
+	}
+});
+Object.defineProperty(exports, "NavGroupTrigger", {
+	enumerable: true,
+	get: function() {
+		return NavGroupTrigger;
+	}
+});
+Object.defineProperty(exports, "NavHeader", {
+	enumerable: true,
+	get: function() {
+		return NavHeader;
+	}
+});
+Object.defineProperty(exports, "NavItem", {
+	enumerable: true,
+	get: function() {
+		return NavItem;
+	}
+});
+Object.defineProperty(exports, "NavList", {
+	enumerable: true,
+	get: function() {
+		return NavList;
+	}
+});
+Object.defineProperty(exports, "NavSeparator", {
+	enumerable: true,
+	get: function() {
+		return NavSeparator;
+	}
+});

package/dist/cjs/nav.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_nav = require("./nav-CoWC9NtP.js");
+exports.Nav = require_nav.Nav;
+exports.NavAccountItem = require_nav.NavAccountItem;
+exports.NavBody = require_nav.NavBody;
+exports.NavFooter = require_nav.NavFooter;
+exports.NavGroup = require_nav.NavGroup;
+exports.NavGroupContent = require_nav.NavGroupContent;
+exports.NavGroupTrigger = require_nav.NavGroupTrigger;
+exports.NavHeader = require_nav.NavHeader;
+exports.NavItem = require_nav.NavItem;
+exports.NavList = require_nav.NavList;
+exports.NavSeparator = require_nav.NavSeparator;