@optiaxiom/react 0.8.2 → 0.9.0

package/dist/packages/react/src/theme-provider/ThemeProvider.js

@@ -1,8 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { theme, tokens, tokensDark } from '@optiaxiom/globals';
+import { tokens, theme } from '@optiaxiom/globals';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
+const lightColors = Object.fromEntries(
+  Object.entries(tokens.colors).map(([k, v]) => [
+    k,
+    v.slice(v.indexOf("(") + 1, v.indexOf(","))
+  ])
+);
 function ThemeProvider({
   children,
   selector = ":root"
@@ -11,14 +17,16 @@ function ThemeProvider({
     /* @__PURE__ */ jsx("style", { children: `
         @layer optiaxiom.theme {
           ${selector} {
-            ${assignInlineVars(theme, tokens)}
+            ${assignInlineVars(theme, {
+      ...tokens,
+      colors: lightColors
+    })}
           }
-        }
-      ` }),
-    /* @__PURE__ */ jsx("style", { children: `
-        @layer optiaxiom.theme {
-          ${selector === ":host" ? ":host-context(:root.dark)" : `${selector}.dark`} {
-            ${assignInlineVars(theme.colors, tokensDark.colors)}
+
+          @supports (color: light-dark(black, white)) {
+            ${selector} {
+              ${assignInlineVars(theme.colors, tokens.colors)}
+            }
           }
         }
       ` }),

package/dist/packages/react/src/toast/Toast-css.js

@@ -1,9 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CXtQhxtZ.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-nlZSggfY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-BcJhdGvu.css';
+import './../../../../assets/src/toast/Toast.css.ts.vanilla-DiOB3mtx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1gqgyrt']});
-var root = recipeRuntime({base:['_1yl3iyf',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_109pobo'],variants:{intent:{danger:'_1ukmgub',information:'_1l2r5gy',neutral:'_1pwzs1l',success:'_1s8l1yg',warning:'_9eazys'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1ea6jbx']});
+var offsetVar = 'var(--_1i51gmq)';
+var root = recipeRuntime({base:['f8vanh',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'y0tzpv'],variants:{intent:{danger:'_1k5h2mu',information:'_1p71uj3',neutral:'_1jgqb8n',success:'f3e4mk',warning:'_6z248h'}}});
 
-export { icon, root };
+export { icon, offsetVar, root };

package/dist/packages/react/src/toast/Toast.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useToastContext } from '@optiaxiom/globals';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixToast from '@radix-ui/react-toast';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef, createElement } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
@@ -14,7 +16,7 @@ import { IconX } from '../icons/IconX.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { root, icon } from './Toast-css.js';
+import { offsetVar, root, icon } from './Toast-css.js';
 
 const mapIntentToIcon = {
   danger: IconCircleExclamationSolid,
@@ -24,35 +26,50 @@ const mapIntentToIcon = {
   warning: IconTriangleExclamationSolid
 };
 const Toast = forwardRef(
-  ({ children, intent = "neutral", onOpenChange, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onOpenChange, style, ...props }, outerRef) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const context = useToastContext("Toast");
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...root({ intent }), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
-      RadixToast.Root,
+    const ref = useComposedRefs(outerRef, context.toastRef);
+    return /* @__PURE__ */ jsx(
+      Box,
       {
-        forceMount: !!context,
-        onOpenChange: (open) => {
-          onOpenChange?.(open);
-          context.onOpenChange(open);
+        asChild: true,
+        style: {
+          ...style,
+          ...assignInlineVars({
+            [offsetVar]: `${context.offset}px`
+          })
         },
-        open: context.open,
-        ref,
-        ...restProps,
-        children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon[intent]) }),
-          children,
-          /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "inverse",
-              "aria-label": "close",
-              icon: /* @__PURE__ */ jsx(IconX, {}),
-              size: "sm"
-            }
-          ) })
-        ]
+        ...root({ intent }, className),
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsxs(
+          RadixToast.Root,
+          {
+            forceMount: !!context,
+            onOpenChange: (open) => {
+              onOpenChange?.(open);
+              context.onOpenChange(open);
+            },
+            open: context.open,
+            ref,
+            ...restProps,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon[intent]) }),
+              children,
+              /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "inverse",
+                  "aria-label": "close",
+                  icon: /* @__PURE__ */ jsx(IconX, {}),
+                  size: "sm"
+                }
+              ) })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 );
 Toast.displayName = "@optiaxiom/react/Toast";

package/dist/packages/react/src/toast-action/ToastAction.js

@@ -6,10 +6,10 @@ import { Button } from '../button/Button.js';
 import { Separator } from '../separator/Separator.js';
 
 const ToastAction = forwardRef(
-  ({ altText, children, ...props }, ref) => {
+  ({ altText, appearance = "inverse", children, size = "sm", ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, { alignSelf: "center", h: "sm", ml: "12", orientation: "vertical" }),
-      /* @__PURE__ */ jsx(Button, { appearance: "inverse", asChild: true, size: "sm", ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
+      /* @__PURE__ */ jsx(Button, { appearance, asChild: true, size, ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
     ] });
   }
 );

package/dist/packages/react/src/toast-provider/ToastProvider-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CXtQhxtZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-BcJhdGvu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'qffizw'],variants:{position:{bottom:'_1035lys','bottom-left':'ti9dsq','bottom-right':'_6ufm2n',top:'_165e4z4','top-left':'_1ic7sf2','top-right':'_1od9q76'}}});
+var gap = '16';
+var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1inxm3m'],variants:{position:{bottom:'xnukgd','bottom-left':'s1wh8q','bottom-right':'vqdbe6',top:'_2bpvf3','top-left':'_8grm28','top-right':'d2ofjk'}}});
 
-export { viewport };
+export { gap, viewport };

package/dist/packages/react/src/toast-provider/ToastProvider.js

@@ -13,7 +13,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { ToastAction } from '../toast-action/ToastAction.js';
 import { ToastTitle } from '../toast-title/ToastTitle.js';
 import { Toast } from '../toast/Toast.js';
-import { viewport } from './ToastProvider-css.js';
+import { gap, viewport } from './ToastProvider-css.js';
 import { useOverflowAnchor } from './useOverflowAnchor.js';
 
 const mapPositionToSwipeDirection = {
@@ -26,6 +26,7 @@ const mapPositionToSwipeDirection = {
 };
 const ToastProvider = forwardRef(
   ({
+    className,
     container,
     duration,
     label,
@@ -46,6 +47,7 @@ const ToastProvider = forwardRef(
     if (!toasts.length) {
       return null;
     }
+    let exitingToastOffsets = 0;
     return /* @__PURE__ */ jsxs(
       RadixToast.ToastProvider,
       {
@@ -54,11 +56,13 @@ const ToastProvider = forwardRef(
         swipeDirection: swipeDirection ?? mapPositionToSwipeDirection[position],
         swipeThreshold,
         children: [
-          toasts.map(({ id, open, toast }) => /* @__PURE__ */ jsx(
+          toasts.map(({ id, open, ref: ref2, toast }) => /* @__PURE__ */ jsx(
             ToastContextProvider,
             {
+              offset: exitingToastOffsets += !open && ref2.current ? ref2.current.offsetHeight + parseInt(gap) : 0,
               onOpenChange: () => toasterProp.remove(id),
               open,
+              toastRef: ref2,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/microsoft/TypeScript/issues/53178
               children: isValidElement(toast) ? toast : /* @__PURE__ */ jsxs(Toast, { intent: toast.type, children: [
                 /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
@@ -81,7 +85,7 @@ const ToastProvider = forwardRef(
               asChild: true,
               "data-position": position,
               flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
-              ...viewport({ position }),
+              ...viewport({ position }, className),
               ...sprinkleProps,
               children: /* @__PURE__ */ jsx(RadixToast.Viewport, { ref, ...restProps })
             }

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

@@ -1,8 +1,8 @@
-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/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BgMgylht.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_1wqc2mu',{alignItems:'start',flexDirection:'row',gap:'8'},'_1eo60zd']});
+var toggleInput = recipeRuntime({base:['_16xdusw',{alignItems:'start',display:'inline-flex',flexDirection:'row',gap:'8'},'_1ho4r0y']});
 
 export { toggleInput };

package/dist/packages/react/src/toggle-input/ToggleInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { Slot } from '@radix-ui/react-slot';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
@@ -11,7 +11,7 @@ import { ToggleInputContextProvider } from '../toggle-input-context/ToggleInputC
 import { toggleInput } from './ToggleInput-css.js';
 
 const ToggleInput = forwardRef(
-  ({ asChild, children, description, ...props }, ref) => {
+  ({ asChild, children, className, description, ...props }, ref) => {
     const Comp = asChild ? Slot : "label";
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const descriptionId = useId();
@@ -19,9 +19,9 @@ const ToggleInput = forwardRef(
     return /* @__PURE__ */ jsx(
       ToggleInputContextProvider,
       {
-        descriptionId: description ? descriptionId : void 0,
+        descriptionId: description ? descriptionId : undefined,
         labelId,
-        children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput(), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) })
+        children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) })
       }
     );
   }

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-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BgMgylht.css';
+import './../../../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-BXjsZSRz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_7yx9gn']});
+var control = recipeRuntime({base:['_7gcodm']});
 
 export { control };

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-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
 
-var className = '_18kc1km';
+var className = 'dvb4il';
 
 export { className };

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

@@ -4,9 +4,23 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.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-DdXJhhdi.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,24 @@ 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 { 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-DdXJhhdi.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-D9UrS4_z.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:'vduc5q',variants:{duration:{sm:'_18idept',md:'_1evfurm',lg:'q6isqs'},type:{fade:'_3zq4zr',pop:'wscpxv'}}});
 
-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];