@optiaxiom/react 0.8.1 → 0.9.0

package/dist/packages/react/src/data-table-header-cell/DataTableHeaderCell.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Grid } from '../grid/Grid.js';
+import { Icon } from '../icon/Icon.js';
+import { IconSort } from '../icons/IconSort.js';
+import { IconSortDown } from '../icons/IconSortDown.js';
+import { IconSortUp } from '../icons/IconSortUp.js';
+import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
+import { button, icon } from './DataTableHeaderCell-css.js';
+
+const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {
+  const sortDir = header.column.getIsSorted();
+  return /* @__PURE__ */ jsx(
+    TableHeaderCell,
+    {
+      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : undefined,
+      colSpan: header.colSpan,
+      ref,
+      ...props,
+      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(Box, { asChild: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
+        children,
+        sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+          "sorted ",
+          sortDir === "asc" ? "ascending" : "descending"
+        ] }),
+        /* @__PURE__ */ jsxs(Grid, { placeItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              asChild: true,
+              ...icon({
+                active: sortDir === false,
+                muted: !sortDir
+              }),
+              children: /* @__PURE__ */ jsx(IconSort, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
+        ] })
+      ] }) }) : children
+    }
+  );
+});
+DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
+
+export { DataTableHeaderCell };

package/dist/packages/react/src/dialog/Dialog.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { DialogContextProvider } from '../dialog-context/DialogContext.js';
+import { NestedDialogContextProvider } from '../nested-dialog-context/NestedDialogContext.js';
+import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 
 function Dialog({
   children,
@@ -16,7 +18,16 @@ function Dialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DialogContextProvider, { open, children }) });
+  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("Dialog", open);
+  return /* @__PURE__ */ jsx(NestedDialogContextProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    DialogContextProvider,
+    {
+      isRootDialog,
+      nestedDialogCount,
+      open,
+      children
+    }
+  ) }) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

package/dist/packages/react/src/dialog-actions/DialogActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-Cur555ln.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DNIzS9xQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1w0el6']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'hvvat9']});
 
 export { actions };

package/dist/packages/react/src/dialog-actions/DialogActions.js

@@ -1,18 +1,12 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
-import { IconX } from '../icons/IconX.js';
 import { actions } from './DialogActions-css.js';
 
 const DialogActions = forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...actions({}, className), ...props, children: [
-      /* @__PURE__ */ jsx(Button, { appearance: "subtle", "aria-label": "Close", asChild: true, icon: /* @__PURE__ */ jsx(IconX, {}), children: /* @__PURE__ */ jsx(RadixDialog.Close, {}) }),
-      /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children })
-    ] });
+    return /* @__PURE__ */ jsx(Flex, { ref, ...actions({}, className), ...props, children });
   }
 );
 DialogActions.displayName = "@optiaxiom/react/DialogActions";

package/dist/packages/react/src/dialog-close/DialogClose.js

@@ -5,8 +5,8 @@ import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
 const DialogClose = forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  ({ asChild, children, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { size, children }) });
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

package/dist/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DH9dpmR1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DZSpp9WD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_3y4kza'],variants:{size:{sm:'w4v9b5',md:'fihufi',lg:'fvrkuy',fullscreen:'pnoigp'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1umrefv'],variants:{size:{sm:'_1l3sknl',md:'_1agwhja',lg:'_1mktp5b',fullscreen:'_1kwyy6f'}}});
+var nestedDialogCountVar = 'var(--_1f5zfqa)';
 
-export { content };
+export { content, nestedDialogCountVar };

package/dist/packages/react/src/dialog-content/DialogContent.js

@@ -1,31 +1,50 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { content } from './DialogContent-css.js';
+import { nestedDialogCountVar, content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({ children, className, size = "md", transitionType = "fade", ...props }, ref) => {
-    const { open } = useDialogContext("DialogContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+  ({
+    children,
+    className,
+    size = "md",
+    style,
+    transitionType = "fade",
+    ...props
+  }, ref) => {
+    const { isRootDialog, nestedDialogCount, open } = useDialogContext("DialogContent");
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      isRootDialog && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
         Paper,
         {
           asChild: true,
           elevation: size === "fullscreen" ? "drawer" : "dialog",
           onBlur: onReactSelectInputBlur,
+          style: {
+            ...assignInlineVars({
+              [nestedDialogCountVar]: `${nestedDialogCount}`
+            }),
+            ...style
+          },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
+          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
+            children,
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {}) }),
+            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
+          ] })
         }
       ) })
     ] }) });

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-CISqwC5b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-BrEQiniF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1p4m0p0']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'e4ko7d']});
 
 export { description };

package/dist/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/packages/react/src/dialog-form/DialogForm.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const DialogForm = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        className,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("form", { ref, ...restProps, children })
+      }
+    );
+  }
+);
+DialogForm.displayName = "@optiaxiom/react/DialogForm";
+
+export { DialogForm };

package/dist/packages/react/src/dialog-header/DialogHeader-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-BfciLqUy.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:['_1chgoms']});
+
+export { close };

package/dist/packages/react/src/dialog-header/DialogHeader.js

@@ -1,11 +1,15 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { IconX } from '../icons/IconX.js';
+import { close } from './DialogHeader-css.js';
 
 const DialogHeader = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Box,
       {
         display: "flex",
@@ -15,7 +19,20 @@ const DialogHeader = forwardRef(
         pb: "16",
         ref,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              "aria-label": "Close",
+              asChild: true,
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              ...close(),
+              children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+            }
+          ),
+          children
+        ]
       }
     );
   }

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-Dv5wY6Xw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-BYTSNFYm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'gwveif']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'p4nshq']});
 
 export { title };

package/dist/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CFl9bQXD.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['_1pfvy0r']});
+
+export { content };

package/dist/packages/react/src/disclosure-content/DisclosureContent.js

@@ -4,10 +4,11 @@ import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
+import { content } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
   useDisclosureContext("DisclosureContent");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-yc6AnVC8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-B2AxUXYe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_7v5b13',start:'foibfu'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'nvcn3v']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1iqpti',start:'_12c8aso'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1197x96']});
 
 export { icon, trigger };

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger.js

@@ -13,12 +13,19 @@ import '../sprinkles/sprinklesMerge.js';
 import { trigger, icon } from './DisclosureTrigger-css.js';
 
 const DisclosureTrigger = forwardRef(
-  ({ addonAfter, addonBefore, chevronPosition = "start", children, ...props }, ref) => {
+  ({
+    addonAfter,
+    addonBefore,
+    chevronPosition = "start",
+    children,
+    className,
+    ...props
+  }, ref) => {
     useDisclosureContext("DisclosureTrigger");
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
     const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
       /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
       endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })

package/dist/packages/react/src/downshift/useDelayedState.js

@@ -4,16 +4,16 @@ function useDelayedState(defaultValue, state) {
   const [value, setValue] = useState(defaultValue);
   const valueRef = useRef();
   useEffect(() => {
-    if (valueRef.current !== void 0) {
+    if (valueRef.current !== undefined) {
       setValue(valueRef.current);
-      valueRef.current = void 0;
+      valueRef.current = undefined;
     }
   }, [state]);
   return [
     value,
     (value2) => {
       if (state) {
-        valueRef.current = void 0;
+        valueRef.current = undefined;
         setValue(value2);
       } else {
         valueRef.current = value2;

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-BFOQJ18q.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-ByqBa1Sw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'l0ny9i']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_4kgoqj']});
 
 export { actions };

package/dist/packages/react/src/drawer-content/DrawerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-BpkmGS7M.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-B-EGWoTb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'fjf60b'],variants:{position:{bottom:[{borderT:'1'},'h4w36x'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1j536lk'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1v1bxwq']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1qj8i6u'],variants:{position:{bottom:[{borderT:'1'},'_1aex8bp'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1yexs3q'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1bm73cu']}}});
 
 export { content };

package/dist/packages/react/src/drawer-content/DrawerContent.js

@@ -2,11 +2,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDrawerContext } from '../drawer-context/DrawerContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
@@ -20,7 +20,7 @@ const mapPositionToTransitionSide = {
 const DrawerContent = forwardRef(
   ({ children, position = "right", ...props }, ref) => {
     const { open } = useDrawerContext("DrawerContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(
         Transition,

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-84_ku30Q.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CB8-mW-z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_9zu8hj']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1os6dff']});
 
 export { description };

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-B0Gvt2zd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CbppEH-G.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'faxamk']});
+var title = recipeRuntime({base:[{flex:'1'},'_1cyua2f']});
 
 export { title };

package/dist/packages/react/src/dropdown-menu-content/DropdownMenuContent.js

@@ -2,13 +2,24 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
+const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    MenuListbox,
+    {
+      asChild: true,
+      minW: loading ? "trigger" : undefined,
+      provider: "dropdown-menu",
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset: 4, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+    }
+  ) }) });
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 

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

@@ -2,21 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
+const DropdownMenuSubContent = forwardRef(({ children, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
-    RadixMenu.SubContent,
-    {
-      alignOffset,
-      ref,
-      sideOffset,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubContent, { alignOffset: -4, ref, sideOffset: 0, children }) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-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 { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { FieldContext } from '../field-context/FieldContext.js';
@@ -41,11 +41,11 @@ const Field = forwardRef(
         FieldContext.Provider,
         {
           value: {
-            descriptionId: description ? descriptionId : void 0,
+            descriptionId: description ? descriptionId : undefined,
             error: !!error,
-            errorId: error ? errorId : void 0,
+            errorId: error ? errorId : undefined,
             inputId,
-            labelId: label ? labelId : void 0
+            labelId: label ? labelId : undefined
           },
           children
         }

package/dist/packages/react/src/field-context/FieldContext.js

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

package/dist/packages/react/src/field-label/FieldLabel.js

@@ -1,16 +1,15 @@
 "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 { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-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 { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
-import { HoverCard } from '../hover-card/HoverCard.js';
-import { HoverCardContent } from '../hover-card-content/HoverCardContent.js';
-import { HoverCardTrigger } from '../hover-card-trigger/HoverCardTrigger.js';
 import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';
 import { Text } from '../text/Text.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
 
 const FieldLabel = forwardRef(
   ({
@@ -51,21 +50,26 @@ const FieldLabel = forwardRef(
           ] })
         }
       ),
-      info && /* @__PURE__ */ jsxs(HoverCard, { keepOpenOnActivation: true, children: [
-        /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Information hover",
-            border: "0",
-            color: "fg.secondary",
-            h: "2xs",
-            icon: /* @__PURE__ */ jsx(IconCircleQuestion, {}),
-            p: "0",
-            w: "2xs"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(HoverCardContent, { side: "top", sideOffset: 5, children: info })
-      ] })
+      info && /* @__PURE__ */ jsx(Tooltip, { content: info, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Information hover",
+          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"
+        }
+      ) })
     ] });
   }
 );