@optiaxiom/react 1.9.36 → 1.9.38

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuSub.js

@@ -1,43 +1,41 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useEffect, useState } from 'react';
-import { useDropdownMenuNestedContext, DropdownMenuNestedProvider } from './DropdownMenuNestedContext.js';
-import { DropdownMenuSubProvider } from './DropdownMenuSubContext.js';
-
-function DropdownMenuSub({
-  children,
-  defaultOpen = false,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/DropdownMenuSub",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const { open: parentOpen } = useDropdownMenuNestedContext(
-    "@optiaxiom/react/DropdownMenuSub"
-  );
-  useEffect(() => {
-    if (!parentOpen) {
-      setOpen(false);
-    }
-  }, [parentOpen, setOpen]);
-  const [presence, setPresence] = useState(false);
-  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open: open || presence, ...props, children: /* @__PURE__ */ jsx(
-    DropdownMenuSubProvider,
-    {
-      open,
-      presence,
-      setPresence,
-      children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, { open: open || presence, children })
-    }
-  ) });
+import { DropdownMenuNestedProvider, useDropdownMenuNestedContext } from "./DropdownMenuNestedContext.js";
+import { DropdownMenuSubProvider } from "./DropdownMenuSubContext.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/DropdownMenuSub.tsx
+/**
+* @group DropdownMenu
+*/
+function DropdownMenuSub({ children, defaultOpen = false, onOpenChange, open: openProp, ...props }) {
+	const [open, setOpen] = useControllableState({
+		caller: "@optiaxiom/react/DropdownMenuSub",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const { open: parentOpen } = useDropdownMenuNestedContext("@optiaxiom/react/DropdownMenuSub");
+	useEffect(() => {
+		if (!parentOpen) setOpen(false);
+	}, [parentOpen, setOpen]);
+	const [presence, setPresence] = useState(false);
+	return /* @__PURE__ */ jsx(RadixMenu.Sub, {
+		onOpenChange: setOpen,
+		open: open || presence,
+		...props,
+		children: /* @__PURE__ */ jsx(DropdownMenuSubProvider, {
+			open,
+			presence,
+			setPresence,
+			children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, {
+				open: open || presence,
+				children
+			})
+		})
+	});
 }
 DropdownMenuSub.displayName = "@optiaxiom/react/DropdownMenuSub";
-
+//#endregion
 export { DropdownMenuSub };

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuSubContent.js

@@ -1,28 +1,36 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import { forwardRef } from 'react';
-import { ModalListbox } from '../modal/ModalListbox.js';
-import { Portal } from '../portal/Portal.js';
-import '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import { useDropdownMenuSubContext } from './DropdownMenuSubContext.js';
-
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { Portal } from "../portal/Portal.js";
+import { ModalListbox } from "../modal/ModalListbox.js";
+import { useDropdownMenuSubContext } from "./DropdownMenuSubContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/DropdownMenuSubContent.tsx
+/**
+* @group DropdownMenu
+*/
 const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { open, setPresence } = useDropdownMenuSubContext(
-    "@optiaxiom/react/DropdownMenuSubContent"
-  );
-  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalListbox, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
-    RadixMenu.SubContent,
-    {
-      alignOffset: -4,
-      asChild,
-      ref,
-      sideOffset: 0,
-      children
-    }
-  ) }) }) });
+	const { open, setPresence } = useDropdownMenuSubContext("@optiaxiom/react/DropdownMenuSubContent");
+	return /* @__PURE__ */ jsx(TransitionGroup, {
+		onPresenceChange: setPresence,
+		open,
+		children: /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ModalListbox, {
+				asChild: true,
+				...props,
+				children: /* @__PURE__ */ jsx(RadixMenu.SubContent, {
+					alignOffset: -4,
+					asChild,
+					ref,
+					sideOffset: 0,
+					children
+				})
+			})
+		})
+	});
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
-
+//#endregion
 export { DropdownMenuSubContent };

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuSubContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/dropdown-menu/DropdownMenuSubContext.ts
 const [DropdownMenuSubProvider, useDropdownMenuSubContext] = createContext("@optiaxiom/react/DropdownMenuSub");
-
+//#endregion
 export { DropdownMenuSubProvider, useDropdownMenuSubContext };

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuSubTrigger.js

@@ -1,23 +1,22 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import { forwardRef } from 'react';
-import { IconAngleRight } from '../icons/IconAngleRight.js';
-import '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import { ListboxItem } from '../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 { ListboxItem } from "../listbox/ListboxItem.js";
+import { IconAngleRight } from "../icons/IconAngleRight.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/DropdownMenuSubTrigger.tsx
+/**
+* @group DropdownMenu
+*/
 const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItem, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
+	return /* @__PURE__ */ jsx(ListboxItem, {
+		addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children })
+	});
 });
 DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
-
+//#endregion
 export { DropdownMenuSubTrigger };

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuTrigger.js

@@ -1,26 +1,25 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import { forwardRef } from 'react';
-import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
-import { useDropdownMenuContext } from './DropdownMenuContext.js';
-
+import { AngleMenuButton } from "../angle-menu-button/AngleMenuButton.js";
+import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/DropdownMenuTrigger.tsx
+/**
+* @group DropdownMenu
+* @extends Button
+*/
 const DropdownMenuTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { open, presence } = useDropdownMenuContext(
-    "@optiaxiom/react/DropdownMenuTrigger"
-  );
-  return /* @__PURE__ */ jsx(
-    RadixMenu.Trigger,
-    {
-      "aria-expanded": open || presence,
-      asChild: true,
-      "data-state": open || presence ? "open" : "closed",
-      ref,
-      ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
-    }
-  );
+	const { open, presence } = useDropdownMenuContext("@optiaxiom/react/DropdownMenuTrigger");
+	return /* @__PURE__ */ jsx(RadixMenu.Trigger, {
+		"aria-expanded": open || presence,
+		asChild: true,
+		"data-state": open || presence ? "open" : "closed",
+		ref,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
+	});
 });
 DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
-
+//#endregion
 export { DropdownMenuTrigger };

package/dist/esm/packages/react/src/ellipsis-menu-button/EllipsisMenuButton.js

@@ -1,22 +1,28 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { IconEllipsisSolid } from '../icons/IconEllipsisSolid.js';
-
+import { Button } from "../button/Button.js";
+import { IconEllipsisSolid } from "../icons/IconEllipsisSolid.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ellipsis-menu-button/EllipsisMenuButton.tsx
+/**
+* Button with ellipsis icon for opening overflow menus and dropdowns.
+*
+* Use with MenuTrigger asChild for overflow menus.
+*
+* @example
+* <MenuTrigger asChild><EllipsisMenuButton /></MenuTrigger>
+*
+* @group Button
+*/
 const EllipsisMenuButton = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      icon: /* @__PURE__ */ jsx(IconEllipsisSolid, {}),
-      iconPosition: "end",
-      ref,
-      ...props,
-      children
-    }
-  );
+	return /* @__PURE__ */ jsx(Button, {
+		icon: /* @__PURE__ */ jsx(IconEllipsisSolid, {}),
+		iconPosition: "end",
+		ref,
+		...props,
+		children
+	});
 });
 EllipsisMenuButton.displayName = "@optiaxiom/react/EllipsisMenuButton";
-
+//#endregion
 export { EllipsisMenuButton };

package/dist/esm/packages/react/src/field/Field.js

@@ -1,85 +1,76 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Group } from '../group/Group.js';
-import { IconTriangleExclamation } from '../icons/IconTriangleExclamation.js';
-import { SuggestionAlert } from '../suggestion/SuggestionAlert.js';
-import '../suggestion/SuggestionPopover.js';
-import '../utils/conditions.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import '../utils/isHoverSupported.js';
-import { FieldProvider } from './FieldContext.js';
-import { FieldLabel } from './FieldLabel.js';
-
-const Field = forwardRef(
-  ({
-    children,
-    description,
-    error,
-    info,
-    inputId: inputIdProp,
-    label,
-    labelId: labelIdProp,
-    required,
-    ...props
-  }, ref) => {
-    const inputId = useId(inputIdProp);
-    const descriptionId = useId();
-    const errorId = useId();
-    const labelId = useId(labelIdProp);
-    return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", ref, ...props, children: [
-      label && /* @__PURE__ */ jsx(
-        FieldLabel,
-        {
-          info,
-          inputId,
-          labelId,
-          required,
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        FieldProvider,
-        {
-          descriptionId: description ? descriptionId : void 0,
-          error: !!error,
-          errorId: error ? errorId : void 0,
-          inputId,
-          labelId: label ? labelId : void 0,
-          children
-        }
-      ),
-      error && error !== true && /* @__PURE__ */ jsxs(
-        Group,
-        {
-          alignItems: "start",
-          color: "fg.error",
-          fontSize: "sm",
-          gap: "4",
-          id: errorId,
-          role: "alert",
-          children: [
-            /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", mt: "2", children: /* @__PURE__ */ jsx(
-              IconTriangleExclamation,
-              {
-                "aria-label": "Error",
-                height: 12,
-                width: 14
-              }
-            ) }),
-            error
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: fallbackSpan(description) }),
-      /* @__PURE__ */ jsx(SuggestionAlert, {})
-    ] });
-  }
-);
+import { Box } from "../box/Box.js";
+import { fallbackSpan } from "../utils/fallbackSpan.js";
+import { Group } from "../group/Group.js";
+import { FieldProvider } from "./FieldContext.js";
+import { SuggestionAlert } from "../suggestion/SuggestionAlert.js";
+import { IconTriangleExclamation } from "../icons/IconTriangleExclamation.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/field/Field.tsx
+/**
+* Wrapper for inputs to provide context such as label/help/required etc.
+*
+* @category form
+* @since 0.1.0
+*/
+const Field = forwardRef(({ children, description, error, info, inputId: inputIdProp, label, labelId: labelIdProp, required, ...props }, ref) => {
+	const inputId = useId(inputIdProp);
+	const descriptionId = useId();
+	const errorId = useId();
+	const labelId = useId(labelIdProp);
+	return /* @__PURE__ */ jsxs(Group, {
+		flexDirection: "column",
+		gap: "4",
+		ref,
+		...props,
+		children: [
+			label && /* @__PURE__ */ jsx(FieldLabel, {
+				info,
+				inputId,
+				labelId,
+				required,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(FieldProvider, {
+				descriptionId: description ? descriptionId : void 0,
+				error: !!error,
+				errorId: error ? errorId : void 0,
+				inputId,
+				labelId: label ? labelId : void 0,
+				children
+			}),
+			error && error !== true && /* @__PURE__ */ jsxs(Group, {
+				alignItems: "start",
+				color: "fg.error",
+				fontSize: "sm",
+				gap: "4",
+				id: errorId,
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					flex: "none",
+					mt: "2",
+					children: /* @__PURE__ */ jsx(IconTriangleExclamation, {
+						"aria-label": "Error",
+						height: 12,
+						width: 14
+					})
+				}), error]
+			}),
+			description && /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				color: "fg.tertiary",
+				fontSize: "sm",
+				id: descriptionId,
+				children: fallbackSpan(description)
+			}),
+			/* @__PURE__ */ jsx(SuggestionAlert, {})
+		]
+	});
+});
 Field.displayName = "@optiaxiom/react/Field";
-
+//#endregion
 export { Field };

package/dist/esm/packages/react/src/field/FieldContext.js

@@ -1,12 +1,13 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/field/FieldContext.ts
 const [FieldProvider, useFieldContext] = createContext("@optiaxiom/react/Field", {
-  descriptionId: void 0,
-  error: false,
-  errorId: void 0,
-  inputId: void 0,
-  labelId: void 0
+	descriptionId: void 0,
+	error: false,
+	errorId: void 0,
+	inputId: void 0,
+	labelId: void 0
 });
-
+//#endregion
 export { FieldProvider, useFieldContext };

package/dist/esm/packages/react/src/field/FieldLabel.js

@@ -1,87 +1,73 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import * as RadixLabel from '@radix-ui/react-label';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Group } from '../group/Group.js';
-import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';
-import { Text } from '../text/Text.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-
-const FieldLabel = forwardRef(
-  ({
-    children,
-    info,
-    inputId: inputIdProp,
-    labelId: labelIdProp,
-    required,
-    ...props
-  }, ref) => {
-    const inputId = useId(inputIdProp);
-    const labelId = useId(labelIdProp);
-    return /* @__PURE__ */ jsxs(Group, { gap: "4", ref, ...props, children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          alignItems: "center",
-          asChild: true,
-          color: "fg.secondary",
-          display: "flex",
-          fontSize: "md",
-          fontWeight: "400",
-          gap: "2",
-          children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: inputId, id: labelId, children: [
-            children,
-            required && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  "aria-hidden": "true",
-                  asChild: true,
-                  color: "fg.error",
-                  fontWeight: "400",
-                  children: /* @__PURE__ */ jsx("span", { children: "*" })
-                }
-              ),
-              /* @__PURE__ */ jsx(VisuallyHidden, { children: "Required" })
-            ] })
-          ] })
-        }
-      ),
-      info && /* @__PURE__ */ jsx(Tooltip, { content: info, delayDuration: 0, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-label": "Information hover",
-          bg: "transparent",
-          border: "0",
-          color: "fg.secondary",
-          h: "2xs",
-          icon: /* @__PURE__ */ jsx(Box, { asChild: true, flex: "initial", children: /* @__PURE__ */ jsx(IconCircleQuestion, {}) }),
-          onClick: (event) => {
-            event.currentTarget.focus();
-            event.preventDefault();
-          },
-          onPointerDownCapture: (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          },
-          p: "0",
-          w: "2xs"
-        }
-      ) })
-    ] });
-  }
-);
+import { Box } from "../box/Box.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { Button } from "../button/Button.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { IconCircleQuestion } from "../icons/IconCircleQuestion.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as RadixLabel from "@radix-ui/react-label";
+//#region src/field/FieldLabel.tsx
+/**
+* @group Field
+*/
+const FieldLabel = forwardRef(({ children, info, inputId: inputIdProp, labelId: labelIdProp, required, ...props }, ref) => {
+	const inputId = useId(inputIdProp);
+	const labelId = useId(labelIdProp);
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: "4",
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(Text, {
+			alignItems: "center",
+			asChild: true,
+			color: "fg.secondary",
+			display: "flex",
+			fontSize: "md",
+			fontWeight: "400",
+			gap: "2",
+			children: /* @__PURE__ */ jsxs(RadixLabel.Root, {
+				htmlFor: inputId,
+				id: labelId,
+				children: [children, required && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+					"aria-hidden": "true",
+					asChild: true,
+					color: "fg.error",
+					fontWeight: "400",
+					children: /* @__PURE__ */ jsx("span", { children: "*" })
+				}), /* @__PURE__ */ jsx(VisuallyHidden, { children: "Required" })] })]
+			})
+		}), info && /* @__PURE__ */ jsx(Tooltip, {
+			content: info,
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": "Information hover",
+				bg: "transparent",
+				border: "0",
+				color: "fg.secondary",
+				h: "2xs",
+				icon: /* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					flex: "initial",
+					children: /* @__PURE__ */ jsx(IconCircleQuestion, {})
+				}),
+				onClick: (event) => {
+					event.currentTarget.focus();
+					event.preventDefault();
+				},
+				onPointerDownCapture: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				p: "0",
+				w: "2xs"
+			})
+		})]
+	});
+});
 FieldLabel.displayName = "@optiaxiom/react/FieldLabel";
-
+//#endregion
 export { FieldLabel };