@optiaxiom/react 1.8.0 → 1.8.2

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/layout/Layout.css.ts.vanilla-BW5mwK9Z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/layout/Layout.css.ts.vanilla-DLOzsVlt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'xkiurs'],variants:{size:{full:'dutng7',screen:'_1d08qqj'}}});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1u6mggv'],variants:{size:{full:'_1lmd4q7',screen:'evjxck'}}});
 
 export { layout };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-D_wPoB_R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-EDG_oXp7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{flexDirection:'column',gap:'16',overflow:'auto',px:'32',py:'24'},'_1rw8ont']});
+var content = recipeRuntime({base:[{flexDirection:'column',gap:'16',overflow:'auto',px:'32',py:'24'},'_1pmvd59']});
 
 export { content };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-Dcr25brF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CJU25llO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1xjjibv']});
-var link = recipeRuntime({base:['_1le53hx'],variants:{appearance:{'default':'ug7hqo',inverse:'_26evhy',subtle:'_1bx37sz'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'tcvf03']});
+var link = recipeRuntime({base:['jxc9th'],variants:{appearance:{'default':'milj6d',inverse:'_11o6rm3',subtle:'_15m33l9'}}});
 
 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-DRA_4QUJ.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-D2giTvo1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-CuBafXB1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'ac5cnw']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1pq9vjd']});
 
 export { checkbox };

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-DFaRN0Nu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-DxbewD0D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'8'},'_12vw6c2'],variants:{slot:{after:{ml:'8'},before:{}}}});
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1jeqhic']});
-var item = recipeRuntime({base:[{alignItems:'start',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1wtr4u2'],variants:{intent:{danger:'_1811gzj',neutral:'_1ahtxhg'}}});
-var title = recipeRuntime({base:[{alignItems:'center',gap:'8'},'f6m1vk']});
+var addon = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'8'},'y0d5fg'],variants:{slot:{after:{ml:'8'},before:{}}}});
+var description = recipeRuntime({base:[{fontSize:'sm'},'n26ot0']});
+var item = recipeRuntime({base:[{alignItems:'start',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1lugr6n'],variants:{intent:{danger:'_5tr4k6',neutral:'_1lb54yu'}}});
+var title = recipeRuntime({base:[{alignItems:'center',gap:'8'},'yds6kw']});
 
 export { addon, 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-DRA_4QUJ.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DzM1XH0P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CmuOh2I-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['_1579yu6'],variants:{active:{false:{},true:'vek75b'}}});
+var indicator = recipeRuntime({base:['zpq93d'],variants:{active:{false:{},true:'_1pbnaja'}}});
 
 export { indicator };

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

@@ -20,6 +20,7 @@ import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { MenuProvider } from './MenuContext.js';
 import { MenuPopover } from './MenuPopover.js';
 import { MenuSubProvider } from './MenuSubContext.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 function Menu({
   children,
@@ -39,6 +40,7 @@ function Menu({
     sm: sizeProp ?? "sm"
   });
   const Comp = size === "sm" ? MenuPopover : Dialog;
+  const track = useMenuSurface();
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/Menu",
     defaultProp: defaultOpen,
@@ -127,6 +129,7 @@ function Menu({
       inputRef,
       inputVisible,
       onSelect: (item, { dismiss }) => {
+        track(item);
         item.execute?.({ dismiss, inputValue });
         if (typeof openProp === "undefined" && dismiss) {
           setOpen(false);
@@ -160,6 +163,7 @@ function Menu({
                 setSubMenuOpen(true);
               }
             } else {
+              track(item);
               item.execute?.({ dismiss, inputValue });
               if (typeof openProp === "undefined" && dismiss) {
                 setOpen(false);

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

@@ -17,10 +17,12 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
   const Comp = props.item.href ? "a" : "div";
   const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  const track = useMenuSurface();
   return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
     ListboxCheckboxItem,
     {
@@ -29,7 +31,12 @@ const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
       description: resolveItemProperty(props.item.description, {
         inputValue
       }),
-      onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
+      onCheckedChange: () => {
+        if (!resolveItemProperty(props.item.disabledReason)) {
+          track(props.item);
+          props.item.execute?.({ dismiss: false, inputValue });
+        }
+      },
       children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
     }
   ) });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-BRLuMF_D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-DsXcZrhm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'klhdrl'});
+var content = recipeRuntime({base:'_1u2mg7w'});
 
 export { content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-DAPWgXVs.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-CkCKwdYi.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'},'_1w9g5v6']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_17tdkkx']}}});
 
 export { input };

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

@@ -17,11 +17,13 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import { ListboxSwitchItem } from '../listbox/ListboxSwitchItem.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 const MenuSwitchItem = forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.href ? "a" : "div";
     const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
+    const track = useMenuSurface();
     return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
       ListboxSwitchItem,
       {
@@ -30,7 +32,12 @@ const MenuSwitchItem = forwardRef(
         description: resolveItemProperty(props.item.description, {
           inputValue
         }),
-        onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
+        onCheckedChange: () => {
+          if (!resolveItemProperty(props.item.disabledReason)) {
+            track(props.item);
+            props.item.execute?.({ dismiss: false, inputValue });
+          }
+        },
         children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
       }
     ) });

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

@@ -0,0 +1,73 @@
+import { resolveItemProperty } from '../command/CommandContext.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
+
+function useMenuSurface() {
+  const surface = useSurface();
+  return (item) => {
+    if (!item.surface || !surface) {
+      return;
+    }
+    const allSuggestions = surface.suggestions?.filter(
+      (s) => s.type === "value"
+    );
+    const itemSurface = item.surface;
+    if (itemSurface.type === "property") {
+      const itemSuggestions = filterSuggestionsBySurface(
+        allSuggestions,
+        surface.path,
+        [
+          {
+            name: itemSurface.name,
+            type: "property"
+          }
+        ]
+      );
+      const matchingSuggestion = itemSuggestions?.find(
+        (s) => s.value === itemSurface.value
+      );
+      if (item.multi || item.switch) {
+        surface.track(
+          {
+            checked: !resolveItemProperty(item.selected),
+            name: "toggled"
+          },
+          {
+            [itemSurface.name]: {
+              data: itemSurface.data,
+              type: "property"
+            }
+          }
+        );
+      } else if ("selected" in item) {
+        surface.track(
+          {
+            name: "changed",
+            value: itemSurface.value
+          },
+          {
+            [itemSurface.name]: {
+              data: itemSurface.data,
+              type: "property"
+            }
+          }
+        );
+      }
+      if (matchingSuggestion) {
+        surface.accept(matchingSuggestion.id);
+      }
+    } else if (itemSurface.type === "action") {
+      surface.track(
+        { name: "invoked" },
+        {
+          [itemSurface.name]: {
+            type: "action"
+          }
+        }
+      );
+    }
+  };
+}
+
+export { useMenuSurface };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Bi3wP45X.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-CQzdee5f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_10edap5'],variants:{maxH:{xs:'fiip7',sm:'_1tgm3xn',md:'b4g2lw',lg:'_30mixj',full:{}},minW:{'0':{},trigger:'ipz57i'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_13fywwt'],variants:{maxH:{xs:'_1d9mi9',sm:'_1dkblpg',md:'_1n6koor',lg:'cd96on',full:{}},minW:{'0':{},trigger:'_7ottuk'}}});
 
 export { listbox };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-851nutRz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-Chdh6QEL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',flexDirection:'column',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1xuryp3']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',flexDirection:'column',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'rsixko']});
 
 export { nav };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-D9Dn2-3H.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-DRQCatNM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'dpra76',true:'ff8fth'}}});
+var item = recipeRuntime({base:{flex:'1',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'jt5dnu',true:'_1td7e51'}}});
 
 export { item };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',flexDirection:'column',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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B39dsJVj.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-Dhg-aPVh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CT2t-0cr.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BlwCBF5g.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-CdKrH9Qm.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'},'ueuia1']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_11eti22'],variants:{expanded:{false:'mbaa1m',true:'_10lpuib'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1mdxt2d']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'jrpwfp'],variants:{expanded:{false:'o275u1',true:'gy7dj2'}}});
 
 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-DRA_4QUJ.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BuVDLYmF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-rzS-OlU2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'b6t98x']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'moi3a0'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{gap:'2'},'_51icji']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'_16hd5hs']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_2k0aaz'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{gap:'2'},'_1jwa6ik']});
 
 export { button, cursor, list };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.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-DRA_4QUJ.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BtHGaqFW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-DqD5P3jg.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'},'_1mt82z9'],variants:{interactive:{false:{},true:'_7m0839'},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'},'_3sa9bs'],variants:{interactive:{false:{},true:'kkqv1i'},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-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

@@ -13,8 +13,10 @@ 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);
@@ -38,12 +40,15 @@ const PillMenuPill = forwardRef(
               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 })

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-D0OhTpjC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var root = recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'_49zjbs'],variants:{size:{md:'_1pwzatl',lg:'_1o348a8'}}});
+var trigger = recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'_1sbpbp5']});
+var wrapper = recipeRuntime({base:'_4yhs04'});
+
+export { root, trigger, wrapper };