@optiaxiom/react 1.4.4 → 1.5.0

package/dist/esm/packages/react/src/menu/MenuSubTrigger.js

@@ -1,29 +1,37 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useCommandContext } from '../command/CommandContext.js';
-import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { usePopoverContext } from '../popover/PopoverContext.js';
 import { MenuItem } from './MenuItem.js';
+import { useMenuSubContext } from './MenuSubContext.js';
 
 const MenuSubTrigger = forwardRef(
   ({
     children,
-    contentRef,
     item,
     onPointerDown,
     onPointerEnter,
     onPointerLeave,
+    onPointerMove,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsx(
+    const { contentRef, triggerRef } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    const pointerEnterRef = useRef(false);
+    const innerRef = useRef();
+    const ref = useComposedRefs(innerRef, outerRef);
+    useEffect(() => {
+      if (open && highlightedItem === item && innerRef.current) {
+        triggerRef.current = innerRef.current;
+      }
+    }, [highlightedItem, item, open, triggerRef]);
+    return /* @__PURE__ */ jsx(
       MenuItem,
       {
         addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
@@ -36,17 +44,23 @@ const MenuSubTrigger = forwardRef(
         },
         onPointerEnter: (event) => {
           onPointerEnter?.(event);
-          if (highlightedItem !== item) {
+          if (event.defaultPrevented) {
             return;
           }
-          downshift.selectItem(item);
+          if (highlightedItem === item) {
+            pointerEnterRef.current = true;
+          }
         },
         onPointerLeave: (event) => {
           onPointerLeave?.(event);
+          pointerEnterRef.current = false;
           const box = contentRef.current?.getBoundingClientRect();
           if (!box) {
             return;
           }
+          if (pauseInteractionRef.current.isInsideTriangle) {
+            return;
+          }
           const bottom = {
             x: box.left,
             y: box.top + box.height
@@ -67,11 +81,21 @@ const MenuSubTrigger = forwardRef(
             pauseInteractionRef.current.isInsideTriangle = null;
           }, 20);
         },
+        onPointerMove: (event) => {
+          onPointerMove?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (pointerEnterRef.current && downshift.isOpen) {
+            downshift.selectItem(item);
+          }
+          pointerEnterRef.current = false;
+        },
         ref,
         ...props,
         children
       }
-    ) }) });
+    );
   }
 );
 MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";

package/dist/esm/packages/react/src/menu/MenuTrigger.js

@@ -21,7 +21,13 @@ import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { useMenuContext } from './MenuContext.js';
 
 const MenuTrigger = forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    onKeyDown,
+    ...props
+  }, outerRef) => {
     const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
     const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
     const buttonRef = useRef(null);
@@ -33,6 +39,10 @@ const MenuTrigger = forwardRef(
         "aria-labelledby": labelId,
         asChild: true,
         onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
           switch (event.key) {
             case "ArrowDown":
               setOpen(true);

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-DaBVrbx4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Dwc1LppA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'jk09kn'],variants:{maxH:{xs:'_1h5ez3r',sm:'_1bp5dj6',md:'_776zap',lg:'_1atvek2',full:{}},minW:{'0':{},trigger:'d5sghg'},provider:{'dropdown-menu':'_3zm8lo',popover:'j42woq',popper:'wzaarb'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_4a5ui8'],variants:{maxH:{xs:'wkrj2i',sm:'_1iggozq',md:'_44eops',lg:'_45zj6j',full:{}},minW:{'0':{},trigger:'wpo0rv'},provider:{'dropdown-menu':'_1770a28',popover:'_356dka',popper:'tjo06o'}}});
 
 export { listbox };

package/dist/esm/packages/react/src/nav/Nav-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-BV6M1Cbh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-CDY2trIw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1balfi3']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1d44vgh']});
 
 export { nav };

package/dist/esm/packages/react/src/nav/NavAccountItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-afigyV0I.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-B_diGx7I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_3arvqw',true:'_1fqriqs'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_81szjv',true:'_1y8s27t'}}});
 
 export { item };

package/dist/esm/packages/react/src/nav/NavBody-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 body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'flex-start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});

package/dist/esm/packages/react/src/nav/NavGroup.js

@@ -5,24 +5,27 @@ import { forwardRef } from 'react';
 import { Disclosure } from '../disclosure/Disclosure.js';
 import '../disclosure/DisclosureContent.js';
 import '../disclosure/DisclosureTrigger.js';
+import { Flex } from '../flex/Flex.js';
 import { NavGroupProvider } from './NavGroupContext.js';
 
 const NavGroup = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, collapsible, defaultOpen = true, onOpenChange, open, ...props }, ref) => {
     const groupId = useId();
-    return /* @__PURE__ */ jsx(NavGroupProvider, { id: groupId, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavGroupProvider, { collapsible, id: groupId, children: /* @__PURE__ */ jsx(
       Disclosure,
       {
         alignItems: "stretch",
         "aria-labelledby": props["aria-label"] ? void 0 : groupId,
-        asChild: true,
         defaultOpen: true,
         display: "flex",
         flexDirection: "column",
+        ref,
+        role: "group",
+        ...collapsible && { defaultOpen, onOpenChange, open },
         ...props,
-        children: /* @__PURE__ */ jsx("li", { ref, children })
+        children
       }
-    ) });
+    ) }) }) });
   }
 );
 NavGroup.displayName = "@optiaxiom/react/NavGroup";

package/dist/esm/packages/react/src/nav/NavGroupContent.js

@@ -10,12 +10,12 @@ const NavGroupContent = forwardRef(({ children, ...props }, ref) => {
     DisclosureContent,
     {
       asChild: true,
+      "data-transition-scale": true,
       display: "flex",
       flexDirection: "column",
       gap: "4",
       pb: "0",
       pt: "0",
-      transitionType: "slidePop",
       ...props,
       children: /* @__PURE__ */ jsx("ul", { ref, children })
     }

package/dist/esm/packages/react/src/nav/NavGroupContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [NavGroupProvider, useNavGroupContext] = createContext("@optiaxiom/react/NavGroup", { id: void 0 });
+const [NavGroupProvider, useNavGroupContext] = createContext("@optiaxiom/react/NavGroup", { collapsible: false, id: void 0 });
 
 export { NavGroupProvider, useNavGroupContext };

package/dist/esm/packages/react/src/nav/NavGroupTrigger.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import '../disclosure/Disclosure.js';
 import '../disclosure/DisclosureContent.js';
 import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
@@ -8,8 +11,10 @@ import { useNavGroupContext } from './NavGroupContext.js';
 
 const NavGroupTrigger = forwardRef(
   ({ children, ...props }, ref) => {
-    const { id } = useNavGroupContext("@optiaxiom/react/NavGroupTrigger");
-    return /* @__PURE__ */ jsx(
+    const { collapsible, id } = useNavGroupContext(
+      "@optiaxiom/react/NavGroupTrigger"
+    );
+    return collapsible ? /* @__PURE__ */ jsx(
       DisclosureTrigger,
       {
         chevronPosition: "end",
@@ -26,6 +31,21 @@ const NavGroupTrigger = forwardRef(
         ...props,
         children
       }
+    ) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        color: "fg.tertiary",
+        fontSize: "sm",
+        h: "sm",
+        id,
+        mb: "4",
+        mt: "8",
+        p: "0",
+        px: "12",
+        ref,
+        w: "auto",
+        children
+      }
     );
   }
 );

package/dist/esm/packages/react/src/nav/NavItem-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/nav/NavItem.css.ts.vanilla-ACTEqCcA.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/nav/NavItem.css.ts.vanilla-BrQFSPpt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1hrvko2']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1wfoz06'],variants:{expanded:{false:'_7q20b0',true:'_18za6t2'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1yux5iv']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_16bitf5'],variants:{expanded:{false:'_1j4nk9t',true:'_1tr9bmv'}}});
 
 export { item, label };

package/dist/esm/packages/react/src/nav/NavItem.js

@@ -38,7 +38,7 @@ const NavItem = forwardRef(
     children = decorateChildren({ asChild, children }, (children2) => {
       tooltip = children2;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Box, { display: "grid", flex: "none", placeItems: "center", size: "lg", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }),
+        icon ? /* @__PURE__ */ jsx(Box, { display: "grid", flex: "none", placeItems: "center", size: "lg", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(Box, { flex: "none", size: "12" }),
         /* @__PURE__ */ jsxs(Box, { ...label({ expanded: Boolean(expanded) }), children: [
           /* @__PURE__ */ jsx(Text, { truncate: true, children: children2 }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", flex: "none", children: fallbackSpan(addonAfter) })

package/dist/esm/packages/react/src/nav/NavList.js

@@ -4,14 +4,9 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useNavGroupContext } from './NavGroupContext.js';
 
 const NavList = forwardRef(
   ({ children, ...props }, ref) => {
-    const { id } = useNavGroupContext("@optiaxiom/react/NavList");
-    if (id) {
-      throw new Error("huh");
-    }
     return /* @__PURE__ */ jsx(
       Box,
       {

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-D_A3QaT2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BymbFie0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'rjl0vo']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1xk9rfl'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_15zydff']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'uumygv']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'igo22j'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'e1wc8g']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/pagination/Pagination.js

@@ -20,7 +20,7 @@ import '../tooltip/TooltipRoot.js';
 import '../tooltip/TooltipTrigger.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { list, cursor, button } from './Pagination-css.js';
-import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.17.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
+import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@8.0.1_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
 
 const Pagination = forwardRef(
   ({
@@ -95,7 +95,6 @@ const Pagination = forwardRef(
                 {
                   asChild: true,
                   color: disabled ? "fg.disabled" : "fg.default",
-                  cursor: disabled ? "not-allowed" : "default",
                   children: /* @__PURE__ */ jsx(IconEllipsis, {})
                 }
               )

package/dist/esm/packages/react/src/paper/Paper-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 paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-K-Vzw2lp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-OjU6W6Y3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'vh1ayn'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1q0tpu1'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/popover/PopoverContent.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { theme } from '@optiaxiom/globals';
+import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef, useRef } from 'react';
@@ -16,7 +15,7 @@ import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 import { usePopoverContext } from './PopoverContext.js';
 
 const PopoverContent = forwardRef(
-  ({ align = "start", children, sideOffset = 2, withArrow, ...props }, outerRef) => {
+  ({ align = "start", children, sideOffset = 4, ...props }, outerRef) => {
     const { open, presence, setPresence } = usePopoverContext(
       "@optiaxiom/react/PopoverContent"
     );
@@ -36,38 +35,14 @@ const PopoverContent = forwardRef(
             p: "16",
             provider: "popover",
             ...props,
-            children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx(
               RadixPopover.Content,
               {
                 align,
+                collisionPadding: 16,
                 ref,
                 sideOffset,
-                children: [
-                  /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children }),
-                  withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    "svg",
-                    {
-                      fill: theme.colors["bg.default"],
-                      height: 4,
-                      preserveAspectRatio: "none",
-                      stroke: theme.colors["border.secondary"],
-                      viewBox: "0 0 30 10",
-                      width: 8,
-                      children: [
-                        /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
-                        /* @__PURE__ */ jsx(
-                          "polyline",
-                          {
-                            points: "0,0 15,10 30,0",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: "2.5"
-                          }
-                        )
-                      ]
-                    }
-                  ) })
-                ]
+                children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children })
               }
             )
           }

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla--j70ophL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-VHfLy_-i.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'z8tjb0']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'zvsdfc']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-QKro-bni.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DMo_bcI0.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-DiPJRBZA.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/toggle-input/ToggleInput.css.ts.vanilla-CCXnMKDM.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-DI-V-pBk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1qgqa8k'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'f1s3hl']});
-var input = recipeRuntime({base:'iqs9g6'});
-var radio = recipeRuntime({base:'_1u460i3'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'g5c3za'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_162qnhy']});
+var input = recipeRuntime({base:'_1jgukhm'});
+var radio = recipeRuntime({base:'_1k5xa1v'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/radio/Radio.js

@@ -37,36 +37,28 @@ const Radio = forwardRef(
         );
       }
     }
-    return /* @__PURE__ */ jsxs(
-      ToggleInput,
-      {
-        description: !!description,
-        ...radio({}, className),
-        ...boxProps,
-        children: [
-          /* @__PURE__ */ jsx(
-            ToggleInputHiddenInput,
-            {
-              checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
-              defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
-              disabled: groupContext?.disabled ?? disabled,
-              name: groupContext?.name ?? name,
-              onBlur: groupContext?.onBlur ?? onBlur,
-              onChange: groupContext?.onChange ?? onChange,
-              ref,
-              type: "radio",
-              ...input(),
-              ...restProps
-            }
-          ),
-          /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator() }) }),
-          (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
-            children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
-            description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
-          ] })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs(ToggleInput, { ...radio({}, className), ...boxProps, children: [
+      /* @__PURE__ */ jsx(
+        ToggleInputHiddenInput,
+        {
+          checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
+          defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
+          disabled: groupContext?.disabled ?? disabled,
+          name: groupContext?.name ?? name,
+          onBlur: groupContext?.onBlur ?? onBlur,
+          onChange: groupContext?.onChange ?? onChange,
+          ref,
+          type: "radio",
+          ...input(),
+          ...restProps
+        }
+      ),
+      /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator() }) }),
+      (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
+        children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
+        description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
+      ] })
+    ] });
   }
 );
 Radio.displayName = "@optiaxiom/react/Radio";

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-Bjhboj4v.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-BM1YCu_Q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'hzmymp']});
-var input = recipeRuntime({base:'_100rwmk'});
-var search = recipeRuntime({base:'_3jmxv8'});
+var clear = recipeRuntime({base:[{size:'sm'},'_3a82lm']});
+var input = recipeRuntime({base:'_1qedhb2'});
+var search = recipeRuntime({base:'_39fuwp'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -30,7 +30,14 @@ import { useSelectContext } from './SelectContext.js';
 import { SelectRadioItem } from './SelectRadioItem.js';
 
 const SelectContent = forwardRef(
-  ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
+  ({
+    align = "start",
+    children,
+    onPointerDown,
+    side = "bottom",
+    size,
+    ...props
+  }, ref) => {
     const { downshift, highlightedItem, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
     const [placed, setPlaced] = useState(false);
     return /* @__PURE__ */ jsx(TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -39,12 +46,22 @@ const SelectContent = forwardRef(
         asChild: true,
         maxH: "sm",
         minW: "trigger",
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
+            return;
+          }
+          event.preventDefault();
+        },
         provider: "popper",
         ref,
         role: "dialog",
         size,
         ...props,
-        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 5, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 4, children: /* @__PURE__ */ jsx(
           ListboxItemized,
           {
             highlightedItem,

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-Cj8fLWBy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-BqyG84oT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_h2fokeqwgislkw3fqntlep77qq/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
+import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_xhwggtma63filsfym6perbhgxm/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_63fvxb',md:'_1nkv9ml',base:'_1i8huaz'},defaultClass:'_1i8huaz'},vertical:{conditions:{sm:'_6801wn',md:'b1s0yf',base:'ito9pp'},defaultClass:'ito9pp'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'qyrt4v',md:'_10y70i9',base:'frui0v'},defaultClass:'frui0v'},vertical:{conditions:{sm:'_116lf03',md:'_15sdqo9',base:'_1gyfqqb'},defaultClass:'_1gyfqqb'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/separator/Separator.js

@@ -4,12 +4,18 @@ import * as RadixSeparator from '@radix-ui/react-separator';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { normalizeResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import '../field/FieldContext.js';
+import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { base, separator } from './Separator-css.js';
 
 const Separator = forwardRef(
   ({ className, orientation = "horizontal", ...props }, ref) => {
+    const resolvedOrientation = useResponsiveMatches({
+      base: "horizontal",
+      ...normalizeResponsiveValue(orientation)
+    });
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -17,7 +23,7 @@ const Separator = forwardRef(
         ref,
         ...base({}, clsx(separator({ orientation }), className)),
         ...props,
-        children: /* @__PURE__ */ jsx(RadixSeparator.Root, {})
+        children: /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation: resolvedOrientation })
       }
     );
   }