@optiaxiom/react 0.1.0-next.9 → 0.2.0

package/dist/src/textarea-autosize/TextareaAutosize.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useState } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { wrapper, textarea, shadow } from './TextareaAutosize-css.js';
+
+const TextareaAutosize = forwardRef(
+  ({
+    asChild,
+    children,
+    className,
+    maxRows,
+    onChange,
+    resize = "none",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "textarea";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const [value, setValue] = useState(
+      props.value === void 0 ? props.defaultValue : props.value
+    );
+    return /* @__PURE__ */ jsxs(Box, { ...wrapper({ maxRows, resize }), children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(
+        Comp,
+        {
+          onChange: (event) => {
+            setValue(event.target.value);
+            onChange?.(event);
+          },
+          ref,
+          ...restProps,
+          children
+        }
+      ) }),
+      resize === "auto" && /* @__PURE__ */ jsx(Box, { ...shadow({}, className), ...sprinkleProps, children: (value ?? "") + " " })
+    ] });
+  }
+);
+TextareaAutosize.displayName = "@optiaxiom/react/TextareaAutosize";
+
+export { TextareaAutosize };

package/dist/src/theme-provider/ThemeProvider.js

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { theme, tokens, tokensDark } from '@optiaxiom/globals';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+function ThemeProvider({
+  children,
+  selector = ":root"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        ${selector} {
+          ${assignInlineVars(theme, tokens)}
+        }
+      ` }),
+    /* @__PURE__ */ jsx("style", { children: `
+        ${selector === ":host" ? ":host-context(:root.dark)" : `${selector}.dark`} {
+          ${assignInlineVars(theme, tokensDark)}
+        }
+      ` }),
+    children
+  ] });
+}
+ThemeProvider.displayName = "@optiaxiom/react/ThemeProvider";
+
+export { ThemeProvider };

package/dist/src/toast/Toast-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-5tmJ5uCB.css';
+import './../../assets/src/toast/Toast.css.ts.vanilla-DKNlNBpb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_164y6vm']});
+var root = recipeRuntime({base:[{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'xs',maxW:'full',p:'sm',pl:'md',rounded:'md',shadow:'md',w:['full','max']},'_1dujptc'],variants:{colorScheme:{danger:'_14p0afd',information:'_1ahczfl',neutral:'_1igotqm',success:'mzgu85',warning:'_1ew8h2p'}}});
+
+export { icon, root };

package/dist/src/toast/Toast.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixToast from '@radix-ui/react-toast';
+import { forwardRef, createElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.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 { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { root, icon } from './Toast-css.js';
+
+const iconMap = {
+  danger: IconCircleExclamationFilled,
+  information: IconCircleInfoFilled,
+  neutral: IconCircleInfoFilled,
+  success: IconCircleCheckFilled,
+  warning: IconTriangleExclamationFilled
+};
+const Toast = forwardRef(
+  ({ children, colorScheme = "neutral", onOpenChange, open, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...root({ colorScheme }), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
+      RadixToast.Root,
+      {
+        onOpenChange,
+        open,
+        ref,
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(iconMap[colorScheme]) }),
+          children,
+          /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "inverse",
+              "aria-label": "close",
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              size: "sm"
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+Toast.displayName = "@optiaxiom/react/Toast";
+
+export { Toast };

package/dist/src/toast-action/ToastAction.js

@@ -0,0 +1,26 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as RadixToast from '@radix-ui/react-toast';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Separator } from '../separator/Separator.js';
+
+const ToastAction = forwardRef(
+  ({ altText, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Separator,
+        {
+          alignSelf: "center",
+          bg: "border.active.hovered",
+          h: "sm",
+          ml: "sm",
+          orientation: "vertical"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { appearance: "inverse", asChild: true, size: "sm", ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
+    ] });
+  }
+);
+ToastAction.displayName = "@optiaxiom/react/ToastAction";
+
+export { ToastAction };

package/dist/src/toast-provider/ToastProvider-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-5tmJ5uCB.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1cxwbjq'],variants:{position:{bottom:'_153jc9p','bottom-left':'_11mb344','bottom-right':'ztqubp',top:'_1o9us3f','top-left':'_10w6o0t','top-right':'z9srz9'}}});
+
+export { viewport };

package/dist/src/toast-provider/ToastProvider.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { Portal } from '@radix-ui/react-portal';
+import * as RadixToast from '@radix-ui/react-toast';
+import { forwardRef, useRef, cloneElement, isValidElement } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { Flex } from '../flex/Flex.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Toast } from '../toast/Toast.js';
+import { ToastAction } from '../toast-action/ToastAction.js';
+import { ToastTitle } from '../toast-title/ToastTitle.js';
+import { toaster } from '@optiaxiom/globals';
+import { viewport } from './ToastProvider-css.js';
+import { useOverflowAnchor } from './useOverflowAnchor.js';
+
+const mapPositionToSwipeDirection = {
+  bottom: "down",
+  "bottom-left": "left",
+  "bottom-right": "right",
+  top: "up",
+  "top-left": "left",
+  "top-right": "right"
+};
+const ToastProvider = forwardRef(
+  ({
+    container,
+    duration,
+    label,
+    position = "bottom-right",
+    swipeDirection,
+    swipeThreshold,
+    toaster: toasterProp = toaster,
+    ...props
+  }, outerRef) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const toasts = useSyncExternalStore(...toasterProp.store);
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    useOverflowAnchor(
+      innerRef,
+      position.startsWith("bottom") ? "top" : "bottom"
+    );
+    if (!toasts.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      RadixToast.ToastProvider,
+      {
+        duration,
+        label,
+        swipeDirection: swipeDirection ?? mapPositionToSwipeDirection[position],
+        swipeThreshold,
+        children: [
+          toasts.map(
+            ({ id, open, toast }) => cloneElement(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/microsoft/TypeScript/issues/53178
+              isValidElement(toast) ? toast : /* @__PURE__ */ jsxs(Toast, { colorScheme: toast.type, children: [
+                /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
+                toast.action && /* @__PURE__ */ jsx(
+                  ToastAction,
+                  {
+                    altText: toast.action.altText,
+                    onClick: toast.action.onClick,
+                    children: toast.action.label
+                  }
+                )
+              ] }, id),
+              {
+                forceMount: true,
+                key: id,
+                onOpenChange: (open2) => {
+                  if (isValidElement(toast)) {
+                    toast.props.onOpenChange?.(open2);
+                  }
+                  toasterProp.remove(id);
+                },
+                open
+              }
+            )
+          ),
+          /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(
+            Flex,
+            {
+              alignItems: position.endsWith("left") ? "start" : position.endsWith("right") ? "end" : "center",
+              asChild: true,
+              "data-position": position,
+              flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
+              ...viewport({ position }),
+              ...sprinkleProps,
+              children: /* @__PURE__ */ jsx(RadixToast.Viewport, { ref, ...restProps })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+ToastProvider.displayName = "@optiaxiom/react/ToastProvider";
+
+export { ToastProvider };

package/dist/src/toast-provider/useOverflowAnchor.js

@@ -0,0 +1,34 @@
+import { useState, useEffect, useRef } from 'react';
+
+const useOverflowAnchor = (scrollingElementRef, scrollAnchor) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const previousScrollAnchor = useRef(scrollAnchor);
+  useEffect(() => {
+    previousScrollAnchor.current = scrollAnchor;
+  }, [scrollAnchor]);
+  useEffect(() => {
+    if (!scrollingElementRef.current) {
+      return;
+    }
+    const element = scrollingElementRef.current;
+    const listener = () => previousScrollAnchor.current = Math.ceil(Math.abs(element.scrollTop)) === element.scrollHeight - element.offsetHeight ? scrollAnchor : null;
+    element.addEventListener("scroll", listener);
+    return () => element.removeEventListener("scroll", listener);
+  }, [mounted, scrollAnchor, scrollingElementRef]);
+  useEffect(() => {
+    if (!scrollingElementRef.current) {
+      return;
+    }
+    const element = scrollingElementRef.current;
+    const mutation = new MutationObserver(() => {
+      if (previousScrollAnchor.current === scrollAnchor) {
+        element.scrollTop = (scrollAnchor === "top" ? -1 : 1) * element.scrollHeight - element.offsetHeight;
+      }
+    });
+    mutation.observe(element, { childList: true });
+    return () => mutation.disconnect();
+  }, [mounted, scrollAnchor, scrollingElementRef]);
+};
+
+export { useOverflowAnchor };

package/dist/src/toast-title/ToastTitle.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixToast from '@radix-ui/react-toast';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+
+const ToastTitle = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Text, { asChild: true, flex: "1", ...props, children: /* @__PURE__ */ jsx(RadixToast.Title, { ref, children }) });
+  }
+);
+ToastTitle.displayName = "@optiaxiom/react/ToastTitle";
+
+export { ToastTitle };

package/dist/src/toggle-button/ToggleButton.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixToggle from '@radix-ui/react-toggle';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const ToggleButton = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Button, { appearance: "subtle", asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixToggle.Root, { ref, children }) });
+  }
+);
+ToggleButton.displayName = "@optiaxiom/react/ToggleButton";
+
+export { ToggleButton };

package/dist/src/toggle-input/ToggleInput-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-7tBLQzKd.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var toggleInput = recipeRuntime({base:['_1fmgutn',{alignItems:'start',flexDirection:'row',gap:'xs'},'lr3pon']});
+
+export { toggleInput };

package/dist/src/toggle-input/ToggleInput.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { useId } from '@reach/auto-id';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { ToggleInputContextProvider } from '../toggle-input-context/ToggleInputContext.js';
+import { toggleInput } from './ToggleInput-css.js';
+
+const ToggleInput = forwardRef(
+  ({ asChild, children, description, ...props }, ref) => {
+    const Comp = asChild ? Slot : "label";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const descriptionId = useId();
+    const labelId = useId();
+    return /* @__PURE__ */ jsx(
+      ToggleInputContextProvider,
+      {
+        descriptionId: description ? descriptionId : void 0,
+        labelId,
+        children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput(), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) })
+      }
+    );
+  }
+);
+ToggleInput.displayName = "@optiaxiom/react/ToggleInput";
+
+export { ToggleInput };

package/dist/src/toggle-input-content/ToggleInputContent.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const ToggleInputContent = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { flex: "1", fontSize: "md", overflow: "hidden", ref, ...props, children });
+});
+ToggleInputContent.displayName = "@optiaxiom/react/ToggleInputContent";
+
+export { ToggleInputContent };

package/dist/src/toggle-input-context/ToggleInputContext.js

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

package/dist/src/toggle-input-control/ToggleInputControl-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-7tBLQzKd.css';
+import './../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-UmcCg7ux.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:['jicf6h']});
+
+export { control };

package/dist/src/toggle-input-control/ToggleInputControl.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { control } from './ToggleInputControl-css.js';
+
+const ToggleInputControl = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { "aria-hidden": true, ref, ...control({}, className), ...props, children });
+});
+ToggleInputControl.displayName = "@optiaxiom/react/ToggleInputControl";
+
+export { ToggleInputControl };

package/dist/src/toggle-input-description/ToggleInputDescription.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useToggleInputContext } from '../toggle-input-context/ToggleInputContext.js';
+
+const ToggleInputDescription = forwardRef(({ children, ...props }, ref) => {
+  const { descriptionId } = useToggleInputContext("ToggleInputDescription");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      color: "fg.secondary",
+      fontSize: "sm",
+      id: descriptionId,
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+ToggleInputDescription.displayName = "@optiaxiom/react/ToggleInputDescription";
+
+export { ToggleInputDescription };

package/dist/src/toggle-input-hidden-input/ToggleInputHiddenInput-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+
+var className = '_11bxd3a';
+
+export { className };

package/dist/src/toggle-input-hidden-input/ToggleInputHiddenInput.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useToggleInputContext } from '../toggle-input-context/ToggleInputContext.js';
+import { className } from './ToggleInputHiddenInput-css.js';
+
+const ToggleInputHiddenInput = forwardRef(({ className: className$1, onChange, onCheckedChange, ...props }, ref) => {
+  const { descriptionId, labelId } = useToggleInputContext(
+    "ToggleInputHiddenInput"
+  );
+  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-describedby": descriptionId,
+      "aria-labelledby": labelId,
+      className: clsx(className$1, className),
+      onChange: (event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked);
+      },
+      ref,
+      type: "checkbox",
+      ...props
+    }
+  ) });
+});
+ToggleInputHiddenInput.displayName = "@optiaxiom/react/ToggleInputHiddenInput";
+
+export { ToggleInputHiddenInput };

package/dist/src/toggle-input-label/ToggleInputLabel.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useToggleInputContext } from '../toggle-input-context/ToggleInputContext.js';
+
+const ToggleInputLabel = forwardRef(({ children, ...props }, ref) => {
+  const { labelId } = useToggleInputContext("ToggleInputLabel");
+  return /* @__PURE__ */ jsx(Box, { id: labelId, ref, ...props, children });
+});
+ToggleInputLabel.displayName = "@optiaxiom/react/ToggleInputLabel";
+
+export { ToggleInputLabel };

package/dist/src/tooltip/Tooltip.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { TooltipContent } from '../tooltip-content/TooltipContent.js';
+import { TooltipRoot } from '../tooltip-root/TooltipRoot.js';
+import { TooltipTrigger } from '../tooltip-trigger/TooltipTrigger.js';
+
+const Tooltip = forwardRef(
+  ({
+    auto,
+    children,
+    content,
+    defaultOpen,
+    delayDuration,
+    onOpenChange,
+    open,
+    ...props
+  }, ref) => {
+    const empty = !content && typeof content !== "number" && typeof content !== "string";
+    return /* @__PURE__ */ jsxs(
+      TooltipRoot,
+      {
+        auto,
+        defaultOpen,
+        delayDuration,
+        disableHoverableContent: empty,
+        onOpenChange,
+        open,
+        children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, ref, children }),
+          !empty && /* @__PURE__ */ jsx(TooltipContent, { ...props, children: content })
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "@optiaxiom/react/Tooltip";
+
+export { Tooltip };

package/dist/src/tooltip-content/TooltipContent-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',px:'12',py:'8',rounded:'md',z:'tooltip'}]});
+
+export { content };

package/dist/src/tooltip-content/TooltipContent.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { theme } from '@optiaxiom/globals';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
+import { Text } from '../text/Text.js';
+import { useTooltipContext } from '../tooltip-context/TooltipContext.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './TooltipContent-css.js';
+
+const TooltipContent = forwardRef(
+  ({
+    align = "center",
+    arrowPadding = 6,
+    children,
+    className,
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { open } = useTooltipContext("TooltipContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+      RadixTooltip.Content,
+      {
+        align,
+        arrowPadding,
+        ref,
+        sideOffset,
+        children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "sm", children }),
+          /* @__PURE__ */ jsx(
+            RadixTooltip.Arrow,
+            {
+              fill: theme.colors["bg.default.inverse"],
+              height: 4,
+              width: 8
+            }
+          )
+        ]
+      }
+    ) }) }) }) });
+  }
+);
+TooltipContent.displayName = "@optiaxiom/react/TooltipContent";
+
+export { TooltipContent };

package/dist/src/tooltip-context/TooltipContext.js

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

package/dist/src/tooltip-root/TooltipRoot.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useRef } from 'react';
+import { TooltipContextProvider } from '../tooltip-context/TooltipContext.js';
+
+function TooltipRoot({
+  auto,
+  children,
+  defaultOpen,
+  delayDuration,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(
+    RadixTooltip.Root,
+    {
+      delayDuration,
+      onOpenChange: openProp === void 0 ? (flag) => {
+        if (auto && flag && triggerRef.current) {
+          let truncated = false;
+          const elements = [triggerRef.current];
+          while (!truncated && elements.length) {
+            const element = elements.shift();
+            if (!(element instanceof HTMLElement)) {
+              continue;
+            }
+            const { offsetWidth, scrollWidth } = element;
+            if (offsetWidth < scrollWidth) {
+              truncated = true;
+              break;
+            }
+            elements.push(...element.children);
+          }
+          if (!truncated) {
+            return;
+          }
+        }
+        setOpen(flag);
+        onOpenChange?.(flag);
+      } : setOpen,
+      open,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        TooltipContextProvider,
+        {
+          open,
+          setOpen,
+          triggerRef,
+          children
+        }
+      )
+    }
+  );
+}
+TooltipRoot.displayName = "@optiaxiom/react/TooltipRoot";
+
+export { TooltipRoot };