@optiaxiom/react 1.4.4 → 1.5.0

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-DgDqM1Tx.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Nbqa08BS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-4__Sb9ku.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1gwdk5i']});
-var date = recipeRuntime({base:'_5zwwji'});
-var input = recipeRuntime({base:'_1p71rjo'});
-var picker = recipeRuntime({base:'_11ad37u'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1xs1xvh']});
+var date = recipeRuntime({base:'_1lth73p'});
+var input = recipeRuntime({base:'chcmry'});
+var picker = recipeRuntime({base:'_615ehu'});
 
 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-DgDqM1Tx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.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/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-PYE_9Omy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BMyUtJSV.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'},'_1gt4lip']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'_1obltlu']});
 
 export { body };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-C64UyTta.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-D0cw8qnd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'pau7of'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'iqpcqx'],variants:{size:{sm:'dxl09s',md:'cqk3zn',lg:'_1v0wvqp',fullscreen:'_1gsnd4t'}}});
-var nestedDialogCountVar = 'var(--n6yn25)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1640xu9'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'nvttb3'],variants:{size:{sm:'_1kssv0e',md:'_10n6qvh',lg:'bqedxz',fullscreen:'jhv17d'}}});
+var nestedDialogCountVar = 'var(--_1r5syh2)';
 
 export { backdrop, content, nestedDialogCountVar };

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
@@ -8,7 +8,7 @@ import { Backdrop } from '../backdrop/Backdrop.js';
 import { ModalProvider } from '../modal/ModalContext.js';
 import '../modal/ModalLayer.js';
 import { Paper } from '../paper/Paper.js';
-import { usePortalContext } from '../portal/PortalContext.js';
+import { Portal } from '../portal/Portal.js';
 import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
 import '../utils/conditions.js';
@@ -18,30 +18,22 @@ 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"
     );
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    const { container } = usePortalContext("@optiaxiom/react/DialogContent");
-    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { container, forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(TransitionGroup, { open, children: [
+      /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
         Backdrop,
         {
           asChild: true,
           ...backdrop({ hidden: nestedDialogCount > 0 }),
-          children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {})
+          children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { forceMount: true })
         }
-      ) }),
-      /* @__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,
@@ -55,10 +47,10 @@ const DialogContent = forwardRef(
           },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children }) })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { forceMount: true, ref, children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children }) })
         }
-      ) })
-    ] }) });
+      ) }) })
+    ] });
   }
 );
 DialogContent.displayName = "@optiaxiom/react/DialogContent";

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.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-DgDqM1Tx.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-COIerQaX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DDjHJ5Rg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1g24o8o']});
-var close = recipeRuntime({base:['_1yiyo0l']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_7yjd37']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'u5767i']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'jjqk1k']});
+var close = recipeRuntime({base:['_1ndbtvp']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1qr3e4h']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1j7ccb0']});
 
 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-DgDqM1Tx.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-HUfpq0Vn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-C9U-yeAt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1qk1gw1']});
-var outer = recipeRuntime({base:[{display:'grid'},'_19qpmut']});
+var inner = recipeRuntime({base:['myp5s8']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1jloj4n'],variants:{scale:{false:'cbk36e',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-DgDqM1Tx.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-CdrxH1iX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-BV48zban.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'et1ph8',start:'kizgyz'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'l33nn9']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_12ocav3']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'c8qdz',start:'_12ajhfp'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'cpebqm']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1xmhnt0']});
 
 export { icon, root, trigger };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BPbfpjzo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DOwxn4GA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1daokz3'});
+var mark = recipeRuntime({base:'_1c685zg'});
 
 export { mark };

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

@@ -3,13 +3,13 @@ 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) => {
   const matches = {
     base: true,
-    sm: useMediaQuery(conditions.conditions.sm["@media"]),
+    sm: useMediaQuery(conditions.conditions.sm["@media"], true),
     md: useMediaQuery(conditions.conditions.md["@media"])
   };
   for (const name of list) {

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DS0LbUhe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-Cqc8wAby.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_10hxl4a',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'hacc8h']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_27iaf']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'rhz1as'],variants:{offset:{false:'q0dacf',true:{}},position:{'bottom-right':'f07d87','top-right':'i9bmk1'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1evqik3']});
+var badge = recipeRuntime({base:'sgq41h',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_1enkwai']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'g2muv0']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1im4w3f'],variants:{offset:{false:'_1ufq5k1',true:{}},position:{'bottom-right':'_11fttsg','top-right':'rsdxgh'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1hpm0bo']});
 
 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-DgDqM1Tx.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DKc-cWJm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-BGlStM9W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'j4c5g0',variants:{empty:{false:{},true:'_1uu00r'}}});
-var input = recipeRuntime({base:'efmxos'});
+var editor = recipeRuntime({base:'_4fqrgs',variants:{empty:{false:{},true:'kqwghv'}}});
+var input = recipeRuntime({base:'_1nx10cc'});
 
 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-DgDqM1Tx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.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();

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BnLQthxH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-nfmZzL1M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1gsxk40',{bg:'transparent',flex:'auto',w:'full'},'_116un6b','ekj1as'],variants:{size:{md:{},lg:{},xl:['_1ch428j']}}});
+var control = recipeRuntime({base:['je4y4z',{bg:'transparent',flex:'auto',w:'full'},'att9mv','_1gmt08m'],variants:{size:{md:{},lg:{},xl:['e7te21']}}});
 
 export { control };

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

@@ -12,7 +12,16 @@ import { control } from './InputControl-css.js';
 
 const Slot = createSlot("@optiaxiom/react/InputControl");
 const InputControl = forwardRef(
-  ({ asChild, children, className, error: errorProp, size = "md", ...props }, outerRef) => {
+  ({
+    asChild,
+    children,
+    className,
+    error: errorProp,
+    onChange,
+    onValueChange,
+    size = "md",
+    ...props
+  }, outerRef) => {
     const Comp = asChild ? Slot : "input";
     const disabled = props.disabled;
     const readOnly = props.readOnly;
@@ -34,7 +43,23 @@ const InputControl = forwardRef(
         "data-readonly": readOnly ? "" : void 0,
         ...control({ size }, className),
         ...boxProps,
-        children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
+        children: /* @__PURE__ */ jsx(
+          Comp,
+          {
+            id: inputId,
+            onChange: (event) => {
+              onChange?.(
+                event
+              );
+              if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+                onValueChange?.(event.target.value);
+              }
+            },
+            ref,
+            ...restProps,
+            children
+          }
+        )
       }
     );
   }

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-QKro-bni.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BnLQthxH.css';
-import './../../../../assets/src/input/InputRoot.css.ts.vanilla-Zuc9dU8n.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BopGCQ-R.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-nfmZzL1M.css';
+import './../../../../assets/src/input/InputRoot.css.ts.vanilla-DV9HPDg-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1i461uj']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'zy8x0w']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DYimwKhq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BjujHWpO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',flexDirection:'row',fontFamily:'sans',gap:'2',whiteSpace:'nowrap'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',px:'6',rounded:'sm'},'zf3o5d'],subtle:{}}}});
-var keys = recipeRuntime({base:'edg5lb'});
+var kbd = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',flexDirection:'row',fontFamily:'sans',gap:'2',whiteSpace:'nowrap'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',px:'6',rounded:'sm'},'cap2cb'],subtle:{}}}});
+var keys = recipeRuntime({base:'azr6ej'});
 
 export { kbd, keys };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-QKro-bni.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-WHx-aTZW.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-VZEhd-tN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BopGCQ-R.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-O9AqM-cn.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-C14Cg9ip.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_16ei0q6']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'u7n3sq']});
 var content = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.uavbkh';
-var reset = 'optiaxiom._1jt75cv';
+var components = 'optiaxiom._1wo04pn';
+var reset = 'optiaxiom._15szljk';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };