@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/tooltip/TooltipProvider.js

@@ -1,19 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-
-function TooltipProvider({
-  disableHoverableContent = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    RadixTooltip.Provider,
-    {
-      disableHoverableContent,
-      ...props
-    }
-  );
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#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__ */ jsx(TooltipPrimitive.Provider, {
+		disableHoverableContent,
+		...props
+	});
 }
 TooltipProvider.displayName = "@optiaxiom/react/TooltipProvider";
-
+//#endregion
 export { TooltipProvider };

package/dist/esm/packages/react/src/tooltip/TooltipRoot.js

@@ -1,59 +1,49 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useRef } from 'react';
-import { TooltipProvider } from './TooltipContext.js';
-
-function TooltipRoot({
-  auto,
-  children,
-  defaultOpen = false,
-  delayDuration,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const triggerRef = useRef(null);
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/TooltipRoot",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  return /* @__PURE__ */ jsx(
-    RadixTooltip.Root,
-    {
-      delayDuration,
-      onOpenChange: openProp === void 0 ? (open2) => {
-        if (auto && open2 && triggerRef.current && !hasTruncatedContent(triggerRef.current)) {
-          return;
-        }
-        setOpen(open2);
-      } : setOpen,
-      open,
-      ...props,
-      children: /* @__PURE__ */ jsx(TooltipProvider, { open, setOpen, triggerRef, children })
-    }
-  );
+import { TooltipProvider } from "./TooltipContext.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+//#region src/tooltip/TooltipRoot.tsx
+function TooltipRoot({ auto, children, defaultOpen = false, delayDuration, onOpenChange, open: openProp, ...props }) {
+	const triggerRef = useRef(null);
+	const [open, setOpen] = useControllableState({
+		caller: "@optiaxiom/react/TooltipRoot",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	return /* @__PURE__ */ jsx(RadixTooltip.Root, {
+		delayDuration,
+		onOpenChange: openProp === void 0 ? (open) => {
+			if (auto && open && triggerRef.current && !hasTruncatedContent(triggerRef.current)) return;
+			setOpen(open);
+		} : setOpen,
+		open,
+		...props,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			open,
+			setOpen,
+			triggerRef,
+			children
+		})
+	});
 }
 TooltipRoot.displayName = "@optiaxiom/react/TooltipRoot";
 const hasTruncatedContent = (element) => {
-  let truncated = false;
-  const elements = [element];
-  while (!truncated && elements.length) {
-    const element2 = elements.shift();
-    if (!(element2 instanceof HTMLElement)) {
-      continue;
-    }
-    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element2;
-    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
-      truncated = true;
-      break;
-    }
-    elements.push(...element2.children);
-  }
-  return truncated;
+	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
 export { TooltipRoot };

package/dist/esm/packages/react/src/tooltip/TooltipTrigger.js

@@ -1,18 +1,28 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
-import { useTooltipContext } from './TooltipContext.js';
-
+import { Button } from "../button/Button.js";
+import { FilteredSlot } from "../filtered-slot/FilteredSlot.js";
+import { useTooltipContext } from "./TooltipContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+//#region src/tooltip/TooltipTrigger.tsx
+/**
+* @group TooltipRoot
+*/
 const TooltipTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
-  const { triggerRef } = useTooltipContext("@optiaxiom/react/TooltipTrigger");
-  const ref = useComposedRefs(triggerRef, outerRef);
-  return /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "data-state", children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) }) });
+	const { triggerRef } = useTooltipContext("@optiaxiom/react/TooltipTrigger");
+	const ref = useComposedRefs(triggerRef, outerRef);
+	return /* @__PURE__ */ jsx(RadixTooltip.Trigger, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(FilteredSlot, {
+			exclude: "data-state",
+			children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
+		})
+	});
 });
 TooltipTrigger.displayName = "@optiaxiom/react/TooltipTrigger";
-
+//#endregion
 export { TooltipTrigger };

package/dist/esm/packages/react/src/transition/Transition-css.js

@@ -1,7 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-B8KgYl4X.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var transition = recipeRuntime({base:'vtqhmf',variants:{duration:{sm:'mirexd',md:'le1p1',lg:'h52oq'}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/transition/Transition.css.ts.vanilla-F_1RV34k.css";
+//#region src/transition/Transition.css.ts
+var transition = recipeRuntime({
+	base: "watjl8",
+	variants: { duration: {
+		sm: "mo2ce",
+		md: "_1nuo6yc",
+		lg: "odgh3l"
+	} }
+});
+//#endregion
 export { transition };

package/dist/esm/packages/react/src/transition/Transition.js

@@ -1,40 +1,38 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef, useRef } from 'react';
-import { transition } from './Transition-css.js';
-import { TransitionGlobalConfig } from './TransitionGlobalConfig.js';
-import { useTransitionStatus } from './useTransitionStatus.js';
-
-const Slot$d = createSlot("@optiaxiom/react/Transition");
-const Transition = forwardRef(
-  ({
-    children,
-    className,
-    duration = "md",
-    skipAnimations,
-    type = "fade",
-    ...props
-  }, outerRef) => {
-    const innerRef = useRef(null);
-    const transitionStatus = useTransitionStatus(innerRef);
-    const ref = useComposedRefs(outerRef, innerRef);
-    return skipAnimations || TransitionGlobalConfig.skipAnimations ? /* @__PURE__ */ jsx(Slot$d, { className, ref, ...props, children }) : /* @__PURE__ */ jsx(
-      Slot$d,
-      {
-        "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
-      }
-    );
-  }
-);
+import { transition } from "./Transition-css.js";
+import { TransitionGlobalConfig } from "./TransitionGlobalConfig.js";
+import { useTransitionStatus } from "./useTransitionStatus.js";
+import { forwardRef, useRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/transition/Transition.tsx
+const Slot = createSlot("@optiaxiom/react/Transition");
+/**
+* Component for animating element transitions with fade and pop effects.
+*
+* @category animation
+*/
+const Transition = forwardRef(({ children, className, duration = "md", skipAnimations, type = "fade", ...props }, outerRef) => {
+	const innerRef = useRef(null);
+	const transitionStatus = useTransitionStatus(innerRef);
+	const ref = useComposedRefs(outerRef, innerRef);
+	return skipAnimations || TransitionGlobalConfig.skipAnimations ? /* @__PURE__ */ jsx(Slot, {
+		className,
+		ref,
+		...props,
+		children
+	}) : /* @__PURE__ */ 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
 export { Transition };

package/dist/esm/packages/react/src/transition/TransitionGlobalConfig.js

@@ -1,5 +1,4 @@
-const TransitionGlobalConfig = {
-  skipAnimations: false
-};
-
+//#region src/transition/TransitionGlobalConfig.ts
+const TransitionGlobalConfig = { skipAnimations: false };
+//#endregion
 export { TransitionGlobalConfig };

package/dist/esm/packages/react/src/transition/TransitionGroup.js

@@ -1,71 +1,57 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { TransitionGlobalConfig } from './TransitionGlobalConfig.js';
-import { useTransitionGroupContext, TransitionGroupProvider } from './TransitionGroupContext.js';
-import { waitForAnimation } from './waitForAnimation.js';
-
-function TransitionGroup({
-  children,
-  forceMount,
-  onPresenceChange,
-  open: openProp,
-  presence: presenceProp
-}) {
-  const [transitions, setTransitions] = useState(
-    []
-  );
-  const register = useCallback((ref) => {
-    setTransitions((transitions2) => [...transitions2, ref]);
-    return () => setTransitions(
-      (transitions2) => transitions2.filter((transition) => transition !== ref)
-    );
-  }, []);
-  const [presence, setPresence] = useControllableState({
-    caller: "@optiaxiom/react/TransitionGroup",
-    defaultProp: false,
-    onChange: onPresenceChange,
-    prop: presenceProp
-  });
-  const { open: openParent } = useTransitionGroupContext("@optiaxiom/react/TransitionGroup") ?? {};
-  const open = openParent === false ? openParent : openProp;
-  useEffect(() => {
-    if (open) {
-      const timer = setTimeout(() => {
-        if (transitions.length) {
-          void waitForAnimation(transitions).then(() => setPresence(true));
-        } else {
-          setPresence(true);
-        }
-      }, 10);
-      return () => clearTimeout(timer);
-    } else {
-      if (transitions.length) {
-        void waitForAnimation(transitions).then(() => setPresence(false));
-      } else {
-        setPresence(false);
-      }
-      return;
-    }
-  }, [open, setPresence, transitions]);
-  const childrenRef = useRef(children);
-  if (open) {
-    childrenRef.current = children;
-  }
-  if (TransitionGlobalConfig.skipAnimations) {
-    return /* @__PURE__ */ jsx(Fragment, { children: open && children });
-  }
-  return /* @__PURE__ */ jsx(
-    TransitionGroupProvider,
-    {
-      open,
-      presence,
-      register,
-      children: (open || presence || forceMount) && childrenRef.current
-    }
-  );
+import { TransitionGlobalConfig } from "./TransitionGlobalConfig.js";
+import { TransitionGroupProvider, useTransitionGroupContext } from "./TransitionGroupContext.js";
+import { waitForAnimation } from "./waitForAnimation.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#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] = useState([]);
+	const register = useCallback((ref) => {
+		setTransitions((transitions) => [...transitions, ref]);
+		return () => setTransitions((transitions) => transitions.filter((transition) => transition !== ref));
+	}, []);
+	const [presence, setPresence] = useControllableState({
+		caller: "@optiaxiom/react/TransitionGroup",
+		defaultProp: false,
+		onChange: onPresenceChange,
+		prop: presenceProp
+	});
+	const { open: openParent } = useTransitionGroupContext("@optiaxiom/react/TransitionGroup") ?? {};
+	const open = openParent === false ? openParent : openProp;
+	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 = useRef(children);
+	if (open) childrenRef.current = children;
+	if (TransitionGlobalConfig.skipAnimations) return /* @__PURE__ */ jsx(Fragment$1, { children: open && children });
+	return /* @__PURE__ */ jsx(TransitionGroupProvider, {
+		open,
+		presence,
+		register,
+		children: (open || presence || forceMount) && childrenRef.current
+	});
 }
 TransitionGroup.displayName = "@optiaxiom/react/TransitionGroup";
-
+//#endregion
 export { TransitionGroup };

package/dist/esm/packages/react/src/transition/TransitionGroupContext.js

@@ -1,6 +1,8 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
-const [TransitionGroupProvider, useTransitionGroupContext] = createContext("@optiaxiom/react/TransitionGroup", null);
-
+"use client";
+import "react";
+import { createContext as createContext$1 } from "@radix-ui/react-context";
+//#region src/transition/TransitionGroupContext.ts
+const [TransitionGroupProvider, useTransitionGroupContext] = createContext$1("@optiaxiom/react/TransitionGroup", null);
+//#endregion
 export { TransitionGroupProvider, useTransitionGroupContext };

package/dist/esm/packages/react/src/transition/useTransitionStatus.js

@@ -1,23 +1,18 @@
 "use client";
-import { useEffect, useState } from 'react';
-import { useTransitionGroupContext } from './TransitionGroupContext.js';
-
+"use client";
+import { useTransitionGroupContext } from "./TransitionGroupContext.js";
+import { useEffect, useState } from "react";
+//#region src/transition/useTransitionStatus.ts
 const useTransitionStatus = (ref) => {
-  const { open, register } = useTransitionGroupContext(
-    "useTransitionStatus"
-  ) ?? {
-    open: true
-  };
-  useEffect(() => {
-    return register?.(ref);
-  }, [register, ref]);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => setMounted(true));
-    }
-  }, [open]);
-  return open && !mounted ? "starting" : !open ? "ending" : void 0;
+	const { open, register } = useTransitionGroupContext("useTransitionStatus") ?? { open: true };
+	useEffect(() => {
+		return register?.(ref);
+	}, [register, ref]);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		if (open) requestAnimationFrame(() => setMounted(true));
+	}, [open]);
+	return open && !mounted ? "starting" : !open ? "ending" : void 0;
 };
-
+//#endregion
 export { useTransitionStatus };

package/dist/esm/packages/react/src/transition/waitForAnimation.js

@@ -1,9 +1,6 @@
+//#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()]
-    )
-  );
+	await Promise.allSettled(transitions.flatMap((ref) => typeof ref.current?.getAnimations === "function" ? ref.current?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]));
 };
-
+//#endregion
 export { waitForAnimation };

package/dist/esm/packages/react/src/utils/conditions.js

@@ -1,10 +1,17 @@
-import { tokens } from '@optiaxiom/globals';
-import { mapValues } from './mapValues.js';
-
+import { mapValues } from "./mapValues.js";
+import { tokens } from "@optiaxiom/globals";
+//#region src/utils/conditions.ts
 const conditions = {
-  conditions: {
-    ...mapValues(tokens.screens, (width) => ({
-      "@media": `screen and (min-width: ${width})`
-    }))}};
-
+	conditions: {
+		...mapValues(tokens.screens, (width) => ({ "@media": `screen and (min-width: ${width})` })),
+		base: {}
+	},
+	defaultCondition: "base",
+	responsiveArray: [
+		"base",
+		"sm",
+		"md"
+	]
+};
+//#endregion
 export { conditions };

package/dist/esm/packages/react/src/utils/decorateChildren.js

@@ -1,22 +1,13 @@
-import { isValidElement, cloneElement } from 'react';
-
+import { cloneElement, isValidElement } from "react";
+//#region src/utils/decorateChildren.ts
 const decorateChildren = ({ asChild, children }, decorator) => {
-  if (asChild) {
-    const newElement = isValidElement(children) ? children : null;
-    return newElement ? cloneElement(
-      newElement,
-      void 0,
-      decorateChildren(
-        {
-          ...newElement.props,
-          asChild: newElement.props.asChild || typeof newElement.type !== "string" && "displayName" in newElement.type && typeof newElement.type.displayName === "string" && newElement.type.displayName?.endsWith(".Slot")
-        },
-        decorator
-      )
-    ) : children;
-  } else {
-    return decorator(children);
-  }
+	if (asChild) {
+		const newElement = isValidElement(children) ? children : null;
+		return newElement ? cloneElement(newElement, void 0, decorateChildren({
+			...newElement.props,
+			asChild: newElement.props.asChild || typeof newElement.type !== "string" && "displayName" in newElement.type && typeof newElement.type.displayName === "string" && newElement.type.displayName?.endsWith(".Slot")
+		}, decorator)) : children;
+	} else return decorator(children);
 };
-
+//#endregion
 export { decorateChildren };

package/dist/esm/packages/react/src/utils/fallbackSpan.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { isValidElement, Fragment } from 'react';
-
+import { Fragment, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/fallbackSpan.tsx
 const fallbackSpan = (content) => isValidElement(content) && content.type !== Fragment ? content : /* @__PURE__ */ jsx("span", { children: content });
-
+//#endregion
 export { fallbackSpan };

package/dist/esm/packages/react/src/utils/isFocusCaptured.js

@@ -1,14 +1,11 @@
+//#region src/utils/isFocusCaptured.ts
 const isFocusCaptured = (event) => {
-  if (event.currentTarget.contains(document.activeElement)) {
-    return true;
-  }
-  if (event.target instanceof Element) {
-    const label = event.target.closest("label");
-    if (label && event.currentTarget.contains(label) && label.control) {
-      return true;
-    }
-  }
-  return false;
+	if (event.currentTarget.contains(document.activeElement)) return true;
+	if (event.target instanceof Element) {
+		const label = event.target.closest("label");
+		if (label && event.currentTarget.contains(label) && label.control) return true;
+	}
+	return false;
 };
-
+//#endregion
 export { isFocusCaptured };

package/dist/esm/packages/react/src/utils/isHoverSupported.js

@@ -1,3 +1,4 @@
+//#region src/utils/isHoverSupported.ts
 const isHoverSupported = typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(hover: hover)").matches;
-
+//#endregion
 export { isHoverSupported };

package/dist/esm/packages/react/src/utils/mapValues.js

@@ -1,9 +1,8 @@
+//#region src/utils/mapValues.ts
 const mapValues = (obj, valueFn, keyFn = (key) => key) => {
-  const result = {};
-  for (const [key, value] of Object.entries(obj)) {
-    result[keyFn ? keyFn(key) : key] = valueFn(value, key);
-  }
-  return result;
+	const result = {};
+	for (const [key, value] of Object.entries(obj)) result[keyFn ? keyFn(key) : key] = valueFn(value, key);
+	return result;
 };
-
+//#endregion
 export { mapValues };

package/dist/esm/packages/react/src/utils/onReactSelectInputBlur.js

@@ -1,14 +1,13 @@
+//#region src/utils/onReactSelectInputBlur.ts
 function onReactSelectInputBlur(event) {
-  const { relatedTarget, target } = event;
-  if (isReactSelectInput(target) && isNonDialogElement(relatedTarget)) {
-    relatedTarget.focus();
-  }
+	const { relatedTarget, target } = event;
+	if (isReactSelectInput(target) && isNonDialogElement(relatedTarget)) relatedTarget.focus();
 }
 function isNonDialogElement(element) {
-  return element instanceof HTMLElement && element.role !== "dialog";
+	return element instanceof HTMLElement && element.role !== "dialog";
 }
 function isReactSelectInput(element) {
-  return element instanceof HTMLElement && element.id.startsWith("react-select-") && element.id.endsWith("-input") && element.localName === "input";
+	return element instanceof HTMLElement && element.id.startsWith("react-select-") && element.id.endsWith("-input") && element.localName === "input";
 }
-
+//#endregion
 export { onReactSelectInputBlur };