@photon-ai/pho-ui 4.11.0 → 4.12.0

package/dist/chunks/animated-height-zr7BmFY1.js

@@ -0,0 +1,56 @@
+"use client";
+import { SPRING_SETTLE as v } from "../motion.js";
+import { useEffect as b, useRef as a } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import { animate as g, motion as S, useMotionValue as z, useReducedMotion as w } from "motion/react";
+var R = v;
+function y(o, r, i, n) {
+  const e = z("auto"), s = w();
+  return b(() => {
+    const c = r.current, l = i.current;
+    if (!c || !l) return;
+    let t = null;
+    const h = new ResizeObserver((p) => {
+      const u = p[0]?.borderBoxSize?.[0], f = u ? o === "height" ? u.blockSize : u.inlineSize : o === "height" ? l.offsetHeight : l.offsetWidth, m = e.get();
+      if (m === "auto" || s) {
+        t?.stop(), t = null, c.style.overflow = "", e.set(f);
+        return;
+      }
+      !t && Math.abs(m - f) < 0.5 || (c.style.overflow = "hidden", t?.stop(), t = g(e, f, {
+        ...n,
+        onComplete: () => {
+          t = null, c.style.overflow = "";
+        }
+      }));
+    });
+    return h.observe(l), () => {
+      h.disconnect(), t?.stop();
+    };
+  }, [
+    o,
+    r,
+    i,
+    e,
+    s,
+    n
+  ]), e;
+}
+function G({ className: o, transition: r, children: i }) {
+  const n = a(null), e = a(null), s = y("height", n, e, r ?? R);
+  return /* @__PURE__ */ d(S.div, {
+    ref: n,
+    className: "min-h-0",
+    style: { height: s },
+    children: /* @__PURE__ */ d("div", {
+      ref: e,
+      className: o,
+      children: i
+    })
+  });
+}
+export {
+  y as n,
+  G as t
+};
+
+//# sourceMappingURL=animated-height-zr7BmFY1.js.map

package/dist/chunks/animated-height-zr7BmFY1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height-zr7BmFY1.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode, type RefObject } from \"react\";\nimport { SPRING_SETTLE } from \"../motion\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type MotionValue,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = SPRING_SETTLE;\n\n/**\n * Keeps a container's size on one axis following the measured size of its\n * content on a spring — the core of `AnimatedHeight`, and of any part whose\n * box should glide as its content changes (a paged `Onboard`'s step titles\n * follow their words' width this way). Returns the motion value to put on\n * the container's `style`. Reduced motion snaps it.\n *\n * The container clips only while the spring is in flight. ResizeObserver\n * callbacks run after layout but before paint, so the clip lands before the\n * swap frame can show; once the spring settles it is lifted again, so a focus\n * ring, an effect button's rim, or any other overhang paints normally at\n * rest instead of being cut off at the container's edge.\n */\nexport function useSizeFollow(\n  axis: \"height\" | \"width\",\n  containerRef: RefObject<HTMLElement | null>,\n  contentRef: RefObject<HTMLElement | null>,\n  transition: ValueAnimationTransition<number | \"auto\">,\n): MotionValue<number | \"auto\"> {\n  const size = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box\n        ? axis === \"height\"\n          ? box.blockSize\n          : box.inlineSize\n        : axis === \"height\"\n          ? content.offsetHeight\n          : content.offsetWidth;\n      const current = size.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        container.style.overflow = \"\";\n        size.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      container.style.overflow = \"hidden\";\n      animation?.stop();\n      animation = animate(size, next, {\n        ...transition,\n        // Not fired on stop(), so a retarget can't lift the clip early.\n        onComplete: () => {\n          animation = null;\n          container.style.overflow = \"\";\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [axis, containerRef, contentRef, size, reduceMotion, transition]);\n\n  return size;\n}\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring. Clips\n * only while the spring is in flight (see `useSizeFollow`).\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useSizeFollow(\n    \"height\",\n    containerRef,\n    contentRef,\n    transition ?? HEIGHT_SPRING,\n  );\n\n  return (\n    <motion.div\n      ref={containerRef}\n      // Stack (and other flex parents) set `min-height: auto` on children,\n      // which sizes to content and swallows the height spring. Allow\n      // shrinking so the measured height can actually animate; the clip is\n      // applied imperatively for the spring's duration only (see above).\n      className=\"min-h-0\"\n      style={{ height }}\n    >\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAgBA,IAAM,IAAgB;AAetB,SAAgB,EACd,GACA,GACA,GACA,GAC8B;AAC9B,QAAM,IAAO,EAAgC,MAAM,GAC7C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IACT,MAAS,WACP,EAAI,YACJ,EAAI,aACN,MAAS,WACP,EAAQ,eACR,EAAQ,aACR,IAAU,EAAK,IAAI;AACzB,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAU,MAAM,WAAW,IAC3B,EAAK,IAAI,CAAI;AACb;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,EAAU,MAAM,WAAW,UAC3B,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAM,GAAM;AAAA,QAC9B,GAAG;AAAA,QAEH,YAAA,MAAkB;AAChB,UAAA,IAAY,MACZ,EAAU,MAAM,WAAW;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAM;AAAA,IAAc;AAAA,IAAY;AAAA,IAAM;AAAA,IAAc;AAAA,EAAU,CAAC,GAE5D;AACT;AAQA,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EACb,UACA,GACA,GACA,KAAc,CAChB;AAEA,SACE,gBAAA,EAAC,EAAO,KAAR;AAAA,IACE,KAAK;AAAA,IAKL,WAAU;AAAA,IACV,OAAO,EAAE,QAAA,EAAO;AAAA,IAEhB,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}