@optiaxiom/react 0.5.3 → 0.5.4

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-CnTL6MJe.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1k2rqjx']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_1sodkh'],variants:{intent:{danger:'r15ut',neutral:'_8uyx71'}}});
+var title = recipeRuntime({base:['_1qyeih7']});
+
+export { description, item, title };

package/dist/{src/listbox-item-base/ListboxItemBase.js → packages/react/src/listbox-item/ListboxItem.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import { useId } from '@reach/auto-id';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
@@ -8,12 +8,13 @@ import { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { title, description, item } from './ListboxItemBase-css.js';
+import { title, description, item } from './ListboxItem-css.js';
 
-const ListboxItemBase = forwardRef(
+const ListboxItem = forwardRef(
   ({
     addonAfter,
     addonBefore,
+    asChild,
     children,
     className,
     description: description$1,
@@ -21,17 +22,25 @@ const ListboxItemBase = forwardRef(
     intent = "neutral",
     ...props
   }, ref) => {
+    const Comp = asChild ? Slot : "div";
     const labelId = useId();
     const descriptionId = useId();
-    const newElement = isValidElement(children) ? children : null;
-    children = newElement ? cloneElement(
-      newElement,
-      void 0,
-      /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(newElement.props.children) }),
+    if (asChild) {
+      const newElement = isValidElement(children) ? children : null;
+      children = newElement ? cloneElement(
+        newElement,
+        void 0,
+        /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(newElement.props.children) }),
+          description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
+        ] })
+      ) : children;
+    } else {
+      children = /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
+        /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children) }),
         description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
-      ] })
-    ) : children;
+      ] });
+    }
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -41,7 +50,7 @@ const ListboxItemBase = forwardRef(
         ref,
         ...item({ intent }, className),
         ...props,
-        children: /* @__PURE__ */ jsxs(Slot, { children: [
+        children: /* @__PURE__ */ jsxs(Comp, { children: [
           addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,
           /* @__PURE__ */ jsx(Slottable, { children }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
@@ -50,6 +59,6 @@ const ListboxItemBase = forwardRef(
     );
   }
 );
-ListboxItemBase.displayName = "@optiaxiom/react/ListboxItemBase";
+ListboxItem.displayName = "@optiaxiom/react/ListboxItem";
 
-export { ListboxItemBase };
+export { ListboxItem };

package/dist/{src/command-item-indicator/CommandItemIndicator.js → packages/react/src/listbox-item-indicator/ListboxItemIndicator.js}

@@ -1,20 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useCommandItemContext } from '../command-item-context/CommandItemContext.js';
 import { IconCheck } from '../icons/IconCheck.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const CommandItemIndicator = forwardRef(({ children, ...props }, ref) => {
+const ListboxItemIndicator = forwardRef(({ active, children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
-  const { active } = useCommandItemContext("CommandItemIndicator");
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { w: "12" });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "20", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
 });
-CommandItemIndicator.displayName = "@optiaxiom/react/CommandItemIndicator";
+ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";
 
-export { CommandItemIndicator };
+export { ListboxItemIndicator };

package/dist/{src/select-label/SelectLabel.js → packages/react/src/listbox-label/ListboxLabel.js}

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useSelectGroupContext } from '../select-group-context/SelectGroupContext.js';
+import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupContext.js';
 
-const SelectLabel = forwardRef(
+const ListboxLabel = forwardRef(
   ({ children, ...props }, ref) => {
-    const { id } = useSelectGroupContext("SelectLabel");
+    const { id } = useListboxGroupContext("ListboxLabel");
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -20,6 +20,6 @@ const SelectLabel = forwardRef(
     );
   }
 );
-SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
+ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";
 
-export { SelectLabel };
+export { ListboxLabel };

package/dist/packages/react/src/listbox-radio-item/ListboxRadioItem.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
+import { ListboxItemIndicator } from '../listbox-item-indicator/ListboxItemIndicator.js';
+
+const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ListboxItem,
+    {
+      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+        addonAfter,
+        /* @__PURE__ */ jsx(ListboxItemIndicator, { active: Boolean(props["aria-selected"]) })
+      ] }),
+      ref,
+      ...props
+    }
+  );
+});
+ListboxRadioItem.displayName = "@optiaxiom/react/ListboxRadioItem";
+
+export { ListboxRadioItem };

package/dist/packages/react/src/listbox-scroll-area/ListboxScrollArea.js

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

package/dist/packages/react/src/listbox-separator/ListboxSeparator.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Separator } from '../separator/Separator.js';
+
+const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Separator,
+  {
+    bg: "border.secondary",
+    flex: "none",
+    mx: "8",
+    my: "4",
+    ref,
+    ...props
+  }
+));
+ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
+
+export { ListboxSeparator };

package/dist/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BoM-vKnA.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1vwsh9t'],variants:{minW:{'0':{},trigger:'ijhd5e'},provider:{'dropdown-menu':'_115lfai',popover:'_1vflq52',popper:'khbyys'}}});
+
+export { listbox };

package/dist/packages/react/src/menu-listbox/MenuListbox.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Listbox } from '../listbox/Listbox.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { listbox } from './MenuListbox-css.js';
+
+const MenuListbox = forwardRef(
+  ({ children, className, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
+    Listbox,
+    {
+      ref,
+      ...listbox({ minW, provider }, className),
+      ...props,
+      children
+    }
+  ) }) })
+);
+MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
+
+export { MenuListbox };

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CkMDSTPk.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'ail2hr'});
+var cursor = recipeRuntime({base:[{z:'10'},'_5cw8qr'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'gzyre5']});
+
+export { button, cursor, list };

package/dist/{src → packages/react/src}/pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { usePagination } from '@mantine/hooks';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { ButtonBase } from '../button-base/ButtonBase.js';
@@ -12,7 +12,7 @@ import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { button } from './Pagination-css.js';
+import { list, cursor, button } from './Pagination-css.js';
 
 const Pagination = forwardRef(
   ({ defaultPage, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {
@@ -27,7 +27,31 @@ const Pagination = forwardRef(
       siblings: 2,
       total
     });
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "2", children: /* @__PURE__ */ jsxs("ul", { children: [
+    const [animation, setAnimation] = useState(false);
+    const activeRef = useRef(null);
+    const cursorRef = useRef(null);
+    useEffect(() => {
+      if (!activeRef.current || !cursorRef.current) {
+        return;
+      }
+      cursorRef.current.style.transform = `translateX(${activeRef.current.offsetLeft}px)`;
+      cursorRef.current.style.visibility = "visible";
+      setTimeout(() => setAnimation(true), 150);
+    }, [active]);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...list(), children: /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx(
+        ButtonBase,
+        {
+          appearance: "subtle",
+          "aria-hidden": true,
+          asChild: true,
+          "data-state": "active",
+          disabled,
+          ref: cursorRef,
+          ...cursor({ animation }),
+          children: /* @__PURE__ */ jsx("span", { children: active })
+        }
+      ),
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Prev", disabled: disabled || active === 1, children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -65,9 +89,9 @@ const Pagination = forwardRef(
             {
               appearance: "subtle",
               "aria-current": active === page ? "page" : void 0,
-              "data-state": active === page ? "active" : void 0,
               disabled,
               onClick: () => setPage(page),
+              ref: active === page ? activeRef : void 0,
               ...button(),
               children: [
                 /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),

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

@@ -0,0 +1,6 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var paper = recipeRuntime({base:{bg:'bg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});
+
+export { paper };

package/dist/packages/react/src/paper/Paper.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { paper } from './Paper-css.js';
+
+const Paper = forwardRef(
+  ({ className, elevation = "menu", ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, ...paper({ elevation }, className), ...props })
+);
+Paper.displayName = "@optiaxiom/react/Paper";
+
+export { Paper };

package/dist/packages/react/src/pill/Pill-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-CvQpiDVH.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'mergxb'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+
+export { pill };

package/dist/packages/react/src/popover-content/PopoverContent.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { theme } from '@optiaxiom/globals';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { usePopoverContext } from '../popover-context/PopoverContext.js';
+
+const PopoverContent = forwardRef(
+  ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
+    const { open } = usePopoverContext("PopoverContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, p: "sm", provider: "popover", ...props, children: /* @__PURE__ */ jsxs(
+      RadixPopover.Content,
+      {
+        align,
+        ref,
+        sideOffset,
+        children: [
+          children,
+          withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              fill: theme.colors["bg.default"],
+              height: 4,
+              preserveAspectRatio: "none",
+              stroke: theme.colors["border.secondary"],
+              viewBox: "0 0 30 10",
+              width: 8,
+              children: [
+                /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
+                /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    points: "0,0 15,10 30,0",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2.5"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ) }) }) });
+  }
+);
+PopoverContent.displayName = "@optiaxiom/react/PopoverContent";
+
+export { PopoverContent };

package/dist/{src → packages/react/src}/popover-trigger/PopoverTrigger.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
-import { MenuButton } from '../menu-button/MenuButton.js';
+import { Button } from '../button/Button.js';
 
 const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
+  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
 

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

@@ -0,0 +1,6 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.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'}}}});
+
+export { indicator };

package/dist/packages/react/src/progress/Progress.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { indicator } from './Progress-css.js';
+
+const Progress = forwardRef(
+  ({ intent = "primary", ...props }, ref) => {
+    const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
+    const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        bg: "bg.tertiary",
+        h: "8",
+        overflow: "hidden",
+        rounded: "full",
+        ...props,
+        children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
+          Box,
+          {
+            asChild: true,
+            style: {
+              width: `${widthPercentage}%`
+            },
+            ...indicator({
+              intent
+            }),
+            children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
+          }
+        ) })
+      }
+    );
+  }
+);
+const DEFAULT_MAX = 100;
+Progress.displayName = "@optiaxiom/react/Progress";
+
+export { Progress };

package/dist/packages/react/src/radio/Radio-css.js

@@ -0,0 +1,12 @@
+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/toggle-input/ToggleInput.css.ts.vanilla-BAabvprz.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-xzxOxzJM.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_13o9rlc'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'tusfh8']});
+var input = recipeRuntime({base:'_109gstj'});
+var radio = recipeRuntime({base:'_14er316'});
+
+export { control, indicator, input, radio };

package/dist/packages/react/src/search-input/SearchInput-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-Wlcjqtr4.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_1t3zfet']});
+var search = recipeRuntime({base:'ifvmvf'});
+
+export { clear, search };

package/dist/{src → packages/react/src}/select/Select.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import 'downshift';
-import 'react';
-import { useSelect } from '../downshift/useSelect.js';
+import { useSelect } from 'downshift';
+import { usePortalPatch } from '../downshift/usePortalPatch.js';
 import { SelectContextProvider } from '../select-context/SelectContext.js';
 
 function Select({
@@ -30,12 +29,17 @@ function Select({
     onChange: onOpenChange,
     prop: open
   });
+  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(isOpen);
   const downshift = useSelect({
     ...props,
+    highlightedIndex,
     isOpen,
     items,
     itemToKey,
     itemToString,
+    onHighlightedIndexChange(changes) {
+      setHighlightedIndex(changes.highlightedIndex);
+    },
     onIsOpenChange({ isOpen: isOpen2 }) {
       setIsOpen(isOpen2);
     },
@@ -44,6 +48,7 @@ function Select({
     },
     selectedItem: selectedItem ?? null
   });
+  downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
     SelectContextProvider,
     {

package/dist/packages/react/src/select-content/SelectContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-8RA4UukF.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['y8jpd']});
+
+export { content };

package/dist/packages/react/src/select-content/SelectContent.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Portal } from '@radix-ui/react-portal';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { SelectContentImpl } from './SelectContentImpl.js';
+
+const SelectContent = forwardRef(
+  ({ children, loading, ...props }, ref) => {
+    const { isOpen } = useSelectContext("SelectContent");
+    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+export { SelectContent };

package/dist/packages/react/src/select-content/SelectContentImpl.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import { useFocusGuards } from '@radix-ui/react-focus-guards';
+import { PopperContent } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { content } from './SelectContent-css.js';
+
+const SelectContentImpl = forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    side = "bottom",
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift } = useSelectContext("SelectContentImpl");
+    useFocusGuards();
+    return /* @__PURE__ */ jsx(DismissableLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        ...content({}, className),
+        ...sprinkleProps,
+        ...downshift.getMenuProps({ ref, ...restProps }),
+        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset, children })
+      }
+    ) });
+  }
+);
+SelectContentImpl.displayName = "@optiaxiom/react/SelectContentImpl";
+
+export { SelectContentImpl };

package/dist/packages/react/src/select-group/SelectGroup.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxGroup } from '../listbox-group/ListboxGroup.js';
+
+const SelectGroup = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ListboxGroup, { ref, ...props });
+  }
+);
+SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
+
+export { SelectGroup };

package/dist/{src → packages/react/src}/select-item/SelectItem.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { Box } from '../box/Box.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 import { SelectItemContextProvider } from '../select-item-context/SelectItemContext.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
@@ -8,30 +8,20 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const SelectItem = forwardRef(
-  ({ addonAfter, addonBefore, children, description, icon, item, ...props }, ref) => {
+  ({ children, item, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item });
+    const itemProps = downshift.getItemProps({ item, ...restProps });
     return /* @__PURE__ */ jsx(SelectItemContextProvider, { active: selectedItem === item, children: /* @__PURE__ */ jsx(
-      ListboxItemBase,
+      Box,
       {
-        addonAfter,
-        addonBefore,
-        description,
-        icon,
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        ref,
         ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(
-          "li",
-          {
-            "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-            "data-highlighted": highlightedItem === item ? "" : void 0,
-            "data-selected": selectedItem === item ? "" : void 0,
-            ref,
-            ...restProps,
-            ...itemProps,
-            children
-          }
-        )
+        ...itemProps,
+        children
       }
     ) });
   }