@optiaxiom/react 1.5.12 → 1.6.1

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Badge } from '../badge/Badge.js';
 import { Box } from '../box/Box.js';
@@ -8,6 +9,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { indicator, floating, badge } from './Indicator-css.js';
 
+const Slot = createSlot("@optiaxiom/react/Indicator");
 const Indicator = forwardRef(
   ({
     asChild,
@@ -26,26 +28,14 @@ const Indicator = forwardRef(
       children,
       !disabled && /* @__PURE__ */ jsxs(Box, { ...floating({ offset, position }), children: [
         ping && /* @__PURE__ */ jsx(
-          Badge,
+          Slot,
           {
             "aria-hidden": "true",
-            asChild,
-            intent,
-            variant,
             ...badge({ offset, ping: true }),
-            children: content
+            children: asChild ? content : /* @__PURE__ */ jsx(Badge, { intent, variant, children: content })
           }
         ),
-        /* @__PURE__ */ jsx(
-          Badge,
-          {
-            asChild,
-            intent,
-            variant,
-            ...badge({ offset }),
-            children: content
-          }
-        )
+        /* @__PURE__ */ jsx(Slot, { ...badge({ offset }), children: asChild ? content : /* @__PURE__ */ jsx(Badge, { intent, variant, children: content }) })
       ] })
     ] });
   }

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-CppDo8A5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DPaCJt0p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_1chopd0',variants:{empty:{false:{},true:'_172b1ql'}}});
-var input = recipeRuntime({base:'to9nrm'});
+var editor = recipeRuntime({base:'uzix96',variants:{empty:{false:{},true:'yqs7an'}}});
+var input = recipeRuntime({base:'_1qxey4w'});
 
 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-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BSTjbqi6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-CLjACe5c.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1jm2dpu',{bg:'transparent',flex:'auto',w:'full'},'_9ld8wp','dg7su2'],variants:{size:{md:{},lg:{},xl:['_12clhyp']}}});
+var control = recipeRuntime({base:['xsnw63',{bg:'transparent',flex:'auto',w:'full'},'_6irbdw','_1a2txae'],variants:{size:{md:{},lg:{},xl:['mh315r']}}});
 
 export { control };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BSTjbqi6.css';
-import './../../../../assets/src/input/InputRoot.css.ts.vanilla-DPGbXYA8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-CLjACe5c.css';
+import './../../../../assets/src/input/InputRoot.css.ts.vanilla-CMzF6EXy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_3cubmo']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_8umpim']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DVoNXiqH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-dxoKZ2MF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var kbd = recipeRuntime({base:{display:'inline-flex',gap:'2',whiteSpace:'nowrap'}});
-var key = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',fontFamily:'sans',gap:'2',justifyContent:'center'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',rounded:'sm'},'_1ivzdlk'],subtle:{}}}});
+var key = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',fontFamily:'sans',gap:'2',justifyContent:'center'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',rounded:'sm'},'_837scg'],subtle:{}}}});
 
 export { kbd, key };

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BG5to307.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-CPYMqtT2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-N2E3e5pV.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BB1CWwJB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1dad0a6']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1uvolp8']});
 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-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.fbhvlw';
-var reset = 'optiaxiom._1ju463d';
+var components = 'optiaxiom.laxzld';
+var reset = 'optiaxiom._1vk8q8q';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layout-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/layout/Layout.css.ts.vanilla-svaE50uj.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_2efshf'],variants:{size:{full:'qig6cy',screen:'_18oo729'}}});
+
+export { layout };

package/dist/esm/packages/react/src/layout/Layout.js

@@ -7,32 +7,32 @@ import '../sprinkles/sprinklesMerge.js';
 import { Resizable } from '../resizable/Resizable.js';
 import { ResizableHandle } from '../resizable/ResizableHandle.js';
 import { ResizablePanel } from '../resizable/ResizablePanel.js';
-import { layout } from './Layouts-css.js';
+import { layout } from './Layout-css.js';
 
 const Layout = forwardRef(
-  ({ aside, children, className, header, resizable, sidebar, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Box, { ref, ...layout({}, className), ...props, children: [
+  ({
+    children,
+    className,
+    detailsPanel,
+    header,
+    resizable,
+    sidebar,
+    size = "screen",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(Box, { ref, ...layout({ size }, className), ...props, children: [
       header,
-      /* @__PURE__ */ jsxs(Box, { alignItems: "stretch", display: "flex", flex: "1", overflow: "auto", children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", overflow: "auto", children: [
         sidebar,
         resizable ? /* @__PURE__ */ jsxs(Resizable, { direction: "horizontal", children: [
-          /* @__PURE__ */ jsx(ResizablePanel, { children: /* @__PURE__ */ jsx(Box, { h: "full", overflow: "auto", px: "32", py: "24", children }) }),
-          aside && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ResizablePanel, { minSize: 33, children: /* @__PURE__ */ jsx(Box, { asChild: true, h: "full", children }) }),
+          detailsPanel && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(ResizableHandle, {}),
-            /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 33, children: aside })
+            /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 33, minSize: 33, children: detailsPanel })
           ] })
-        ] }) : /* @__PURE__ */ jsxs(Box, { alignItems: "stretch", display: "flex", flex: "1", children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              overflow: "auto",
-              px: "32",
-              py: "24",
-              w: aside ? "2/3" : void 0,
-              children
-            }
-          ),
-          aside && /* @__PURE__ */ jsx(Box, { w: "1/3", children: aside })
+        ] }) : /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, w: detailsPanel ? "2/3" : "full", children }),
+          detailsPanel && /* @__PURE__ */ jsx(Box, { w: "1/3", children: detailsPanel })
         ] })
       ] })
     ] });

package/dist/esm/packages/react/src/layout/LayoutContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-DQee678Y.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{overflow:'auto',px:'32',py:'24'},'_1gg89o1']});
+
+export { content };

package/dist/esm/packages/react/src/layout/LayoutContent.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { content } from './LayoutContent-css.js';
+
+const LayoutContent = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ref,
+        tabIndex: 0,
+        ...content({}, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
+
+export { LayoutContent };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-DyhepTCa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-DG37DwjA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1f635po']});
-var link = recipeRuntime({base:['_6061eb'],variants:{appearance:{'default':'bmz41c',inverse:'_1fvd3vx',subtle:'_1vq99kj'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'uq1pz6']});
+var link = recipeRuntime({base:['_14y23nz'],variants:{appearance:{'default':'_1sow5bj',inverse:'_1ncsp1z',subtle:'wm13ev'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/listbox/ListboxCheckboxItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DLC3uNn3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BJqZoAz7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1wx4z7r']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1p94hzb']});
 
 export { checkbox };

package/dist/esm/packages/react/src/listbox/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-DWVzcUNa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-BXPUynfV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_16vitdg']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1gs4e11'],variants:{intent:{danger:'_1s674zv',neutral:'_1bvkczk'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_15vti07']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'e2e8w3']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'eajoi7'],variants:{intent:{danger:'_1yac1wp',neutral:'ivbql4'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'djj6p2']});
 
 export { description, item, title };

package/dist/esm/packages/react/src/listbox/ListboxItemIndicator-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla--JWwyvlJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BTYo6j-K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['_1g4rznj'],variants:{active:{false:{},true:'_80wg9d'}}});
+var indicator = recipeRuntime({base:['_108m4fe'],variants:{active:{false:{},true:'m8wuk7'}}});
 
 export { indicator };

package/dist/esm/packages/react/src/listbox/ListboxItemized.js

@@ -38,7 +38,7 @@ const ListboxItemized = forwardRef(
         ref,
         tabIndex: -1,
         ...props,
-        children: loading === "both" || loading === "placeholder" ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx(
+        children: loading === "both" || loading === "skeleton" ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx(
           ListboxItem,
           {
             addonBefore: /* @__PURE__ */ jsx(Skeleton, { circle: true, size: "xs" }),

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-BWnEzB-t.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-ClekdP9M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'_5ah2yc'});
+var content = recipeRuntime({base:'_1f3qy4y'});
 
 export { content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-DMBizVVP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-SVKYD4nc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1r6dzy8']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1snn9dv']}}});
 
 export { input };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-bFaHbs2i.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-oX9ZRiry.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_14xtmq8'],variants:{maxH:{xs:'_5xxaez',sm:'_17ic3ud',md:'_6d7r5b',lg:'xpi2wt',full:{}},minW:{'0':{},trigger:'_1eol30i'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'q9yiea'],variants:{maxH:{xs:'_1pwqh7l',sm:'_1wf4pcd',md:'zlog45',lg:'lbocon',full:{}},minW:{'0':{},trigger:'r7ykl4'}}});
 
 export { listbox };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-ByjIMN9O.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-bCr2LiEV.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'},'_5h8fk6']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1jdtrj0']});
 
 export { nav };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-BziyUkfn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-dsd0ulH1.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:'_1jkunnk',true:'zljfsu'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1afwmxz',true:'_1llh3kx'}}});
 
 export { item };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.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/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BG5to307.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-M4eCoxUx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-N2E3e5pV.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-Bo_wAD_b.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'},'_15tbkiz']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'hsurgn'],variants:{expanded:{false:'_1njbi60',true:'_1v1wu46'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1t2cral']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'z519v2'],variants:{expanded:{false:'ownjnn',true:'_1vb82nl'}}});
 
 export { item, label };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla--zPaPkSP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-Fme6VNhJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'e7zlqp']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_17w0mo4'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'x1yh41']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'c4bc3l']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1gjjxvg'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1v30nm4']});
 
 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@8.1.0_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
+import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@8.2.1_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
 
 const Pagination = forwardRef(
   ({

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.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-BpEx1Goo.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-D3C3mWkw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-lk2cwVyo.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'},'n6ny1z'],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',transition:'colors',whiteSpace:'nowrap'},'_1q8ljd'],variants:{interactive:{false:{},true:'n5ka24'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

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

@@ -11,20 +11,50 @@ import { pill } from './Pill-css.js';
 
 const Slot = createSlot("@optiaxiom/react/Pill");
 const Pill = forwardRef(
-  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+  ({
+    asChild,
+    children,
+    className,
+    disabled,
+    onClick,
+    onDismiss,
+    size = "sm",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : onClick || onDismiss ? "button" : "span";
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
         "data-disabled": disabled ? "" : void 0,
-        ...pill({ size }, className),
+        ...pill(
+          {
+            interactive: Boolean(onClick || onDismiss),
+            size
+          },
+          className
+        ),
         ...boxProps,
-        children: /* @__PURE__ */ jsxs(Comp, { disabled, ref, ...restProps, children: [
-          /* @__PURE__ */ jsx(Text, { truncate: true, children }),
-          /* @__PURE__ */ jsx(Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsx(IconX, {}) })
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Comp,
+          {
+            disabled,
+            onClick: (event) => {
+              onClick?.(event);
+              if (event.defaultPrevented) {
+                return;
+              }
+              onDismiss?.();
+            },
+            ref,
+            ...restProps,
+            children: [
+              /* @__PURE__ */ jsx(Text, { truncate: true, children }),
+              onDismiss && /* @__PURE__ */ jsx(Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsx(IconX, {}) })
+            ]
+          }
+        )
       }
     );
   }

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

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

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useState, useMemo } from 'react';
+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(
+  ({
+    children,
+    defaultOpen = false,
+    empty,
+    inputValue,
+    inputVisible,
+    loading,
+    onInputValueChange,
+    onOpenChange,
+    open: openProp,
+    options,
+    placeholder,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = useControllableState({
+      caller: "@optiaxiom/react/PillMenu",
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: openProp
+    });
+    const [optionIndexes, setOptionIndexes] = useState(
+      () => groupOptions(options)
+    );
+    return /* @__PURE__ */ jsx(
+      PillMenuProvider,
+      {
+        options: options.filter((item) => resolveItemProperty(item.selected)),
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            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 })
+          }
+        )
+      }
+    );
+  }
+);
+PillMenu.displayName = "@optiaxiom/react/PillMenu";
+const groupOptions = (options) => options.map((option, index) => ({
+  index,
+  option
+})).sort(({ index: aIndex, option: a }, { index: bIndex, option: b }) => {
+  if (resolveItemProperty(a.selected) === resolveItemProperty(b.selected)) {
+    return aIndex - bIndex;
+  } else if (resolveItemProperty(a.selected)) {
+    return -1;
+  } else {
+    return 1;
+  }
+}).map(({ index, option }) => ({
+  group: resolveItemProperty(option.selected) ? "selected" : void 0,
+  index
+}));
+
+export { PillMenu };