@optiaxiom/react 1.9.36 → 1.9.38

package/dist/esm/packages/react/src/menu/MenuSwitchItem.js

@@ -1,48 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '../command/Command.js';
-import '../command/CommandInput.js';
-import { CommandItem } from '../command/CommandItem.js';
-import '../command/CommandListbox.js';
-import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
-import '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import '../listbox/ListboxItemized.js';
-import '../listbox/ListboxLabel.js';
-import '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import { ListboxSwitchItem } from '../listbox/ListboxSwitchItem.js';
-import { useMenuSurface } from './useMenuSurface.js';
-
-const MenuSwitchItem = forwardRef(
-  ({ children, ...props }, ref) => {
-    const Comp = props.item.href ? "a" : "div";
-    const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
-    const track = useMenuSurface();
-    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
-      ListboxSwitchItem,
-      {
-        addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
-        asChild: true,
-        description: resolveItemProperty(props.item.description, {
-          inputValue
-        }),
-        onCheckedChange: () => {
-          if (!resolveItemProperty(props.item.disabledReason)) {
-            track(props.item);
-            props.item.execute?.({ dismiss: false, inputValue });
-          }
-        },
-        children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
-      }
-    ) });
-  }
-);
+import { resolveItemProperty, useCommandContext } from "../command/CommandContext.js";
+import { ListboxSwitchItem } from "../listbox/ListboxSwitchItem.js";
+import { CommandItem } from "../command/CommandItem.js";
+import { useMenuSurface } from "./useMenuSurface.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/MenuSwitchItem.tsx
+const MenuSwitchItem = forwardRef(({ children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
+	const track = useMenuSurface();
+	return /* @__PURE__ */ jsx(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ListboxSwitchItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			onCheckedChange: () => {
+				if (!resolveItemProperty(props.item.disabledReason)) {
+					track(props.item);
+					props.item.execute?.({
+						dismiss: false,
+						inputValue
+					});
+				}
+			},
+			children: /* @__PURE__ */ jsx(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
+});
 MenuSwitchItem.displayName = "@optiaxiom/react/MenuSwitchItem";
-
+//#endregion
 export { MenuSwitchItem };

package/dist/esm/packages/react/src/menu/MenuTrigger.js

@@ -1,66 +1,51 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef } from 'react';
-import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
-import '../dialog/Dialog.js';
-import '../dialog/DialogBody.js';
-import '../dialog/DialogClose.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogFooter.js';
-import '../dialog/DialogForm.js';
-import '../dialog/DialogHeader.js';
-import { DialogTrigger } from '../dialog/DialogTrigger.js';
-import { useFieldLabelTrigger } from '../hooks/useFieldLabelTrigger.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import { PopoverTrigger } from '../popover/PopoverTrigger.js';
-import { useMenuContext } from './MenuContext.js';
-
-const MenuTrigger = forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    asChild,
-    children,
-    onKeyDown,
-    ...props
-  }, outerRef) => {
-    const { setFocusVisible, setOpen, size, triggerRef } = useMenuContext(
-      "@optiaxiom/react/MenuTrigger"
-    );
-    const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
-    const ref = useComposedRefs(outerRef, triggerRef);
-    const id = useId();
-    const labelId = useFieldLabelTrigger(triggerRef, ariaLabelledBy);
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        "aria-labelledby": labelId,
-        asChild: true,
-        id,
-        onKeyDown: (event) => {
-          onKeyDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          switch (event.key) {
-            case "ArrowDown":
-              event.preventDefault();
-              setFocusVisible(true);
-              setOpen(true);
-          }
-        },
-        ref,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
-      }
-    );
-  }
-);
+import { DialogTrigger } from "../dialog/DialogTrigger.js";
+import { AngleMenuButton } from "../angle-menu-button/AngleMenuButton.js";
+import { useFieldLabelTrigger } from "../hooks/useFieldLabelTrigger.js";
+import { PopoverTrigger } from "../popover/PopoverTrigger.js";
+import { useMenuContext } from "./MenuContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/menu/MenuTrigger.tsx
+/**
+* Trigger button for Menu component with automatic chevron icon.
+*
+* Use this as the trigger for Menu dropdowns. By default, renders an
+* AngleMenuButton (button with trailing chevron). Use asChild to customize the
+* trigger button.
+*
+* @example
+* <MenuTrigger asChild><EllipsisMenuButton /></MenuTrigger>
+*
+* @extends Button
+* @group Menu
+*/
+const MenuTrigger = forwardRef(({ "aria-labelledby": ariaLabelledBy, asChild, children, onKeyDown, ...props }, outerRef) => {
+	const { setFocusVisible, setOpen, size, triggerRef } = useMenuContext("@optiaxiom/react/MenuTrigger");
+	const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
+	const ref = useComposedRefs(outerRef, triggerRef);
+	const id = useId();
+	return /* @__PURE__ */ jsx(Comp, {
+		"aria-labelledby": useFieldLabelTrigger(triggerRef, ariaLabelledBy),
+		asChild: true,
+		id,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					setFocusVisible(true);
+					setOpen(true);
+			}
+		},
+		ref,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
+	});
+});
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
-
+//#endregion
 export { MenuTrigger };

package/dist/esm/packages/react/src/menu/useMenuSurface.js

@@ -1,57 +1,33 @@
-import { resolveItemProperty } from '../command/CommandContext.js';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
-import 'react';
-
+import { useSurface } from "../surface/useSurface.js";
+import { resolveItemProperty } from "../command/CommandContext.js";
+import { filterSuggestionsBySurface } from "../surface/filterSuggestionsBySurface.js";
+//#region src/menu/useMenuSurface.ts
+/**
+* Hook to track menu item interactions with surface context.
+* Handles property changes/toggles and accepts matching suggestions.
+*/
 function useMenuSurface() {
-  const surface = useSurface();
-  return (item) => {
-    if (!item.surface || !surface) {
-      return;
-    }
-    const allSuggestions = surface.suggestions?.filter(
-      (s) => s.type === "value"
-    );
-    const itemSurface = item.surface;
-    if (itemSurface.type === "property") {
-      const itemSuggestions = filterSuggestionsBySurface(
-        allSuggestions,
-        surface.path,
-        [
-          {
-            name: itemSurface.name,
-            type: "property"
-          }
-        ]
-      );
-      const matchingSuggestion = itemSuggestions?.find(
-        (s) => s.value === itemSurface.value
-      );
-      if (item.multi || item.switch) {
-        surface.track(
-          {
-            checked: !resolveItemProperty(item.selected),
-            name: "toggled"
-          },
-          [itemSurface]
-        );
-      } else if ("selected" in item) {
-        surface.track(
-          {
-            name: "changed",
-            value: itemSurface.value
-          },
-          [itemSurface]
-        );
-      }
-      if (matchingSuggestion) {
-        surface.accept(matchingSuggestion.id);
-      }
-    } else if (itemSurface.type === "action") {
-      surface.track({ name: "invoked" }, [itemSurface]);
-    }
-  };
+	const surface = useSurface();
+	return (item) => {
+		if (!item.surface || !surface) return;
+		const allSuggestions = surface.suggestions?.filter((s) => s.type === "value");
+		const itemSurface = item.surface;
+		if (itemSurface.type === "property") {
+			const matchingSuggestion = filterSuggestionsBySurface(allSuggestions, surface.path, [{
+				name: itemSurface.name,
+				type: "property"
+			}])?.find((s) => s.value === itemSurface.value);
+			if (item.multi || item.switch) surface.track({
+				checked: !resolveItemProperty(item.selected),
+				name: "toggled"
+			}, [itemSurface]);
+			else if ("selected" in item) surface.track({
+				name: "changed",
+				value: itemSurface.value
+			}, [itemSurface]);
+			if (matchingSuggestion) surface.accept(matchingSuggestion.id);
+		} else if (itemSurface.type === "action") surface.track({ name: "invoked" }, [itemSurface]);
+	};
 }
-
+//#endregion
 export { useMenuSurface };

package/dist/esm/packages/react/src/modal/ModalLayer.js

@@ -1,44 +1,54 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useModalContext, ModalProvider } from '@optiaxiom/globals';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
-import { FocusGuards } from '@radix-ui/react-focus-guards';
-import { FocusScope } from '@radix-ui/react-focus-scope';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef, useState, useRef } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
-
-const Slot$1 = createSlot("@optiaxiom/react/ModalLayer");
-const ModalLayer = forwardRef(
-  ({ asChild, children, ...props }, outerRef) => {
-    const { shardRef } = useModalContext("@optiaxiom/react/ModalLayer");
-    const [locked] = useState(() => document.body.dataset.scrollLocked);
-    const [guards] = useState(
-      () => document.querySelector("[data-radix-focus-guard]")
-    );
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    if (!shardRef.current) {
-      return asChild ? /* @__PURE__ */ jsx(Slot$1, { ref, ...props, children }) : /* @__PURE__ */ jsx(Fragment, { children });
-    }
-    let result = /* @__PURE__ */ jsx(DismissableLayer, { asChild, ref, ...props, children });
-    if (locked) {
-      result = /* @__PURE__ */ jsx(RemoveScroll, { allowPinchZoom: true, as: Slot$1, shards: [shardRef], children: result });
-    }
-    if (guards) {
-      result = /* @__PURE__ */ jsx(FocusGuards, { children: /* @__PURE__ */ jsx(
-        FocusScope,
-        {
-          onMountAutoFocus: (event) => event.preventDefault(),
-          onUnmountAutoFocus: (event) => event.preventDefault(),
-          children: result
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: result });
-  }
-);
+import { forwardRef, useRef, useState } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { ModalProvider, useModalContext } from "@optiaxiom/globals";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { RemoveScroll } from "react-remove-scroll";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { FocusGuards } from "@radix-ui/react-focus-guards";
+import { FocusScope } from "@radix-ui/react-focus-scope";
+//#region src/modal/ModalLayer.tsx
+const 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 = forwardRef(({ asChild, children, ...props }, outerRef) => {
+	const { shardRef } = useModalContext("@optiaxiom/react/ModalLayer");
+	const [locked] = useState(() => document.body.dataset.scrollLocked);
+	const [guards] = useState(() => document.querySelector("[data-radix-focus-guard]"));
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	if (!shardRef.current) return asChild ? /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...props,
+		children
+	}) : /* @__PURE__ */ jsx(Fragment$1, { children });
+	let result = /* @__PURE__ */ jsx(DismissableLayer, {
+		asChild,
+		ref,
+		...props,
+		children
+	});
+	if (locked) result = /* @__PURE__ */ jsx(RemoveScroll, {
+		allowPinchZoom: true,
+		as: Slot,
+		shards: [shardRef],
+		children: result
+	});
+	if (guards) result = /* @__PURE__ */ jsx(FocusGuards, { children: /* @__PURE__ */ jsx(FocusScope, {
+		onMountAutoFocus: (event) => event.preventDefault(),
+		onUnmountAutoFocus: (event) => event.preventDefault(),
+		children: result
+	}) });
+	return /* @__PURE__ */ jsx(ModalProvider, {
+		shardRef: innerRef,
+		children: result
+	});
+});
 ModalLayer.displayName = "@optiaxiom/react/ModalLayer";
-
+//#endregion
 export { ModalLayer };

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -1,7 +1,25 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-BAlujQ_Z.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1ed4lux'],variants:{maxH:{xs:'_14ezear',sm:'_1qfxknh',md:'q7u1wq',lg:'wmglk',full:{}},minW:{'0':{},trigger:'_72inbm'}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/modal/ModalListbox.css.ts.vanilla-NcwHywdl.css";
+//#region src/modal/ModalListbox.css.ts
+var listbox = recipeRuntime({
+	base: [{
+		maxW: "xs",
+		p: "4"
+	}, "_1jgimak"],
+	variants: {
+		maxH: {
+			xs: "_1xitni3",
+			sm: "_1blgcxw",
+			md: "_1c2pcw6",
+			lg: "rg8r6h",
+			full: {}
+		},
+		minW: {
+			"0": {},
+			trigger: "_37g97y"
+		}
+	}
+});
+//#endregion
 export { listbox };

package/dist/esm/packages/react/src/modal/ModalListbox.js

@@ -1,33 +1,27 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Listbox } from '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import '../listbox/ListboxItemized.js';
-import '../listbox/ListboxLabel.js';
-import '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { Paper } from '../paper/Paper.js';
-import { Transition } from '../transition/Transition.js';
-import '../transition/TransitionGroup.js';
-import { listbox } from './ModalListbox-css.js';
-
-const ModalListbox = forwardRef(
-  ({ children, className, maxH, minW, ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
-    Listbox,
-    {
-      ref,
-      ...listbox({ maxH, minW }, className),
-      ...props,
-      children
-    }
-  ) }) })
-);
+import { Transition } from "../transition/Transition.js";
+import { Paper } from "../paper/Paper.js";
+import { Listbox } from "../listbox/Listbox.js";
+import { listbox } from "./ModalListbox-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/modal/ModalListbox.tsx
+const ModalListbox = forwardRef(({ children, className, maxH, minW, ...props }, ref) => /* @__PURE__ */ jsx(Transition, {
+	duration: "sm",
+	type: "pop",
+	children: /* @__PURE__ */ jsx(Paper, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Listbox, {
+			ref,
+			...listbox({
+				maxH,
+				minW
+			}, className),
+			...props,
+			children
+		})
+	})
+}));
 ModalListbox.displayName = "@optiaxiom/react/ModalListbox";
-
+//#endregion
 export { ModalListbox };

package/dist/esm/packages/react/src/nav/Nav-css.js

@@ -1,7 +1,15 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-CDnnp_Gl.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var nav$1 = recipeRuntime({base:[{bg:'bg.default',flex:'1',flexDirection:'column',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'i7111i']});
-
-export { nav$1 as nav };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/nav/Nav.css.ts.vanilla-CWeRAcPY.css";
+//#region src/nav/Nav.css.ts
+var nav = recipeRuntime({ base: [{
+	bg: "bg.default",
+	flex: "1",
+	flexDirection: "column",
+	gap: "0",
+	overflow: "hidden",
+	pb: "8",
+	pt: "16"
+}, "_1pru714"] });
+//#endregion
+export { nav };

package/dist/esm/packages/react/src/nav/Nav.js

@@ -1,29 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { useSidebarContext } from '../sidebar/SidebarContext.js';
-import { nav } from './Nav-css.js';
-
-const Nav = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { expanded, navId } = useSidebarContext("@optiaxiom/react/Nav");
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        borderColor: "border.tertiary",
-        borderR: "1",
-        flexDirection: "column",
-        gap: "16",
-        h: "full",
-        ref,
-        w: "fit",
-        ...props,
-        children: /* @__PURE__ */ jsx(Group, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav(), children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", children }) })
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { useSidebarContext } from "../sidebar/SidebarContext.js";
+import { nav } from "./Nav-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#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 = forwardRef(({ children, ...props }, ref) => {
+	const { expanded, navId } = useSidebarContext("@optiaxiom/react/Nav");
+	return /* @__PURE__ */ jsx(Group, {
+		borderColor: "border.tertiary",
+		borderR: "1",
+		flexDirection: "column",
+		gap: "16",
+		h: "full",
+		ref,
+		w: "fit",
+		...props,
+		children: /* @__PURE__ */ jsx(Group, {
+			asChild: true,
+			id: navId,
+			w: expanded ? "224" : "56",
+			...nav(),
+			children: /* @__PURE__ */ jsx("nav", {
+				"aria-label": "Main",
+				children
+			})
+		})
+	});
+});
 Nav.displayName = "@optiaxiom/react/Nav";
-
+//#endregion
 export { Nav };

package/dist/esm/packages/react/src/nav/NavAccountItem-css.js

@@ -1,7 +1,19 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-BO42Kghm.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var item$1 = recipeRuntime({base:{flex:'1',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_91rh5a',true:'_108ecw1'}}});
-
-export { item$1 as item };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-DiA3Cmkz.css";
+//#region src/nav/NavAccountItem.css.ts
+var item = recipeRuntime({
+	base: {
+		flex: "1",
+		fontSize: "md",
+		gap: "8",
+		overflowX: "hidden",
+		transition: "opacity"
+	},
+	variants: { expanded: {
+		false: "zjix45",
+		true: "_1gfum43"
+	} }
+});
+//#endregion
+export { item };