@optiaxiom/react 1.4.5 → 1.5.0

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Dqt3__za.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'},'_1d3acop'],variants:{maxH:{xs:'_1t3137t',sm:'_13c6tct',md:'_989yqe',lg:'_4mpbvh',full:{}},minW:{'0':{},trigger:'icprc7'},provider:{'dropdown-menu':'mhjjts',popover:'t316vl',popper:'_6rornk'}}});
+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-sGpaWqx5.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-DiyfPdb3.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'},'_1av69qs']});
+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-sGpaWqx5.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-CLaBZvXR.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:'_1dtqo4c',true:'lqafdi'}}});
+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-sGpaWqx5.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/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/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Dx1pjGJE.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-BIB32Kxv.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'},'_1arxn28']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'h6wf4w'],variants:{expanded:{false:'_1jvg4w8',true:'xvq5bx'}}});
+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/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-sGpaWqx5.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-wa8ut6PQ.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'},'_3taapp']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1twqkls'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'if696u']});
+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-sGpaWqx5.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-sGpaWqx5.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-qAQ5gQIP.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'},'_13f8cbk'],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 = 4, withArrow, ...props }, outerRef) => {
+  ({ align = "start", children, sideOffset = 4, ...props }, outerRef) => {
     const { open, presence, setPresence } = usePopoverContext(
       "@optiaxiom/react/PopoverContent"
     );
@@ -36,39 +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-sGpaWqx5.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-s1nNYPKL.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'},'jyzif3']});
+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-sGpaWqx5.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-bHOUxPUF.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-CCO8u4ZD.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'},'cxs4m4'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1cofyw4']});
-var input = recipeRuntime({base:'q8sgtb'});
-var radio = recipeRuntime({base:'_1rullu7'});
+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-sGpaWqx5.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DPg_qaQp.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'},'_1hogvp5']});
-var input = recipeRuntime({base:'diwhot'});
-var search = recipeRuntime({base:'_140keur'});
+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

@@ -51,7 +51,7 @@ const SelectContent = forwardRef(
           if (event.defaultPrevented) {
             return;
           }
-          if (event.target instanceof HTMLElement && event.target.closest('[role="option"]')) {
+          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
             return;
           }
           event.preventDefault();

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-D3djE9RO.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:'djgwf5',md:'udb7qe',base:'bjimvg'},defaultClass:'bjimvg'},vertical:{conditions:{sm:'_6oy55i',md:'_2e2cyf',base:'yl8374'},defaultClass:'yl8374'}},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 })
       }
     );
   }

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CTJ8rLzc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BDczmgVK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'sfawc5']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_16pav53']});
 
 export { skeleton };

package/dist/esm/packages/react/src/sortable/Sortable-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/sortable/Sortable.css.ts.vanilla-DC5LTQ8N.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var overlay = recipeRuntime({base:['_1ndhykc']});
+
+export { overlay };

package/dist/esm/packages/react/src/sortable/Sortable.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { move } from '@dnd-kit/helpers';
+import { DragDropProvider, DragOverlay } from '@dnd-kit/react';
+import { forwardRef, useState } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Flex } from '../flex/Flex.js';
+import { Portal } from '../portal/Portal.js';
+import { overlay } from './Sortable-css.js';
+import { SortableProvider } from './SortableContext.js';
+
+const Sortable = forwardRef(
+  ({ children, items: itemsProp, onChange, onItemsChange, ...props }, ref) => {
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [itemsState, setItemsState] = useState(null);
+    const items = itemsState === null ? itemsProp ?? [] : itemsState;
+    return /* @__PURE__ */ jsxs(
+      DragDropProvider,
+      {
+        onDragEnd: (event) => {
+          const { source } = event.operation;
+          if (!source || itemsState === null) {
+            return;
+          }
+          if (!event.canceled) {
+            onChange?.({
+              items: itemsState,
+              source: source.id.toString()
+            });
+            onItemsChange?.(itemsState);
+          }
+          setItemsState(null);
+        },
+        onDragOver: (event) => {
+          const { source } = event.operation;
+          if (!source || itemsState === null) {
+            return;
+          }
+          setItemsState(move(itemsState, event));
+        },
+        onDragStart: (event) => {
+          setShowOverlay(event.nativeEvent instanceof PointerEvent);
+          setItemsState(itemsProp ?? []);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Flex, { ref, ...props, children: typeof children === "function" ? items.map((item, index) => /* @__PURE__ */ jsx(
+            SortableProvider,
+            {
+              index,
+              isSorting: itemsState !== null,
+              item,
+              children: children(item, index)
+            },
+            item
+          )) : children }),
+          /* @__PURE__ */ jsx(Portal, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(DragOverlay, { children: showOverlay && /* @__PURE__ */ jsx(Box, { bg: "bg.overlay", rounded: "sm", size: "full" }) }) })
+        ]
+      }
+    );
+  }
+);
+Sortable.displayName = "@optiaxiom/react/Sortable";
+
+export { Sortable };

package/dist/esm/packages/react/src/sortable/SortableContext.js

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

package/dist/esm/packages/react/src/sortable/SortableHandle-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-BGpVQBe_.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var handle = recipeRuntime({base:'_19q9ckt'});
+
+export { handle };

package/dist/esm/packages/react/src/sortable/SortableHandle.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { handle } from './SortableHandle-css.js';
+import { useSortableItemContext } from './SortableItemContext.js';
+
+const SortableHandle = forwardRef(
+  ({ children, className, ...props }, outerRef) => {
+    const { handleRef, isDragging } = useSortableItemContext(
+      "@optiaxiom/react/SortableHandle"
+    );
+    const ref = useComposedRefs(handleRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-label": "draggable",
+        "data-state": isDragging ? "active" : void 0,
+        ref,
+        ...handle({}, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
+
+export { SortableHandle };

package/dist/esm/packages/react/src/sortable/SortableItem-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-6ttddd8f.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:{transition:'opacity'},variants:{handle:{false:{},true:'xtw579'}}});
+
+export { item };

package/dist/esm/packages/react/src/sortable/SortableItem.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useSortableContext } from './SortableContext.js';
+import { item } from './SortableItem-css.js';
+import { SortableItemProvider } from './SortableItemContext.js';
+
+const SortableItem = forwardRef(
+  ({ children, className, style, ...props }, outerRef) => {
+    const { index, isSorting, item: item$1 } = useSortableContext(
+      "@optiaxiom/react/SortableItem"
+    );
+    const handleRef = useRef(null);
+    const { isDragging, ref: innerRef } = useSortable({
+      accept: "item",
+      handle: handleRef,
+      id: item$1,
+      index,
+      type: "item"
+    });
+    const ref = useComposedRefs(innerRef, outerRef);
+    const cacheRef = useRef();
+    if (!isSorting || typeof children !== "function") {
+      cacheRef.current = typeof children === "function" ? children() : children;
+    }
+    return /* @__PURE__ */ jsx(
+      SortableItemProvider,
+      {
+        handleRef,
+        id: item$1,
+        isDragging,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref,
+            style: {
+              opacity: isDragging ? 0.5 : void 0,
+              ...style
+            },
+            ...item({ handle: !handleRef.current }, className),
+            ...props,
+            children: cacheRef.current
+          }
+        )
+      }
+    );
+  }
+);
+SortableItem.displayName = "@optiaxiom/react/SortableItem";
+
+export { SortableItem };

package/dist/esm/packages/react/src/sortable/SortableItemContext.js

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

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-rL9r9uUN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-rC41IFce.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'nm7deb',inverse:'_17vjp1k'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'lw8537',inverse:'_1oh2efp'}}});
 
 export { track };

package/dist/esm/packages/react/src/spotlight/Spotlight.js

@@ -5,7 +5,7 @@ import '../menu/MenuContent.js';
 import '../menu/MenuTrigger.js';
 
 function Spotlight({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Menu, { initialInputVisible: true, size: "lg", ...props, children });
+  return /* @__PURE__ */ jsx(Menu, { inputVisible: "always", size: "lg", ...props, children });
 }
 Spotlight.displayName = "@optiaxiom/react/Spotlight";