@optiaxiom/react 1.5.11 → 1.6.0

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DT2ykkkr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BApYZm7e.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1cw1dad']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1jyu801']});
 
 export { checkbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-CSCTKW8t.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-C6BcrKLW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'b2emam']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1m74f5r'],variants:{intent:{danger:'_1412mco',neutral:'nhfk1j'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1z0ayzj']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1pm9sjk']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'xc0ocq'],variants:{intent:{danger:'v98k84',neutral:'nqaunp'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_12xj7vc']});
 
 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-gSAv9Bvn.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CSYdOguE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-D1JMNazk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['ma7m11'],variants:{active:{false:{},true:'k188vt'}}});
+var indicator = recipeRuntime({base:['_1y28fgn'],variants:{active:{false:{},true:'_12cv0rj'}}});
 
 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-gSAv9Bvn.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-CrN3yNuX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-iZtIHQzP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'_1xiq2hs'});
+var content = recipeRuntime({base:'_4s4cxx'});
 
 export { content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-BbcehRsP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-5hlCSUOo.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'},'_18kw08s']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1o9bi23']}}});
 
 export { input };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-e3sz6wmn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Drfxjxm8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1kalb2g'],variants:{maxH:{xs:'y6hxhm',sm:'accc2a',md:'_10t1qaa',lg:'_1fdcuso',full:{}},minW:{'0':{},trigger:'_8nwyat'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1w86fhu'],variants:{maxH:{xs:'jpjphm',sm:'_1w2ct6g',md:'b0x8c0',lg:'_105tb6a',full:{}},minW:{'0':{},trigger:'_1n0xn55'}}});
 
 export { listbox };

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

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

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-B-uXPJtz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-CziLxn_G.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:'_1ggzyxb',true:'_7rhccp'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1wve77j',true:'viuy0'}}});
 
 export { item };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.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-gSAv9Bvn.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CysUCjqr.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-Cogbf2CQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-NRfGpLC5.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-Cnw5Dhu0.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'},'_2e7syz']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'eic0o5'],variants:{expanded:{false:'_97k8aj',true:'hip0yw'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1dk4qpk']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1z0pp6v'],variants:{expanded:{false:'vf697l',true:'lpchp3'}}});
 
 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-gSAv9Bvn.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DSm3whmt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CNar55xI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'_1cxx9i8']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1amaf09'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'j9mr09']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'_19sg1ib']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_17ts0c4'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'h5lznd']});
 
 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-gSAv9Bvn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.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-gSAv9Bvn.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-D2eo1Hbx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-B1Gt2jvi.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'},'dndar'],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'},'z39rqt'],variants:{interactive:{false:{},true:'e5urnp'},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 };

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import '../menu/Menu.js';
+import { MenuContent } from '../menu/MenuContent.js';
+import '../menu/MenuTrigger.js';
+
+const PillMenuContent = forwardRef(
+  (props, ref) => {
+    const lastFocusRef = useRef();
+    return /* @__PURE__ */ jsx(
+      MenuContent,
+      {
+        onCloseAutoFocus: (event) => {
+          if (lastFocusRef.current instanceof HTMLElement && lastFocusRef.current !== document.body && document.body.contains(lastFocusRef.current)) {
+            event.preventDefault();
+            lastFocusRef.current.focus();
+          }
+          lastFocusRef.current = void 0;
+        },
+        onOpenAutoFocus: () => {
+          lastFocusRef.current = document.activeElement ?? void 0;
+        },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+PillMenuContent.displayName = "@optiaxiom/react/PillMenuContent";
+
+export { PillMenuContent };

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

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

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, Fragment, 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, resolveItemProperty } from '../command/CommandContext.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 { usePillMenuContext } from './PillMenuContext.js';
+import { PillMenuPill } from './PillMenuPill.js';
+
+const PillMenuImpl = forwardRef(
+  ({ children, ...props }, outerRef) => {
+    const { options } = usePillMenuContext("@optiaxiom/react/PillMenuImpl");
+    const { size } = useMenuContext("@optiaxiom/react/PillMenuImpl");
+    const { inputValue } = useCommandContext("@optiaxiom/react/PillMenuImpl");
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PillGroup, { asChild: true, ref, role: "toolbar", ...props, children: /* @__PURE__ */ jsxs(RadixRovingFocus.Root, { orientation: "horizontal", children: [
+        options.slice(0, -1).map((item) => /* @__PURE__ */ jsx(
+          RadixRovingFocus.Item,
+          {
+            asChild: true,
+            children: /* @__PURE__ */ jsx(PillMenuPill, { item })
+          },
+          item.key ?? resolveItemProperty(item.label, { inputValue })
+        )),
+        /* @__PURE__ */ jsxs(PillGroup, { children: [
+          options.length > 0 && /* @__PURE__ */ jsx(RadixRovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(PillMenuPill, { item: options[options.length - 1] }) }, "pill"),
+          children
+        ] })
+      ] }) }),
+      size === "sm" && /* @__PURE__ */ jsx(PopoverAnchor, { staticRef: innerRef })
+    ] });
+  }
+);
+PillMenuImpl.displayName = "@optiaxiom/react/PillMenuImpl";
+
+export { PillMenuImpl };

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
+import { useMenuContext } from '../menu/MenuContext.js';
+import { Pill } from '../pill/Pill.js';
+import '../pill/PillGroup.js';
+import { usePillMenuContext } from './PillMenuContext.js';
+
+const PillMenuPill = forwardRef(
+  ({ item, onKeyDown, ...props }, ref) => {
+    const { 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(
+      Pill,
+      {
+        onClick: () => {
+          if (hasInteractedInsideRef.current) {
+            hasInteractedInsideRef.current = false;
+            return;
+          }
+          setOpen(!open);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Backspace") {
+            if (index === 0 || index !== options.length - 1) {
+              event.key = index > 0 ? "ArrowLeft" : "ArrowRight";
+            }
+            item.execute?.({ dismiss: false, inputValue });
+          }
+          onKeyDown?.(event);
+        },
+        onPointerDown: () => {
+          hasInteractedInsideRef.current = Boolean(open);
+        },
+        ref,
+        ...props,
+        children: resolveItemProperty(item.label, { inputValue })
+      }
+    );
+  }
+);
+PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";
+
+export { PillMenuPill };

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

@@ -0,0 +1,46 @@
+"use client";
+import { 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 { IconPlusSolid } from '../icons/IconPlusSolid.js';
+import '../menu/Menu.js';
+import '../menu/MenuContent.js';
+import { MenuTrigger } from '../menu/MenuTrigger.js';
+import { usePillMenuContext } from './PillMenuContext.js';
+
+const PillMenuTrigger = forwardRef(({ 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"],
+      icon: /* @__PURE__ */ jsx(IconPlusSolid, {}),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        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 : props["aria-label"]
+    }
+  ) }, "trigger");
+});
+PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
+
+export { PillMenuTrigger };

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

@@ -1,16 +1,41 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopper from '@radix-ui/react-popper';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { usePopoverContext } from './PopoverContext.js';
 import { usePopoverScope } from './usePopoverScope.js';
 
 const PopoverAnchor = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ asChild, children, staticRef, ...props }, ref) => {
     const { __scopePopover } = usePopoverScope(void 0);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, ...{ __scopePopper: __scopePopover }, children: /* @__PURE__ */ jsx(RadixPopper.Anchor, { children }) });
+    const { open, presence } = usePopoverContext(
+      "@optiaxiom/react/PopoverAnchor"
+    );
+    const [virtualRef, setVirtualRef] = useState({ current: null });
+    useEffect(() => {
+      if (!staticRef?.current || !(open || presence)) {
+        return;
+      }
+      const rect = staticRef.current.getBoundingClientRect();
+      setVirtualRef({ current: { getBoundingClientRect: () => rect } });
+      return () => {
+        requestAnimationFrame(() => setVirtualRef({ current: null }));
+      };
+    }, [open, presence, staticRef]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        ref,
+        virtualRef: staticRef ? virtualRef : void 0,
+        ...props,
+        ...{ __scopePopper: __scopePopover },
+        children: /* @__PURE__ */ jsx(RadixPopper.Anchor, { asChild, children })
+      }
+    );
   }
 );
 PopoverAnchor.displayName = "@optiaxiom/react/PopoverAnchor";

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-Ci_vCTKp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DveT9nDh.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'},'_1t2di19']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_13w77d4']});
 
 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-gSAv9Bvn.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CikxaUsf.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-swt-alER.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-KCnQEoQ7.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-DYPaAnvs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'c1e9x2'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'h3z1f2']});
-var input = recipeRuntime({base:'tfbpkf'});
-var radio = recipeRuntime({base:'_1emryug'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'melvv8'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'ep9vgw']});
+var input = recipeRuntime({base:'_110g7ug'});
+var radio = recipeRuntime({base:'ek0v9x'});
 
 export { control, indicator, input, radio };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-DCz6w2ER.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-DTSlJbIc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1apiukx']});
-var root = recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'ev5hya']});
+var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'achgs1']});
+var root = recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'_23ywip']});
 
 export { handle, root };