@optiaxiom/react 0.1.0-next.8 → 0.1.0

package/dist/index.js

@@ -1,26 +1,95 @@
-export { AnimatePresence } from './animate-presence/AnimatePresence.js';
-export { usePresence } from './animate-presence/usePresence.js';
-export { Avatar } from './avatar/Avatar.js';
-export { Box } from './box/Box.js';
-export { Button } from './button/Button.js';
-export { ButtonGroup } from './button-group/ButtonGroup.js';
-export { Code } from './code/Code.js';
-export { Field } from './field/Field.js';
-export { Flex } from './flex/Flex.js';
-export { Grid } from './grid/Grid.js';
-export { Heading } from './heading/Heading.js';
-export { Input } from './input/Input.js';
-export { Kbd } from './kbd/Kbd.js';
-export { Paper } from './paper/Paper.js';
-export { Progress } from './progress/Progress.js';
-export { Separator } from './separator/Separator.js';
-export { Skeleton } from './skeleton/Skeleton.js';
-export { extractSprinkles } from './sprinkles/extractSprinkles.js';
-export { mapResponsiveValue, sprinkles } from './sprinkles/sprinkles-css.js';
-import * as layers_css from './styles/layers-css.js';
+export { Alert } from './src/alert/Alert.js';
+export { AlertDescription } from './src/alert-description/AlertDescription.js';
+export { AlertDialog } from './src/alert-dialog/AlertDialog.js';
+export { AlertDialogAction } from './src/alert-dialog-action/AlertDialogAction.js';
+export { AlertDialogCancel } from './src/alert-dialog-cancel/AlertDialogCancel.js';
+export { AlertDialogContent } from './src/alert-dialog-content/AlertDialogContent.js';
+export { AlertDialogDescription } from './src/alert-dialog-description/AlertDialogDescription.js';
+export { AlertDialogFooter } from './src/alert-dialog-footer/AlertDialogFooter.js';
+export { AlertDialogTitle } from './src/alert-dialog-title/AlertDialogTitle.js';
+export { AlertDialogTrigger } from './src/alert-dialog-trigger/AlertDialogTrigger.js';
+export { AlertTitle } from './src/alert-title/AlertTitle.js';
+export { AnimatePresence } from './src/animate-presence/AnimatePresence.js';
+export { Avatar } from './src/avatar/Avatar.js';
+export { AvatarGroup } from './src/avatar-group/AvatarGroup.js';
+export { AxiomProvider } from './src/axiom-provider/AxiomProvider.js';
+export { Badge } from './src/badge/Badge.js';
+export { Box } from './src/box/Box.js';
+export { Button } from './src/button/Button.js';
+export { ButtonGroup } from './src/button-group/ButtonGroup.js';
+export { Checkbox } from './src/checkbox/Checkbox.js';
+export { Code } from './src/code/Code.js';
+export { Dialog } from './src/dialog/Dialog.js';
+export { DialogBody } from './src/dialog-body/DialogBody.js';
+export { DialogClose } from './src/dialog-close/DialogClose.js';
+export { DialogContent } from './src/dialog-content/DialogContent.js';
+export { DialogDescription } from './src/dialog-description/DialogDescription.js';
+export { DialogFooter } from './src/dialog-footer/DialogFooter.js';
+export { DialogTitle } from './src/dialog-title/DialogTitle.js';
+export { DialogTrigger } from './src/dialog-trigger/DialogTrigger.js';
+export { Disclosure } from './src/disclosure/Disclosure.js';
+export { DisclosureContent } from './src/disclosure-content/DisclosureContent.js';
+export { DisclosureTrigger } from './src/disclosure-trigger/DisclosureTrigger.js';
+export { Drawer } from './src/drawer/Drawer.js';
+export { DrawerBody } from './src/drawer-body/DrawerBody.js';
+export { DrawerFooter } from './src/drawer-footer/DrawerFooter.js';
+export { DrawerTitle } from './src/drawer-title/DrawerTitle.js';
+export { DropdownMenu } from './src/dropdown-menu/DropdownMenu.js';
+export { DropdownMenuContent } from './src/dropdown-menu-content/DropdownMenuContent.js';
+export { DropdownMenuItem } from './src/dropdown-menu-item/DropdownMenuItem.js';
+export { DropdownMenuLabel } from './src/dropdown-menu-label/DropdownMenuLabel.js';
+export { DropdownMenuSeparator } from './src/dropdown-menu-separator/DropdownMenuSeparator.js';
+export { DropdownMenuSub } from './src/dropdown-menu-sub/DropdownMenuSub.js';
+export { DropdownMenuSubContent } from './src/dropdown-menu-sub-content/DropdownMenuSubContent.js';
+export { DropdownMenuSubTrigger } from './src/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js';
+export { DropdownMenuTrigger } from './src/dropdown-menu-trigger/DropdownMenuTrigger.js';
+export { Field } from './src/field/Field.js';
+export { Flex } from './src/flex/Flex.js';
+export { Grid } from './src/grid/Grid.js';
+export { Heading } from './src/heading/Heading.js';
+export { HoverCard } from './src/hover-card/HoverCard.js';
+export { HoverCardContent } from './src/hover-card-content/HoverCardContent.js';
+export { HoverCardTrigger } from './src/hover-card-trigger/HoverCardTrigger.js';
+export { Indicator } from './src/indicator/Indicator.js';
+export { Input } from './src/input/Input.js';
+export { InputBase } from './src/input-base/InputBase.js';
+export { Kbd } from './src/kbd/Kbd.js';
+import * as layers_css from './src/layers/layers-css.js';
 export { layers_css as layers };
-export { theme } from './styles/theme-css.js';
-export { Text } from './text/Text.js';
-export { tokens, tokensDark } from './tokens/index.js';
-export { Tooltip } from './tooltip/Tooltip.js';
-export { Transition } from './transition/Transition.js';
+export { Link } from './src/link/Link.js';
+export { MenuButton } from './src/menu-button/MenuButton.js';
+export { Pagination } from './src/pagination/Pagination.js';
+export { Popover } from './src/popover/Popover.js';
+export { PopoverAnchor } from './src/popover-anchor/PopoverAnchor.js';
+export { PopoverContent } from './src/popover-content/PopoverContent.js';
+export { PopoverTrigger } from './src/popover-trigger/PopoverTrigger.js';
+export { Progress } from './src/progress/Progress.js';
+export { RadioGroup } from './src/radio-group/RadioGroup.js';
+export { RadioGroupItem } from './src/radio-group-item/RadioGroupItem.js';
+export { SearchInput } from './src/search-input/SearchInput.js';
+export { Separator } from './src/separator/Separator.js';
+export { Skeleton } from './src/skeleton/Skeleton.js';
+export { Spinner } from './src/spinner/Spinner.js';
+export { extractSprinkles } from './src/sprinkles/extractSprinkles.js';
+export { mapResponsiveValue, sprinkles } from './src/sprinkles/sprinkles.js';
+export { sprinklesMerge } from './src/sprinkles/sprinklesMerge.js';
+export { Switch } from './src/switch/Switch.js';
+export { Tabs } from './src/tabs/Tabs.js';
+export { TabsContent } from './src/tabs-content/TabsContent.js';
+export { TabsList } from './src/tabs-list/TabsList.js';
+export { TabsTrigger } from './src/tabs-trigger/TabsTrigger.js';
+export { Text } from './src/text/Text.js';
+export { Textarea } from './src/textarea/Textarea.js';
+export { createToaster, theme, toaster, tokens, tokensDark } from '@optiaxiom/globals';
+export { ThemeProvider } from './src/theme-provider/ThemeProvider.js';
+export { Toast } from './src/toast/Toast.js';
+export { ToastAction } from './src/toast-action/ToastAction.js';
+export { ToastProvider } from './src/toast-provider/ToastProvider.js';
+export { ToastTitle } from './src/toast-title/ToastTitle.js';
+export { ToggleButton } from './src/toggle-button/ToggleButton.js';
+export { Tooltip } from './src/tooltip/Tooltip.js';
+export { TooltipContent } from './src/tooltip-content/TooltipContent.js';
+export { TooltipRoot } from './src/tooltip-root/TooltipRoot.js';
+export { TooltipTrigger } from './src/tooltip-trigger/TooltipTrigger.js';
+export { Transition } from './src/transition/Transition.js';
+export { TransitionGlobalConfig } from './src/transition/TransitionGlobalConfig.js';

package/dist/package.json.js

@@ -0,0 +1,3 @@
+var version = "0.1.0";
+
+export { version };

package/dist/src/alert/Alert-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var alert = recipeRuntime({base:[{alignItems:'start',flexDirection:'row',fontSize:'md',gap:'xs',justifyContent:'space-between',p:'md'}],variants:{colorScheme:{danger:{bg:'red.100'},information:{bg:'brand.50'},neutral:{bg:'bg.secondary'},success:{bg:'green.100'},warning:{bg:'yellow.100'}}}});
+var icon = recipeRuntime({base:[{h:'16',mt:'4',w:'auto'}],variants:{colorScheme:{danger:{color:'bg.error.hovered'},information:{color:'brand.600'},neutral:{color:'fg.tertiary'},success:{color:'bg.success.hovered'},warning:{color:'bg.warning.hovered'}}}});
+
+export { alert, icon };

package/dist/src/alert/Alert.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { IconCircleCheckFilled } from '../icons/IconCircleCheckFilled.js';
+import { IconCircleExclamationFilled } from '../icons/IconCircleExclamationFilled.js';
+import { IconCircleInfoFilled } from '../icons/IconCircleInfoFilled.js';
+import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationFilled.js';
+import { IconX } from '../icons/IconX.js';
+import { alert, icon } from './Alert-css.js';
+
+const iconMap = {
+  danger: IconCircleExclamationFilled,
+  information: IconCircleInfoFilled,
+  neutral: IconCircleInfoFilled,
+  success: IconCircleCheckFilled,
+  warning: IconTriangleExclamationFilled
+};
+const Alert = forwardRef(
+  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...alert({ colorScheme }, className), ...props, children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", mt: "2", children }),
+      !!onClose && /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-label": "close",
+          color: "fg.default",
+          flex: "none",
+          icon: /* @__PURE__ */ jsx(IconX, {}),
+          onClick: onClose,
+          size: "sm"
+        }
+      )
+    ] });
+  }
+);
+Alert.displayName = "@optiaxiom/react/Alert";
+
+export { Alert };

package/dist/src/alert-description/AlertDescription.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const AlertDescription = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { gap: "xs", ref, ...props, children });
+});
+AlertDescription.displayName = "@optiaxiom/react/AlertDescription";
+
+export { AlertDescription };

package/dist/src/alert-dialog/AlertDialog.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { AlertDialogContextProvider } from '../alert-dialog-context/AlertDialogContext.js';
+
+function AlertDialog({
+  children,
+  defaultOpen,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) });
+}
+AlertDialog.displayName = "@optiaxiom/react/AlertDialog";
+
+export { AlertDialog };

package/dist/src/alert-dialog-action/AlertDialogAction.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AlertDialogAction = forwardRef(({ asChild, children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "danger", ...restProps, children }) });
+});
+AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
+
+export { AlertDialogAction };

package/dist/src/alert-dialog-cancel/AlertDialogCancel.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AlertDialogCancel = forwardRef(({ asChild, children = "Cancel", ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "subtle", ...restProps, children }) });
+});
+AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
+
+export { AlertDialogCancel };

package/dist/src/alert-dialog-content/AlertDialogContent-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CVfLPfsi.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default',rounded:'lg',shadow:'md',z:'popover'},'h94vfc'],variants:{size:{sm:'afsf6p',md:'_187szzo',lg:'zg5ax9'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_41kthm']});
+
+export { content, overlay };

package/dist/src/alert-dialog-content/AlertDialogContent.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { Box } from '../box/Box.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, 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, { "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 }) }) }) })
+  ] }) });
+});
+AlertDialogContent.displayName = "@optiaxiom/react/AlertDialogContent";
+
+export { AlertDialogContent };

package/dist/src/alert-dialog-context/AlertDialogContext.js

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

package/dist/src/alert-dialog-description/AlertDialogDescription-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/alert-dialog-description/AlertDialogDescription.css.ts.vanilla-ByU_MbAC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{fontSize:'md',overflow:'auto',px:'24',py:'16'},'f0xktp']});
+
+export { body };

package/dist/src/alert-dialog-description/AlertDialogDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { body } from './AlertDialogDescription-css.js';
+
+const AlertDialogDescription = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...body({}, className), ref, ...props, children: /* @__PURE__ */ jsx(RadixAlertDialog.Description, { children }) });
+});
+AlertDialogDescription.displayName = "@optiaxiom/react/AlertDialogDescription";
+
+export { AlertDialogDescription };

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

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

package/dist/src/alert-dialog-footer/AlertDialogFooter.js

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

package/dist/src/alert-dialog-title/AlertDialogTitle.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Heading } from '../heading/Heading.js';
+
+const AlertDialogTitle = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      asChild: true,
+      fontWeight: "500",
+      level: "3",
+      p: "lg",
+      pb: "md",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children })
+    }
+  );
+});
+AlertDialogTitle.displayName = "@optiaxiom/react/AlertDialogTitle";
+
+export { AlertDialogTitle };

package/dist/src/alert-dialog-trigger/AlertDialogTrigger.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AlertDialogTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+});
+AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
+
+export { AlertDialogTrigger };

package/dist/src/alert-title/AlertTitle.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const AlertTitle = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", ref, ...props, children });
+  }
+);
+AlertTitle.displayName = "@optiaxiom/react/AlertTitle";
+
+export { AlertTitle };

package/dist/{animate-presence → src/animate-presence}/AnimatePresence.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { PresenceContext } from './PresenceContext.js';
+import '../transition/Transition.js';
+import { TransitionGlobalConfig } from '../transition/TransitionGlobalConfig.js';
+import { PresenceContext } from '../use-presence/PresenceContext.js';
 
-const AnimatePresence = ({
+function AnimatePresence({
   children
-}) => {
+}) {
   const [exiting, setExiting] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -26,11 +28,15 @@ const AnimatePresence = ({
     });
   }, []);
   useEffect(() => {
-    if (!isPresent && [...exiting.values()].some(Boolean)) {
+    if (!isPresent && exiting.size === 0) {
       lastChildren.current = false;
     }
   }, [exiting, isPresent]);
+  if (TransitionGlobalConfig.skipAnimations) {
+    return children;
+  }
   return /* @__PURE__ */ jsx(PresenceContext.Provider, { value: { isPresent, onExitComplete, register }, children: children || ([...exiting.values()].some(Boolean) ? lastChildren.current : null) });
-};
+}
+AnimatePresence.displayName = "@optiaxiom/react/AnimatePresence";
 
 export { AnimatePresence };

package/dist/src/autocomplete/Autocomplete.js

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCombobox } from 'downshift';
+import { useState, useEffect } from 'react';
+import { AutocompleteContextProvider } from '../autocomplete-context/AutocompleteContext.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { Popover } from '../popover/Popover.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useDelayedState } from './useDelayedState.js';
+
+function Autocomplete({
+  children,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onInputValueChange,
+  onValueChange,
+  value,
+  ...props
+}) {
+  const { id: inputId } = useFieldContext({});
+  const [selectedItem, setSelectedItem] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(
+    itemToString(selectedItem ?? null)
+  );
+  const itemToStringStable = useEffectEvent(itemToString);
+  useEffect(() => {
+    if (!isOpen) {
+      setInputValue(itemToStringStable(selectedItem ?? null));
+    }
+  }, [isOpen, itemToStringStable, selectedItem]);
+  const [highlightedIndex, setHighlightedIndex] = useDelayedState(-1, isOpen);
+  const downshift = useCombobox({
+    ...props,
+    highlightedIndex,
+    inputId,
+    inputValue,
+    isOpen,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2 }) {
+      setHighlightedIndex(highlightedIndex2);
+    },
+    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
+  });
+  return /* @__PURE__ */ jsx(Popover, { open: isOpen, children: /* @__PURE__ */ jsx(
+    AutocompleteContextProvider,
+    {
+      disabled,
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      items,
+      itemToKey,
+      setInputValue,
+      children
+    }
+  ) });
+}
+Autocomplete.displayName = "@optiaxiom/react/Autocomplete";
+
+export { Autocomplete };

package/dist/src/autocomplete/useDelayedState.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useDelayedState(defaultValue, state) {
+  const [value, setValue] = useState(defaultValue);
+  const valueRef = useRef();
+  useEffect(() => {
+    if (valueRef.current !== void 0) {
+      setValue(valueRef.current);
+      valueRef.current = void 0;
+    }
+  }, [state]);
+  return [
+    value,
+    (value2) => {
+      if (state) {
+        valueRef.current = void 0;
+        setValue(value2);
+      } else {
+        valueRef.current = value2;
+      }
+    },
+    valueRef
+  ];
+}
+
+export { useDelayedState };

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-okSbnsG8.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{p:'4'},'_1rj0pf1']});
+var list = recipeRuntime({base:['_1nvlns4','_1tqgytl']});
+
+export { content, list };

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

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { Box } from '../box/Box.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { usePopoverContext } from '../popover-context/PopoverContext.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { content, list } from './AutocompleteContent-css.js';
+
+const AutocompleteContent = forwardRef(({ children, className, loading, ...props }, ref) => {
+  const { downshift } = useAutocompleteContext("AutocompleteContent");
+  const { open } = usePopoverContext("AutocompleteContent");
+  const isOpenRef = useRef(open);
+  useEffect(() => {
+    isOpenRef.current = open;
+  });
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      align: "center",
+      onMouseMoveCapture: (event) => {
+        if (!isOpenRef.current) {
+          event.stopPropagation();
+        }
+      },
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      ref,
+      sideOffset: 5,
+      ...content({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Box, { asChild: true, ...list(), children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({}, { suppressRefError: true }), children: loading ? /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : children }) })
+    }
+  );
+});
+AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";
+
+export { AutocompleteContent };

package/dist/src/autocomplete-context/AutocompleteContext.js

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

package/dist/src/autocomplete-empty-item/AutocompleteEmptyItem.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { Box } from '../box/Box.js';
+
+const AutocompleteEmptyItem = forwardRef(({ children, ...props }, ref) => {
+  const { items } = useAutocompleteContext("AutocompleteEmptyItem");
+  if (items.length > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      color: "fg.disabled",
+      display: "flex",
+      fontSize: "lg",
+      justifyContent: "center",
+      p: "md",
+      ...props,
+      children: /* @__PURE__ */ jsxs("li", { ref, children: [
+        " ",
+        children || "No results found"
+      ] })
+    }
+  );
+});
+AutocompleteEmptyItem.displayName = "@optiaxiom/react/AutocompleteEmptyItem";
+
+export { AutocompleteEmptyItem };