@optiaxiom/react 1.7.13 → 1.8.1

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.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-Dql4wsub.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BWlC_xzj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-D5VkMk71.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',transition:'colors',whiteSpace:'nowrap'},'hk9y99'],variants:{interactive:{false:{},true:'owbgre'},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',transition:'colors',whiteSpace:'nowrap'},'_15zi7jo'],variants:{interactive:{false:{},true:'_95k3cf'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

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

@@ -18,10 +18,11 @@ const Pill = forwardRef(
     disabled,
     onClick,
     onDismiss,
+    readOnly,
     size = "sm",
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : onClick || onDismiss ? "button" : "span";
+    const Comp = asChild ? Slot : readOnly ? "span" : "button";
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Box,
@@ -30,7 +31,7 @@ const Pill = forwardRef(
         "data-disabled": disabled ? "" : void 0,
         ...pill(
           {
-            interactive: Boolean(onClick || onDismiss),
+            interactive: Boolean(!readOnly),
             size
           },
           className
@@ -41,6 +42,9 @@ const Pill = forwardRef(
           {
             disabled,
             onClick: (event) => {
+              if (readOnly) {
+                return;
+              }
               onClick?.(event);
               if (event.defaultPrevented) {
                 return;
@@ -51,7 +55,7 @@ const Pill = forwardRef(
             ...restProps,
             children: [
               /* @__PURE__ */ jsx(Text, { truncate: true, children }),
-              onDismiss && /* @__PURE__ */ jsx(Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsx(IconX, {}) })
+              onDismiss && !readOnly && /* @__PURE__ */ jsx(Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsx(IconX, {}) })
             ]
           }
         )

package/dist/esm/packages/react/src/pill/PillGroup.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 
 const PillGroup = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "8", ref, ...props, children });
+    return /* @__PURE__ */ jsx(Group, { flexWrap: "wrap", gap: "8", ref, ...props, children });
   }
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";

package/dist/esm/packages/react/src/pill-menu/PillMenu.js

@@ -2,12 +2,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useState, useMemo } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { resolveItemProperty } from '../command/CommandContext.js';
 import { Menu } from '../menu/Menu.js';
 import '../menu/MenuContent.js';
 import '../menu/MenuTrigger.js';
 import { PillMenuProvider } from './PillMenuContext.js';
-import { PillMenuImpl } from './PillMenuImpl.js';
 
 const PillMenu = forwardRef(
   ({
@@ -33,44 +35,49 @@ const PillMenu = forwardRef(
     const [optionIndexes, setOptionIndexes] = useState(
       () => groupOptions(options)
     );
-    return /* @__PURE__ */ jsx(
-      PillMenuProvider,
+    const value = options.filter((item) => resolveItemProperty(item.selected));
+    return /* @__PURE__ */ jsx(PillMenuProvider, { value, children: /* @__PURE__ */ jsx(
+      Menu,
       {
-        options: options.filter((item) => resolveItemProperty(item.selected)),
+        empty,
+        inputValue,
+        inputVisible,
+        loading,
+        onInputValueChange,
+        onOpenChange: (open2) => {
+          setOpen(open2);
+          if (open2) {
+            setOptionIndexes(groupOptions(options));
+          }
+        },
+        open,
+        options: useMemo(
+          () => optionIndexes.map(({ group, index }) => ({
+            ...options[index],
+            ...group && {
+              group: {
+                hidden: true,
+                label: group,
+                separator: true
+              }
+            }
+          })),
+          [optionIndexes, options]
+        ),
+        placeholder,
         children: /* @__PURE__ */ jsx(
-          Menu,
+          Box,
           {
-            empty,
-            inputValue,
-            inputVisible,
-            loading,
-            onInputValueChange,
-            onOpenChange: (open2) => {
-              setOpen(open2);
-              if (open2) {
-                setOptionIndexes(groupOptions(options));
-              }
-            },
-            open,
-            options: useMemo(
-              () => optionIndexes.map(({ group, index }) => ({
-                ...options[index],
-                ...group && {
-                  group: {
-                    hidden: true,
-                    label: group,
-                    separator: true
-                  }
-                }
-              })),
-              [optionIndexes, options]
-            ),
-            placeholder,
-            children: /* @__PURE__ */ jsx(PillMenuImpl, { ref, ...props, children })
+            alignItems: value.length ? void 0 : "start",
+            display: "flex",
+            flexDirection: "column",
+            ref,
+            ...props,
+            children
           }
         )
       }
-    );
+    ) });
   }
 );
 PillMenu.displayName = "@optiaxiom/react/PillMenu";

package/dist/esm/packages/react/src/pill-menu/PillMenuPill.js

@@ -5,16 +5,23 @@ import { useCommandContext, resolveItemProperty } from '../command/CommandContex
 import { useMenuContext } from '../menu/MenuContext.js';
 import { Pill } from '../pill/Pill.js';
 import '../pill/PillGroup.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import { usePillMenuContext } from './PillMenuContext.js';
 
 const PillMenuPill = forwardRef(
-  ({ item, onKeyDown, ...props }, ref) => {
-    const { options } = usePillMenuContext("@optiaxiom/react/PillMenuPill");
+  ({ item, onKeyDown, readOnly, ...props }, ref) => {
+    const { value: options } = usePillMenuContext(
+      "@optiaxiom/react/PillMenuPill"
+    );
     const { open, setOpen } = useMenuContext("@optiaxiom/react/PillMenuPill");
     const { inputValue } = useCommandContext("@optiaxiom/react/PillMenuPill");
     const index = options.indexOf(item);
     const hasInteractedInsideRef = useRef(false);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(
       Pill,
       {
         onClick: () => {
@@ -26,21 +33,27 @@ const PillMenuPill = forwardRef(
         },
         onKeyDown: (event) => {
           if (event.key === "Backspace") {
+            if (resolveItemProperty(item.disabledReason)) {
+              return;
+            }
             if (index === 0 || index !== options.length - 1) {
               event.key = index > 0 ? "ArrowLeft" : "ArrowRight";
             }
             item.execute?.({ dismiss: false, inputValue });
+          } else if (event.key === "ArrowDown") {
+            setOpen(!open);
           }
           onKeyDown?.(event);
         },
         onPointerDown: () => {
           hasInteractedInsideRef.current = Boolean(open);
         },
+        readOnly,
         ref,
         ...props,
         children: resolveItemProperty(item.label, { inputValue })
       }
-    );
+    ) });
   }
 );
 PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-1EvMQaGa.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var root = recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'w7838f'],variants:{size:{md:'zxrxmv',lg:'_1doexkm'}}});
+var trigger = recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'sytds8']});
+var wrapper = recipeRuntime({base:'_15g8pbb'});
+
+export { root, trigger, wrapper };

package/dist/esm/packages/react/src/pill-menu/PillMenuTrigger.js

@@ -1,46 +1,111 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
 import { forwardRef, useRef } from 'react';
-import { useCommandContext } from '../command/CommandContext.js';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
+import { Cover } from '../cover/Cover.js';
 import { IconPlus } from '../icons/IconPlus.js';
 import '../menu/Menu.js';
 import '../menu/MenuContent.js';
 import { MenuTrigger } from '../menu/MenuTrigger.js';
+import { useMenuContext } from '../menu/MenuContext.js';
+import '../pill/Pill.js';
+import { PillGroup } from '../pill/PillGroup.js';
+import '../popover/Popover.js';
+import { PopoverAnchor } from '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { RovingFocus } from '../roving-focus/RovingFocus.js';
+import { RovingFocusItem } from '../roving-focus/RovingFocusItem.js';
 import { usePillMenuContext } from './PillMenuContext.js';
+import { PillMenuPill } from './PillMenuPill.js';
+import { wrapper, root, trigger } from './PillMenuTrigger-css.js';
 
-const PillMenuTrigger = forwardRef(({ children, onKeyDown, ...props }, outerRef) => {
-  const { options } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
-  const { inputValue } = useCommandContext("@optiaxiom/react/PillMenuTrigger");
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  return /* @__PURE__ */ jsx(RadixRovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
-    MenuTrigger,
-    {
-      appearance: options.length ? "subtle" : "default",
-      "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
-      icon: /* @__PURE__ */ jsx(IconPlus, {}),
-      onKeyDown: (event) => {
-        onKeyDown?.(event);
-        if (event.defaultPrevented) {
-          return;
+const remapSize = {
+  md: "xs",
+  lg: "sm"
+};
+const PillMenuTrigger = forwardRef(
+  ({ children, className, readOnly, size = "md", ...props }, outerRef) => {
+    const { value } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
+    const { size: menuSize } = useMenuContext(
+      "@optiaxiom/react/PillMenuTrigger"
+    );
+    const { inputValue } = useCommandContext(
+      "@optiaxiom/react/PillMenuTrigger"
+    );
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsxs(Box, { ...wrapper(), children: [
+      /* @__PURE__ */ jsx(
+        PillGroup,
+        {
+          asChild: true,
+          "data-readonly": readOnly,
+          ref,
+          role: "toolbar",
+          ...root({ size }, className),
+          ...props,
+          children: /* @__PURE__ */ jsxs(RovingFocus, { disabled: readOnly, loop: true, orientation: "horizontal", children: [
+            value.slice(0, -1).map((item) => /* @__PURE__ */ jsx(
+              RovingFocusItem,
+              {
+                asChild: true,
+                children: /* @__PURE__ */ jsx(
+                  PillMenuPill,
+                  {
+                    item,
+                    readOnly,
+                    size: remapSize[size]
+                  }
+                )
+              },
+              item.key ?? resolveItemProperty(item.label, { inputValue })
+            )),
+            /* @__PURE__ */ jsxs(PillGroup, { children: [
+              value.length > 0 && /* @__PURE__ */ jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsx(
+                PillMenuPill,
+                {
+                  item: value[value.length - 1],
+                  readOnly,
+                  size: remapSize[size]
+                }
+              ) }, "pill"),
+              !readOnly && /* @__PURE__ */ jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsx(
+                MenuTrigger,
+                {
+                  "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
+                  asChild: true,
+                  onKeyDown: (event) => {
+                    if (event.defaultPrevented) {
+                      return;
+                    }
+                    if (event.key === "Backspace") {
+                      if (value.length) {
+                        const last = value.length - 1;
+                        if (!resolveItemProperty(value[last].disabledReason)) {
+                          value[last].execute?.({
+                            dismiss: false,
+                            inputValue
+                          });
+                        }
+                      }
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsx(Box, { asChild: true, size: remapSize[size], ...trigger(), children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconPlus, {}) }) }) })
+                }
+              ) }, "trigger")
+            ] })
+          ] })
         }
-        if (event.key === "Backspace") {
-          if (options.length) {
-            const last = options.length - 1;
-            options[last].execute?.({ dismiss: false, inputValue });
-          }
-        }
-      },
-      ref,
-      rounded: options.length ? "full" : void 0,
-      size: "sm",
-      ...props,
-      children: options.length ? void 0 : children
-    }
-  ) }, "trigger");
-});
+      ),
+      menuSize === "sm" && /* @__PURE__ */ jsx(PopoverAnchor, { staticRef: innerRef })
+    ] });
+  }
+);
 PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
 
 export { PillMenuTrigger };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-BHKi_U7T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DApkQ1i2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1v57vvb',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_9zdspj']});
+var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_10p3eyo',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1e9wkhp']});
 
 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-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BRtfBAek.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-D5t3ybXT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CzOv6YKg.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-DDuxCcPk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'yjhisn'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'j266f6']});
-var input = recipeRuntime({base:'cb2ww9'});
-var radio = recipeRuntime({base:'pshcv3'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1ll9vkv'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1apgglv']});
+var input = recipeRuntime({base:'_3dktxs'});
+var radio = recipeRuntime({base:'_1qlmgbn'});
 
 export { control, indicator, input, radio };

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

@@ -1,9 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
 import { RadioGroupProvider } from './RadioGroupContext.js';
 
 const mapGapToOrientation = {
@@ -25,6 +27,8 @@ const RadioGroup = forwardRef(
     value,
     ...props
   }, ref) => {
+    const surface = useSurface("property");
+    const { track } = surface ?? {};
     return /* @__PURE__ */ jsx(
       RadioGroupProvider,
       {
@@ -33,12 +37,17 @@ const RadioGroup = forwardRef(
         name,
         onBlur,
         onChange: (event) => {
+          const newValue = event.target.value;
           onChange?.(event);
-          onValueChange?.(event.target.value);
+          onValueChange?.(newValue);
+          track?.({
+            name: "changed",
+            value: newValue
+          });
         },
         value,
         children: /* @__PURE__ */ jsx(
-          Flex,
+          Group,
           {
             flexDirection,
             fontSize: "md",

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-RmeebMgp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/range/Range.css.ts.vanilla-B8jejAeG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'transparent'},'_1wycooa']});
-var fillValue = 'var(--rwubol)';
-var mark = recipeRuntime({base:[{transition:'colors'},'kxnj1t'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--_5cwhmp)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'m1j3vh']});
-var root = recipeRuntime({base:['_1o89hgh',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_1hs2roq'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1lhx6vq']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'wm8963']});
+var control = recipeRuntime({base:[{bg:'transparent'},'_1n3i961']});
+var fillValue = 'var(--_1xnswfe)';
+var mark = recipeRuntime({base:[{transition:'colors'},'_1rynoe0'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
+var markValue = 'var(--n5dusx)';
+var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_147wmxq']});
+var root = recipeRuntime({base:['_1xhsfs',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'aba7fg'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
+var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1qzwuie']});
+var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'ncgq86']});
 
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-CR6mPLrw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-DAkQIM5W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_14jhkrd']});
-var root = recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'seul1x']});
+var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_176lo8v']});
+var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_9yu8kg']});
 
 export { handle, root };

package/dist/esm/packages/react/src/resizable/ResizableHandle.js

@@ -4,11 +4,11 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { root, handle } from './ResizableHandle-css.js';
 
 const ResizableHandle = (props) => {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsx(Box, { ...handle() }) }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsx(Box, { ...handle() }) }) });
 };
 ResizableHandle.displayName = "@optiaxiom/react/ResizableHandle";
 

package/dist/esm/packages/react/src/roving-focus/RovingFocus.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { RovingFocusProvider } from './RovingFocusContext.js';
+
+const Slot = createSlot("@optiaxiom/react/RovingFocus");
+const RovingFocus = forwardRef(
+  ({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
+    const FocusComp = disabled ? Box : RadixRovingFocus.Root;
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(RovingFocusProvider, { disabled, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, ...!disabled && { loop, orientation }, children: /* @__PURE__ */ jsx(Comp, { children }) }) }) });
+  }
+);
+RovingFocus.displayName = "@optiaxiom/react/RovingFocus";
+
+export { RovingFocus };

package/dist/esm/packages/react/src/roving-focus/RovingFocusContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [RovingFocusProvider, useRovingFocusContext] = createContext("@optiaxiom/react/RovingFocus");
+
+export { RovingFocusProvider, useRovingFocusContext };

package/dist/esm/packages/react/src/roving-focus/RovingFocusItem.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useRovingFocusContext } from './RovingFocusContext.js';
+
+const Slot = createSlot("@optiaxiom/react/RovingFocusItem");
+const RovingFocusItem = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const { disabled } = useRovingFocusContext(
+      "@optiaxiom/react/RovingFocusItem"
+    );
+    const FocusComp = disabled ? Box : RadixRovingFocus.Item;
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, children: /* @__PURE__ */ jsx(Comp, { children }) }) });
+  }
+);
+RovingFocusItem.displayName = "@optiaxiom/react/RovingFocusItem";
+
+export { RovingFocusItem };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-D8kPkAN3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-BOHZUcND.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1f8kr5w']});
-var input = recipeRuntime({base:'_1pjos8a'});
-var search = recipeRuntime({base:'_6vv9yb'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1dba9x0']});
+var input = recipeRuntime({base:'_5ow2w3'});
+var search = recipeRuntime({base:'_13kw1r3'});
 
 export { clear, input, search };

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

@@ -5,7 +5,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
@@ -46,7 +46,7 @@ const SearchInput = forwardRef(
             ...clear()
           }
         ),
-        addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+        addonBefore: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
           /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
           addonBefore
         ] }),

package/dist/esm/packages/react/src/segmented-control/SegmentedControl.js

@@ -2,11 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { SegmentedControlProvider } from './SegmentedControlContext.js';
 
 const SegmentedControl = forwardRef(({ children, type = "single", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });
 });
 SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";