@optiaxiom/react 0.5.3 → 0.5.4

package/dist/{src → packages/react/src}/drawer/Drawer.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Box } from '../box/Box.js';
+import { Backdrop } from '../backdrop/Backdrop.js';
 import { Button } from '../button/Button.js';
 import { IconX } from '../icons/IconX.js';
+import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
-import { overlay, content, close } from './Drawer-css.js';
+import { content, close } from './Drawer-css.js';
 
 const mapPositionToTransitionSide = {
   bottom: "top",
@@ -24,27 +25,35 @@ const Drawer = forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: onClose, open, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(
         Transition,
         {
           "data-side": mapPositionToTransitionSide[position],
           type: "fade",
-          children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ position }), children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
-            children,
-            withCloseButton && /* @__PURE__ */ jsx(
-              Button,
-              {
-                appearance: "subtle",
-                "aria-label": "Close",
-                asChild: true,
-                icon: /* @__PURE__ */ jsx(IconX, {}),
-                size: "sm",
-                ...close(),
-                children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-              }
-            )
-          ] }) })
+          children: /* @__PURE__ */ jsx(
+            Paper,
+            {
+              asChild: true,
+              elevation: "drawer",
+              ...content({ position }),
+              children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
+                children,
+                withCloseButton && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    appearance: "subtle",
+                    "aria-label": "Close",
+                    asChild: true,
+                    icon: /* @__PURE__ */ jsx(IconX, {}),
+                    size: "sm",
+                    ...close(),
+                    children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+                  }
+                )
+              ] })
+            }
+          )
         }
       )
     ] }) }) });

package/dist/{src → packages/react/src}/dropdown-menu-content/DropdownMenuContent.js

@@ -1,21 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
-import { ListboxBase } from '../listbox-base/ListboxBase.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 
 const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(
-    ListboxBase,
-    {
-      enableExitAnimation: true,
-      open,
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children })
-    }
-  );
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) }) }) });
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 

package/dist/{src → packages/react/src}/dropdown-menu-item/DropdownMenuItem.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
 const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+  return /* @__PURE__ */ jsx(ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 

package/dist/{src → packages/react/src}/dropdown-menu-separator/DropdownMenuSeparator.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { Separator } from '../separator/Separator.js';
+import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
 
-const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", flex: "none", mx: "8", my: "4", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
+const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxSeparator, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
 
 export { DropdownMenuSeparator };

package/dist/{src → packages/react/src}/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -1,29 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
-import { ListboxBase } from '../listbox-base/ListboxBase.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 
 const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
-  return /* @__PURE__ */ jsx(
-    ListboxBase,
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
+    RadixMenu.SubContent,
     {
-      enableExitAnimation: true,
-      open,
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        RadixMenu.SubContent,
-        {
-          alignOffset,
-          ref,
-          sideOffset,
-          children
-        }
-      )
+      alignOffset,
+      ref,
+      sideOffset,
+      children
     }
-  );
+  ) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

package/dist/{src → packages/react/src}/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
 const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItemBase, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
+  return /* @__PURE__ */ jsx(ListboxItem, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
 });
 DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
 

package/dist/{src → packages/react/src}/heading/Heading.js

@@ -11,18 +11,18 @@ const mapLevelToTag = {
   "5": "h5",
   "6": "h6"
 };
-const mapTagToFontSize = {
-  h1: "5xl",
-  h2: "4xl",
-  h3: "3xl",
-  h4: "2xl",
-  h5: "xl",
-  h6: "md"
+const mapLevelToFontSize = {
+  "1": "5xl",
+  "2": "4xl",
+  "3": "3xl",
+  "4": "2xl",
+  "5": "xl",
+  "6": "md"
 };
 const Heading = forwardRef(
-  ({ appearance, asChild, children, level = "1", ...props }, ref) => {
+  ({ asChild, children, level = "1", ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
-    const fontSize = mapTagToFontSize[appearance ?? mapLevelToTag[level]];
+    const fontSize = mapLevelToFontSize[level];
     return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );

package/dist/packages/react/src/highlight/Highlight-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DlXdsL4j.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var mark = recipeRuntime({base:'_163bfz7'});
+
+export { mark };

package/dist/packages/react/src/hover-card-content/HoverCardContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-wabD05Jd.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_11c0qnz']});
+
+export { content };

package/dist/{src → packages/react/src}/hover-card-content/HoverCardContent.js

@@ -4,8 +4,8 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { forwardRef, useRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Box } from '../box/Box.js';
 import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
+import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './HoverCardContent-css.js';
 
@@ -21,7 +21,7 @@ const HoverCardContent = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const { keepOpenOnActivation, open } = useHoverCardContext("HoverCardContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
       RadixHoverCard.Content,
       {
         align,

package/dist/packages/react/src/indicator/Indicator-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DePMcFI5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:'hju5gp',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_3yxbjp']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1hpy8iu']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1yivacq'],variants:{offset:{false:'_149k79',true:{}},position:{'bottom-right':'_1iuasko','top-right':'_127vbfd'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1h2wm7v']});
+
+export { badge, floating, indicator };

package/dist/{src → packages/react/src}/indicator/Indicator.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Badge } from '../badge/Badge.js';
 import { Box } from '../box/Box.js';
@@ -9,7 +10,6 @@ const Indicator = forwardRef(
   ({
     asChild,
     children,
-    className,
     content,
     disabled,
     intent,
@@ -19,8 +19,8 @@ const Indicator = forwardRef(
     variant,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...indicator({}, className), ...props, children: [
-      children,
+    return /* @__PURE__ */ jsxs(Flex, { ...indicator(), children: [
+      /* @__PURE__ */ jsx(Slot, { ref, ...props, children }),
       !disabled && /* @__PURE__ */ jsxs(Box, { ...floating({ offset, position }), children: [
         ping && /* @__PURE__ */ jsx(
           Badge,

package/dist/{src → packages/react/src}/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/packages/react/src/input/Input.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { InputAddon } from '../input-addon/InputAddon.js';
+import { InputControl } from '../input-control/InputControl.js';
+import { InputRoot } from '../input-root/InputRoot.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { root, addon, input } from './Input-css.js';
+
+const Input = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    addonPointerEvents,
+    appearance = "default",
+    asChild,
+    children,
+    className,
+    size = "md",
+    style,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "input";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsxs(
+      InputRoot,
+      {
+        addonPointerEvents,
+        style,
+        ...root({ size }, className),
+        ...sprinkleProps,
+        children: [
+          addonBefore && /* @__PURE__ */ jsx(InputAddon, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
+          /* @__PURE__ */ jsx(
+            InputControl,
+            {
+              asChild: true,
+              size,
+              ...input({ appearance, size }),
+              ...restProps,
+              children: /* @__PURE__ */ jsx(Comp, { ref, children })
+            }
+          ),
+          addonAfter && /* @__PURE__ */ jsx(InputAddon, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "@optiaxiom/react/Input";
+
+export { Input };

package/dist/packages/react/src/input-addon/InputAddon.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useInputContext } from '../input-context/InputContext.js';
+
+const InputAddon = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { addonPointerEvents, inputRef } = useInputContext("InputAddon");
+    const addonProps = addonPointerEvents === "none" ? {
+      cursor: "text",
+      fontSize: "md",
+      onMouseDown: (event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        inputRef.current?.focus();
+      }
+    } : {
+      fontSize: "md"
+    };
+    return /* @__PURE__ */ jsx(Box, { ref, ...addonProps, ...props, children });
+  }
+);
+InputAddon.displayName = "@optiaxiom/react/InputAddon";
+
+export { InputAddon };

package/dist/packages/react/src/input-context/InputContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [InputContextProvider, useInputContext] = createContext("InputRoot");
+
+export { InputContextProvider, useInputContext };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DZ_MpokI.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:['_1s8yc55',{bg:'transparent',flex:'auto',w:'full'},'_1w51pei','_1yjlkz7'],variants:{size:{md:{},lg:{},'2xl':['z9it9i']}}});
+
+export { control };

package/dist/packages/react/src/input-control/InputControl.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { useInputContext } from '../input-context/InputContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { control } from './InputControl-css.js';
+
+const InputControl = forwardRef(
+  ({ asChild, children, error: errorProp, size = "md", ...props }, outerRef) => {
+    const Comp = asChild ? Slot : "input";
+    const disabled = props.disabled;
+    const readOnly = props.readOnly;
+    const { descriptionId, error, errorId, inputId } = useFieldContext({
+      error: errorProp
+    });
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { inputRef } = useInputContext("InputControl");
+    const ref = useComposedRefs(inputRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+        "aria-disabled": disabled,
+        "aria-invalid": error ? true : void 0,
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": error ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        ...control({ size }),
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
+      }
+    );
+  }
+);
+InputControl.displayName = "@optiaxiom/react/InputControl";
+
+export { InputControl };

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-Bkhiic0p.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DZ_MpokI.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-DauYQlGZ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1l6r291']});
+
+export { root };

package/dist/packages/react/src/input-root/InputRoot.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { InputContextProvider } from '../input-context/InputContext.js';
+import { root } from './InputRoot-css.js';
+
+const InputRoot = forwardRef(({ addonPointerEvents = "auto", children, className, ...props }, ref) => {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsx(Flex, { ref, ...root({}, className), ...props, children: /* @__PURE__ */ jsx(
+    InputContextProvider,
+    {
+      addonPointerEvents,
+      inputRef,
+      children
+    }
+  ) });
+});
+InputRoot.displayName = "@optiaxiom/react/InputRoot";
+
+export { InputRoot };

package/dist/{src → packages/react/src}/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-B0D1g-vw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-KTiG6JXI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var kbd = recipeRuntime({base:{alignItems:'center',display:'inline-flex',flexDirection:'row',whiteSpace:'nowrap'},variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_10842ex',variants:{variant:{outline:'_1bbk99i',subtle:{}}}});
+var keys = recipeRuntime({base:'_77mq4n',variants:{variant:{outline:'_2gpvy4',subtle:{}}}});
 
 export { kbd, keys };

package/dist/packages/react/src/layers/layers-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+
+var axiom = 'optiaxiom';
+var base = 'optiaxiom.base';
+var components = 'optiaxiom._5hw727';
+var reset = 'optiaxiom._1crvvgf';
+
+export { axiom, base, components, reset };

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

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CB4UgyvG.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'j8gahk']});
+var link = recipeRuntime({base:['z9lax'],variants:{appearance:{'default':'_1gcifsw',inverse:'yfecka',subtle:'_1i8a190'}}});
+
+export { icon, link };

package/dist/packages/react/src/listbox/Listbox.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const Listbox = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        gap: "2",
+        overflow: "auto",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Listbox.displayName = "@optiaxiom/react/Listbox";
+
+export { Listbox };

package/dist/{src/command-checkbox-item/CommandCheckboxItem.js → packages/react/src/listbox-checkbox-item/ListboxCheckboxItem.js}

@@ -1,23 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Checkbox } from '../checkbox/Checkbox.js';
-import { useCommandContext } from '../command-context/CommandContext.js';
-import { CommandItem } from '../command-item/CommandItem.js';
 import { Flex } from '../flex/Flex.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
-const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
-  const { isItemDisabled, items, value } = useCommandContext(
-    "CommandCheckboxItem"
-  );
+const ListboxCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    CommandItem,
+    ListboxItem,
     {
       addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
-            checked: props.active ?? value?.has(props.item),
-            disabled: isItemDisabled(props.item, items.indexOf(props.item)),
+            checked: Boolean(props["aria-selected"]),
+            disabled: Boolean(props["aria-disabled"]),
             pointerEvents: "none",
             tabIndex: -1
           }
@@ -29,6 +25,6 @@ const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
     }
   );
 });
-CommandCheckboxItem.displayName = "@optiaxiom/react/CommandCheckboxItem";
+ListboxCheckboxItem.displayName = "@optiaxiom/react/ListboxCheckboxItem";
 
-export { CommandCheckboxItem };
+export { ListboxCheckboxItem };

package/dist/{src/command-empty/CommandEmpty.js → packages/react/src/listbox-empty/ListboxEmpty.js}

@@ -1,14 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useCommandContext } from '../command-context/CommandContext.js';
 
-const CommandEmpty = forwardRef(
+const ListboxEmpty = forwardRef(
   ({ children, ...props }, ref) => {
-    const { items } = useCommandContext("CommandEmpty");
-    if (items.length > 0) {
-      return null;
-    }
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -25,6 +20,6 @@ const CommandEmpty = forwardRef(
     );
   }
 );
-CommandEmpty.displayName = "@optiaxiom/react/CommandEmpty";
+ListboxEmpty.displayName = "@optiaxiom/react/ListboxEmpty";
 
-export { CommandEmpty };
+export { ListboxEmpty };

package/dist/{src/command-footer/CommandFooter.js → packages/react/src/listbox-footer/ListboxFooter.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 
-const CommandFooter = forwardRef(
+const ListboxFooter = forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Flex,
@@ -20,6 +20,6 @@ const CommandFooter = forwardRef(
     );
   }
 );
-CommandFooter.displayName = "@optiaxiom/react/CommandFooter";
+ListboxFooter.displayName = "@optiaxiom/react/ListboxFooter";
 
-export { CommandFooter };
+export { ListboxFooter };

package/dist/packages/react/src/listbox-group/ListboxGroup.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@reach/auto-id';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { ListboxGroupContextProvider } from '../listbox-group-context/ListboxGroupContext.js';
+
+const ListboxGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(ListboxGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsx(Box, { "aria-labelledby": groupId, ref, role: "group", ...props, children }) });
+  }
+);
+ListboxGroup.displayName = "@optiaxiom/react/ListboxGroup";
+
+export { ListboxGroup };

package/dist/packages/react/src/listbox-group-context/ListboxGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [ListboxGroupContextProvider, useListboxGroupContext] = createContext("ListboxGroup", { id: void 0 });
+
+export { ListboxGroupContextProvider, useListboxGroupContext };