@optiaxiom/react 0.5.3 → 0.6.0

package/dist/{src → packages/react/src}/alert-dialog-content/AlertDialogContent.js

@@ -3,18 +3,20 @@ import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { useAlertDialogContext, AlertDialogContextProvider } from '../alert-dialog-context/AlertDialogContext.js';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Backdrop } from '../backdrop/Backdrop.js';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
+import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
-import { overlay, container, content } from './AlertDialogContent-css.js';
+import { container, content } from './AlertDialogContent-css.js';
 
 const AlertDialogContent = forwardRef(({ children, size = "sm", ...props }, ref) => {
   const { open } = useAlertDialogContext("AlertDialogContent");
   return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
-    /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
+    /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
     /* @__PURE__ */ jsxs(Flex, { ...container(), children: [
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
-      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Paper, { asChild: true, elevation: "dialog", ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) }),
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
     ] })

package/dist/{src → packages/react/src}/alert-dialog-description/AlertDialogDescription-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});

package/dist/packages/react/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-zHuJYCjT.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_123w0wo']});
+
+export { footer };

package/dist/packages/react/src/animate-presence/AnimatePresence.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import '../transition/Transition.js';
+import { TransitionGlobalConfig } from '../transition/TransitionGlobalConfig.js';
+import { AnimatePresence as AnimatePresence$1 } from '../../../../node_modules/.pnpm/framer-motion@11.11.17_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+function AnimatePresence({
+  children
+}) {
+  if (TransitionGlobalConfig.skipAnimations) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence$1, { children });
+}
+AnimatePresence.displayName = "@optiaxiom/react/AnimatePresence";
+
+export { AnimatePresence };

package/dist/{src → packages/react/src}/autocomplete/Autocomplete.js

@@ -3,8 +3,7 @@ import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState, useEffect } from 'react';
 import { AutocompleteContextProvider } from '../autocomplete-context/AutocompleteContext.js';
-import { useCombobox } from '../downshift/useCombobox.js';
-import 'downshift';
+import { Command } from '../command/Command.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useEffectEvent } from '../use-event/useEffectEvent.js';
@@ -14,15 +13,15 @@ function Autocomplete({
   defaultOpen = false,
   defaultValue,
   disabled,
+  isItemDisabled,
   items,
-  itemToKey = (value2) => value2,
+  itemToKey,
   itemToString = (value2) => value2 ? String(value2) : "",
   onInputValueChange,
   onOpenChange,
   onValueChange,
   open,
-  value,
-  ...props
+  value
 }) {
   const { inputId } = useFieldContext({});
   const [selectedItem, setSelectedItem] = useControllableState({
@@ -44,42 +43,39 @@ function Autocomplete({
       setInputValue(itemToStringStable(selectedItem ?? null));
     }
   }, [isOpen, itemToStringStable, selectedItem]);
-  const downshift = useCombobox({
-    ...props,
-    inputId,
-    inputValue,
-    isOpen,
-    items,
-    itemToKey,
-    itemToString,
-    onInputValueChange({ inputValue: inputValue2, isOpen: isOpen2 }) {
-      if (isOpen2) {
-        onInputValueChange?.(inputValue2);
-      }
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-      if (!isOpen2) {
-        onInputValueChange?.("");
-      }
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      setSelectedItem(selectedItem2);
-    },
-    selectedItem: selectedItem ?? null
-  });
-  downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
-    AutocompleteContextProvider,
+    Command,
     {
-      disabled,
-      downshift,
-      highlightedItem: items[downshift.highlightedIndex],
-      isOpen,
+      inputId,
+      inputValue,
+      isItemDisabled,
       items,
       itemToKey,
-      setInputValue,
-      children
+      itemToString,
+      onInputValueChange: (value2) => {
+        setInputValue(value2);
+        onInputValueChange?.(value2);
+      },
+      onItemSelect: setSelectedItem,
+      onOpenChange: (open2) => {
+        setIsOpen(open2);
+        if (!open2) {
+          onInputValueChange?.("");
+        }
+      },
+      open: isOpen,
+      selectedItem: selectedItem ?? null,
+      children: /* @__PURE__ */ jsx(
+        AutocompleteContextProvider,
+        {
+          disabled,
+          isOpen,
+          items,
+          selectedItem,
+          setSelectedItem,
+          children
+        }
+      )
     }
   ) });
 }

package/dist/packages/react/src/autocomplete-content/AutocompleteContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DWsyG2LP.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{p:'4'},'_1j3102e']});
+
+export { content };

package/dist/packages/react/src/autocomplete-content/AutocompleteContent.js

@@ -0,0 +1,20 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Portal } from '@radix-ui/react-portal';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { Box } from '../box/Box.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { AutocompleteContentImpl } from './AutocompleteContentImpl.js';
+
+const AutocompleteContent = forwardRef(({ children, loading, ...props }, ref) => {
+  const { isOpen, items } = useAutocompleteContext("AutocompleteContent");
+  return isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { role: "status", children: loading ? "Loading" : `${items.length} option${items.length === 1 ? "" : "s"} available` }) }) }),
+    /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "popper", ...props, children: /* @__PURE__ */ jsx(AutocompleteContentImpl, { ref, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) })
+  ] });
+});
+AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";
+
+export { AutocompleteContent };

package/dist/packages/react/src/autocomplete-content/AutocompleteContentImpl.js

@@ -0,0 +1,26 @@
+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 { CommandListbox } from '../command-listbox/CommandListbox.js';
+import { content } from './AutocompleteContent-css.js';
+
+const AutocompleteContentImpl = forwardRef(
+  ({ align = "center", children, className, sideOffset = 5, ...props }, ref) => {
+    useFocusGuards();
+    return /* @__PURE__ */ jsx(DismissableLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+      CommandListbox,
+      {
+        asChild: true,
+        ref,
+        ...content({}, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(PopperContent, { align, sideOffset, children })
+      }
+    ) });
+  }
+);
+AutocompleteContentImpl.displayName = "@optiaxiom/react/AutocompleteContentImpl";
+
+export { AutocompleteContentImpl };

package/dist/{src → packages/react/src}/autocomplete-empty/AutocompleteEmpty.js

@@ -1,13 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
 
 const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
-  const { items } = useAutocompleteContext("AutocompleteEmpty");
-  if (items.length > 0) {
-    return null;
-  }
   return /* @__PURE__ */ jsx(
     Box,
     {

package/dist/packages/react/src/autocomplete-item/AutocompletItem.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const AutocompleteItem = forwardRef((props, ref) => {
+  const { selectedItem } = useAutocompleteContext("AutocompleteItem");
+  return /* @__PURE__ */ jsx(CommandItem, { ref, selected: props.item === selectedItem, ...props });
+});
+AutocompleteItem.displayName = "@optiaxiom/react/AutocompleteItem";
+
+export { AutocompleteItem };

package/dist/packages/react/src/autocomplete-radio-item/AutocompleteRadioItem.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AutocompleteItem } from '../autocomplete-item/AutocompletItem.js';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+
+const AutocompleteRadioItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(AutocompleteItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxRadioItem, { children }) });
+});
+AutocompleteRadioItem.displayName = "@optiaxiom/react/AutocompleteRadioItem";
+
+export { AutocompleteRadioItem };

package/dist/packages/react/src/autocomplete-trigger/AutocompleteTrigger.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PopperAnchor } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { CommandInput } from '../command-input/CommandInput.js';
+import { CommandToggleButton } from '../command-toggle-button/CommandToggleButton.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconX } from '../icons/IconX.js';
+import { Separator } from '../separator/Separator.js';
+
+const AutocompleteTrigger = forwardRef((props, ref) => {
+  const { disabled, selectedItem, setSelectedItem } = useAutocompleteContext("AutocompleteInput");
+  return /* @__PURE__ */ jsx(PopperAnchor, { children: /* @__PURE__ */ jsx(
+    CommandInput,
+    {
+      addonAfter: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          alignItems: "stretch",
+          alignSelf: "stretch",
+          flexDirection: "row",
+          gap: "0",
+          children: [
+            selectedItem && /* @__PURE__ */ jsx(
+              Flex,
+              {
+                cursor: "pointer",
+                onClick: () => setSelectedItem(null),
+                w: "32",
+                children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true, focusable: false }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, { my: "xs", orientation: "vertical" }),
+            /* @__PURE__ */ jsx(Flex, { asChild: true, w: "32", children: /* @__PURE__ */ jsx(CommandToggleButton, { "aria-label": "Toggle", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, { "aria-hidden": true, focusable: false }) }) }) })
+          ]
+        }
+      ),
+      addonBefore: null,
+      disabled,
+      pr: "0",
+      ref,
+      ...props
+    }
+  ) });
+});
+AutocompleteTrigger.displayName = "@optiaxiom/react/AutocompleteTrigger";
+
+export { AutocompleteTrigger };

package/dist/packages/react/src/avatar/Avatar-css.js

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-D2kH-64w.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'avwi1y'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'yzl75m'],sm:[{fontSize:'xs',size:'sm'},'_1ykzkg0'],md:[{fontSize:'md',size:'md'},'_1mguit9'],lg:[{fontSize:'lg',size:'lg'},'_18dbhm0'],xl:[{fontSize:'2xl',size:'xl'},'_108hnli'],'5xl':[{fontSize:'4xl',size:'5xl'},'_1je74q']}}});
+var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
+var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
+
+export { avatar, fallback, icon };

package/dist/packages/react/src/avatar-group/AvatarGroup-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var avatarGroup = recipeRuntime({base:['_1dmjy14',{display:'flex'}]});
+
+export { avatarGroup };

package/dist/packages/react/src/backdrop/Backdrop-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-gmff1L-P.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1rei4dn']});
+
+export { backdrop };

package/dist/packages/react/src/backdrop/Backdrop.js

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

package/dist/packages/react/src/badge/Badge-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-3hLwWO1L.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_1b6eq8a'],variants:{intent:{danger:'_18tolwx',information:'_1lv4plm',neutral:'_14364vu',primary:'_1s2cdh6',success:'_1dp981w',warning:'_1twjmb0'},variant:{light:'ub9ctg',solid:'_1cncw28'}}});
+
+export { badge };

package/dist/{src → packages/react/src}/banner/Banner-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});

package/dist/packages/react/src/box/Box-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-DR0P-LL5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var box = recipeRuntime({base:'_1aq3qvr'});
+
+export { box };

package/dist/{src → packages/react/src}/button/Button.js

@@ -55,7 +55,7 @@ const Button = forwardRef(
         iconOnly: isIconOnly || iconOnly,
         ref,
         ...props,
-        ...(isIconOnly || iconOnly || props.loading) && {
+        ...(isIconOnly || iconOnly) && {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ jsxs(Comp, { children: [

package/dist/packages/react/src/button-base/ButtonBase-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DrMH1fkC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var buttonBase = recipeRuntime({base:['wf7wpi',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'xj42bo'],variants:{iconOnly:{false:'_12carwg',true:{}},intent:{danger:'_1t5rfpo',neutral:'_1mqzu28',primary:'egoifx'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_11vjqn8',solid:'e5ed1h',subtle:'_1d9z2vl'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'gvt7ty',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'by4zlx',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_3djs94',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:'_1ckiwe5'});
+
+export { buttonBase, spinner };

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var buttonGroup = recipeRuntime({base:'_1k0rcwr'});
+
+export { buttonGroup };

package/dist/packages/react/src/button-loadable/ButtonLoadable-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DrMH1fkC.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CLCW6X94.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var loadable = recipeRuntime({base:[{transition:'opacity'},'jmwgf8']});
+
+export { loadable };

package/dist/packages/react/src/checkbox/Checkbox-css.js

@@ -0,0 +1,13 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BZS5FCfo.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-BAr9yxjN.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var checkbox = recipeRuntime({base:'m17fz7'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'16'},'_1gd5q2e'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:['_10tt2nl']});
+var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
+var input = recipeRuntime({base:'_2jv94g'});
+
+export { checkbox, control, icon, indicator, input };

package/dist/packages/react/src/code/Code-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-DXXEKMdP.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1d8axnk']});
+
+export { code };

package/dist/{src → packages/react/src}/combobox/Combobox.js

@@ -2,11 +2,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useMemo, useEffect } from 'react';
 import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { ComboboxDialogContent } from '../combobox-dialog-content/ComboboxDialogContent.js';
+import { ComboboxPopoverContent } from '../combobox-popover-content/ComboboxPopoverContent.js';
 import { Dialog } from '../dialog/Dialog.js';
-import { DialogContent } from '../dialog-content/DialogContent.js';
 import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
 import { Popover } from '../popover/Popover.js';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
 import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 import { useEffectEvent } from '../use-event/useEffectEvent.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
@@ -26,12 +26,12 @@ function Combobox({
 }) {
   const components = useResponsiveMatches({
     base: {
-      Content: DialogContent,
+      Content: ComboboxDialogContent,
       Root: Dialog,
       Trigger: DialogTrigger
     },
     sm: {
-      Content: PopoverContent,
+      Content: ComboboxPopoverContent,
       Root: Popover,
       Trigger: PopoverTrigger
     }

package/dist/packages/react/src/combobox-checkbox-item/ComboboxCheckboxItem.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ComboboxItem } from '../combobox-item/ComboboxItem.js';
+import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
+
+const ComboboxCheckboxItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxCheckboxItem, { children }) });
+});
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+
+export { ComboboxCheckboxItem };

package/dist/{src → packages/react/src}/combobox-content/ComboboxContent.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useCombobox } from 'downshift';
 import { forwardRef } from 'react';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Command } from '../command/Command.js';
@@ -40,6 +41,24 @@ const ComboboxContent = forwardRef(
             itemToString,
             onInputValueChange,
             onItemSelect,
+            open: true,
+            selectedItem: null,
+            stateReducer: (state, actionAndChanges) => {
+              const { changes, type } = actionAndChanges;
+              switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                  return {
+                    ...changes,
+                    /**
+                     * Keep the selected option highlighted rather than resetting to -1
+                     */
+                    highlightedIndex: state.highlightedIndex
+                  };
+                default:
+                  return changes;
+              }
+            },
             value,
             children
           }

package/dist/packages/react/src/combobox-dialog-content/ComboboxDialogContent.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+import { DialogTitle } from '../dialog-title/DialogTitle.js';
+
+const ComboboxDialogContent = forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, ref, ...props, children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: ariaLabel }) }),
+    children
+  ] });
+});
+ComboboxDialogContent.displayName = "@optiaxiom/react/ComboboxDialogContent";
+
+export { ComboboxDialogContent };

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

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

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

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

package/dist/packages/react/src/combobox-group/ComboboxGroup.js

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

package/dist/{src → packages/react/src}/combobox-input/ComboboxInput.js

@@ -9,6 +9,7 @@ const ComboboxInput = forwardRef(
     return /* @__PURE__ */ jsx(
       CommandInput,
       {
+        htmlSize: 1,
         m: "4",
         onKeyDown: (event) => {
           if (event.key === " " && highlightedItem) {

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const ComboboxItem = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(CommandItem, { ref, ...props })
+);
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+export { ComboboxItem };

package/dist/packages/react/src/combobox-label/ComboboxLabel.js

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

package/dist/packages/react/src/combobox-listbox/ComboboxListbox.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+
+const ComboboxListbox = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(CommandListbox, { ref, ...props })
+);
+ComboboxListbox.displayName = "@optiaxiom/react/ComboboxListbox";
+
+export { ComboboxListbox };