@photon-ai/pho-ui 4.11.0 → 4.12.0

package/dist/src/utils/animated-height.d.ts

@@ -1,15 +1,24 @@
-import { ReactNode } from 'react';
-import { ValueAnimationTransition } from 'motion/react';
+import { ReactNode, RefObject } from 'react';
+import { MotionValue, ValueAnimationTransition } from 'motion/react';
 /**
- * Animates its own height to follow the measured height of `children`, so
- * content swaps (search filtering, skeleton → data) glide instead of jumping.
- * Honors `prefers-reduced-motion` by snapping height with no spring.
+ * Keeps a container's size on one axis following the measured size of its
+ * content on a spring — the core of `AnimatedHeight`, and of any part whose
+ * box should glide as its content changes (a paged `Onboard`'s step titles
+ * follow their words' width this way). Returns the motion value to put on
+ * the container's `style`. Reduced motion snaps it.
  *
  * The container clips only while the spring is in flight. ResizeObserver
  * callbacks run after layout but before paint, so the clip lands before the
  * swap frame can show; once the spring settles it is lifted again, so a focus
- * ring, an effect button's rim, or any other overhang on the last row paints
- * normally at rest instead of being cut off at the container's edge.
+ * ring, an effect button's rim, or any other overhang paints normally at
+ * rest instead of being cut off at the container's edge.
+ */
+export declare function useSizeFollow(axis: "height" | "width", containerRef: RefObject<HTMLElement | null>, contentRef: RefObject<HTMLElement | null>, transition: ValueAnimationTransition<number | "auto">): MotionValue<number | "auto">;
+/**
+ * Animates its own height to follow the measured height of `children`, so
+ * content swaps (search filtering, skeleton → data) glide instead of jumping.
+ * Honors `prefers-reduced-motion` by snapping height with no spring. Clips
+ * only while the spring is in flight (see `useSizeFollow`).
  */
 export declare function AnimatedHeight({ className, transition, children, }: {
     className?: string;

package/dist/src/utils/choice-card.d.ts

@@ -4,8 +4,15 @@ import { Transition } from 'motion/react';
  * tile. Applied to the radio/checkbox root itself so the whole tile is the
  * hit target. Hover fills (`bg-pho-ghost-hover`); selected uses the brand
  * ring. Press feedback lives on this surface (see `usePressPulse`).
+ *
+ * The side padding is `--choice-card-inset`, 12px unless the page says
+ * otherwise, and the padding above and below is three quarters of it: a
+ * `BasicPage.Stack` sets it to the page's text edge (20px), so tiles
+ * standing on the page as its surfaces reach the column's edge as a card
+ * does and start their words on the headings' line; a card, sheet or
+ * callout sets it back, so tiles inside one stay compact.
  */
-export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base p-3 text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
+export declare const CHOICE_CARD_BASE = "group outline-pho-brand flex flex-1 cursor-pointer items-start gap-2.5 rounded-base px-[var(--choice-card-inset,0.75rem)] py-[calc(var(--choice-card-inset,0.75rem)*0.75)] text-base text-pho-secondary ring-1 ring-pho-primary ring-inset transition-[box-shadow,background-color] duration-150 ease-out select-none hover:bg-pho-ghost-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[checked]:ring-2 data-[checked]:ring-pho-brand has-[[data-checked]]:ring-2 has-[[data-checked]]:ring-pho-brand focus-visible:outline-2 focus-visible:outline-offset-2 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2";
 /** Stacked icon above the copy — tighter than the checkbox/radio row gap. */
 export declare const CHOICE_CARD_WITH_ICON = "flex-col gap-1.5";
 /** Same press as Select's default trigger — field-sized, not Button's whileTap. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

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

@@ -1,48 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"}