@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/tooltip-DgIDNGYv.js

@@ -0,0 +1,212 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_transition = require("./transition-tqiyzYYq.js");
+const require_Portal = require("./Portal-DI9aR5XU.js");
+const require_FilteredSlot = require("./FilteredSlot-DuHqG05f.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+_radix_ui_react_tooltip = require_rolldown_runtime.__toESM(_radix_ui_react_tooltip, 1);
+//#region src/tooltip/TooltipContent.css.ts
+var content = require_recipeRuntime.recipeRuntime({
+	base: [{
+		bg: "bg.default.inverse",
+		color: "fg.default.inverse",
+		maxW: "xs",
+		px: "12",
+		py: "8",
+		rounded: "md",
+		z: "tooltip"
+	}],
+	variants: { disableHoverableContent: {
+		false: {},
+		true: { pointerEvents: "none" }
+	} }
+});
+//#endregion
+//#region src/tooltip/TooltipContext.ts
+const [TooltipProvider$1, useTooltipContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Tooltip");
+//#endregion
+//#region src/tooltip/TooltipContent.tsx
+/**
+* @group TooltipRoot
+*/
+const TooltipContent = (0, react.forwardRef)(({ align = "center", children, className, disableHoverableContent, side = "top", ...props }, ref) => {
+	const { open } = useTooltipContext("@optiaxiom/react/TooltipContent");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transition.TransitionGroup, {
+		open,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transition.Transition, {
+				duration: "sm",
+				type: "pop",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+					asChild: true,
+					...content({ disableHoverableContent }, className),
+					...props,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_tooltip.Content, {
+						align,
+						arrowPadding: 6,
+						forceMount: true,
+						ref,
+						side,
+						sideOffset: 4,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+							asChild: true,
+							fontSize: "sm",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, {
+							fill: _optiaxiom_globals.theme.colors["bg.default.inverse"],
+							height: 4,
+							width: 8
+						})]
+					})
+				})
+			})
+		})
+	});
+});
+TooltipContent.displayName = "@optiaxiom/react/TooltipContent";
+//#endregion
+//#region src/tooltip/TooltipRoot.tsx
+function TooltipRoot({ auto, children, defaultOpen = false, delayDuration, onOpenChange, open: openProp, ...props }) {
+	const triggerRef = (0, react.useRef)(null);
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/TooltipRoot",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, {
+		delayDuration,
+		onOpenChange: openProp === void 0 ? (open) => {
+			if (auto && open && triggerRef.current && !hasTruncatedContent(triggerRef.current)) return;
+			setOpen(open);
+		} : setOpen,
+		open,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipProvider$1, {
+			open,
+			setOpen,
+			triggerRef,
+			children
+		})
+	});
+}
+TooltipRoot.displayName = "@optiaxiom/react/TooltipRoot";
+const hasTruncatedContent = (element) => {
+	let truncated = false;
+	const elements = [element];
+	while (!truncated && elements.length) {
+		const element = elements.shift();
+		if (!(element instanceof HTMLElement)) continue;
+		const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element;
+		if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
+			truncated = true;
+			break;
+		}
+		elements.push(...element.children);
+	}
+	return truncated;
+};
+//#endregion
+//#region src/tooltip/TooltipTrigger.tsx
+/**
+* @group TooltipRoot
+*/
+const TooltipTrigger = (0, react.forwardRef)(({ asChild, children, ...props }, outerRef) => {
+	const { triggerRef } = useTooltipContext("@optiaxiom/react/TooltipTrigger");
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(triggerRef, outerRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Trigger, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FilteredSlot.FilteredSlot, {
+			exclude: "data-state",
+			children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, { children })
+		})
+	});
+});
+TooltipTrigger.displayName = "@optiaxiom/react/TooltipTrigger";
+//#endregion
+//#region src/tooltip/Tooltip.tsx
+/**
+* Popup with brief information shown when user interacts with an element using
+* keyboard focus or mouse hover.
+*
+* @category overlay
+* @since 0.1.0
+*/
+function Tooltip({ auto, children, content, defaultOpen, delayDuration, disabled, disableHoverableContent, onOpenChange, open, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipRoot, {
+		auto,
+		defaultOpen,
+		delayDuration,
+		disableHoverableContent,
+		onOpenChange,
+		open,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+			asChild: true,
+			children
+		}), !disabled && !(!content && typeof content !== "number") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+			disableHoverableContent,
+			...props,
+			children: content
+		})]
+	});
+}
+Tooltip.displayName = "@optiaxiom/react/Tooltip";
+//#endregion
+//#region src/tooltip/TooltipProvider.tsx
+/**
+* Provider component for tooltips. This is included in AxiomProvider by default - you only need to use this component directly for advanced customization.
+*
+* @group Tooltip
+*/
+function TooltipProvider({ disableHoverableContent = true, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Provider, {
+		disableHoverableContent,
+		...props
+	});
+}
+TooltipProvider.displayName = "@optiaxiom/react/TooltipProvider";
+//#endregion
+Object.defineProperty(exports, "Tooltip", {
+	enumerable: true,
+	get: function() {
+		return Tooltip;
+	}
+});
+Object.defineProperty(exports, "TooltipContent", {
+	enumerable: true,
+	get: function() {
+		return TooltipContent;
+	}
+});
+Object.defineProperty(exports, "TooltipProvider", {
+	enumerable: true,
+	get: function() {
+		return TooltipProvider;
+	}
+});
+Object.defineProperty(exports, "TooltipRoot", {
+	enumerable: true,
+	get: function() {
+		return TooltipRoot;
+	}
+});
+Object.defineProperty(exports, "TooltipTrigger", {
+	enumerable: true,
+	get: function() {
+		return TooltipTrigger;
+	}
+});

package/dist/cjs/tooltip.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+exports.Tooltip = require_tooltip.Tooltip;
+exports.TooltipContent = require_tooltip.TooltipContent;
+exports.TooltipProvider = require_tooltip.TooltipProvider;
+exports.TooltipRoot = require_tooltip.TooltipRoot;
+exports.TooltipTrigger = require_tooltip.TooltipTrigger;

package/dist/cjs/transition-tqiyzYYq.js

@@ -0,0 +1,146 @@
+"use client";
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+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");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+require("./assets/Transition.css.ts.vanilla-Dt8LRQ_Q.css");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+//#region src/transition/Transition.css.ts
+var transition = require_recipeRuntime.recipeRuntime({
+	base: "_1y4tazy",
+	variants: { duration: {
+		sm: "_1xbgebc",
+		md: "s3genj",
+		lg: "cup936"
+	} }
+});
+//#endregion
+//#region src/transition/TransitionGlobalConfig.ts
+const TransitionGlobalConfig = { skipAnimations: false };
+//#endregion
+//#region src/transition/TransitionGroupContext.ts
+const [TransitionGroupProvider, useTransitionGroupContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/TransitionGroup", null);
+//#endregion
+//#region src/transition/useTransitionStatus.ts
+const useTransitionStatus = (ref) => {
+	const { open, register } = useTransitionGroupContext("useTransitionStatus") ?? { open: true };
+	(0, react.useEffect)(() => {
+		return register?.(ref);
+	}, [register, ref]);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (open) requestAnimationFrame(() => setMounted(true));
+	}, [open]);
+	return open && !mounted ? "starting" : !open ? "ending" : void 0;
+};
+//#endregion
+//#region src/transition/Transition.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/Transition");
+/**
+* Component for animating element transitions with fade and pop effects.
+*
+* @category animation
+*/
+const Transition = (0, react.forwardRef)(({ children, className, duration = "md", skipAnimations, type = "fade", ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const transitionStatus = useTransitionStatus(innerRef);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(outerRef, innerRef);
+	return skipAnimations || TransitionGlobalConfig.skipAnimations ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+		className,
+		ref,
+		...props,
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+		"data-transition-fade": transitionStatus ? "" : void 0,
+		"data-transition-pop": transitionStatus && type === "pop" ? "" : void 0,
+		"data-transition-state": transitionStatus,
+		"data-transition-translate": transitionStatus && type === "pop" ? "" : void 0,
+		ref,
+		...transition({ duration }, className),
+		...props,
+		children
+	});
+});
+Transition.displayName = "@optiaxiom/react/Transition";
+//#endregion
+//#region src/transition/waitForAnimation.ts
+const waitForAnimation = async (transitions) => {
+	await Promise.allSettled(transitions.flatMap((ref) => typeof ref.current?.getAnimations === "function" ? ref.current?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]));
+};
+//#endregion
+//#region src/transition/TransitionGroup.tsx
+/**
+* Manages the presence and animation lifecycle of children during transitions.
+*
+* @category animation
+*/
+function TransitionGroup({ children, forceMount, onPresenceChange, open: openProp, presence: presenceProp }) {
+	const [transitions, setTransitions] = (0, react.useState)([]);
+	const register = (0, react.useCallback)((ref) => {
+		setTransitions((transitions) => [...transitions, ref]);
+		return () => setTransitions((transitions) => transitions.filter((transition) => transition !== ref));
+	}, []);
+	const [presence, setPresence] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/TransitionGroup",
+		defaultProp: false,
+		onChange: onPresenceChange,
+		prop: presenceProp
+	});
+	const { open: openParent } = useTransitionGroupContext("@optiaxiom/react/TransitionGroup") ?? {};
+	const open = openParent === false ? openParent : openProp;
+	(0, react.useEffect)(() => {
+		if (open) {
+			const timer = setTimeout(() => {
+				if (transitions.length) waitForAnimation(transitions).then(() => setPresence(true));
+				else setPresence(true);
+			}, 10);
+			return () => clearTimeout(timer);
+		} else {
+			if (transitions.length) waitForAnimation(transitions).then(() => setPresence(false));
+			else setPresence(false);
+			return;
+		}
+	}, [
+		open,
+		setPresence,
+		transitions
+	]);
+	const childrenRef = (0, react.useRef)(children);
+	if (open) childrenRef.current = children;
+	if (TransitionGlobalConfig.skipAnimations) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: open && children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransitionGroupProvider, {
+		open,
+		presence,
+		register,
+		children: (open || presence || forceMount) && childrenRef.current
+	});
+}
+TransitionGroup.displayName = "@optiaxiom/react/TransitionGroup";
+//#endregion
+Object.defineProperty(exports, "Transition", {
+	enumerable: true,
+	get: function() {
+		return Transition;
+	}
+});
+Object.defineProperty(exports, "TransitionGlobalConfig", {
+	enumerable: true,
+	get: function() {
+		return TransitionGlobalConfig;
+	}
+});
+Object.defineProperty(exports, "TransitionGroup", {
+	enumerable: true,
+	get: function() {
+		return TransitionGroup;
+	}
+});
+Object.defineProperty(exports, "useTransitionGroupContext", {
+	enumerable: true,
+	get: function() {
+		return useTransitionGroupContext;
+	}
+});

package/dist/cjs/transition.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_transition = require("./transition-tqiyzYYq.js");
+exports.Transition = require_transition.Transition;
+exports.TransitionGlobalConfig = require_transition.TransitionGlobalConfig;
+exports.TransitionGroup = require_transition.TransitionGroup;