@optiaxiom/react 0.8.2 → 0.10.0

package/dist/packages/react/src/toggle-input-control/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
-import './../../../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-GXsOTirN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CKQ2Aadr.css';
+import './../../../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-_Ts9Ypag.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_7yx9gn']});
+var control = recipeRuntime({base:['_1i58bkm']});
 
 export { control };

package/dist/packages/react/src/toggle-input-control/ToggleInputControl.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { control } from './ToggleInputControl-css.js';
 
 const ToggleInputControl = forwardRef(({ children, className, ...props }, ref) => {

package/dist/packages/react/src/toggle-input-description/ToggleInputDescription.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useToggleInputContext } from '../toggle-input-context/ToggleInputContext.js';
 
 const ToggleInputDescription = forwardRef(({ children, ...props }, ref) => {

package/dist/packages/react/src/toggle-input-hidden-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
 
-var className = '_18kc1km';
+var className = 'phodwh';
 
 export { className };

package/dist/packages/react/src/toggle-input-label/ToggleInputLabel.js

@@ -2,11 +2,27 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useToggleInputContext } from '../toggle-input-context/ToggleInputContext.js';
 
-const ToggleInputLabel = forwardRef(({ children, ...props }, ref) => {
+const ToggleInputLabel = forwardRef(({ children, onMouseDown, ...props }, ref) => {
   const { labelId } = useToggleInputContext("ToggleInputLabel");
-  return /* @__PURE__ */ jsx(Box, { id: labelId, ref, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      id: labelId,
+      onMouseDown: (event) => {
+        onMouseDown?.(event);
+        if (!event.defaultPrevented && event.detail > 1) {
+          event.preventDefault();
+        }
+      },
+      ref,
+      ...props,
+      children
+    }
+  );
 });
 ToggleInputLabel.displayName = "@optiaxiom/react/ToggleInputLabel";
 

package/dist/packages/react/src/tooltip/Tooltip.js

@@ -1,40 +1,36 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { TooltipContent } from '../tooltip-content/TooltipContent.js';
 import { TooltipRoot } from '../tooltip-root/TooltipRoot.js';
 import { TooltipTrigger } from '../tooltip-trigger/TooltipTrigger.js';
 
-const Tooltip = forwardRef(
-  ({
-    auto,
-    children,
-    content,
-    defaultOpen,
-    delayDuration,
-    disabled,
-    onOpenChange,
-    open,
-    ...props
-  }, ref) => {
-    const empty = !content && typeof content !== "number";
-    return /* @__PURE__ */ jsxs(
-      TooltipRoot,
-      {
-        auto,
-        defaultOpen,
-        delayDuration,
-        disableHoverableContent: disabled || empty,
-        onOpenChange,
-        open,
-        children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, ref, children }),
-          !disabled && !empty && /* @__PURE__ */ jsx(TooltipContent, { maxW: "xs", ...props, children: content })
-        ]
-      }
-    );
-  }
-);
+function Tooltip({
+  auto,
+  children,
+  content,
+  defaultOpen,
+  delayDuration,
+  disabled,
+  onOpenChange,
+  open,
+  ...props
+}) {
+  const empty = !content && typeof content !== "number";
+  return /* @__PURE__ */ jsxs(
+    TooltipRoot,
+    {
+      auto,
+      defaultOpen,
+      delayDuration,
+      onOpenChange,
+      open,
+      children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+        !disabled && !empty && /* @__PURE__ */ jsx(TooltipContent, { maxW: "xs", ...props, children: content })
+      ]
+    }
+  );
+}
 Tooltip.displayName = "@optiaxiom/react/Tooltip";
 
 export { Tooltip };

package/dist/packages/react/src/tooltip-content/TooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',px:'12',py:'8',rounded:'md',z:'tooltip'}]});

package/dist/packages/react/src/tooltip-content/TooltipContent.js

@@ -3,23 +3,26 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { theme } from '@optiaxiom/globals';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Text } from '../text/Text.js';
 import { useTooltipContext } from '../tooltip-context/TooltipContext.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import { content } from './TooltipContent-css.js';
 
 const TooltipContent = forwardRef(
-  ({ align = "center", children, className, sideOffset = 5, ...props }, ref) => {
+  ({ align = "center", children, className, side = "top", ...props }, ref) => {
     const { open } = useTooltipContext("TooltipContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
       RadixTooltip.Content,
       {
         align,
         arrowPadding: 6,
         ref,
-        sideOffset,
+        side,
+        sideOffset: 5,
         children: [
           /* @__PURE__ */ jsx(Text, { fontSize: "sm", children }),
           /* @__PURE__ */ jsx(

package/dist/packages/react/src/tooltip-provider/TooltipProvider.js

@@ -0,0 +1,19 @@
+"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
+    }
+  );
+}
+TooltipProvider.displayName = "@optiaxiom/react/TooltipProvider";
+
+export { TooltipProvider };

package/dist/packages/react/src/tooltip-root/TooltipRoot.js

@@ -24,7 +24,7 @@ function TooltipRoot({
     RadixTooltip.Root,
     {
       delayDuration,
-      onOpenChange: openProp === void 0 ? (flag) => {
+      onOpenChange: openProp === undefined ? (flag) => {
         if (auto && flag && triggerRef.current) {
           let truncated = false;
           const elements = [triggerRef.current];

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

@@ -1,8 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-Cf8mdt0b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-Cawnu3FP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'bpux0v',variants:{duration:{sm:'_11u7ew1',md:'_1ex7zyf',lg:'_1dc2gqd'},type:{fade:'_10n460i',pop:'_24jovy'}}});
-var transitionDuration = {sm:150,md:250,lg:400};
+var transition = recipeRuntime({base:'_1xr589n',variants:{duration:{sm:'_1uxji5',md:'_19ccot3',lg:'_147s8a3'},type:{fade:'p3u156',pop:'_19kafis'}}});
 
-export { transition, transitionDuration };
+export { transition };

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

@@ -1,25 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useState, useEffect } from 'react';
-import { transitionDuration, transition } from './Transition-css.js';
+import { forwardRef, useRef } from 'react';
+import { useTransitionStatus } from '../use-transition-status/useTransitionStatus.js';
+import { transition } from './Transition-css.js';
 import { TransitionGlobalConfig } from './TransitionGlobalConfig.js';
-import { usePresence } from '../../../../node_modules/.pnpm/framer-motion@11.15.0_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.js';
 
 const Transition = forwardRef(
-  ({ children, duration = "md", skipAnimations, type = "fade", ...props }, ref) => {
-    const [isPresent, safeToRemove] = usePresence();
-    const [enter, setEnter] = useState(false);
-    useEffect(() => {
-      if (isPresent) {
-        requestAnimationFrame(() => setEnter(true));
-      }
-    }, [isPresent]);
-    useEffect(() => {
-      if (!isPresent) {
-        setTimeout(safeToRemove, transitionDuration[duration]);
-      }
-    }, [isPresent]);
+  ({ children, 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, { ref, children }) : /* @__PURE__ */ jsx(
       Slot,
       {
@@ -27,9 +19,9 @@ const Transition = forwardRef(
         ...transition(
           {
             duration,
-            type: enter !== isPresent ? type : void 0
+            type: transitionStatus ? type : undefined
           },
-          void 0
+          undefined
         ),
         ...props,
         children

package/dist/packages/react/src/transition-group/TransitionGroup.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import '../transition/Transition.js';
+import { TransitionGlobalConfig } from '../transition/TransitionGlobalConfig.js';
+import { TransitionGroupContext } from '../transition-group-context/TransitionGroupContext.js';
+
+function TransitionGroup({
+  children,
+  open
+}) {
+  const [transitions, setTransitions] = useState(
+    []
+  );
+  const onMount = useCallback((ref) => {
+    setTransitions((transitions2) => [...transitions2, ref]);
+  }, []);
+  const onUnmount = useCallback((ref) => {
+    setTransitions(
+      (transitions2) => transitions2.filter((transition) => transition !== ref)
+    );
+  }, []);
+  const [connected, setConnected] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setConnected(true);
+    } else {
+      if (transitions.length) {
+        void Promise.allSettled(
+          transitions.flatMap(
+            (ref) => typeof ref.current?.getAnimations === "function" ? ref.current?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
+          )
+        ).then(() => setConnected(false));
+      } else {
+        setConnected(false);
+      }
+    }
+  }, [open, transitions]);
+  if (TransitionGlobalConfig.skipAnimations) {
+    return open && children;
+  }
+  return /* @__PURE__ */ jsx(TransitionGroupContext.Provider, { value: { onMount, onUnmount, open }, children: (open || connected) && children });
+}
+TransitionGroup.displayName = "@optiaxiom/react/TransitionGroup";
+
+export { TransitionGroup };

package/dist/packages/react/src/transition-group-context/TransitionGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TransitionGroupContext = createContext(undefined);
+
+export { TransitionGroupContext };

package/dist/packages/react/src/use-responsive-matches/useResponsiveMatches.js

@@ -2,7 +2,7 @@ import { conditions } from '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import 'react';
 import 'react/jsx-runtime';
-import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.1_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
+import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
 
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {

package/dist/packages/react/src/use-transition-status/useTransitionStatus.js

@@ -0,0 +1,21 @@
+import { useContext, useEffect, useState } from 'react';
+import { TransitionGroupContext } from '../transition-group-context/TransitionGroupContext.js';
+
+const useTransitionStatus = (ref) => {
+  const { onMount, onUnmount, open } = useContext(TransitionGroupContext) ?? {
+    open: true
+  };
+  useEffect(() => {
+    onMount?.(ref);
+    return () => onUnmount?.(ref);
+  }, [onMount, onUnmount, ref]);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => setMounted(true));
+    }
+  }, [open]);
+  return open && !mounted ? "starting" : !open && mounted ? "ending" : undefined;
+};
+
+export { useTransitionStatus };

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

@@ -6,7 +6,7 @@ const decorateChildren = ({ asChild, children }, decorator) => {
     const newElement = isValidElement(children) ? children : null;
     return newElement ? cloneElement(
       newElement,
-      void 0,
+      undefined,
       decorateChildren(
         {
           ...newElement.props,

package/dist/packages/react/src/vanilla-extract/recipeRuntime.js

@@ -20,7 +20,7 @@ const recipeRuntime = ({
     }
     process(base);
     for (const variantName in variants) {
-      if (selections[variantName] === null || selections[variantName] === void 0) {
+      if (selections[variantName] === null || selections[variantName] === undefined) {
         continue;
       }
       const variant = variants[variantName];