@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.1

package/dist/react/tooltip.js

@@ -1,532 +1,76 @@
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var ARROW_SPAN_PX = 14;
-var ARROW_HALF_PX = ARROW_SPAN_PX / 2;
-var ARROW_EDGE_PAD_PX = 5;
-function computeArrowCenter(triggerRect, layerRect, side) {
-  const midX = triggerRect.left + triggerRect.width / 2;
-  const midY = triggerRect.top + triggerRect.height / 2;
-  const min = ARROW_EDGE_PAD_PX + ARROW_HALF_PX;
-  if (side === "top" || side === "bottom") {
-    return Math.max(min, Math.min(midX - layerRect.left, layerRect.width - min));
-  }
-  return Math.max(min, Math.min(midY - layerRect.top, layerRect.height - min));
-}
-function computePosition(trigger, layer, side, align, offset, viewportPadding) {
-  const triggerRect = trigger.getBoundingClientRect();
-  const pw = layer.offsetWidth;
-  const ph = layer.offsetHeight;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  let top = 0;
-  let left = 0;
-  let effectiveSide = side;
-  const place = (s) => {
-    switch (s) {
-      case "bottom":
-        top = triggerRect.bottom + offset;
-        break;
-      case "top":
-        top = triggerRect.top - ph - offset;
-        break;
-      case "right":
-        left = triggerRect.right + offset;
-        top = align === "start" ? triggerRect.top : align === "end" ? triggerRect.bottom - ph : triggerRect.top + triggerRect.height / 2 - ph / 2;
-        return;
-      case "left":
-        left = triggerRect.left - pw - offset;
-        top = align === "start" ? triggerRect.top : align === "end" ? triggerRect.bottom - ph : triggerRect.top + triggerRect.height / 2 - ph / 2;
-        return;
-    }
-    if (align === "start") left = triggerRect.left;
-    else if (align === "end") left = triggerRect.right - pw;
-    else left = triggerRect.left + triggerRect.width / 2 - pw / 2;
-  };
-  place(side);
-  const tryFlip = () => {
-    if (side === "bottom" && top + ph > vh - viewportPadding) {
-      const newTop = triggerRect.top - ph - offset;
-      if (newTop >= viewportPadding) {
-        effectiveSide = "top";
-        top = newTop;
-      }
-    } else if (side === "top" && top < viewportPadding) {
-      const newTop = triggerRect.bottom + offset;
-      if (newTop + ph <= vh - viewportPadding) {
-        effectiveSide = "bottom";
-        top = newTop;
-      }
-    } else if (side === "right" && left + pw > vw - viewportPadding) {
-      const newLeft = triggerRect.left - pw - offset;
-      if (newLeft >= viewportPadding) {
-        effectiveSide = "left";
-        left = newLeft;
-      }
-    } else if (side === "left" && left < viewportPadding) {
-      const newLeft = triggerRect.right + offset;
-      if (newLeft + pw <= vw - viewportPadding) {
-        effectiveSide = "right";
-        left = newLeft;
-      }
-    }
-  };
-  tryFlip();
-  return {
-    top,
-    left,
-    side: effectiveSide,
-    arrowCenter: 0
-  };
-}
-function layerRectAtPosition(top, left, width, height) {
-  return new DOMRect(left, top, width, height);
-}
-var arrowStrokeProps = {
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 1.25,
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  vectorEffect: "non-scaling-stroke",
-  className: "text-primary/10"
-};
-function TooltipArrowGraphic({ side }) {
-  const fillCls = "fill-background";
-  if (side === "bottom") {
-    const w2 = ARROW_SPAN_PX;
-    const h2 = 8;
-    const pts2 = `0,${h2} ${w2 / 2},0 ${w2},${h2}`;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: w2,
-        height: h2,
-        viewBox: `0 0 ${w2} ${h2}`,
-        className: "block shrink-0",
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsx("polygon", { points: pts2, className: fillCls }),
-          /* @__PURE__ */ jsx("polyline", { points: pts2, ...arrowStrokeProps })
-        ]
-      }
-    );
-  }
-  if (side === "top") {
-    const w2 = ARROW_SPAN_PX;
-    const h2 = 8;
-    const pts2 = `0,0 ${w2 / 2},${h2} ${w2},0`;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: w2,
-        height: h2,
-        viewBox: `0 0 ${w2} ${h2}`,
-        className: "block shrink-0",
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsx("polygon", { points: pts2, className: fillCls }),
-          /* @__PURE__ */ jsx("polyline", { points: pts2, ...arrowStrokeProps })
-        ]
-      }
-    );
-  }
-  if (side === "right") {
-    const w2 = 8;
-    const h2 = ARROW_SPAN_PX;
-    const pts2 = `${w2},0 0,${h2 / 2} ${w2},${h2}`;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: w2,
-        height: h2,
-        viewBox: `0 0 ${w2} ${h2}`,
-        className: "block shrink-0",
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsx("polygon", { points: pts2, className: fillCls }),
-          /* @__PURE__ */ jsx("polyline", { points: pts2, ...arrowStrokeProps })
-        ]
-      }
-    );
-  }
-  const w = 8;
-  const h = ARROW_SPAN_PX;
-  const pts = `0,0 ${w},${h / 2} 0,${h}`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: w,
-      height: h,
-      viewBox: `0 0 ${w} ${h}`,
-      className: "block shrink-0",
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("polygon", { points: pts, className: fillCls }),
-        /* @__PURE__ */ jsx("polyline", { points: pts, ...arrowStrokeProps })
-      ]
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
     }
-  );
-}
-function tooltipArrowWrapperStyle(side, arrowCenter) {
-  const base = {
-    position: "absolute",
-    zIndex: 1,
-    pointerEvents: "none",
-    lineHeight: 0
-  };
-  switch (side) {
-    case "bottom":
-      return {
-        ...base,
-        left: arrowCenter,
-        top: 0,
-        transform: "translate(-50%, -100%)"
-      };
-    case "top":
-      return {
-        ...base,
-        left: arrowCenter,
-        bottom: 0,
-        transform: "translate(-50%, 100%)"
-      };
-    case "right":
-      return {
-        ...base,
-        top: arrowCenter,
-        left: 0,
-        transform: "translate(-100%, -50%)"
-      };
-    case "left":
-      return {
-        ...base,
-        top: arrowCenter,
-        right: 0,
-        transform: "translate(100%, -50%)"
-      };
-  }
-}
-var TooltipContext = React.createContext(null);
-function useTooltip() {
-  const ctx = React.useContext(TooltipContext);
-  if (!ctx) {
-    throw new Error("Tooltip components must be used within <Tooltip>");
   }
-  return ctx;
-}
+});
+var cx = twMerge;
 var Tooltip = ({
+  title,
+  description,
   children,
-  delayDuration = 0,
-  closeDelay = 40,
-  disabled = false,
-  open: controlledOpen,
-  onOpenChange
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
-  const isControlled = controlledOpen !== void 0;
-  const open = disabled ? false : isControlled ? controlledOpen : uncontrolledOpen;
-  const triggerRef = React.useRef(null);
-  const contentId = React.useId();
-  const openTimerRef = React.useRef(null);
-  const closeTimerRef = React.useRef(null);
-  const setOpen = React.useCallback(
-    (next) => {
-      if (disabled) return;
-      if (!isControlled) setUncontrolledOpen(next);
-      onOpenChange?.(next);
-    },
-    [disabled, isControlled, onOpenChange]
-  );
-  const clearTimers = React.useCallback(() => {
-    if (openTimerRef.current) clearTimeout(openTimerRef.current);
-    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    openTimerRef.current = null;
-    closeTimerRef.current = null;
-  }, []);
-  const scheduleOpen = React.useCallback(
-    (instant) => {
-      clearTimers();
-      if (instant || delayDuration <= 0) {
-        setOpen(true);
-        return;
-      }
-      openTimerRef.current = setTimeout(() => {
-        openTimerRef.current = null;
-        setOpen(true);
-      }, delayDuration);
-    },
-    [clearTimers, delayDuration, setOpen]
-  );
-  const scheduleClose = React.useCallback(() => {
-    if (openTimerRef.current) {
-      clearTimeout(openTimerRef.current);
-      openTimerRef.current = null;
-    }
-    closeTimerRef.current = setTimeout(() => {
-      closeTimerRef.current = null;
-      setOpen(false);
-    }, closeDelay);
-  }, [closeDelay, setOpen]);
-  const cancelClose = React.useCallback(() => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  }, []);
-  React.useEffect(() => () => clearTimers(), [clearTimers]);
-  const value = React.useMemo(
-    () => ({
-      open,
-      setOpen,
-      triggerRef,
-      contentId,
-      delayDuration,
-      closeDelay,
-      disabled: Boolean(disabled),
-      openTimerRef,
-      closeTimerRef,
-      clearTimers,
-      scheduleOpen,
-      scheduleClose,
-      cancelClose
-    }),
-    [
-      open,
-      setOpen,
-      contentId,
-      delayDuration,
-      closeDelay,
-      disabled,
-      clearTimers,
-      scheduleOpen,
-      scheduleClose,
-      cancelClose
-    ]
-  );
-  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value, children });
-};
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-var TooltipTrigger = React.forwardRef((props, ref) => {
-  const {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
     children,
-    asChild,
-    className,
-    onPointerEnter,
-    onPointerLeave,
-    onFocus,
-    onBlur,
-    ...restProps
-  } = props;
-  const {
-    open,
-    triggerRef,
-    contentId,
-    disabled,
-    scheduleOpen,
-    scheduleClose,
-    cancelClose,
-    clearTimers
-  } = useTooltip();
-  const describedBy = open ? contentId : void 0;
-  const handlePointerEnter = (e) => {
-    onPointerEnter?.(e);
-    if (disabled || e.defaultPrevented) return;
-    cancelClose();
-    scheduleOpen(false);
-  };
-  const handlePointerLeave = (e) => {
-    onPointerLeave?.(e);
-    if (disabled || e.defaultPrevented) return;
-    scheduleClose();
-  };
-  const handleFocus = (e) => {
-    onFocus?.(e);
-    if (disabled || e.defaultPrevented) return;
-    clearTimers();
-    scheduleOpen(true);
-  };
-  const handleBlur = (e) => {
-    onBlur?.(e);
-    if (disabled || e.defaultPrevented) return;
-    scheduleClose();
-  };
-  if (asChild && React.isValidElement(children)) {
-    const child = children;
-    return React.cloneElement(child, {
-      ...child.props,
-      ...restProps,
-      ref: mergeRefs(ref, triggerRef, child.props.ref),
-      className: cn(child.props.className, className),
-      "aria-describedby": [
-        describedBy,
-        child.props["aria-describedby"],
-        restProps["aria-describedby"]
-      ].filter(Boolean).join(" ") || void 0,
-      onPointerEnter: (e) => {
-        child.props.onPointerEnter?.(e);
-        handlePointerEnter(e);
-      },
-      onPointerLeave: (e) => {
-        child.props.onPointerLeave?.(e);
-        handlePointerLeave(e);
-      },
-      onFocus: (e) => {
-        child.props.onFocus?.(e);
-        handleFocus(e);
-      },
-      onBlur: (e) => {
-        child.props.onBlur?.(e);
-        handleBlur(e);
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
       }
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref: mergeRefs(ref, triggerRef),
-      className: cn("inline-flex", className),
-      "aria-describedby": describedBy,
-      onPointerEnter: handlePointerEnter,
-      onPointerLeave: handlePointerLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      ...restProps,
-      children
-    }
-  );
-});
-TooltipTrigger.displayName = "TooltipTrigger";
-var TooltipContent = React.forwardRef(
-  ({
-    children,
-    side = "top",
-    align = "center",
-    offset = 12,
-    viewportPadding = 8,
-    container,
-    showArrow = true,
-    className,
-    style,
-    ...props
-  }, ref) => {
-    const {
-      open,
-      setOpen,
-      triggerRef,
-      contentId,
-      disabled,
-      scheduleClose,
-      cancelClose
-    } = useTooltip();
-    const [position, setPosition] = React.useState({
-      top: -9999,
-      left: -9999,
-      side,
-      arrowCenter: 0
-    });
-    const layerRef = React.useRef(null);
-    const mergedRef = mergeRefs(ref, layerRef);
-    React.useLayoutEffect(() => {
-      if (!open || disabled || !triggerRef.current || !layerRef.current) return;
-      const update = () => {
-        if (!triggerRef.current || !layerRef.current) return;
-        const trigger = triggerRef.current;
-        const layer = layerRef.current;
-        const next = computePosition(
-          trigger,
-          layer,
-          side,
-          align,
-          offset,
-          viewportPadding
-        );
-        const tr = trigger.getBoundingClientRect();
-        const lrSynth = layerRectAtPosition(
-          next.top,
-          next.left,
-          layer.offsetWidth,
-          layer.offsetHeight
-        );
-        setPosition({
-          ...next,
-          arrowCenter: computeArrowCenter(tr, lrSynth, next.side)
-        });
-      };
-      update();
-      window.addEventListener("resize", update);
-      window.addEventListener("scroll", update, true);
-      return () => {
-        window.removeEventListener("resize", update);
-        window.removeEventListener("scroll", update, true);
-      };
-    }, [open, disabled, side, align, offset, viewportPadding, triggerRef]);
-    React.useEffect(() => {
-      if (!open || disabled) return;
-      const onKey = (e) => {
-        if (e.key === "Escape") setOpen(false);
-      };
-      window.addEventListener("keydown", onKey);
-      return () => window.removeEventListener("keydown", onKey);
-    }, [open, disabled, setOpen]);
-    const resolvedContainer = container !== void 0 ? container : typeof document !== "undefined" ? document.body : null;
-    if (!open || !resolvedContainer) return null;
-    return createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ...props,
-          ref: mergedRef,
-          id: contentId,
-          role: "tooltip",
-          "data-slot": "tooltip-content",
-          "data-side": position.side,
-          className: cn(
-            "bg-background text-primary border-primary/10 pointer-events-auto fixed z-50 max-w-xs overflow-visible rounded-md border px-3 py-1.5 text-xs leading-snug shadow-md",
-            className
-          ),
-          style: {
-            top: position.top,
-            left: position.left,
-            ...style
-          },
-          onPointerEnter: () => cancelClose(),
-          onPointerLeave: () => scheduleClose(),
-          children: [
-            showArrow ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                style: tooltipArrowWrapperStyle(
-                  position.side,
-                  position.arrowCenter
-                ),
-                children: /* @__PURE__ */ jsx(TooltipArrowGraphic, { side: position.side })
-              }
-            ) : null,
-            /* @__PURE__ */ jsx("div", { className: "relative z-[2] max-w-full", children })
-          ]
-        }
-      ),
-      resolvedContainer
-    );
-  }
-);
-TooltipContent.displayName = "TooltipContent";
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
 
-export { Tooltip, TooltipContent, TooltipTrigger };
+export { Tooltip, TooltipTrigger };
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map