@photon-ai/pho-ui 4.3.0 → 4.4.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height-I44sUq0n.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport { SPRING_SETTLE } from \"../motion\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\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 * 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.\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 on the last row paints\n * normally at rest instead of being cut off at the container's edge.\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 = 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 ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        container.style.overflow = \"\";\n        height.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(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\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  }, [height, reduceMotion, transition]);\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":";;;;;AAeA,IAAM,IAAgB;AAatB,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,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,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAU,MAAM,WAAW,IAC3B,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,EAAU,MAAM,WAAW,UAC3B,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAElB,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,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,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"}