@optiaxiom/react 0.8.2 → 0.10.0

package/dist/index.js

@@ -1,23 +1,19 @@
 export { Alert } from './packages/react/src/alert/Alert.js';
-export { AlertDescription } from './packages/react/src/alert-description/AlertDescription.js';
 export { AlertDialog } from './packages/react/src/alert-dialog/AlertDialog.js';
 export { AlertDialogAction } from './packages/react/src/alert-dialog-action/AlertDialogAction.js';
 export { AlertDialogBody } from './packages/react/src/alert-dialog-body/AlertDialogBody.js';
 export { AlertDialogCancel } from './packages/react/src/alert-dialog-cancel/AlertDialogCancel.js';
 export { AlertDialogContent } from './packages/react/src/alert-dialog-content/AlertDialogContent.js';
 export { AlertDialogFooter } from './packages/react/src/alert-dialog-footer/AlertDialogFooter.js';
-export { AlertDialogTitle } from './packages/react/src/alert-dialog-title/AlertDialogTitle.js';
+export { AlertDialogHeader } from './packages/react/src/alert-dialog-header/AlertDialogHeader.js';
 export { AlertDialogTrigger } from './packages/react/src/alert-dialog-trigger/AlertDialogTrigger.js';
-export { AlertTitle } from './packages/react/src/alert-title/AlertTitle.js';
-export { AnimatePresence } from './packages/react/src/animate-presence/AnimatePresence.js';
 export { Avatar } from './packages/react/src/avatar/Avatar.js';
 export { AvatarGroup } from './packages/react/src/avatar-group/AvatarGroup.js';
 export { AxiomProvider } from './packages/react/src/axiom-provider/AxiomProvider.js';
 export { Badge } from './packages/react/src/badge/Badge.js';
 export { Banner } from './packages/react/src/banner/Banner.js';
-export { BannerDescription } from './packages/react/src/banner-description/BannerDescription.js';
-export { BannerTitle } from './packages/react/src/banner-title/BannerTitle.js';
 export { Box } from './packages/react/src/box/Box.js';
+export { extractBoxProps } from './packages/react/src/box/extractBoxProps.js';
 export { Button } from './packages/react/src/button/Button.js';
 export { ButtonGroup } from './packages/react/src/button-group/ButtonGroup.js';
 export { Checkbox } from './packages/react/src/checkbox/Checkbox.js';
@@ -29,6 +25,7 @@ export { DialogClose } from './packages/react/src/dialog-close/DialogClose.js';
 export { DialogContent } from './packages/react/src/dialog-content/DialogContent.js';
 export { DialogDescription } from './packages/react/src/dialog-description/DialogDescription.js';
 export { DialogFooter } from './packages/react/src/dialog-footer/DialogFooter.js';
+export { DialogForm } from './packages/react/src/dialog-form/DialogForm.js';
 export { DialogHeader } from './packages/react/src/dialog-header/DialogHeader.js';
 export { DialogTitle } from './packages/react/src/dialog-title/DialogTitle.js';
 export { DialogTrigger } from './packages/react/src/dialog-trigger/DialogTrigger.js';
@@ -104,7 +101,6 @@ export { SidenavItem } from './packages/react/src/sidenav-item/SidenavItem.js';
 export { SidenavToggle } from './packages/react/src/sidenav-toggle/SidenavToggle.js';
 export { Skeleton } from './packages/react/src/skeleton/Skeleton.js';
 export { Spinner } from './packages/react/src/spinner/Spinner.js';
-export { extractSprinkles } from './packages/react/src/sprinkles/extractSprinkles.js';
 export { mapResponsiveValue, sprinkles } from './packages/react/src/sprinkles/sprinkles.js';
 export { sprinklesMerge } from './packages/react/src/sprinkles/sprinklesMerge.js';
 export { Switch } from './packages/react/src/switch/Switch.js';
@@ -122,8 +118,10 @@ export { ToastTitle } from './packages/react/src/toast-title/ToastTitle.js';
 export { ToggleButton } from './packages/react/src/toggle-button/ToggleButton.js';
 export { Tooltip } from './packages/react/src/tooltip/Tooltip.js';
 export { TooltipContent } from './packages/react/src/tooltip-content/TooltipContent.js';
+export { TooltipProvider } from './packages/react/src/tooltip-provider/TooltipProvider.js';
 export { TooltipRoot } from './packages/react/src/tooltip-root/TooltipRoot.js';
 export { TooltipTrigger } from './packages/react/src/tooltip-trigger/TooltipTrigger.js';
 export { Transition } from './packages/react/src/transition/Transition.js';
 export { TransitionGlobalConfig } from './packages/react/src/transition/TransitionGlobalConfig.js';
+export { TransitionGroup } from './packages/react/src/transition-group/TransitionGroup.js';
 export { createToaster, theme, toaster, tokens } from '@optiaxiom/globals';

package/dist/node_modules/.pnpm/{@mantine_hooks@7.15.1_react@18.3.1 → @mantine_hooks@7.15.3_react@18.3.1}/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js

@@ -28,7 +28,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
       setMatches(queryRef.current.matches);
       return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
     }
-    return void 0;
+    return undefined;
   }, [query]);
   return matches;
 }

package/dist/node_modules/.pnpm/{@mantine_hooks@7.15.1_react@18.3.1 → @mantine_hooks@7.15.3_react@18.3.1}/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js

@@ -8,13 +8,13 @@ function useUncontrolled({
   }
 }) {
   const [uncontrolledValue, setUncontrolledValue] = useState(
-    defaultValue !== void 0 ? defaultValue : finalValue
+    defaultValue !== undefined ? defaultValue : finalValue
   );
   const handleUncontrolledChange = (val, ...payload) => {
     setUncontrolledValue(val);
     onChange?.(val, ...payload);
   };
-  if (value !== void 0) {
+  if (value !== undefined) {
     return [value, onChange, true];
   }
   return [uncontrolledValue, handleUncontrolledChange, false];

package/dist/node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_wcbutaohqjnkd6euht5r5xgz74/node_modules/@vanilla-extract/sprinkles/dist/createSprinkles-74286718.esm.js

@@ -1,7 +1,7 @@
 function toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
+  if (undefined !== e) {
     var i = e.call(t, r || "default");
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
@@ -42,7 +42,7 @@ function ownKeys(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
       _defineProperty(e, r, t[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));

package/dist/packages/react/package.json.js

@@ -1,3 +1,3 @@
-var version = "0.8.2";
+var version = "0.10.0";
 
 export { version };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});

package/dist/packages/react/src/alert/Alert.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
-import { AlertContextProvider } from '../alert-context/AlertContext.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
@@ -22,12 +21,10 @@ const mapIntentToIcon = {
 };
 const Alert = forwardRef(
   ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
-    const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(AlertContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       Flex,
       {
-        "aria-describedby": descriptionId,
         "aria-labelledby": labelId,
         ref,
         role: "alert",
@@ -35,7 +32,7 @@ const Alert = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", my: "2", children }),
+          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,
             {
@@ -50,7 +47,7 @@ const Alert = forwardRef(
           )
         ]
       }
-    ) });
+    );
   }
 );
 Alert.displayName = "@optiaxiom/react/Alert";

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

@@ -3,6 +3,8 @@ 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';
+import { NestedDialogContextProvider } from '../nested-dialog-context/NestedDialogContext.js';
+import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 
 function AlertDialog({
   children,
@@ -16,7 +18,16 @@ function AlertDialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) });
+  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("AlertDialog", open);
+  return /* @__PURE__ */ jsx(NestedDialogContextProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixAlertDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    AlertDialogContextProvider,
+    {
+      isRootDialog,
+      nestedDialogCount,
+      open,
+      children
+    }
+  ) }) });
 }
 AlertDialog.displayName = "@optiaxiom/react/AlertDialog";
 

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

@@ -4,9 +4,11 @@ import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
-const AlertDialogAction = forwardRef(({ appearance = "danger", asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
-});
+const AlertDialogAction = forwardRef(
+  ({ appearance = "danger", asChild, children, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, size, children }) });
+  }
+);
 AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
 
 export { AlertDialogAction };

package/dist/packages/react/src/alert-dialog-body/AlertDialogBody.js

@@ -2,12 +2,25 @@
 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 './AlertDialogBody-css.js';
+import { Flex } from '../flex/Flex.js';
 
-const AlertDialogBody = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...body({}, className), ref, ...props, children: /* @__PURE__ */ jsx(RadixAlertDialog.Description, { children }) });
-});
+const AlertDialogBody = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
+    Flex,
+    {
+      asChild: true,
+      flex: "1",
+      fontSize: "md",
+      justifyContent: "start",
+      overflow: "auto",
+      px: "24",
+      py: "16",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixAlertDialog.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { children }) })
+    }
+  )
+);
 AlertDialogBody.displayName = "@optiaxiom/react/AlertDialogBody";
 
 export { AlertDialogBody };

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

@@ -4,9 +4,17 @@ import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
-const AlertDialogCancel = forwardRef(({ appearance = "subtle", asChild, children = "Cancel", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
-});
+const AlertDialogCancel = forwardRef(
+  ({
+    appearance = "subtle",
+    asChild,
+    children = "Cancel",
+    size = "lg",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, size, children }) });
+  }
+);
 AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
 
 export { AlertDialogCancel };

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

@@ -1,8 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-D1fQixNN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-Diep7mXE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1aidsz4']});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_18xpf6o'],variants:{size:{sm:'_1quvt1l',md:'_1u74lg8',lg:'_1lr7sbx'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1cili8q'],variants:{size:{sm:'_1knl7je',md:'_1xgeoms',lg:'alk0eg'}}});
+var nestedDialogCountVar = 'var(--_164n9qm)';
+var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_90q7in']});
 
-export { container, content };
+export { content, nestedDialogCountVar, root };

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

@@ -1,23 +1,43 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
-import { useAlertDialogContext, AlertDialogContextProvider } from '../alert-dialog-context/AlertDialogContext.js';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { useAlertDialogContext } from '../alert-dialog-context/AlertDialogContext.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
-import { container, content } from './AlertDialogContent-css.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { root, nestedDialogCountVar, 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(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
-    /* @__PURE__ */ jsxs(Flex, { ...container(), children: [
+const AlertDialogContent = forwardRef(({ children, size = "sm", style, ...props }, ref) => {
+  const { isRootDialog, nestedDialogCount, open } = useAlertDialogContext("AlertDialogContent");
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
+    isRootDialog && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
+    /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
-      /* @__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(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          asChild: true,
+          elevation: "dialog",
+          style: {
+            ...assignInlineVars({
+              [nestedDialogCountVar]: `${nestedDialogCount}`
+            }),
+            ...style
+          },
+          ...content({ size }),
+          children: /* @__PURE__ */ jsxs(RadixAlertDialog.Content, { ref, ...props, children: [
+            children,
+            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
+          ] })
+        }
+      ) }),
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
       /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
     ] })

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-Bu54f07F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-pqnHw444.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'_7pf5sp']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'b8qj6l']});
 
 export { footer };

package/dist/packages/react/src/{alert-dialog-title/AlertDialogTitle.js → alert-dialog-header/AlertDialogHeader.js}

@@ -6,31 +6,16 @@ import { Flex } from '../flex/Flex.js';
 import { Heading } from '../heading/Heading.js';
 import { Icon } from '../icon/Icon.js';
 import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 
-const AlertDialogTitle = forwardRef(({ addonBefore, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", p: "24", pb: "16", ...sprinkleProps, children: [
+const AlertDialogHeader = forwardRef(({ addonBefore, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", p: "24", pb: "16", ref, ...props, children: [
     /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore ? fallbackSpan(addonBefore) : /* @__PURE__ */ jsx(IconTriangleExclamationSolid, {}) }),
-    /* @__PURE__ */ jsx(
-      Heading,
-      {
-        asChild: true,
-        color: "fg.default",
-        fontWeight: "500",
-        level: "3",
-        ref,
-        ...restProps,
-        children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children })
-      }
-    )
+    /* @__PURE__ */ jsx(Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children }) })
   ] });
 });
-AlertDialogTitle.displayName = "@optiaxiom/react/AlertDialogTitle";
+AlertDialogHeader.displayName = "@optiaxiom/react/AlertDialogHeader";
 
-export { AlertDialogTitle };
+export { AlertDialogHeader };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-DyQDI5n_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-e1ohLex8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'_1ua3jri']});
+var content = recipeRuntime({base:[{p:'4'},'osq42r']});
 
 export { content };

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

@@ -1,22 +1,54 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PopperContent } from '@radix-ui/react-popper';
 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 '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalLayer } from '../modal-layer/ModalLayer.js';
 import { Spinner } from '../spinner/Spinner.js';
-import { AutocompleteContentImpl } from './AutocompleteContentImpl.js';
+import { content } from './AutocompleteContent-css.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(ModalLayer, { 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: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) })
-  ] });
-});
+const AutocompleteContent = forwardRef(
+  ({
+    align = "center",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    ...props
+  }, ref) => {
+    const { isOpen, items } = useAutocompleteContext("AutocompleteContent");
+    return isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Portal, { asChild: true, 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(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+        MenuListbox,
+        {
+          asChild: true,
+          maxH: "sm",
+          minW: "trigger",
+          provider: "popper",
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            CommandListbox,
+            {
+              asChild: true,
+              ref,
+              ...content({}, className),
+              ...props,
+              children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 5, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+            }
+          )
+        }
+      ) }) })
+    ] });
+  }
+);
 AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";
 
 export { AutocompleteContent };

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

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(

package/dist/packages/react/src/autocomplete-virtualized/AutocompleteVirtualized.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
+
+const AutocompleteVirtualized = forwardRef(({ children, items, ...props }, outerRef) => {
+  const innerRef = useRef(null);
+  const ref = useComposedRefs(outerRef, innerRef);
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    requestAnimationFrame(() => setEnabled(true));
+  }, []);
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    enabled,
+    estimateSize: () => 40,
+    getScrollElement: () => innerRef.current
+  });
+  const { downshift } = useCommandContext("AutocompleteVirtualized");
+  useEffect(() => {
+    rowVirtualizer.scrollToIndex(downshift.highlightedIndex);
+  }, [downshift.highlightedIndex, enabled, rowVirtualizer]);
+  return /* @__PURE__ */ jsx(ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      flex: "none",
+      flexDirection: "column",
+      gap: "2",
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        position: "relative"
+      },
+      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            height: virtualItem.size,
+            left: 0,
+            position: "absolute",
+            top: 0,
+            transform: `translateY(${virtualItem.start}px)`
+          },
+          w: "full",
+          children: children(items[virtualItem.index])
+        },
+        virtualItem.key
+      ))
+    }
+  ) });
+});
+AutocompleteVirtualized.displayName = "@optiaxiom/react/AutocompleteVirtualized";
+
+export { AutocompleteVirtualized };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CC1YKzaI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DRfQb0Vw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'z6uw9d'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_8g1u6'],sm:[{fontSize:'xs',size:'sm'},'_3jp066'],md:[{fontSize:'md',size:'md'},'_1w3i6ya'],lg:[{fontSize:'lg',size:'lg'},'cavctl'],xl:[{fontSize:'2xl',size:'xl'},'_1iuf0mm'],'3xl':[{fontSize:'4xl',size:'3xl'},'_1b0gq72']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'jxw00s'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_1qjppkb'],sm:[{fontSize:'xs',size:'sm'},'_1s6focr'],md:[{fontSize:'md',size:'md'},'j276d'],lg:[{fontSize:'lg',size:'lg'},'_157x47u'],xl:[{fontSize:'2xl',size:'xl'},'uid7rc'],'3xl':[{fontSize:'4xl',size:'3xl'},'_1g0eu01']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

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

@@ -4,6 +4,8 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import { forwardRef, useContext } from 'react';
 import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { IconUserSolid } from '../icons/IconUserSolid.js';
 import { IconUsersSolid } from '../icons/IconUsersSolid.js';
 import { avatar, fallback, icon } from './Avatar-css.js';
@@ -39,7 +41,7 @@ const Avatar = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
           src && /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: (name ? getInitialsFromName(name) : children) || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : undefined, children: (name ? getInitialsFromName(name) : children) || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
         ] })
       }
     );

package/dist/packages/react/src/avatar-context/AvatarContext.js

@@ -2,7 +2,7 @@
 import { createContext } from 'react';
 
 const AvatarContext = createContext({
-  size: void 0
+  size: undefined
 });
 
 export { AvatarContext };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['lokr0f',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['a6m2ec',{display:'flex'}]});
 
 export { avatarGroup };

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

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { avatarGroup } from './AvatarGroup-css.js';
 
 const AvatarGroup = forwardRef(

package/dist/packages/react/src/axiom-provider/AxiomProvider.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { AxiomVersionContext } from '@optiaxiom/globals';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { useContext } from 'react';
 import { version } from '../../package.json.js';
 import { ThemeProvider } from '../theme-provider/ThemeProvider.js';
 import { ToastProvider } from '../toast-provider/ToastProvider.js';
+import { TooltipProvider } from '../tooltip-provider/TooltipProvider.js';
 
 function AxiomProvider({
   children,
@@ -16,7 +16,7 @@ function AxiomProvider({
   if (axiom) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(RadixTooltip.Provider, { ...tooltip, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
     children,
     /* @__PURE__ */ jsx(ToastProvider, { ...toast })
   ] }) }) });