@optiaxiom/react 1.4.5 → 1.5.1

package/dist/esm/packages/react/src/data-table/DataTableRow.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import '../table/Table.js';
+import '../table/TableAction.js';
+import '../table/TableBody.js';
+import '../table/TableCell.js';
+import '../table/TableHeader.js';
+import '../table/TableHeaderCell.js';
+import { TableRow } from '../table/TableRow.js';
+import { useDataTableContext } from './DataTableContext.js';
+import { DataTableRowProvider } from './DataTableRowContext.js';
+
+const DataTableRow = forwardRef(
+  ({ children, index, row, ...props }, outerRef) => {
+    const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
+    const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
+    const labelId = useId();
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    useEffect(() => {
+      if (highlightedIndex !== index) {
+        return;
+      }
+      if (!innerRef.current?.contains(document.activeElement)) {
+        innerRef.current?.focus();
+      }
+      return () => setSubHighlightedIndex(-1);
+    }, [highlightedIndex, index]);
+    const [actions, setActions] = useState([]);
+    const primary = actions.find((action) => action.primary);
+    const [selector, setSelector] = useState();
+    const focusManaged = Boolean(selector || primary);
+    const onActionMount = useEffectEvent(
+      ({
+        primary: primary2,
+        ref: ref2
+      }) => {
+        setActions((actions2) => [...actions2, { primary: primary2, ref: ref2 }]);
+        return () => setActions(
+          (actions2) => actions2.filter((action) => action.ref !== ref2)
+        );
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        "aria-labelledby": labelId,
+        "aria-selected": row.getCanSelect() ? row.getIsSelected() : void 0,
+        "data-focus-visible": focusManaged ? "" : void 0,
+        "data-selected": row.getIsSelected() ? "" : void 0,
+        onClick: (event) => {
+          if (selector && getAssociatedControl(event) !== selector.current) {
+            table.setRowSelection({ [row.id]: true });
+          }
+        },
+        onDoubleClick: (event) => {
+          if (!primary || event.target instanceof Element && primary.ref.current?.contains(event.target)) {
+            return;
+          }
+          event.preventDefault();
+          document.getSelection()?.empty();
+          primary.ref.current?.click();
+        },
+        onFocus: (event) => {
+          if (focusManaged) {
+            setHighlightedIndex(index);
+            if (event.target === event.currentTarget) {
+              setSubHighlightedIndex(-1);
+            }
+          }
+        },
+        onKeyDown: (event) => {
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (event.target instanceof HTMLElement && event.target !== selector?.current && (event.target.isContentEditable || ["input", "select", "textarea"].includes(event.target.localName))) {
+            return;
+          }
+          const { rows } = table.getRowModel();
+          if (focusManaged && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
+            if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
+              event.preventDefault();
+              setHighlightedIndex(nextIndex);
+              if (selector) {
+                const nextRow = rows[nextIndex];
+                if (event.shiftKey && row.getCanMultiSelect()) {
+                  table.setRowSelection(
+                    (selection) => selection[nextRow.id] ? {
+                      ...selection,
+                      [row.id]: false
+                    } : {
+                      ...selection,
+                      [nextRow.id]: true
+                    }
+                  );
+                } else {
+                  table.setRowSelection({
+                    [nextRow.id]: true
+                  });
+                }
+              }
+            }
+          } else if (focusManaged && document.activeElement === event.currentTarget && event.key === "ArrowRight") {
+            const nextIndex = subHighlightedIndex + 1;
+            if (nextIndex <= actions.length - 1) {
+              event.preventDefault();
+              setSubHighlightedIndex(nextIndex);
+            }
+          } else if (event.currentTarget === document.activeElement) {
+            if (event.key === " " && selector) {
+              event.preventDefault();
+              row.toggleSelected();
+            } else if (event.key === "Enter" && primary) {
+              event.preventDefault();
+              primary.ref.current?.click();
+            }
+          }
+        },
+        ref,
+        tabIndex: focusManaged ? (highlightedIndex === -1 || highlightedIndex === index) && subHighlightedIndex === -1 ? 0 : -1 : void 0,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          DataTableRowProvider,
+          {
+            actions: actions.map(({ ref: ref2 }) => ref2),
+            focusManaged,
+            highlightedIndex: subHighlightedIndex,
+            labelId,
+            onActionMount,
+            row,
+            setHighlightedIndex: useEffectEvent((nextIndex) => {
+              setSubHighlightedIndex(nextIndex);
+              if (nextIndex === -1) {
+                innerRef.current?.focus();
+              }
+            }),
+            setSelector,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+DataTableRow.displayName = "@optiaxiom/react/DataTableRow";
+const getAssociatedControl = (event) => {
+  if (event.target instanceof Element) {
+    const label = event.target.closest("label");
+    if (label && event.currentTarget.contains(label) && label.control) {
+      return label.control;
+    }
+  }
+  return;
+};
+
+export { DataTableRow };

package/dist/esm/packages/react/src/data-table/DataTableRowContext.js

@@ -0,0 +1,42 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [DataTableRowProvider, useDataTableRowContext] = createContext("@optiaxiom/react/DataTableRow", {
+  actions: [],
+  focusManaged: void 0,
+  highlightedIndex: -1,
+  labelId: void 0,
+  onActionMount: void 0,
+  row: void 0,
+  setHighlightedIndex: void 0,
+  setSelector: void 0
+});
+const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
+  column,
+  getContext: () => ({}),
+  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+}));
+const fakeRow = (table, rowIndex) => ({
+  getCanMultiSelect: () => false,
+  getCanSelect: () => false,
+  getCenterVisibleCells: fakeCellsFactory(
+    table.getCenterVisibleLeafColumns(),
+    rowIndex
+  ),
+  getIsSelected: () => false,
+  getLeftVisibleCells: fakeCellsFactory(
+    table.getLeftVisibleLeafColumns(),
+    rowIndex
+  ),
+  getRightVisibleCells: fakeCellsFactory(
+    table.getRightVisibleLeafColumns(),
+    rowIndex
+  ),
+  getToggleSelectedHandler: () => (_event) => {
+  },
+  id: "loading" + rowIndex,
+  toggleSelected: (_value) => {
+  }
+});
+
+export { DataTableRowProvider, fakeRow, useDataTableRowContext };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CNZPhQM5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Cvg6hsJf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1drwirr']});
-var date = recipeRuntime({base:'_6f6e93'});
-var input = recipeRuntime({base:'kh9z8c'});
-var picker = recipeRuntime({base:'_19p7ghc'});
+var clear = recipeRuntime({base:[{size:'sm'},'ggbiy2']});
+var date = recipeRuntime({base:'_6wiklc'});
+var input = recipeRuntime({base:'q6yqsp'});
+var picker = recipeRuntime({base:'_1p75z5e'});
 
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});

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

@@ -1,7 +1,12 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { FocusBookmarkRestore } from '../focus-bookmark/FocusBookmarkRestore.js';
+import 'react';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
 import { NestedDialogProvider } from '../nested-dialog-context/NestedDialogContext.js';
 import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 import { DialogProvider } from './DialogContext.js';
@@ -23,7 +28,10 @@ function Dialog({
     "Dialog",
     open
   );
-  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DialogProvider, { nestedDialogCount, open, children }) }) });
+  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxs(DialogProvider, { nestedDialogCount, open, children: [
+    /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
+    children
+  ] }) }) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CmIZK1cU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DklKq-BZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'_1hzrqb0']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'_17rod27']});
 
 export { body };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DsS2VGDY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DZ8Q2jnW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1u24qjc'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'r8o33f'],variants:{size:{sm:'_1hta997',md:'_1c3r2wz',lg:'o7w2ui',fullscreen:'_12sejwk'}}});
-var nestedDialogCountVar = 'var(--_1ogyqjw)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1h4f8r4'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'swb4gw'],variants:{size:{sm:'_1jtrr1k',md:'du2htg',lg:'_1yx5uxz',fullscreen:'mpplo8'}}});
+var nestedDialogCountVar = 'var(--_3eztif)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog/DialogContent.js

@@ -18,14 +18,7 @@ import { backdrop, content, nestedDialogCountVar } from './DialogContent-css.js'
 import { useDialogContext } from './DialogContext.js';
 
 const DialogContent = forwardRef(
-  ({
-    children,
-    className,
-    size = "md",
-    style,
-    transitionType = "fade",
-    ...props
-  }, outerRef) => {
+  ({ children, className, size = "md", style, ...props }, outerRef) => {
     const { nestedDialogCount, open } = useDialogContext(
       "@optiaxiom/react/DialogContent"
     );
@@ -40,7 +33,7 @@ const DialogContent = forwardRef(
           children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { forceMount: true })
         }
       ) }) }),
-      /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
         Paper,
         {
           asChild: true,

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

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

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-xheREv7l.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DoCIMRp7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_6xt3n9']});
-var close = recipeRuntime({base:['q5nog9']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_131ws6d']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'rrhtup']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_7656io']});
+var close = recipeRuntime({base:['ekrgwu']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'aliz0f']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'ska9pb']});
 
 export { actions, close, description, title };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-CuQ5uhBg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-aNtSD3_M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_2l1lry']});
-var outer = recipeRuntime({base:[{display:'grid'},'_12urdvb']});
+var inner = recipeRuntime({base:['_12lo52b']});
+var outer = recipeRuntime({base:[{display:'grid'},'_154cvtx'],variants:{scale:{false:'_2se9xy',true:{}}}});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure/DisclosureContent.js

@@ -10,7 +10,7 @@ import { TransitionGroup } from '../transition/TransitionGroup.js';
 import { outer, inner } from './DisclosureContent-css.js';
 import { useDisclosureContext } from './DisclosureContext.js';
 
-const DisclosureContent = forwardRef(({ children, transitionType = "slide", ...props }, ref) => {
+const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
   const { open } = useDisclosureContext("@optiaxiom/react/DisclosureContent");
   const [skipAnimations, setSkipAnimations] = useState(Boolean(open));
   useEffect(() => {
@@ -18,15 +18,17 @@ const DisclosureContent = forwardRef(({ children, transitionType = "slide", ...p
       requestAnimationFrame(() => setSkipAnimations(false));
     }
   }, [skipAnimations]);
-  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(
-    Transition,
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", skipAnimations, type: "pop", children: /* @__PURE__ */ jsx(
+    Box,
     {
-      "data-side": "bottom",
-      skipAnimations,
-      type: transitionType,
-      children: /* @__PURE__ */ jsx(Box, { ...outer(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { forceMount: true, children: /* @__PURE__ */ jsx(Box, { pb: "8", pt: "4", ref, ...props, children }) }) }) })
+      ...outer({
+        scale: Boolean(
+          "data-transition-scale" in props && props["data-transition-scale"]
+        )
+      }),
+      children: /* @__PURE__ */ jsx(Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { forceMount: true, children: /* @__PURE__ */ jsx(Box, { pb: "8", pt: "4", ref, ...props, children }) }) })
     }
-  ) });
+  ) }) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-F5ng0xoR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DcMs5fFG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_3ldc21',start:'s1py1u'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1opaied']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1j39dt9']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'dph83v',start:'_1v8fla8'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1jljdvk']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_7pp2d6']});
 
 export { icon, root, trigger };

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

@@ -22,29 +22,20 @@ const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ..
       onPresenceChange: setPresence,
       open,
       presence,
-      children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
-        ModalListbox,
+      children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalListbox, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+        RadixMenu.Content,
         {
-          asChild: true,
-          minW: loading ? "trigger" : void 0,
-          provider: "dropdown-menu",
-          ...props,
-          children: /* @__PURE__ */ jsx(
-            RadixMenu.Content,
-            {
-              align,
-              onPointerMove: (event) => {
-                if (!open) {
-                  event.preventDefault();
-                }
-              },
-              ref,
-              sideOffset: 4,
-              children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+          align,
+          onPointerMove: (event) => {
+            if (!open) {
+              event.preventDefault();
             }
-          )
+          },
+          ref,
+          sideOffset: 4,
+          children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
         }
-      ) })
+      ) }) })
     }
   );
 });

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

@@ -12,25 +12,16 @@ const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref)
   const { open, setPresence } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuSubContent"
   );
-  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
-    ModalListbox,
+  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalListbox, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+    RadixMenu.SubContent,
     {
-      asChild: true,
-      minW: "trigger",
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        RadixMenu.SubContent,
-        {
-          alignOffset: -4,
-          asChild,
-          ref,
-          sideOffset: 0,
-          children
-        }
-      )
+      alignOffset: -4,
+      asChild,
+      ref,
+      sideOffset: 0,
+      children
     }
-  ) }) });
+  ) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

package/dist/esm/packages/react/src/focus-bookmark/FocusBookmarkRestore.js

@@ -0,0 +1,19 @@
+"use client";
+import { forwardRef, useImperativeHandle } from 'react';
+import { useFocusBookmarkRestore } from './useFocusBookmarkRestore.js';
+
+const FocusBookmarkRestore = forwardRef((_props, ref) => {
+  const restore = useFocusBookmarkRestore();
+  useImperativeHandle(
+    ref,
+    () => ({
+      contains: () => false,
+      focus: restore
+    }),
+    [restore]
+  );
+  return null;
+});
+FocusBookmarkRestore.displayName = "@optiaxiom/react/FocusBookmarkRestore";
+
+export { FocusBookmarkRestore };

package/dist/esm/packages/react/src/focus-bookmark/bookmarks.js

@@ -0,0 +1,6 @@
+"use client";
+const bookmarks = {
+  current: []
+};
+
+export { bookmarks };

package/dist/esm/packages/react/src/focus-bookmark/useFocusBookmark.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { bookmarks } from './bookmarks.js';
+
+const useFocusBookmark = (ref) => {
+  useEffect(() => {
+    bookmarks.current.push(ref);
+    return () => {
+      bookmarks.current = bookmarks.current.filter(
+        (bookmark) => bookmark !== ref
+      );
+    };
+  }, [ref]);
+};
+
+export { useFocusBookmark };

package/dist/esm/packages/react/src/focus-bookmark/useFocusBookmarkRestore.js

@@ -0,0 +1,18 @@
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import 'react';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import 'react/jsx-runtime';
+import '../utils/isHoverSupported.js';
+import { bookmarks } from './bookmarks.js';
+
+const useFocusBookmarkRestore = () => {
+  return useEffectEvent(() => {
+    if (!bookmarks.current.length) {
+      return;
+    }
+    bookmarks.current[bookmarks.current.length - 1].current?.focus();
+  });
+};
+
+export { useFocusBookmarkRestore };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-viM0wzw7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-jjeqD_rW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'tlb7ip'});
+var mark = recipeRuntime({base:'ubpntc'});
 
 export { mark };

package/dist/esm/packages/react/src/hooks/useResponsiveMatches.js

@@ -3,7 +3,7 @@ import { conditions } from '../utils/conditions.js';
 import 'react';
 import 'react/jsx-runtime';
 import '../utils/isHoverSupported.js';
-import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@7.17.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
+import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@8.0.1_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/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BGbZpTX4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-Bp0TILRb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'d9dknh',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_17qsynw']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1byd6k5']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1rqrgqx'],variants:{offset:{false:'_1oc9er9',true:{}},position:{'bottom-right':'_1rdgh17','top-right':'xanft1'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_17h8k5u']});
+var badge = recipeRuntime({base:'_1nop32h',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'wc2rsz']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'v1ycc9']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'dy9djd'],variants:{offset:{false:'_1cahyis',true:{}},position:{'bottom-right':'_1deypgm','top-right':'e6siu4'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'la2cyc']});
 
 export { badge, floating, indicator };

package/dist/esm/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-BzCBwfN1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DJBWP3vP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'z31bk8',variants:{empty:{false:{},true:'kdw7yb'}}});
-var input = recipeRuntime({base:'_2skxgf'});
+var editor = recipeRuntime({base:'ooyjp0',variants:{empty:{false:{},true:'_5l3sew'}}});
+var input = recipeRuntime({base:'_143w7pb'});
 
 export { editor, input };

package/dist/esm/packages/react/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/esm/packages/react/src/input/InputAddon.js

@@ -4,6 +4,9 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { isFocusCaptured } from '../utils/isFocusCaptured.js';
+import '../utils/isHoverSupported.js';
 import { useInputContext } from './InputContext.js';
 
 const InputAddon = forwardRef(
@@ -14,7 +17,7 @@ const InputAddon = forwardRef(
     const addonProps = addonPointerEvents === "none" ? {
       fontSize: "md",
       onPointerUp: (event) => {
-        if (event.currentTarget.contains(document.activeElement)) {
+        if (isFocusCaptured(event)) {
           return;
         }
         event.preventDefault();