@optiaxiom/react 0.3.3 → 0.3.5

package/dist/src/combobox/Combobox.js

@@ -0,0 +1,88 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCombobox } from 'downshift';
+import { useEffect } from 'react';
+import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { Popover } from '../popover/Popover.js';
+
+function Combobox({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  mode: modeProp,
+  onInputValueChange,
+  onOpenChange,
+  onValueChange,
+  open: openProp,
+  value: valueProp,
+  ...props
+}) {
+  const mode = modeProp ?? "single";
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue ?? (mode === "multiple" ? [] : void 0),
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  const [inputValue, setInputValue] = useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange
+  });
+  useEffect(() => {
+    if (!open) {
+      setInputValue("");
+    }
+  }, [open, setInputValue]);
+  const downshift = useCombobox({
+    ...props,
+    inputValue,
+    isOpen: open,
+    items,
+    itemToKey,
+    itemToString,
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== useCombobox.stateChangeTypes.InputBlur) {
+        if (mode === "single" || !Array.isArray(value)) {
+          setValue(selectedItem);
+        } else {
+          setValue(
+            value.includes(selectedItem) ? value.filter((v) => v !== selectedItem) : [...value, selectedItem]
+          );
+        }
+      }
+      if (mode === "single" || type === useCombobox.stateChangeTypes.InputKeyDownEnter) {
+        setOpen(false);
+      }
+    },
+    selectedItem: mode === "multiple" ? null : value ?? null
+  });
+  downshift.getInputProps({}, { suppressRefError: true });
+  downshift.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+    ComboboxContextProvider,
+    {
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      items,
+      itemToKey,
+      itemToString,
+      mode,
+      open,
+      setInputValue,
+      setOpen,
+      setValue,
+      value,
+      children
+    }
+  ) });
+}
+Combobox.displayName = "@optiaxiom/react/Combobox";
+
+export { Combobox };

package/dist/src/combobox-content/ComboboxContent.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+
+const ComboboxContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { labelId } = useFieldContext();
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p: "4",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
+
+export { ComboboxContent };

package/dist/src/combobox-context/ComboboxContext.js

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

package/dist/src/combobox-empty/ComboboxEmpty.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+
+const ComboboxEmpty = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { items } = useComboboxContext("ComboboxEmpty");
+    if (items.length > 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        alignItems: "center",
+        color: "fg.disabled",
+        display: "flex",
+        fontSize: "md",
+        justifyContent: "center",
+        p: "md",
+        ref,
+        ...props,
+        children: children || "No options"
+      }
+    );
+  }
+);
+ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
+
+export { ComboboxEmpty };

package/dist/src/combobox-footer/ComboboxFooter-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'space-between',p:'sm'}]});
+
+export { footer };

package/dist/src/combobox-footer/ComboboxFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './ComboboxFooter-css.js';
+
+const ComboboxFooter = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ref, ...footer({}, className), ...props, children: /* @__PURE__ */ jsx("li", { children }) });
+  }
+);
+ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
+
+export { ComboboxFooter };

package/dist/src/combobox-input/ComboboxInput.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Input } from '../input/Input.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const ComboboxInput = forwardRef(
+  (props, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem, setInputValue } = useComboboxContext("ComboboxInput");
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        m: "4",
+        ...sprinkleProps,
+        ...downshift.getInputProps({
+          ...restProps,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            if (event.key === " " && highlightedItem) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
+            }
+          },
+          ref
+        })
+      }
+    );
+  }
+);
+ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
+
+export { ComboboxInput };

package/dist/src/combobox-item/ComboboxItem.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxItemContextProvider } from '../combobox-item-context/ComboboxItemContext.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const ComboboxItem = forwardRef(
+  ({ addonAfter, addonBefore, children, description, icon, item, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem, mode, value } = useComboboxContext("ComboboxItem");
+    const itemProps = downshift.getItemProps({ item });
+    return /* @__PURE__ */ jsx(ComboboxItemContextProvider, { active: value === item, item, children: /* @__PURE__ */ jsx(
+      ListboxItemBase,
+      {
+        addonAfter,
+        addonBefore: addonBefore ?? (mode === "multiple" && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Array.isArray(value) ? value.includes(item) : value === item,
+            disabled: itemProps["aria-disabled"],
+            tabIndex: -1
+          }
+        )),
+        description,
+        icon,
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx(
+          "li",
+          {
+            "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+            "data-highlighted": highlightedItem === item ? "" : void 0,
+            "data-selected": downshift.selectedItem === item ? "" : void 0,
+            ref,
+            ...restProps,
+            ...itemProps,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+export { ComboboxItem };

package/dist/src/combobox-item-context/ComboboxItemContext.js

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

package/dist/src/combobox-item-indicator/ComboboxItemIndicator.js

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

package/dist/src/combobox-list/ComboboxList.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const ComboboxList = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, items } = useComboboxContext("ComboboxList");
+    if (!items.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        display: "flex",
+        flex: "1",
+        flexDirection: "column",
+        gap: "2",
+        overflow: "auto",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({ ref, ...restProps }), children })
+      }
+    );
+  }
+);
+ComboboxList.displayName = "@optiaxiom/react/ComboboxList";
+
+export { ComboboxList };

package/dist/src/combobox-multiple-value/ComboboxMultipleValue.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Flex } from '../flex/Flex.js';
+
+const maxDisplayedItems = 2;
+const ComboboxMultipleValue = forwardRef(({ children, placeholder, ...props }, ref) => {
+  const { itemToKey, itemToString, value } = useComboboxContext(
+    "ComboboxMultipleValue"
+  );
+  return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length > maxDisplayedItems ? /* @__PURE__ */ jsxs(Badge, { children: [
+    value.length,
+    " selected"
+  ] }) : value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      display: "inline-block",
+      flex: "1",
+      truncate: true,
+      children: itemToString(item)
+    },
+    itemToKey(item)
+  )) }) : placeholder });
+});
+ComboboxMultipleValue.displayName = "@optiaxiom/react/ComboboxMultipleValue";
+
+export { ComboboxMultipleValue };

package/dist/src/combobox-separator/ComboboxSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Separator } from '../separator/Separator.js';
+
+const ComboboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("li", { ref, children: /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props }) }) }));
+ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
+
+export { ComboboxSeparator };

package/dist/src/combobox-single-value/ComboboxSingleValue.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+
+const ComboboxSingleValue = forwardRef(({ children, placeholder, ...props }, ref) => {
+  const { itemToString, value } = useComboboxContext("ComboboxSingleValue");
+  return /* @__PURE__ */ jsx(Box, { ref, ...props, children: value ? children ?? itemToString(value) : placeholder });
+});
+ComboboxSingleValue.displayName = "@optiaxiom/react/ComboboxSingleValue";
+
+export { ComboboxSingleValue };

package/dist/src/combobox-trigger/ComboboxTrigger.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { MenuButton } from '../menu-button/MenuButton.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+
+const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
+  const { setOpen } = useComboboxContext("ComboboxTrigger");
+  const buttonRef = useRef(null);
+  const ref = useComposedRefs(outerRef, buttonRef);
+  const { labelId } = useFieldContext();
+  useEffect(() => {
+    if (!labelId || !buttonRef.current) {
+      return;
+    }
+    const button = buttonRef.current;
+    const label = document.getElementById(labelId);
+    if (!label) {
+      return;
+    }
+    const onLabelClick = () => button.focus();
+    label.addEventListener("click", onLabelClick);
+    return () => label.removeEventListener("click", onLabelClick);
+  }, [labelId]);
+  return /* @__PURE__ */ jsx(
+    PopoverTrigger,
+    {
+      "aria-labelledby": labelId,
+      asChild: true,
+      onKeyDown: (event) => {
+        switch (event.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+            setOpen(true);
+        }
+      },
+      ref,
+      role: "combobox",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children })
+    }
+  );
+});
+ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
+
+export { ComboboxTrigger };

package/dist/src/combobox-value/ComboboxValue.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxMultipleValue } from '../combobox-multiple-value/ComboboxMultipleValue.js';
+import { ComboboxSingleValue } from '../combobox-single-value/ComboboxSingleValue.js';
+
+const ComboboxValue = forwardRef(
+  ({ placeholder, ...props }, ref) => {
+    const { mode } = useComboboxContext("ComboboxValue");
+    const Comp = mode === "single" ? ComboboxSingleValue : ComboboxMultipleValue;
+    return /* @__PURE__ */ jsx(Comp, { placeholder, ref, ...props });
+  }
+);
+ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";
+
+export { ComboboxValue };

package/dist/src/data-table/DataTable-css.js

@@ -1,11 +1,11 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/data-table/DataTable.css.ts.vanilla-DClqHIpD.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/data-table/DataTable.css.ts.vanilla-Dr8prppO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cellOffsetVar = 'var(--ima6ed)';
-var columnWidthVar = 'var(--a7j6m)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'_12f9efs'],variants:{pinned:{false:{},left:'_1d7i3uj',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1pejk4d'],variants:{pinned:{false:{},left:'_10fm9ha',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_130mxv1']});
+var cellOffsetVar = 'var(--_2g0l91)';
+var columnWidthVar = 'var(--kj3zj)';
+var tableCell = recipeRuntime({base:[{bg:'bg.default'},'_1bsqyrz'],variants:{pinned:{false:{},left:'wi2aep',right:{}}}});
+var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1d5hff2'],variants:{pinned:{false:{},left:'_1iiszgc',right:{}}}});
+var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'qejy89']});
 
 export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };

package/dist/src/data-table-header/DataTableHeader-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-CBfONOxn.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-DqnDDweC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{gap:'4'},'liart4'],variants:{sortable:{false:'_13kkiam',true:'pu7yam'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
-var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'_1bdolyb',true:{}}}});
+var header = recipeRuntime({base:[{gap:'4'},'_1abfd49'],variants:{sortable:{false:'_3qomjo',true:'ust8zc'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
+var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'vrtq97',true:{}}}});
 
 export { header, icon };

package/dist/src/dialog-body/DialogBody-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'}]});

package/dist/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CjDOgPsl.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-Ds32MO_e.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_1egzn8u']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'txm4s5'],variants:{size:{sm:'wfmqn6',md:'_1dnflv0',lg:'_1dgofrh'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'safwsj']});
+var close = recipeRuntime({base:[{rounded:'full'},'_1xh8sak']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_250gjt'],variants:{size:{sm:'_1jyz92u',md:'tasm7b',lg:'k4x4d5',fullscreen:'_1nsv810'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'iu7siz']});
 
 export { close, content, overlay };

package/dist/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'end',px:'lg',py:'20'}]});

package/dist/src/disclosure-content/DisclosureContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DZjQ4lO4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-C97DPRK_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'_1lvkmp']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'_19zn17z']});
 
 export { content };

package/dist/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-D0avONlP.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-C7mcv2PW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'omhyk5',start:'ozw4yu'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_7s7igg']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_17c9hpp',start:'_1utelo6'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'ww4t3p']});
 
 export { icon, trigger };

package/dist/src/drawer/Drawer-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/drawer/Drawer.css.ts.vanilla-DOMCHbHy.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/drawer/Drawer.css.ts.vanilla-BiYwxVN6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'xypbjl']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'dfm7uu'],variants:{position:{bottom:[{borderT:'1'},'_1xcmbns'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'n6lcgm'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'wjvxlc']}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1ac0t1t']});
+var close = recipeRuntime({base:[{rounded:'full'},'_9c5oqm']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_112u0q1'],variants:{position:{bottom:[{borderT:'1'},'_123qmq'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'cqviki'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'t2l94h']}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'l6qi7s']});
 
 export { close, content, overlay };

package/dist/src/dropdown-menu-content/DropdownMenuContent.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 
-const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 2, ...props }, ref) => {
+const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
   return /* @__PURE__ */ jsx(
-    MenuContentBase,
+    ListboxBase,
     {
       enableExitAnimation: true,
       open,

package/dist/src/dropdown-menu-group/DropdownMenuGroup.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DropdownMenuGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Group, { children }) });
+  }
+);
+DropdownMenuGroup.displayName = "@optiaxiom/react/DropdownMenuGroup";
+
+export { DropdownMenuGroup };

package/dist/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 { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
 
 const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(MenuItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+  return /* @__PURE__ */ jsx(ListboxItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 

package/dist/src/dropdown-menu-label/DropdownMenuLabel.js

@@ -9,9 +9,8 @@ const DropdownMenuLabel = forwardRef(
       Box,
       {
         asChild: true,
-        color: "fg.default",
-        fontSize: "md",
-        fontWeight: "600",
+        color: "fg.tertiary",
+        fontSize: "sm",
         p: "xs",
         ref,
         ...props,

package/dist/src/dropdown-menu-separator/DropdownMenuSeparator.js

@@ -3,7 +3,7 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Separator } from '../separator/Separator.js';
 
-const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
+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 }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
 
 export { DropdownMenuSeparator };