@dreamtree-org/twreact-ui 2.1.1 → 2.2.0

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/components/navigation/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAkZG;;kBAppBmF,OAAO"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAqZG;;kBAvpBmF,OAAO"}

package/dist/esm/components/core/Table/MobileCard.js

@@ -201,10 +201,10 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
-            className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
+            className: "text-sm text-primary-900 dark:text-foreground sm:w-2/3 sm:pl-2 break-words",
             children: renderCell(column, row, globalIndex)
           })]
         }, column.key);

package/dist/esm/components/core/Table/MobileFilters.js

@@ -205,7 +205,7 @@ function MobileFilters(_ref5) {
           });
         },
         "aria-expanded": !!showMobileFilters,
-        className: "text-xs font-medium text-primary-700",
+        className: "text-xs font-medium text-primary-700 dark:text-primary-300",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {

package/dist/esm/components/core/Table/Table.js

@@ -178,6 +178,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     filters = _useState14[0],
     setFilters = _useState14[1];
+  // The handlers below read and advance these refs synchronously, so they can
+  // call onSort / onFilter after setting state instead of inside a setState
+  // updater (updaters must be pure; React runs them during render and twice
+  // in StrictMode, #194). They are the only writers of sortConfig / filters.
+  var sortConfigRef = useRef(sortConfig);
+  var filtersRef = useRef(filters);
   var _useState15 = useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
     searchInput = _useState16[0],
@@ -932,34 +938,30 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   }, []);
   var handleSort = useCallback(function (key) {
     if (!sortable) return;
-    setSortConfig(function (prev) {
-      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
-      onSort === null || onSort === void 0 || onSort(key, direction);
-      return {
-        key: key,
-        direction: direction
-      };
-    });
+    var prev = sortConfigRef.current;
+    var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+    var next = {
+      key: key,
+      direction: direction
+    };
+    sortConfigRef.current = next;
+    setSortConfig(next);
+    onSort === null || onSort === void 0 || onSort(key, direction);
   }, [sortable, onSort]);
-  var handleFilter = useCallback(function (key, value) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, key, value));
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
+  var commitFilters = useCallback(function (newFilters) {
+    filtersRef.current = newFilters;
+    setFilters(newFilters);
     setCurrentPage(1);
+    onFilter === null || onFilter === void 0 || onFilter(newFilters);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
   }, [onFilter, onFilterChange]);
+  var handleFilter = useCallback(function (key, value) {
+    return commitFilters(_objectSpread2(_objectSpread2({}, filtersRef.current), {}, _defineProperty({}, key, value)));
+  }, [commitFilters]);
   // Commits several filters at once (the phone filter sheet's Apply).
   var applyFilters = useCallback(function (patch) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread2(_objectSpread2({}, prev), patch);
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
-    setCurrentPage(1);
-  }, [onFilter, onFilterChange]);
+    return commitFilters(_objectSpread2(_objectSpread2({}, filtersRef.current), patch));
+  }, [commitFilters]);
   // One open swipe row at a time: `{ key, side }`.
   var _useState37 = useState(null),
     _useState38 = _slicedToArray(_useState37, 2),
@@ -1196,7 +1198,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
       children: jsx("td", {
         colSpan: visibleCount,
-        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800 dark:text-primary-300 dark:group-hover:text-primary-200",
         children: jsxs("div", {
           className: "flex items-center justify-start gap-2",
           children: [jsx(Plus, {
@@ -1376,7 +1378,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -1403,7 +1405,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               return jsx("th", {
                 scope: "col",
                 "aria-sort": ariaSort,
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", isSortable && "p-0"),
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider", isSortable && "p-0"),
                 children: isSortable ? jsxs("button", {
                   type: "button",
                   onClick: function onClick() {

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 };