@dreamtree-org/twreact-ui 2.1.2 → 2.2.1

package/dist/components/motion/BentoExpandGrid.d.ts

@@ -0,0 +1,10 @@
+export default BentoExpandGrid;
+/**
+ * A photo grid whose active tile grows (its row and column tracks widen) while the
+ * neighbours shrink. Hover, keyboard focus and — with `trigger="click"` — tap expand a
+ * tile, and arrow keys move between tiles, so it never depends on a mouse. Below `md` it
+ * becomes a horizontal snap scroller. Under reduced motion the resize is instant.
+ */
+declare const BentoExpandGrid: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=BentoExpandGrid.d.ts.map

package/dist/components/motion/BentoExpandGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BentoExpandGrid.d.ts","sourceRoot":"","sources":["../../../src/components/motion/BentoExpandGrid.jsx"],"names":[],"mappings":";AASA;;;;;GAKG;AACH,yFA+FE;kBA9GsC,OAAO"}

package/dist/components/motion/CountUp.d.ts

@@ -0,0 +1,9 @@
+export default CountUp;
+/**
+ * A number that counts up when it scrolls into view. The server (and reduced motion)
+ * renders the real final value, so crawlers and no-JS readers never see "0". Screen readers
+ * read the final value once from a visually hidden copy; the animating digits are hidden.
+ */
+declare const CountUp: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=CountUp.d.ts.map

package/dist/components/motion/CountUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.d.ts","sourceRoot":"","sources":["../../../src/components/motion/CountUp.jsx"],"names":[],"mappings":";AAaA;;;;GAIG;AACH,iFA8DE;kBAhFgD,OAAO"}

package/dist/components/motion/DeviceFrame.d.ts

@@ -0,0 +1,8 @@
+export default DeviceFrame;
+/**
+ * A CSS-only device mock-up (phone, tablet, laptop or browser window) around any
+ * screen content. Purely presentational: no motion, works anywhere.
+ */
+declare const DeviceFrame: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=DeviceFrame.d.ts.map

package/dist/components/motion/DeviceFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceFrame.d.ts","sourceRoot":"","sources":["../../../src/components/motion/DeviceFrame.jsx"],"names":[],"mappings":";AA+CA;;;GAGG;AACH,qFAuBE;kBA1EgB,OAAO"}

package/dist/components/motion/DeviceMorphHero.d.ts

@@ -0,0 +1,11 @@
+export default DeviceMorphHero;
+/**
+ * The signature scroll hero: full-bleed media shrinks into a device frame, the bezel fades
+ * in, then the device slides aside while the copy (`content`) fades in beside it. The
+ * timeline maps the scene's scroll progress: 0–45 % morph, 40–60 % bezel, 60–90 % slide.
+ * The server, no-JS readers and reduced-motion users get the final layout (copy beside the
+ * device) with no pinning. Below `md` the device rises and shrinks and the copy appears under it.
+ */
+declare const DeviceMorphHero: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=DeviceMorphHero.d.ts.map

package/dist/components/motion/DeviceMorphHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceMorphHero.d.ts","sourceRoot":"","sources":["../../../src/components/motion/DeviceMorphHero.jsx"],"names":[],"mappings":";AAuCA;;;;;;GAMG;AACH,yFAmLE;kBAjOoD,OAAO"}

package/dist/components/motion/LogoMarquee.d.ts

@@ -0,0 +1,9 @@
+export default LogoMarquee;
+/**
+ * An endless strip of logos or names. The second copy of the list (needed for a seamless
+ * loop) is `aria-hidden`, so screen readers read each item once. Pauses on hover, while
+ * focus is inside and while off screen; under reduced motion it is a static, wrapped row.
+ */
+declare const LogoMarquee: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=LogoMarquee.d.ts.map

package/dist/components/motion/LogoMarquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoMarquee.d.ts","sourceRoot":"","sources":["../../../src/components/motion/LogoMarquee.jsx"],"names":[],"mappings":";AA6CA;;;;GAIG;AACH,qFA2EE;kBA7HiD,OAAO"}

package/dist/components/motion/PhotoCollage.d.ts

@@ -0,0 +1,9 @@
+export default PhotoCollage;
+/**
+ * Overlapping, offset photos with floating stat chips and an optional badge. On scroll the
+ * photos drift at different depths (parallax), driven by a CSS variable — no re-renders.
+ * Under reduced motion (or `parallax={0}`) they stay put.
+ */
+declare const PhotoCollage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=PhotoCollage.d.ts.map

package/dist/components/motion/PhotoCollage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoCollage.d.ts","sourceRoot":"","sources":["../../../src/components/motion/PhotoCollage.jsx"],"names":[],"mappings":";AAmBA;;;;GAIG;AACH,sFA2CE;kBAnE4B,OAAO"}

package/dist/components/motion/Reveal.d.ts

@@ -0,0 +1,9 @@
+export default Reveal;
+/**
+ * Plays an entrance when the element scrolls into view. The server, no-JS readers and
+ * reduced-motion users get the content as-is; elements already on screen at load are not
+ * hidden (no flash, no LCP delay). Only content below the fold animates.
+ */
+declare const Reveal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=Reveal.d.ts.map

package/dist/components/motion/Reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.d.ts","sourceRoot":"","sources":["../../../src/components/motion/Reveal.jsx"],"names":[],"mappings":";AAoBA;;;;GAIG;AACH,gFAyEE;kBAlGsC,OAAO"}

package/dist/components/motion/RevealGroup.d.ts

@@ -0,0 +1,5 @@
+export default RevealGroup;
+/** Reveals each child in turn: child `i` waits `delay + i * stagger` ms. */
+declare const RevealGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=RevealGroup.d.ts.map

package/dist/components/motion/RevealGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealGroup.d.ts","sourceRoot":"","sources":["../../../src/components/motion/RevealGroup.jsx"],"names":[],"mappings":";AAGA,4EAA4E;AAC5E,qFAoBE;kBAxBgB,OAAO"}

package/dist/components/motion/RotatingBadge.d.ts

@@ -0,0 +1,9 @@
+export default RotatingBadge;
+/**
+ * A circular badge with text set around its edge, slowly turning (SVG `textPath`). The
+ * text is spread to fill the circle exactly. Exposed as one image named by `text`
+ * (override with `aria-label`); it stops turning under reduced motion.
+ */
+declare const RotatingBadge: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=RotatingBadge.d.ts.map

package/dist/components/motion/RotatingBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotatingBadge.d.ts","sourceRoot":"","sources":["../../../src/components/motion/RotatingBadge.jsx"],"names":[],"mappings":";AAMA;;;;GAIG;AACH,uFAiCG;kBA5C0B,OAAO"}

package/dist/components/motion/ScrollStage.d.ts

@@ -0,0 +1,11 @@
+export default ScrollStage;
+/**
+ * A pinned scroll scene: a tall section whose content sticks to the viewport while the
+ * user scrolls through `length` vh. Progress (0–1) is written to `--dt-p` on the root, so
+ * children animate with CSS (`opacity: var(--dt-p, 1)`), and passed to `children(progress)`
+ * and `onProgress`. Under reduced motion, or with `pin={false}`, it renders in normal flow
+ * at its final state.
+ */
+declare const ScrollStage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=ScrollStage.d.ts.map

package/dist/components/motion/ScrollStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollStage.d.ts","sourceRoot":"","sources":["../../../src/components/motion/ScrollStage.jsx"],"names":[],"mappings":";AAQA;;;;;;GAMG;AACH,qFAsCE;kBArD4B,OAAO"}

package/dist/components/motion/SmoothScrollProvider.d.ts

@@ -0,0 +1,18 @@
+export default SmoothScrollProvider;
+/**
+ * Opt-in smooth (inertial) scrolling with Lenis. Lenis is an optional peer dependency
+ * and is never imported by this package: install it and pass the class —
+ * `<SmoothScrollProvider lenis={Lenis}>`. Without `lenis`, with `enabled={false}` or when
+ * the user prefers reduced motion, the page keeps native scrolling. Lenis runs on the same
+ * frame loop as the other motion components.
+ */
+declare function SmoothScrollProvider({ lenis: LenisClass, options, enabled, children }: {
+    lenis: any;
+    options: any;
+    enabled?: boolean | undefined;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace SmoothScrollProvider {
+    let displayName: string;
+}
+//# sourceMappingURL=SmoothScrollProvider.d.ts.map

package/dist/components/motion/SmoothScrollProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothScrollProvider.d.ts","sourceRoot":"","sources":["../../../src/components/motion/SmoothScrollProvider.jsx"],"names":[],"mappings":";AAKA;;;;;;GAMG;AACH;;;;;4CA2BC"}

package/dist/components/motion/StackedCards.d.ts

@@ -0,0 +1,10 @@
+export default StackedCards;
+/**
+ * Cards that stick one over another as the page scrolls (sticky stacking). Cards
+ * underneath shrink and dim as the next one covers them, and each has a slight
+ * alternating tilt so the stack looks hand-placed. Tilt is off below `md` and under
+ * reduced motion; the scale/dim effect is off under reduced motion.
+ */
+declare const StackedCards: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=StackedCards.d.ts.map

package/dist/components/motion/StackedCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCards.d.ts","sourceRoot":"","sources":["../../../src/components/motion/StackedCards.jsx"],"names":[],"mappings":";AAqDA;;;;;GAKG;AACH,sFA6EE;kBAxIuC,OAAO"}

package/dist/components/motion/StatStrip.d.ts

@@ -0,0 +1,8 @@
+export default StatStrip;
+/**
+ * A row of headline numbers that count up on view — as bordered cards or one band with
+ * dividers. A description list: each label is a `<dt>`, each number its `<dd>`.
+ */
+declare const StatStrip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=StatStrip.d.ts.map

package/dist/components/motion/StatStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatStrip.d.ts","sourceRoot":"","sources":["../../../src/components/motion/StatStrip.jsx"],"names":[],"mappings":";AAMA;;;GAGG;AACH,mFAsCG;kBAhDe,OAAO"}

package/dist/components/motion/TestimonialSpotlight.d.ts

@@ -0,0 +1,10 @@
+export default TestimonialSpotlight;
+/**
+ * Client quotes with a 3×3 tile grid of logos: the active client's logo sits in the centre
+ * tile and the quote beside it. Dots are a tab list (arrow keys, Home/End). Autoplay pauses
+ * on hover, while focus is inside, while off screen and under reduced motion, and has a
+ * visible pause button (WCAG 2.2.2).
+ */
+declare const TestimonialSpotlight: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=TestimonialSpotlight.d.ts.map

package/dist/components/motion/TestimonialSpotlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialSpotlight.d.ts","sourceRoot":"","sources":["../../../src/components/motion/TestimonialSpotlight.jsx"],"names":[],"mappings":";AAgBA;;;;;GAKG;AACH,8FAgIE;kBAtJwD,OAAO"}

package/dist/components/motion/storyData.d.ts

@@ -0,0 +1,52 @@
+/** A token-coloured placeholder screen for device mock-ups. */
+export function Screen({ label }: {
+    label?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export function photo(seed: any, w?: number, h?: number): string;
+export const clients: string[];
+export const stats: ({
+    value: number;
+    suffix: string;
+    label: string;
+    prefix?: undefined;
+} | {
+    value: number;
+    label: string;
+    suffix?: undefined;
+    prefix?: undefined;
+} | {
+    value: number;
+    prefix: string;
+    label: string;
+    suffix?: undefined;
+})[];
+export const pillars: {
+    kicker: string;
+    title: string;
+    body: string;
+    bullets: string[];
+    metric: {
+        value: string;
+        label: string;
+    };
+    media: {
+        src: string;
+        alt: string;
+    };
+}[];
+export const projects: {
+    title: string;
+    tag: string;
+    client: string;
+    media: {
+        src: string;
+        alt: string;
+    };
+}[];
+export const testimonials: {
+    quote: string;
+    name: string;
+    role: string;
+    logo: string;
+}[];
+//# sourceMappingURL=storyData.d.ts.map

package/dist/components/motion/storyData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyData.d.ts","sourceRoot":"","sources":["../../../src/components/motion/storyData.js"],"names":[],"mappings":"AA8DA,+DAA+D;AAC/D;;4CAQC;AAtEM,iEAAwF;AAE/F,+BAAoH;AAEpH;;;;;;;;;;;;;;;KAKE;AAEF;;;;;;;;;;;;;IAiCE;AAEF;;;;;;;;IAOE;AAEF;;;;;IAIE"}

package/dist/esm/components/motion/BentoExpandGrid.js

@@ -0,0 +1,144 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+
+var _excluded = ["items", "cols", "expand", "trigger", "label", "className", "style", "onMouseLeave"];
+var isImage = function isImage(media) {
+  return media && _typeof(media) === "object" && ! /*#__PURE__*/React.isValidElement(media) && "src" in media;
+};
+var tracks = function tracks(count, active, expand) {
+  return Array.from({
+    length: count
+  }, function (_, i) {
+    return i === active ? "".concat(expand, "fr") : "1fr";
+  }).join(" ");
+};
+/**
+ * A photo grid whose active tile grows (its row and column tracks widen) while the
+ * neighbours shrink. Hover, keyboard focus and — with `trigger="click"` — tap expand a
+ * tile, and arrow keys move between tiles, so it never depends on a mouse. Below `md` it
+ * becomes a horizontal snap scroller. Under reduced motion the resize is instant.
+ */
+var BentoExpandGrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 3 : _ref$cols,
+    _ref$expand = _ref.expand,
+    expand = _ref$expand === void 0 ? 2 : _ref$expand,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
+    label = _ref.label,
+    className = _ref.className,
+    style = _ref.style,
+    _onMouseLeave = _ref.onMouseLeave,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var rows = Math.max(1, Math.ceil(items.length / cols));
+  var activeCol = active == null ? -1 : active % cols;
+  var activeRow = active == null ? -1 : Math.floor(active / cols);
+  var focusTile = function focusTile(index) {
+    var tiles = local.current ? local.current.querySelectorAll("[data-bento-tile]") : [];
+    if (tiles[index]) tiles[index].focus();
+  };
+  var _onKeyDown = function onKeyDown(event, index) {
+    var step = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: cols,
+      ArrowUp: -cols
+    }[event.key];
+    if (step === undefined) {
+      if (event.key === "Home") focusTile(0);else if (event.key === "End") focusTile(items.length - 1);else return;
+      event.preventDefault();
+      return;
+    }
+    var next = index + step;
+    if (next >= 0 && next < items.length) {
+      event.preventDefault();
+      focusTile(next);
+    }
+  };
+  return jsx("ul", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "aria-label": label,
+    className: cn("flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2", "md:grid md:h-[min(80vh,720px)] md:snap-none md:overflow-visible md:pb-0", "md:transition-[grid-template-columns,grid-template-rows] md:duration-500 md:ease-emphasized motion-reduce:transition-none", className),
+    style: _objectSpread2({
+      gridTemplateColumns: tracks(cols, activeCol, expand),
+      gridTemplateRows: tracks(rows, activeRow, expand)
+    }, style),
+    onMouseLeave: function onMouseLeave(e) {
+      if (trigger === "hover") setActive(null);
+      if (_onMouseLeave) _onMouseLeave(e);
+    }
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      var _item$id;
+      var Tag = item.href ? "a" : trigger === "click" ? "button" : "div";
+      var expanded = active === i;
+      var interactive = {
+        "data-bento-tile": "",
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e, i);
+        },
+        onFocus: trigger !== "click" ? function () {
+          return setActive(i);
+        } : undefined,
+        onMouseEnter: trigger === "hover" ? function () {
+          return setActive(i);
+        } : undefined,
+        onClick: trigger === "click" ? function () {
+          return setActive(expanded ? null : i);
+        } : undefined
+      };
+      if (Tag === "a") interactive.href = item.href;
+      if (Tag === "button") {
+        interactive.type = "button";
+        interactive["aria-pressed"] = expanded;
+      }
+      if (Tag === "div") interactive.tabIndex = 0;
+      return jsx("li", {
+        className: "w-[80%] shrink-0 snap-start sm:w-[45%] md:w-auto md:min-h-0 md:min-w-0",
+        children: jsxs(Tag, _objectSpread2(_objectSpread2({}, interactive), {}, {
+          "data-active": expanded ? "" : undefined,
+          className: "group relative block h-72 w-full overflow-hidden rounded-card text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 md:h-full",
+          children: [isImage(item.media) ? jsx("img", {
+            src: item.media.src,
+            alt: item.media.alt,
+            loading: "lazy",
+            className: "absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-emphasized group-hover:scale-105 group-data-[active]:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+          }) : jsx("span", {
+            className: "absolute inset-0",
+            children: item.media
+          }), jsx("span", {
+            "aria-hidden": "true",
+            className: "absolute inset-0 bg-gradient-to-t from-gray-950/80 via-gray-950/20 to-transparent"
+          }), jsxs("span", {
+            className: "absolute inset-x-0 bottom-0 flex flex-col gap-1 p-4 text-primary-foreground",
+            children: [item.tag ? jsx("span", {
+              className: "w-max rounded-pill bg-primary-foreground/20 px-2.5 py-0.5 text-micro uppercase tracking-wider backdrop-blur",
+              children: item.tag
+            }) : null, item.client ? jsx("span", {
+              className: "text-caption text-primary-foreground/80",
+              children: item.client
+            }) : null, jsx("span", {
+              className: "text-body font-semibold",
+              children: item.title
+            })]
+          })]
+        }))
+      }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+    })
+  }));
+});
+BentoExpandGrid.displayName = "BentoExpandGrid";
+
+export { BentoExpandGrid as default };

package/dist/esm/components/motion/CountUp.js

@@ -0,0 +1,97 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useMemo, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { observe } from '../../motion/engine/inView.js';
+import { subscribe } from '../../motion/engine/scheduler.js';
+import { easeOut } from '../../motion/engine/progress.js';
+
+var _excluded = ["value", "from", "prefix", "suffix", "duration", "decimals", "locale", "format", "className"];
+var decimalsOf = function decimalsOf(n) {
+  var s = String(n);
+  var dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+};
+/**
+ * A number that counts up when it scrolls into view. The server (and reduced motion)
+ * renders the real final value, so crawlers and no-JS readers never see "0". Screen readers
+ * read the final value once from a visually hidden copy; the animating digits are hidden.
+ */
+var CountUp = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$from = _ref.from,
+    from = _ref$from === void 0 ? 0 : _ref$from,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 1600 : _ref$duration,
+    decimals = _ref.decimals,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? "en-IN" : _ref$locale,
+    format = _ref.format,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var live = useRef(null);
+  var reduced = useReducedMotion();
+  var digits = decimals !== null && decimals !== void 0 ? decimals : decimalsOf(value);
+  var fmt = useMemo(function () {
+    if (format) return format;
+    var nf = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits
+    });
+    return function (n) {
+      return nf.format(n);
+    };
+  }, [format, locale, digits]);
+  var finalText = fmt(value);
+  useEffect(function () {
+    var el = live.current;
+    if (!el || reduced || duration <= 0) return undefined;
+    // Below the fold: show the start value until it scrolls in. On screen: count right away.
+    if (el.getBoundingClientRect().top > innerHeight) el.textContent = fmt(from);
+    var unsubscribe = null;
+    var stop = function stop() {};
+    stop = observe(el, function (inView) {
+      if (!inView || unsubscribe) return;
+      stop();
+      var t0 = null;
+      unsubscribe = subscribe({
+        loop: true,
+        write: function write(_, now) {
+          if (t0 === null) t0 = now;
+          var t = Math.min(1, (now - t0) / duration);
+          el.textContent = t < 1 ? fmt(from + (value - from) * easeOut(t)) : fmt(value);
+          if (t >= 1) unsubscribe();
+        }
+      });
+    }, {
+      threshold: 0.4
+    });
+    return function () {
+      stop();
+      if (unsubscribe) unsubscribe();
+      el.textContent = fmt(value);
+    };
+  }, [value, from, duration, fmt, reduced]);
+  return jsxs("span", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("tabular-nums", className)
+  }, rest), {}, {
+    children: [jsxs("span", {
+      "aria-hidden": "true",
+      children: [prefix, jsx("span", {
+        ref: live,
+        children: finalText
+      }), suffix]
+    }), jsxs("span", {
+      className: "sr-only",
+      children: [prefix, finalText, suffix]
+    })]
+  }));
+});
+CountUp.displayName = "CountUp";
+
+export { CountUp as default };

package/dist/esm/components/motion/DeviceFrame.js

@@ -0,0 +1,102 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["device", "url", "screenClassName", "screenRef", "className", "children"];
+// Bezel parts read `--dt-chrome` (opacity, default 1) so DeviceMorphHero can fade them in.
+var CHROME = "opacity-[var(--dt-chrome,1)]";
+// Bezels are borders (not filled boxes) so the screen area stays see-through: DeviceMorphHero
+// slides its full-bleed media layer under a transparent screen.
+var FRAMES = {
+  phone: {
+    root: "w-[220px] md:w-[262px] aspect-[262/562]",
+    bezel: "inset-0 rounded-[2.75rem] md:rounded-[3.25rem] border-[10px] border-shell shadow-2xl",
+    screen: "inset-[10px] rounded-[2.1rem] md:rounded-[2.6rem]",
+    extras: jsxs(Fragment, {
+      children: [jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute left-1/2 top-[18px] h-[22px] w-[30%] -translate-x-1/2 rounded-pill bg-shell", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute bottom-[16px] left-1/2 h-[4px] w-[34%] -translate-x-1/2 rounded-pill bg-shell-foreground/70", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute -left-[3px] top-[22%] h-[9%] w-[3px] rounded-l bg-shell-active", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute -right-[3px] top-[28%] h-[14%] w-[3px] rounded-r bg-shell-active", CHROME)
+      })]
+    })
+  },
+  tablet: {
+    root: "w-[320px] md:w-[440px] aspect-[3/4]",
+    bezel: "inset-0 rounded-[2rem] border-[14px] border-shell shadow-2xl",
+    screen: "inset-[14px] rounded-[1rem]",
+    extras: jsx("span", {
+      "aria-hidden": "true",
+      className: cn("absolute left-1/2 top-[5px] h-[4px] w-[4px] -translate-x-1/2 rounded-full bg-shell-active", CHROME)
+    })
+  },
+  laptop: {
+    root: "w-[340px] md:w-[640px] aspect-[16/10.6]",
+    bezel: "inset-x-0 top-0 bottom-[4%] rounded-t-[1.25rem] border-[10px] border-b-[22px] border-shell shadow-2xl",
+    screen: "left-[10px] right-[10px] top-[10px] bottom-[calc(4%+22px)] rounded-[0.25rem]",
+    extras: jsx("span", {
+      "aria-hidden": "true",
+      className: cn("absolute -inset-x-[6%] bottom-0 h-[4%] rounded-b-[1rem] bg-line shadow-lg", CHROME)
+    })
+  },
+  browser: {
+    root: "w-[340px] md:w-[720px] aspect-[16/10.5]",
+    bezel: "inset-0 rounded-card border border-t-[36px] border-line border-t-gray-100 shadow-2xl dark:border-t-gray-800",
+    screen: "inset-x-px bottom-px top-[36px] rounded-b-card",
+    extras: null
+  }
+};
+/**
+ * A CSS-only device mock-up (phone, tablet, laptop or browser window) around any
+ * screen content. Purely presentational: no motion, works anywhere.
+ */
+var DeviceFrame = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$device = _ref.device,
+    device = _ref$device === void 0 ? "phone" : _ref$device,
+    url = _ref.url,
+    screenClassName = _ref.screenClassName,
+    screenRef = _ref.screenRef,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var f = FRAMES[device] || FRAMES.phone;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    "data-device": device,
+    className: cn("relative shrink-0", f.root, className)
+  }, rest), {}, {
+    children: [jsx("div", {
+      "aria-hidden": "true",
+      className: cn("pointer-events-none absolute", f.bezel, CHROME)
+    }), device === "browser" ? jsxs("div", {
+      "aria-hidden": "true",
+      className: cn("absolute inset-x-0 top-0 flex h-[36px] items-center gap-1.5 px-3", CHROME),
+      children: [jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-error-400"
+      }), jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-warning-400"
+      }), jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-success-400"
+      }), url ? jsx("span", {
+        className: "ml-3 flex-1 truncate rounded-pill bg-surface px-3 py-0.5 text-micro text-muted dark:bg-background",
+        children: url
+      }) : null]
+    }) : null, jsx("div", {
+      ref: screenRef,
+      className: cn("absolute overflow-hidden bg-surface dark:bg-background", f.screen, screenClassName),
+      children: children
+    }), f.extras]
+  }));
+});
+DeviceFrame.displayName = "DeviceFrame";
+
+export { DeviceFrame as default };