@optiaxiom/react 0.1.0-next.8 → 0.1.0

package/dist/src/textarea/Textarea.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { InputBase } from '../input-base/InputBase.js';
+import { TextareaAutosize } from '../textarea-autosize/TextareaAutosize.js';
+
+const Textarea = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : TextareaAutosize;
+    return /* @__PURE__ */ jsx(InputBase, { flexDirection: "column", size: "lg", ...props, children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) });
+  }
+);
+Textarea.displayName = "@optiaxiom/react/Textarea";
+
+export { Textarea };

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-CJ9hUlY-.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var shadow = recipeRuntime({base:['tcfqg','ea9n1i']});
+var textarea = recipeRuntime({base:['tcfqg','_1t9sp71']});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['rcuitc','_1nlocyw'],'2':['rcuitc','_1gy53dn'],'3':['rcuitc','_1bzp6j7'],'4':['rcuitc','_14ufo1m'],'5':['rcuitc','fh7u7n']},resize:{auto:{},none:{},vertical:'_1uc1ekq'}}});
+
+export { shadow, textarea, wrapper };

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 { assignInlineVars } from '@vanilla-extract/dynamic';
+import { theme, tokens, tokensDark } from '@optiaxiom/globals';
+
+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-KObJMImw.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-wsB2DsHJ.css';
+import './../../assets/src/toast/Toast.css.ts.vanilla-CDM7TDwV.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{alignSelf:'start',h:'16',mt:'4',w:'auto'},'_1eaab0e']});
+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']},'_1bcwx56'],variants:{colorScheme:{danger:'tksept',information:'_45dcit',neutral:'_9qevzi',success:'_1ykv0i',warning:'_1ipzsvx'}}});
+
+export { icon, root };

package/dist/src/toast/Toast.js

@@ -0,0 +1,52 @@
+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 { 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(Box, { 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-KObJMImw.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-wsB2DsHJ.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'},'_15xqf42'],variants:{position:{bottom:'dmebwl','bottom-left':'e57m6o','bottom-right':'_1upt931',top:'_1cv4eao','top-left':'_1ver165','top-right':'_1ht061z'}}});
+
+export { viewport };

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

@@ -0,0 +1,99 @@
+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"
+    );
+    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/tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+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,
+    keepOpenOnActivation,
+    onOpenChange,
+    open,
+    ...props
+  }, ref) => {
+    const empty = !content && typeof content !== "number" && typeof content !== "string";
+    return /* @__PURE__ */ jsxs(
+      TooltipRoot,
+      {
+        auto,
+        defaultOpen,
+        delayDuration,
+        disableHoverableContent: empty,
+        keepOpenOnActivation,
+        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-KObJMImw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'neutral.00',px:'12',py:'8',rounded:'lg',z:'tooltip'}]});
+
+export { content };

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

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { forwardRef, useRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
+import { Text } from '../text/Text.js';
+import { theme } from '@optiaxiom/globals';
+import { useTooltipContext } from '../tooltip-context/TooltipContext.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './TooltipContent-css.js';
+
+const TooltipContent = forwardRef(
+  ({ align = "center", children, className, sideOffset = 5, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const { keepOpenOnActivation, 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,
+        onPointerDownOutside: keepOpenOnActivation ? (event) => {
+          if (innerRef.current?.contains(
+            event.target
+          ))
+            event.preventDefault();
+        } : void 0,
+        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,67 @@
+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,
+  keepOpenOnActivation,
+  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,
+        {
+          keepOpenOnActivation,
+          open,
+          setOpen,
+          triggerRef,
+          children
+        }
+      )
+    }
+  );
+}
+TooltipRoot.displayName = "@optiaxiom/react/TooltipRoot";
+
+export { TooltipRoot };

package/dist/src/tooltip-trigger/TooltipTrigger.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useTooltipContext } from '../tooltip-context/TooltipContext.js';
+
+const TooltipTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
+  const { keepOpenOnActivation, setOpen, triggerRef } = useTooltipContext("TooltipTrigger");
+  const ref = useComposedRefs(triggerRef, outerRef);
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(
+    RadixTooltip.Trigger,
+    {
+      asChild: true,
+      onClick: keepOpenOnActivation ? (event) => {
+        event.preventDefault();
+        setOpen(true);
+      } : void 0,
+      ref,
+      ...sprinkleProps,
+      children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children })
+    }
+  );
+});
+TooltipTrigger.displayName = "@optiaxiom/react/TooltipTrigger";
+
+export { TooltipTrigger };

package/dist/src/transition/Transition-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/transition/Transition.css.ts.vanilla-BHwXmrOM.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var transition = recipeRuntime({base:'_1fb6irp',variants:{duration:{sm:'z523e7',md:'iz9gjz',lg:'nyyuw4'},type:{fade:'k1l786',pop:'_3u219o'}}});
+var transitionDuration = {sm:150,md:250,lg:400};
+
+export { transition, transitionDuration };

package/dist/src/transition/Transition.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useState, useEffect } from 'react';
+import '../use-presence/PresenceContext.js';
+import { usePresence } from '../use-presence/usePresence.js';
+import { transitionDuration, transition } from './Transition-css.js';
+import { TransitionGlobalConfig } from './TransitionGlobalConfig.js';
+
+const Transition = forwardRef(
+  ({ children, duration = "md", skipAnimations, type = "fade", ...props }, ref) => {
+    const [isPresent, safeToRemove] = usePresence();
+    const [enter, setEnter] = useState(false);
+    useEffect(() => {
+      if (isPresent) {
+        setEnter(true);
+      }
+    }, [isPresent]);
+    useEffect(() => {
+      if (!isPresent) {
+        setTimeout(safeToRemove, transitionDuration[duration]);
+      }
+    }, [isPresent]);
+    return skipAnimations || TransitionGlobalConfig.skipAnimations ? /* @__PURE__ */ jsx(Slot, { ref, children }) : /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        ...transition(
+          {
+            duration,
+            type: enter !== isPresent ? type : void 0
+          },
+          void 0
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Transition.displayName = "@optiaxiom/react/Transition";
+
+export { Transition };

package/dist/src/transition/TransitionGlobalConfig.js

@@ -0,0 +1,5 @@
+const TransitionGlobalConfig = {
+  skipAnimations: false
+};
+
+export { TransitionGlobalConfig };

package/dist/src/use-event/useEffectEvent.js

@@ -0,0 +1,13 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+function useEffectEvent(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+export { useEffectEvent };

package/dist/src/utils/conditions.js

@@ -0,0 +1,13 @@
+import { tokens } from '@optiaxiom/globals';
+import { mapValues } from './mapValues.js';
+
+({
+  conditions: {
+    ...mapValues(tokens.screens, (width) => ({
+      "@media": `screen and (min-width: ${width})`
+    })),
+    base: {}
+  },
+  defaultCondition: "base",
+  responsiveArray: ["base", "sm", "md"]
+});

package/dist/src/utils/fallbackSpan.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+
+const fallbackSpan = (content) => isValidElement(content) ? content : /* @__PURE__ */ jsx("span", { children: content });
+
+export { fallbackSpan };