@cystackapp/ui 1.4.0

package/dist/components/error-state/ErrorState.js

@@ -0,0 +1,33 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { AlertCircle as c } from "@untitled-ui/icons-react";
+import { cn as i } from "../../utils/cn.js";
+import m from "../../assets/background-pattern-circles-md.svg.js";
+const p = ({
+  title: s,
+  supportingText: l,
+  buttons: t,
+  className: a
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: i(
+      "relative flex flex-1 flex-col items-center justify-center gap-8 overflow-hidden pb-6 pt-12",
+      a
+    ),
+    children: [
+      /* @__PURE__ */ e(m, { className: "absolute -top-[10.55rem] h-120 w-120" }),
+      /* @__PURE__ */ r("div", { className: "z-10 flex flex-col items-center gap-5", children: [
+        /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-lg border border-gray-v2-200 bg-white shadow-xs", children: /* @__PURE__ */ e(c, { className: "size-6 shrink-0 text-gray-v2-500" }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-2 px-3 text-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-gray-v2-700", children: s }),
+          l ? /* @__PURE__ */ e("span", { className: "text-sm text-gray-v2", children: l }) : null
+        ] })
+      ] }),
+      t ? /* @__PURE__ */ e("div", { className: "flex gap-3", children: t }) : null
+    ]
+  }
+);
+export {
+  p as ErrorState
+};

package/dist/components/page-title/PageTitle.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface Props {
+    id?: string;
+    children: ReactNode;
+}
+export declare const PageTitle: ({ id, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/page-title/PageTitle.js

@@ -0,0 +1,6 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+const a = ({ id: t, children: e }) => /* @__PURE__ */ o("h1", { id: t, className: "text-display-xs font-semibold text-gray-v2-900", children: e });
+export {
+  a as PageTitle
+};

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface Props {
+    content: ReactNode;
+    contentClassName?: string;
+    children: ReactNode;
+}
+export declare const Popover: ({ content, contentClassName, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/popover/Popover.js

@@ -0,0 +1,42 @@
+import { jsxs as p, jsx as u } from "react/jsx-runtime";
+import { useRef as s, useState as f } from "react";
+import { cn as c } from "../../utils/cn.js";
+import { usePopoverCoord as d } from "./use-popover-coord.js";
+const M = ({ content: r, contentClassName: l, children: n }) => {
+  const e = s(null), o = s(null), [a, t] = f(!1), { style: i } = d(e, o, {
+    position: "bottomLeft",
+    syncWidth: !1
+  });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ref: e,
+      className: "relative",
+      onMouseOver: () => {
+        t(!0);
+      },
+      onMouseOut: () => {
+        t(!1);
+      },
+      children: [
+        n,
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: o,
+            className: c(
+              "z-10 p-2 flex flex-wrap items-start justify-start gap-1 border border-gray-v2-200 bg-white rounded-lg shadow-lg transition-all",
+              a ? "" : "scale-90 opacity-0 invisible",
+              l
+            ),
+            style: i,
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  M as Popover
+};

package/dist/components/popover/use-popover-coord.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, RefObject } from 'react';
+export declare const DEFAULT_OFFSET = 4;
+export type PopoverPosition = "topLeft" | "top" | "topRight" | "bottomLeft" | "bottom" | "bottomRight" | "leftTop" | "left" | "leftBottom" | "rightTop" | "right" | "rightBottom";
+/**
+ * A hook that takes a HTMLElement ref, and return style (position) to stick a popover into it.
+ *
+ * Exported for consumers that build custom popover-like UI (e.g. dropdowns, comboboxes)
+ * without using the {@link Popover} wrapper component directly.
+ *
+ * @param triggerRef - ref object of trigger button element.
+ * @param popoverRef - ref object of the popover element. Used for auto-flip on viewport overflow.
+ * @param options.position - decide transform origin and where to place the popover.
+ * @param options.syncWidth - default true. When set true, popover width will be sync with trigger button width.
+ * @param options.offset - gap between trigger and popover. Default: 4.
+ * @returns `style` — CSSProperties for the popover container; `resolvedPosition` — the actual placement after auto-flip.
+ */
+export declare function usePopoverCoord(triggerRef: RefObject<HTMLElement>, popoverRef: RefObject<HTMLElement>, options?: {
+    position?: PopoverPosition;
+    syncWidth?: boolean;
+    offset?: number;
+}): {
+    style: CSSProperties;
+    resolvedPosition: PopoverPosition;
+};

package/dist/components/popover/use-popover-coord.js

@@ -0,0 +1,130 @@
+import { useState as s, useMemo as a, useCallback as V } from "react";
+import { useElementShift as $ } from "../../hooks/element-shift/use-element-shift.js";
+const M = 4, y = {
+  // Top/bottom family — flip vertical axis; flip horizontal axis separately
+  topLeft: {
+    overflowV: "bottomLeft",
+    overflowH: "topRight",
+    overflowBoth: "bottomRight"
+  },
+  top: { overflowV: "bottom", overflowH: "top", overflowBoth: "bottom" },
+  topRight: {
+    overflowV: "bottomRight",
+    overflowH: "topLeft",
+    overflowBoth: "bottomLeft"
+  },
+  bottomLeft: {
+    overflowV: "topLeft",
+    overflowH: "bottomRight",
+    overflowBoth: "topRight"
+  },
+  bottom: { overflowV: "top", overflowH: "bottom", overflowBoth: "top" },
+  bottomRight: {
+    overflowV: "topRight",
+    overflowH: "bottomLeft",
+    overflowBoth: "topLeft"
+  },
+  // Right/left family — flip vertical alignment; flip side separately
+  rightTop: {
+    overflowV: "rightBottom",
+    overflowH: "leftTop",
+    overflowBoth: "leftBottom"
+  },
+  right: { overflowV: "right", overflowH: "left", overflowBoth: "left" },
+  rightBottom: {
+    overflowV: "rightTop",
+    overflowH: "leftBottom",
+    overflowBoth: "leftTop"
+  },
+  leftTop: {
+    overflowV: "leftBottom",
+    overflowH: "rightTop",
+    overflowBoth: "rightBottom"
+  },
+  left: { overflowV: "left", overflowH: "right", overflowBoth: "right" },
+  leftBottom: {
+    overflowV: "leftTop",
+    overflowH: "rightBottom",
+    overflowBoth: "rightTop"
+  }
+}, C = {
+  topLeft: "bottom left",
+  top: "bottom",
+  topRight: "bottom right",
+  bottomLeft: "top left",
+  bottom: "top",
+  bottomRight: "top right",
+  leftTop: "top right",
+  left: "right",
+  leftBottom: "bottom right",
+  rightTop: "top left",
+  right: "left",
+  rightBottom: "bottom left"
+};
+function O(n, w, m = {}) {
+  const l = m.position ?? "bottomLeft", b = m.syncWidth ?? !0, r = m.offset ?? M, [t, B] = s(), [o, c] = s(l), [i, x] = s(), d = a(() => t === void 0 ? {} : o === "topLeft" ? {
+    bottom: `calc(100vh - ${t.top - r}px)`,
+    left: t.left
+  } : o === "top" ? {
+    bottom: `calc(100vh - ${t.top - r}px)`,
+    left: t.left + t.width / 2 - ((i == null ? void 0 : i.width) ?? 0) / 2
+  } : o === "topRight" ? {
+    bottom: `calc(100vh - ${t.top - r}px)`,
+    right: `calc(100vw - ${t.right}px)`
+  } : o === "bottomLeft" ? { top: t.bottom + r, left: t.left } : o === "bottom" ? {
+    top: t.bottom + r,
+    left: t.left + t.width / 2 - ((i == null ? void 0 : i.width) ?? 0) / 2
+  } : o === "bottomRight" ? {
+    top: t.bottom + r,
+    right: `calc(100vw - ${t.right}px)`
+  } : o === "leftTop" ? {
+    top: t.top,
+    right: `calc(100vw - ${t.left - r}px)`
+  } : o === "left" ? {
+    top: t.top + t.height / 2 - ((i == null ? void 0 : i.height) ?? 0) / 2,
+    right: `calc(100vw - ${t.left - r}px)`
+  } : o === "leftBottom" ? {
+    bottom: `calc(100vh - ${t.bottom}px)`,
+    right: `calc(100vw - ${t.left - r}px)`
+  } : o === "rightTop" ? { top: t.top, left: t.right + r } : o === "right" ? {
+    top: t.top + t.height / 2 - ((i == null ? void 0 : i.height) ?? 0) / 2,
+    left: t.right + r
+  } : o === "rightBottom" ? {
+    bottom: `calc(100vh - ${t.bottom}px)`,
+    left: t.right + r
+  } : {}, [t, o, r, i]), H = a(() => t === void 0 ? { position: "fixed", visibility: "hidden" } : {
+    position: "fixed",
+    ...d,
+    width: b ? t.width : void 0,
+    transformOrigin: C[o]
+  }, [t, o, d, b]), L = V(() => {
+    if (!n.current) return;
+    const g = n.current.getBoundingClientRect();
+    if (B((f) => {
+      const e = {
+        top: Math.round(g.top),
+        bottom: Math.round(g.bottom),
+        left: Math.round(g.left),
+        right: Math.round(g.right),
+        width: Math.round(g.width),
+        height: Math.round(g.height)
+      };
+      return f === void 0 ? e : f.top === e.top && f.bottom === e.bottom && f.left === e.left && f.right === e.right && f.width === e.width && f.height === e.height ? f : e;
+    }), w.current && n.current) {
+      const f = n.current.getBoundingClientRect(), e = w.current.getBoundingClientRect();
+      x({ width: e.width, height: e.height });
+      const h = {
+        top: f.top - e.height < 0,
+        bottom: f.bottom + e.height > window.innerHeight,
+        left: f.right - e.width < 0,
+        right: f.left + e.width > window.innerWidth
+      }, p = y[l], R = l.startsWith("top"), T = l.startsWith("left") || l.endsWith("Right"), u = R ? h.top && !h.bottom : h.bottom && !h.top, v = T ? h.left && !h.right : h.right && !h.left;
+      c(u && v ? p.overflowBoth : u ? p.overflowV : v ? p.overflowH : l);
+    }
+  }, [w, l, n]);
+  return $(n, L), { style: H, resolvedPosition: o };
+}
+export {
+  M as DEFAULT_OFFSET,
+  O as usePopoverCoord
+};

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "aria-checked" | "onClick" | "onChange"> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Switch: ({ checked, onChange, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/switch/Switch.js

@@ -0,0 +1,39 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { cn as a } from "../../utils/cn.js";
+const b = ({ checked: e, onChange: n, className: i, ...r }) => {
+  const [l, c] = u(
+    e ?? !1
+  ), t = e ?? l;
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": t,
+      onClick: () => {
+        const s = !t;
+        n && n(s), c(s);
+      },
+      ...r,
+      className: a(
+        "relative w-9 h-5 shrink-0 p-0.5 rounded-full transition-colors duration-300 ease-in-out",
+        "outline-2 outline-offset-2 outline-transparent focus-visible:outline-brand-v2-600",
+        t ? "bg-brand-v2-600" : "bg-gray-v2-200",
+        i
+      ),
+      children: /* @__PURE__ */ o(
+        "span",
+        {
+          className: a(
+            "absolute inset-0.5 size-4 rounded-full transition-all bg-white shadow-[var(--shadow-sm-01),var(--shadow-sm-02)]",
+            t ? "translate-x-full" : ""
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  b as Switch
+};

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { PopoverPosition } from '../popover/use-popover-coord';
+interface Props {
+    content: ReactNode;
+    children: ReactNode;
+    position?: PopoverPosition;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Tooltip: ({ content, children, position, disabled, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,58 @@
+import { jsx as t, Fragment as g, jsxs as m } from "react/jsx-runtime";
+import { useRef as p, useState as x } from "react";
+import { createPortal as v } from "react-dom";
+import { cn as h } from "../../utils/cn.js";
+import { usePopoverCoord as w } from "../popover/use-popover-coord.js";
+import { getArrowStyle as M, getBridgeStyle as S } from "./tooltip-utils.js";
+const E = ({
+  content: r,
+  children: s,
+  position: d = "top",
+  disabled: u = !1,
+  className: f
+}) => {
+  const l = p(null), n = p(null), [c, i] = x(!1), { style: y, resolvedPosition: a } = w(
+    l,
+    n,
+    { position: d, syncWidth: !1 }
+  ), e = () => i(!0), o = () => i(!1);
+  return u || r == null ? /* @__PURE__ */ t(g, { children: s }) : /* @__PURE__ */ m(
+    "div",
+    {
+      ref: l,
+      className: "relative w-fit min-w-0",
+      onMouseEnter: e,
+      onMouseLeave: o,
+      onFocus: e,
+      onBlur: o,
+      children: [
+        s,
+        v(
+          /* @__PURE__ */ m(
+            "div",
+            {
+              ref: n,
+              role: "tooltip",
+              className: h(
+                "z-50 w-max max-w-xs px-3 py-2 rounded-lg bg-gray-v2-900 text-white text-xs font-medium leading-4.5 shadow-lg transition-all",
+                c ? "" : "scale-90 opacity-0 invisible",
+                f
+              ),
+              style: y,
+              onMouseEnter: e,
+              onMouseLeave: o,
+              children: [
+                /* @__PURE__ */ t("span", { "aria-hidden": "true", style: S(a), children: /* @__PURE__ */ t("span", { style: M(a) }) }),
+                r
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  E as Tooltip
+};

package/dist/components/tooltip/tooltip-utils.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { PopoverPosition } from '../popover/use-popover-coord';
+export declare function getBridgeStyle(position: PopoverPosition): CSSProperties;
+export declare function getArrowStyle(position: PopoverPosition): CSSProperties;

package/dist/components/tooltip/tooltip-utils.js

@@ -0,0 +1,120 @@
+import { DEFAULT_OFFSET as e } from "../popover/use-popover-coord.js";
+const i = "var(--color-gray-v2-900)", t = 5, r = 10, l = {
+  width: 0,
+  height: 0,
+  borderLeft: `${t}px solid transparent`,
+  borderRight: `${t}px solid transparent`,
+  borderTop: `${t}px solid ${i}`
+}, s = {
+  width: 0,
+  height: 0,
+  borderLeft: `${t}px solid transparent`,
+  borderRight: `${t}px solid transparent`,
+  borderBottom: `${t}px solid ${i}`
+}, n = {
+  width: 0,
+  height: 0,
+  borderTop: `${t}px solid transparent`,
+  borderBottom: `${t}px solid transparent`,
+  borderLeft: `${t}px solid ${i}`
+}, p = {
+  width: 0,
+  height: 0,
+  borderTop: `${t}px solid transparent`,
+  borderBottom: `${t}px solid transparent`,
+  borderRight: `${t}px solid ${i}`
+};
+function h(o) {
+  return o.startsWith("top") ? {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    width: "100%",
+    height: e
+  } : o.startsWith("bottom") ? {
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    width: "100%",
+    height: e
+  } : o.startsWith("left") ? {
+    position: "absolute",
+    left: "100%",
+    top: 0,
+    width: e,
+    height: "100%"
+  } : {
+    position: "absolute",
+    right: "100%",
+    top: 0,
+    width: e,
+    height: "100%"
+  };
+}
+function b(o) {
+  return o === "topLeft" ? {
+    ...l,
+    position: "absolute",
+    top: 0,
+    left: r
+  } : o === "top" ? {
+    ...l,
+    position: "absolute",
+    top: 0,
+    left: `calc(50% - ${t}px)`
+  } : o === "topRight" ? {
+    ...l,
+    position: "absolute",
+    top: 0,
+    right: r
+  } : o === "bottomLeft" ? {
+    ...s,
+    position: "absolute",
+    bottom: 0,
+    left: r
+  } : o === "bottom" ? {
+    ...s,
+    position: "absolute",
+    bottom: 0,
+    left: `calc(50% - ${t}px)`
+  } : o === "bottomRight" ? {
+    ...s,
+    position: "absolute",
+    bottom: 0,
+    right: r
+  } : o === "leftTop" ? {
+    ...n,
+    position: "absolute",
+    left: 0,
+    top: r
+  } : o === "left" ? {
+    ...n,
+    position: "absolute",
+    left: 0,
+    top: `calc(50% - ${t}px)`
+  } : o === "leftBottom" ? {
+    ...n,
+    position: "absolute",
+    left: 0,
+    bottom: r
+  } : o === "rightTop" ? {
+    ...p,
+    position: "absolute",
+    right: 0,
+    top: r
+  } : o === "right" ? {
+    ...p,
+    position: "absolute",
+    right: 0,
+    top: `calc(50% - ${t}px)`
+  } : {
+    ...p,
+    position: "absolute",
+    right: 0,
+    bottom: r
+  };
+}
+export {
+  b as getArrowStyle,
+  h as getBridgeStyle
+};

package/dist/hooks/element-shift/use-animation-frame.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Calls `callback` on every animation frame. Not recommended for most cases — very costly.
+ */
+export declare function useAnimationFrame(callback: () => void, isEnabled?: boolean): void;

package/dist/hooks/element-shift/use-animation-frame.js

@@ -0,0 +1,14 @@
+import { useLayoutEffect as i } from "react";
+function o(t, r = !1) {
+  i(() => {
+    if (!r) return;
+    let e;
+    const n = () => {
+      t(), e = requestAnimationFrame(n);
+    };
+    return e = requestAnimationFrame(n), () => cancelAnimationFrame(e);
+  }, [t, r]);
+}
+export {
+  o as useAnimationFrame
+};

package/dist/hooks/element-shift/use-element-shift.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+/**
+ * Triggers `update` every time the element is shifted on screen.
+ *
+ * Composed from individual hooks — use them directly when you only need
+ * a subset of the shift detection behaviors.
+ *
+ * @param animationFrame - poll on every animation frame. Very costly; off by default.
+ */
+export declare function useElementShift(elementRef: RefObject<Element | null>, update: () => void, { ancestorScroll, ancestorResize, elementResize, layoutShift, transitionEnd, animationFrame, }?: {
+    ancestorScroll?: boolean | undefined;
+    ancestorResize?: boolean | undefined;
+    elementResize?: boolean | undefined;
+    layoutShift?: boolean | undefined;
+    transitionEnd?: boolean | undefined;
+    animationFrame?: boolean | undefined;
+}): void;

package/dist/hooks/element-shift/use-element-shift.js

@@ -0,0 +1,22 @@
+import { useLayoutEffect as f } from "react";
+import { useResizeObserver as u } from "./use-resize-observer.js";
+import { useScrollListener as L } from "./use-scroll-listener.js";
+import { useWindowResizeListener as c } from "./use-window-resize-listener.js";
+import { useMutationObserver as E } from "./use-mutation-observer.js";
+import { useTransitionEndListener as b } from "./use-transition-end-listener.js";
+import { useAnimationFrame as l } from "./use-animation-frame.js";
+function x(o, r, {
+  ancestorScroll: i = !0,
+  ancestorResize: e = !0,
+  elementResize: s = !0,
+  layoutShift: t = !0,
+  transitionEnd: m = !0,
+  animationFrame: n = !1
+} = {}) {
+  L(o, r, i), c(r, e), E(r, t), b(o, r, m), l(r, n), u(o, r, s), f(() => {
+    r();
+  }, [r]);
+}
+export {
+  x as useElementShift
+};

package/dist/hooks/element-shift/use-mutation-observer.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Observes `document.body` for attribute, child, and subtree mutations.
+ */
+export declare function useMutationObserver(onChange: () => void, isEnabled?: boolean): void;

package/dist/hooks/element-shift/use-mutation-observer.js

@@ -0,0 +1,15 @@
+import { useLayoutEffect as u } from "react";
+function s(t, e = !0) {
+  u(() => {
+    if (!e) return;
+    const r = new MutationObserver(t);
+    return r.observe(document.body, {
+      attributes: !0,
+      childList: !0,
+      subtree: !0
+    }), () => r.disconnect();
+  }, [t, e]);
+}
+export {
+  s as useMutationObserver
+};

package/dist/hooks/element-shift/use-resize-observer.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+/**
+ * Fires once on mount (before paint) and again on every resize of the observed element.
+ */
+export declare function useResizeObserver(ref: RefObject<Element | null>, onResize: () => void, isEnabled?: boolean): void;

package/dist/hooks/element-shift/use-resize-observer.js

@@ -0,0 +1,13 @@
+import { useLayoutEffect as s } from "react";
+function c(e, r, t = !0) {
+  s(() => {
+    if (!t) return;
+    const n = e.current;
+    if (!n) return;
+    const o = new ResizeObserver(r);
+    return o.observe(n), () => o.disconnect();
+  }, [e, r, t]);
+}
+export {
+  c as useResizeObserver
+};

package/dist/hooks/element-shift/use-scroll-listener.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+/**
+ * Listens for scroll events on all scrollable ancestors of the element.
+ */
+export declare function useScrollListener(ref: RefObject<Element | null>, onScroll: () => void, isEnabled?: boolean): void;

package/dist/hooks/element-shift/use-scroll-listener.js

@@ -0,0 +1,26 @@
+import { useLayoutEffect as u } from "react";
+function l(o) {
+  const t = [];
+  let e = o.parentElement;
+  for (; e && e !== document.body; ) {
+    const r = getComputedStyle(e), n = r.overflow + r.overflowX + r.overflowY;
+    /(auto|scroll|overlay)/.test(n) && t.push(e), e = e.parentElement;
+  }
+  return t.push(window), t;
+}
+function f(o, t, e = !0) {
+  u(() => {
+    if (!e) return;
+    const r = o.current;
+    if (!r) return;
+    const n = l(r);
+    return n.forEach(
+      (s) => s.addEventListener("scroll", t, { passive: !0 })
+    ), () => n.forEach(
+      (s) => s.removeEventListener("scroll", t)
+    );
+  }, [o, t, e]);
+}
+export {
+  f as useScrollListener
+};

package/dist/hooks/element-shift/use-transition-end-listener.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+/**
+ * Listens for `transitionend` events on all CSS-transformed ancestors of the element.
+ */
+export declare function useTransitionEndListener(ref: RefObject<Element | null>, onTransitionEnd: () => void, isEnabled?: boolean): void;