@optiaxiom/react 0.1.0-next.9 → 0.2.0

package/dist/index.js

@@ -1,38 +1,103 @@
-export { AlertDialog } from './alert-dialog/AlertDialog.js';
-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 { Checkbox } from './checkbox/Checkbox.js';
-export { Chip } from './chip/Chip.js';
-export { Code } from './code/Code.js';
-export { Dialog } from './dialog/Dialog.js';
-export { DialogBody } from './dialog-body/DialogBody.js';
-export { DialogFooter } from './dialog-footer/DialogFooter.js';
-export { DialogTitle } from './dialog-title/DialogTitle.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 { Link } from './link/Link.js';
-export { Paper } from './paper/Paper.js';
-export { Progress } from './progress/Progress.js';
-export { RadioGroup } from './radio-group/RadioGroup.js';
-export { RadioGroupItem } from './radio-group-item/RadioGroupItem.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 { Banner } from './src/banner/Banner.js';
+export { BannerDescription } from './src/banner-description/BannerDescription.js';
+export { BannerTitle } from './src/banner-title/BannerTitle.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 { 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 { Switch } from './switch/Switch.js';
-export { Text } from './text/Text.js';
-export { Textarea } from './textarea/Textarea.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 { Radio } from './src/radio/Radio.js';
+export { RadioGroup } from './src/radio-group/RadioGroup.js';
+export { SearchInput } from './src/search-input/SearchInput.js';
+export { SegmentedControl } from './src/segmented-control/SegmentedControl.js';
+export { SegmentedControlItem } from './src/segmented-control-item/SegmentedControlItem.js';
+export { Separator } from './src/separator/Separator.js';
+export { SideNav } from './src/side-nav/SideNav.js';
+export { SideNavAccountItem } from './src/side-nav-account-item/SideNavAccountItem.js';
+export { SideNavItem } from './src/side-nav-item/SideNavItem.js';
+export { SideNavToggle } from './src/side-nav-toggle/SideNavToggle.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 { ThemeProvider } from './src/theme-provider/ThemeProvider.js';
+export { Toast } from './src/toast/Toast.js';
+export { ToastAction } from './src/toast-action/ToastAction.js';
+export { createToaster, toaster } from '@optiaxiom/globals';
+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.2.0";
+
+export { version };

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

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'xs',justifyContent:'space-between',p:'sm',pr:'md',rounded:'md'}],variants:{colorScheme:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
+var icon = recipeRuntime({base:[{mt:'4'}],variants:{colorScheme:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+
+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 { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.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(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "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-79mCcHcb.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-8Sww1h8x.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1epzhm4'],variants:{size:{sm:'mfy55r',md:'fjdv6n',lg:'_1blgaqq'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_37by2q']});
+
+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,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});
+
+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-79mCcHcb.css';
+import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BCpY-gV3.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_1e6e5t']});
+
+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,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Heading } from '../heading/Heading.js';
+import { Icon } from '../icon/Icon.js';
+import { IconTriangleExclamation } from '../icons/IconTriangleExclamation.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+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: "md", p: "lg", pb: "md", ...sprinkleProps, children: [
+    /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore ? fallbackSpan(addonBefore) : /* @__PURE__ */ jsx(IconTriangleExclamation, {}) }),
+    /* @__PURE__ */ jsx(
+      Heading,
+      {
+        asChild: true,
+        color: "fg.default",
+        fontWeight: "500",
+        level: "3",
+        ref,
+        ...restProps,
+        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,87 @@
+import { jsx } from 'react/jsx-runtime';
+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 '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+
+function Autocomplete({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onInputValueChange,
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const { inputId } = useFieldContext({});
+  const [selectedItem, setSelectedItem] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const [inputValue, setInputValue] = useState(
+    itemToString(selectedItem ?? null)
+  );
+  const itemToStringStable = useEffectEvent(itemToString);
+  useEffect(() => {
+    if (!isOpen) {
+      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
+  });
+  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
+    AutocompleteContextProvider,
+    {
+      disabled,
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      isOpen,
+      items,
+      itemToKey,
+      setInputValue,
+      children
+    }
+  ) });
+}
+Autocomplete.displayName = "@optiaxiom/react/Autocomplete";
+
+export { Autocomplete };

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

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

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { PopperContent } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { Box } from '../box/Box.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { content } from './AutocompleteContent-css.js';
+
+const AutocompleteContent = forwardRef(
+  ({
+    align = "center",
+    children,
+    className,
+    loading,
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { downshift, isOpen } = useAutocompleteContext("AutocompleteContent");
+    return /* @__PURE__ */ jsx(MenuContentBase, { minW: "trigger", open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(PopperContent, { align, asChild: true, sideOffset, 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 };