@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/animated-cursor.cjs

@@ -0,0 +1,183 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedCursor = AnimatedCursor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AnimatedCursor — a custom pointer that follows the mouse, grows on hover,
+ * shrinks on click, and can trail a fading string of dots behind it.
+ *
+ * It reads the document rather than any one element: a `mousemove` positions
+ * the dot, `mouseover` walks `event.target` up through `closest()` against four
+ * selector groups (text / interactive / grab / grabbing) to pick a shape, and
+ * `mousedown`/`mouseup` drive the click scale. While it is live one stylesheet
+ * rule hides the native cursor everywhere — the body alone is not enough, since
+ * a button's own `cursor: pointer` and a field's I-beam would still show beside
+ * the dot — and the rule goes with the component. `color` and `trailColor` take
+ * a theme token (`$color`, the default) or any CSS colour, and the trail, unless
+ * given its own, is the fill at a third of its strength. The frame carries
+ * `zIndex`, so the dot stays above overlays. All of that is DOM-only, so it
+ * renders nothing on native, on a touch device (`hideOnTouch`, the default)
+ * or while `isVisible` is off, and does nothing before mount, keeping the
+ * server render and the first client render identical.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const sx_1 = require("../../sx.cjs");
+const slot_1 = require("./slot.cjs");
+const INTERACTIVE_SELECTORS = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[role="button"]',
+    '[role="link"]',
+    '[tabindex]:not([tabindex="-1"])',
+    '[data-cursor="pointer"]',
+].join(', ');
+const TEXT_SELECTORS = [
+    'input[type="text"]',
+    'input[type="email"]',
+    'input[type="password"]',
+    'input[type="search"]',
+    'textarea',
+    '[contenteditable="true"]',
+    '[data-cursor="text"]',
+].join(', ');
+const GRAB_SELECTORS = '[data-cursor="grab"]';
+const GRABBING_SELECTORS = '[data-cursor="grabbing"]';
+const HIDE_NATIVE = '* { cursor: none !important }';
+const touchCapable = () => gui_1.isWeb &&
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+/** A theme token (`$color`) as the CSS variable behind it; any other colour as written. */
+const paint = (theme, c) => c.startsWith('$') ? String(theme[c.slice(1)]?.get('web') ?? c) : c;
+/**
+ * The shape `closest()` finds for a mouseover target, or `default` for none.
+ * Text fields are checked before the general interactive group, because a
+ * text `<input>` and a `<textarea>` also match that group's bare `input` /
+ * `textarea` entries and would otherwise never read as text.
+ */
+const shapeFor = (target) => {
+    const el = target;
+    if (!el?.closest)
+        return 'default';
+    if (el.closest(TEXT_SELECTORS))
+        return 'text';
+    if (el.closest(INTERACTIVE_SELECTORS))
+        return 'pointer';
+    if (el.closest(GRAB_SELECTORS))
+        return 'grab';
+    if (el.closest(GRABBING_SELECTORS))
+        return 'grabbing';
+    return 'default';
+};
+function AnimatedCursor({ isVisible = true, size = 20, color = '$color', trailColor, animationDuration = 200, showTrail = true, trailLength = 8, blendMode = 'normal', hoverScale = 1.5, hideOnTouch = true, className, clickAnimationDuration = 100, zIndex = 9999, }) {
+    const theme = (0, gui_1.useTheme)();
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [isTouch, setIsTouch] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)({
+        position: { x: 0, y: 0 },
+        isHovering: false,
+        isClicking: false,
+        cursorType: 'default',
+    });
+    const [trail, setTrail] = (0, react_1.useState)([]);
+    const trailRef = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+        setIsTouch(touchCapable());
+    }, []);
+    const live = mounted && gui_1.isWeb && isVisible && !(hideOnTouch && isTouch);
+    (0, react_1.useEffect)(() => {
+        if (!live)
+            return;
+        const onMove = (e) => {
+            const position = { x: e.clientX, y: e.clientY };
+            setState((s) => ({ ...s, position }));
+            const next = [...trailRef.current, position];
+            trailRef.current = next.slice(Math.max(0, next.length - trailLength));
+            setTrail(trailRef.current);
+        };
+        const onOver = (e) => {
+            const cursorType = shapeFor(e.target);
+            setState((s) => ({ ...s, isHovering: cursorType !== 'default', cursorType }));
+        };
+        const onDown = () => setState((s) => ({ ...s, isClicking: true }));
+        const onUp = () => setState((s) => ({ ...s, isClicking: false }));
+        const onLeave = () => setState((s) => ({ ...s, isHovering: false, cursorType: 'default' }));
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseover', onOver);
+        document.addEventListener('mousedown', onDown);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('mouseleave', onLeave);
+        const hide = document.createElement('style');
+        hide.textContent = HIDE_NATIVE;
+        document.head.appendChild(hide);
+        return () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseover', onOver);
+            document.removeEventListener('mousedown', onDown);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseleave', onLeave);
+            hide.remove();
+        };
+    }, [live, trailLength]);
+    if (!live)
+        return null;
+    const fill = paint(theme, color);
+    const trailFill = trailColor ? paint(theme, trailColor) : `color-mix(in srgb, ${fill} 31%, transparent)`;
+    const hoverRingSize = size * hoverScale;
+    const dotScale = (state.isHovering ? hoverScale : 1) * (state.isClicking ? 0.8 : 1);
+    const isText = state.cursorType === 'text';
+    const isGrab = state.cursorType === 'grab' || state.cursorType === 'grabbing';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('animated-cursor'), position: "fixed", inset: 0, style: { zIndex }, pointerEvents: "none", ...(0, sx_1.sx)(className), children: [showTrail &&
+                trail.map((point, i) => {
+                    const weight = (i + 1) / trail.length;
+                    const style = {
+                        position: 'absolute',
+                        left: point.x - size / 2,
+                        top: point.y - size / 2,
+                        width: size,
+                        height: size,
+                        borderRadius: '50%',
+                        backgroundColor: trailFill,
+                        opacity: weight * 0.5,
+                        transform: `scale(${weight * 0.8})`,
+                        zIndex: zIndex - i - 1,
+                        mixBlendMode: blendMode,
+                    };
+                    return (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('animated-cursor-trail'), style: style }, i);
+                }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('animated-cursor-dot'), "data-shape": state.cursorType, style: {
+                    position: 'absolute',
+                    left: state.position.x - (isText ? 1 : size / 2),
+                    top: state.position.y - (isText ? 12 : size / 2),
+                    width: isText ? 2 : size,
+                    height: isText ? 24 : size,
+                    backgroundColor: fill,
+                    borderRadius: isText ? 0 : isGrab ? '6px' : '50%',
+                    transform: `scale(${dotScale})`,
+                    transitionProperty: 'transform',
+                    transitionDuration: `${state.isClicking ? clickAnimationDuration : animationDuration}ms`,
+                    transitionTimingFunction: 'ease-out',
+                    zIndex,
+                    mixBlendMode: blendMode,
+                } }), state.isHovering && !isText && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('animated-cursor-ring'), style: {
+                    position: 'absolute',
+                    left: state.position.x - hoverRingSize / 2,
+                    top: state.position.y - hoverRingSize / 2,
+                    width: hoverRingSize,
+                    height: hoverRingSize,
+                    borderRadius: '50%',
+                    borderWidth: 2,
+                    borderStyle: 'solid',
+                    borderColor: fill,
+                    opacity: 0.3,
+                    transitionProperty: 'all',
+                    transitionDuration: `${animationDuration}ms`,
+                    transitionTimingFunction: 'ease-out',
+                    zIndex: zIndex - 1,
+                    mixBlendMode: blendMode,
+                } }))] }));
+}

package/dist/backends/gui/animated-cursor.d.ts

@@ -0,0 +1,42 @@
+export type AnimatedCursorBlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
+export type AnimatedCursorShape = 'default' | 'pointer' | 'text' | 'grab' | 'grabbing';
+export type CursorPosition = {
+    x: number;
+    y: number;
+};
+export type CursorState = {
+    position: CursorPosition;
+    isHovering: boolean;
+    isClicking: boolean;
+    cursorType: AnimatedCursorShape;
+};
+export type AnimatedCursorProps = {
+    /** Whether the cursor renders at all; off, the native cursor is untouched. */
+    isVisible?: boolean;
+    /** Diameter of the dot, in px. */
+    size?: number;
+    /** Fill of the dot: a theme token such as `$color`, or a CSS colour. */
+    color?: string;
+    /** Fill of each trailing dot; by default the fill at a third of its strength. */
+    trailColor?: string;
+    /** How long the dot and the ring take to settle, in ms. */
+    animationDuration?: number;
+    /** Whether a fading trail of past positions renders behind the dot. */
+    showTrail?: boolean;
+    /** How many past positions the trail keeps. */
+    trailLength?: number;
+    /** `mix-blend-mode` for the dot, the trail and the hover ring. */
+    blendMode?: AnimatedCursorBlendMode;
+    /** Scale the dot reaches while hovering an interactive element. */
+    hoverScale?: number;
+    /** Render nothing on a device that reports touch support. */
+    hideOnTouch?: boolean;
+    /** Class notation for the fixed frame. */
+    className?: string;
+    /** How long the click scale takes to release, in ms. */
+    clickAnimationDuration?: number;
+    /** Stacking context of the frame, and of the dot within it; the trail and ring sit just under. */
+    zIndex?: number;
+};
+export declare function AnimatedCursor({ isVisible, size, color, trailColor, animationDuration, showTrail, trailLength, blendMode, hoverScale, hideOnTouch, className, clickAnimationDuration, zIndex, }: AnimatedCursorProps): import("react").JSX.Element | null;
+//# sourceMappingURL=animated-cursor.d.ts.map

package/dist/backends/gui/animated-cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-cursor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/animated-cursor.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,CAAA;AAEf,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;AAEtF,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,cAAc,CAAA;IACxB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,mBAAmB,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,uBAAuB,CAAA;IACnC,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAsDD,wBAAgB,cAAc,CAAC,EAC7B,SAAgB,EAChB,IAAS,EACT,KAAgB,EAChB,UAAU,EACV,iBAAuB,EACvB,SAAgB,EAChB,WAAe,EACf,SAAoB,EACpB,UAAgB,EAChB,WAAkB,EAClB,SAAS,EACT,sBAA4B,EAC5B,MAAa,GACd,EAAE,mBAAmB,sCA2IrB"}

package/dist/backends/gui/animated-cursor.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AnimatedCursor — a custom pointer that follows the mouse, grows on hover,
+ * shrinks on click, and can trail a fading string of dots behind it.
+ *
+ * It reads the document rather than any one element: a `mousemove` positions
+ * the dot, `mouseover` walks `event.target` up through `closest()` against four
+ * selector groups (text / interactive / grab / grabbing) to pick a shape, and
+ * `mousedown`/`mouseup` drive the click scale. While it is live one stylesheet
+ * rule hides the native cursor everywhere — the body alone is not enough, since
+ * a button's own `cursor: pointer` and a field's I-beam would still show beside
+ * the dot — and the rule goes with the component. `color` and `trailColor` take
+ * a theme token (`$color`, the default) or any CSS colour, and the trail, unless
+ * given its own, is the fill at a third of its strength. The frame carries
+ * `zIndex`, so the dot stays above overlays. All of that is DOM-only, so it
+ * renders nothing on native, on a touch device (`hideOnTouch`, the default)
+ * or while `isVisible` is off, and does nothing before mount, keeping the
+ * server render and the first client render identical.
+ */
+import { YStack, isWeb, useTheme } from '@hanzo/gui';
+import { useEffect, useRef, useState } from 'react';
+import { sx } from '../../sx.js';
+import { slot } from './slot.js';
+const INTERACTIVE_SELECTORS = [
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[role="button"]',
+    '[role="link"]',
+    '[tabindex]:not([tabindex="-1"])',
+    '[data-cursor="pointer"]',
+].join(', ');
+const TEXT_SELECTORS = [
+    'input[type="text"]',
+    'input[type="email"]',
+    'input[type="password"]',
+    'input[type="search"]',
+    'textarea',
+    '[contenteditable="true"]',
+    '[data-cursor="text"]',
+].join(', ');
+const GRAB_SELECTORS = '[data-cursor="grab"]';
+const GRABBING_SELECTORS = '[data-cursor="grabbing"]';
+const HIDE_NATIVE = '* { cursor: none !important }';
+const touchCapable = () => isWeb &&
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+/** A theme token (`$color`) as the CSS variable behind it; any other colour as written. */
+const paint = (theme, c) => c.startsWith('$') ? String(theme[c.slice(1)]?.get('web') ?? c) : c;
+/**
+ * The shape `closest()` finds for a mouseover target, or `default` for none.
+ * Text fields are checked before the general interactive group, because a
+ * text `<input>` and a `<textarea>` also match that group's bare `input` /
+ * `textarea` entries and would otherwise never read as text.
+ */
+const shapeFor = (target) => {
+    const el = target;
+    if (!el?.closest)
+        return 'default';
+    if (el.closest(TEXT_SELECTORS))
+        return 'text';
+    if (el.closest(INTERACTIVE_SELECTORS))
+        return 'pointer';
+    if (el.closest(GRAB_SELECTORS))
+        return 'grab';
+    if (el.closest(GRABBING_SELECTORS))
+        return 'grabbing';
+    return 'default';
+};
+export function AnimatedCursor({ isVisible = true, size = 20, color = '$color', trailColor, animationDuration = 200, showTrail = true, trailLength = 8, blendMode = 'normal', hoverScale = 1.5, hideOnTouch = true, className, clickAnimationDuration = 100, zIndex = 9999, }) {
+    const theme = useTheme();
+    const [mounted, setMounted] = useState(false);
+    const [isTouch, setIsTouch] = useState(false);
+    const [state, setState] = useState({
+        position: { x: 0, y: 0 },
+        isHovering: false,
+        isClicking: false,
+        cursorType: 'default',
+    });
+    const [trail, setTrail] = useState([]);
+    const trailRef = useRef([]);
+    useEffect(() => {
+        setMounted(true);
+        setIsTouch(touchCapable());
+    }, []);
+    const live = mounted && isWeb && isVisible && !(hideOnTouch && isTouch);
+    useEffect(() => {
+        if (!live)
+            return;
+        const onMove = (e) => {
+            const position = { x: e.clientX, y: e.clientY };
+            setState((s) => ({ ...s, position }));
+            const next = [...trailRef.current, position];
+            trailRef.current = next.slice(Math.max(0, next.length - trailLength));
+            setTrail(trailRef.current);
+        };
+        const onOver = (e) => {
+            const cursorType = shapeFor(e.target);
+            setState((s) => ({ ...s, isHovering: cursorType !== 'default', cursorType }));
+        };
+        const onDown = () => setState((s) => ({ ...s, isClicking: true }));
+        const onUp = () => setState((s) => ({ ...s, isClicking: false }));
+        const onLeave = () => setState((s) => ({ ...s, isHovering: false, cursorType: 'default' }));
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseover', onOver);
+        document.addEventListener('mousedown', onDown);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('mouseleave', onLeave);
+        const hide = document.createElement('style');
+        hide.textContent = HIDE_NATIVE;
+        document.head.appendChild(hide);
+        return () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseover', onOver);
+            document.removeEventListener('mousedown', onDown);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseleave', onLeave);
+            hide.remove();
+        };
+    }, [live, trailLength]);
+    if (!live)
+        return null;
+    const fill = paint(theme, color);
+    const trailFill = trailColor ? paint(theme, trailColor) : `color-mix(in srgb, ${fill} 31%, transparent)`;
+    const hoverRingSize = size * hoverScale;
+    const dotScale = (state.isHovering ? hoverScale : 1) * (state.isClicking ? 0.8 : 1);
+    const isText = state.cursorType === 'text';
+    const isGrab = state.cursorType === 'grab' || state.cursorType === 'grabbing';
+    return (_jsxs(YStack, { ...slot('animated-cursor'), position: "fixed", inset: 0, style: { zIndex }, pointerEvents: "none", ...sx(className), children: [showTrail &&
+                trail.map((point, i) => {
+                    const weight = (i + 1) / trail.length;
+                    const style = {
+                        position: 'absolute',
+                        left: point.x - size / 2,
+                        top: point.y - size / 2,
+                        width: size,
+                        height: size,
+                        borderRadius: '50%',
+                        backgroundColor: trailFill,
+                        opacity: weight * 0.5,
+                        transform: `scale(${weight * 0.8})`,
+                        zIndex: zIndex - i - 1,
+                        mixBlendMode: blendMode,
+                    };
+                    return _jsx(YStack, { ...slot('animated-cursor-trail'), style: style }, i);
+                }), _jsx(YStack, { ...slot('animated-cursor-dot'), "data-shape": state.cursorType, style: {
+                    position: 'absolute',
+                    left: state.position.x - (isText ? 1 : size / 2),
+                    top: state.position.y - (isText ? 12 : size / 2),
+                    width: isText ? 2 : size,
+                    height: isText ? 24 : size,
+                    backgroundColor: fill,
+                    borderRadius: isText ? 0 : isGrab ? '6px' : '50%',
+                    transform: `scale(${dotScale})`,
+                    transitionProperty: 'transform',
+                    transitionDuration: `${state.isClicking ? clickAnimationDuration : animationDuration}ms`,
+                    transitionTimingFunction: 'ease-out',
+                    zIndex,
+                    mixBlendMode: blendMode,
+                } }), state.isHovering && !isText && (_jsx(YStack, { ...slot('animated-cursor-ring'), style: {
+                    position: 'absolute',
+                    left: state.position.x - hoverRingSize / 2,
+                    top: state.position.y - hoverRingSize / 2,
+                    width: hoverRingSize,
+                    height: hoverRingSize,
+                    borderRadius: '50%',
+                    borderWidth: 2,
+                    borderStyle: 'solid',
+                    borderColor: fill,
+                    opacity: 0.3,
+                    transitionProperty: 'all',
+                    transitionDuration: `${animationDuration}ms`,
+                    transitionTimingFunction: 'ease-out',
+                    zIndex: zIndex - 1,
+                    mixBlendMode: blendMode,
+                } }))] }));
+}
+//# sourceMappingURL=animated-cursor.js.map

package/dist/backends/gui/animated-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-cursor.js","sourceRoot":"","sources":["../../../src/backends/gui/animated-cursor.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/animated-testimonials.cjs

@@ -0,0 +1,109 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedTestimonials = AnimatedTestimonials;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AnimatedTestimonials — one testimonial at a time in a card, advancing on a
+ * timer and by pressing a dot below it.
+ *
+ * The card holds a real `<blockquote>`: the quote is its `<p>`, the author a
+ * `<cite>` in its `<footer>`, so a reader announces it as a quotation.
+ *
+ * Mount is the animation: each testimonial gets a fresh `key`, so a change
+ * remounts the card and `hz-fade-up` (styles/motion.css) plays. The outgoing
+ * card unmounts with no exit.
+ */
+const gui_1 = require("@hanzo/gui");
+const React = __importStar(require("react"));
+const avatar_1 = require("./avatar.cjs");
+const card_1 = require("./card.cjs");
+const gesture_1 = require("./gesture.cjs");
+const slot_1 = require("./slot.cjs");
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'AnimatedTestimonials',
+    position: 'relative',
+    minH: 200,
+    gap: '$4',
+});
+const Quote = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AnimatedTestimonialsQuote',
+    size: '$5',
+    fontStyle: 'italic',
+});
+/** A `<cite>` is italic by default; the author reads upright under the quote. */
+const Author = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AnimatedTestimonialsAuthor',
+    fontWeight: '500',
+    fontStyle: 'normal',
+});
+const Meta = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'AnimatedTestimonialsMeta',
+    size: '$2',
+    color: '$quiet',
+});
+/** A dot is 8px; `touch()` below meets the 44px floor without growing it. */
+const DOT = 8;
+const Dot = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'AnimatedTestimonialsDot',
+    height: DOT,
+    rounded: 999,
+    bg: '$edge',
+    cursor: 'pointer',
+    variants: {
+        active: {
+            true: { width: DOT * 4, bg: '$ink' },
+            false: { width: DOT, hoverStyle: { bg: '$quiet' } },
+        },
+    },
+    defaultVariants: { active: false },
+});
+function AnimatedTestimonials({ testimonials, autoPlay = true, duration = 5000, ...props }) {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    React.useEffect(() => {
+        if (!autoPlay || testimonials.length < 2)
+            return;
+        const id = setInterval(() => {
+            setActiveIndex((prev) => (prev + 1) % testimonials.length);
+        }, duration);
+        return () => clearInterval(id);
+    }, [autoPlay, duration, testimonials.length]);
+    // One index for the card and the dots, so a list that shrank under the
+    // current one never shows a card with no dot lit.
+    const index = Math.min(activeIndex, testimonials.length - 1);
+    const active = testimonials[index];
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('animated-testimonials'), ...props, children: [active && ((0, jsx_runtime_1.jsx)(card_1.Card, { className: "hz-fade-up", children: (0, jsx_runtime_1.jsx)(card_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { render: "blockquote", gap: "$4", children: [(0, jsx_runtime_1.jsxs)(Quote, { ...(0, slot_1.slot)('animated-testimonials-quote'), render: "p", children: ["\u201C", active.content, "\u201D"] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "footer", items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { children: [(0, jsx_runtime_1.jsx)(avatar_1.AvatarImage, { src: active.avatar }), (0, jsx_runtime_1.jsx)(avatar_1.AvatarFallback, { children: active.author.slice(0, 2).toUpperCase() })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(Author, { ...(0, slot_1.slot)('animated-testimonials-author'), render: "cite", children: active.author }), active.role && ((0, jsx_runtime_1.jsxs)(Meta, { ...(0, slot_1.slot)('animated-testimonials-meta'), render: "p", children: [active.role, active.company && `, ${active.company}`] }))] })] })] }) }) }, active.id)), (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('animated-testimonials-dots'), justify: "center", gap: "$2", children: testimonials.map((t, i) => ((0, jsx_runtime_1.jsx)(Dot, { ...(0, slot_1.slot)('animated-testimonials-dot'), render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), active: i === index, "aria-label": `Go to testimonial ${i + 1}`, "aria-current": i === index, style: { transition: 'width .3s ease, background-color .3s ease' }, onPress: () => setActiveIndex(i), ...(0, gesture_1.touch)(DOT, 44) }, t.id))) })] }));
+}

package/dist/backends/gui/animated-testimonials.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export type Testimonial = {
+    id: string;
+    content: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+};
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type AnimatedTestimonialsProps = Omit<React.ComponentProps<typeof Frame>, 'children'> & {
+    testimonials: Testimonial[];
+    /** Advance on its own. Default true. */
+    autoPlay?: boolean;
+    /** Milliseconds between slides. Default 5000. */
+    duration?: number;
+};
+export declare function AnimatedTestimonials({ testimonials, autoPlay, duration, ...props }: AnimatedTestimonialsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=animated-testimonials.d.ts.map

package/dist/backends/gui/animated-testimonials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-testimonials.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/animated-testimonials.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,KAAK;;;8CAKT,CAAA;AAyCF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7F,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,QAAe,EACf,QAAe,EACf,GAAG,KAAK,EACT,EAAE,yBAAyB,qBAgE3B"}

package/dist/backends/gui/animated-testimonials.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AnimatedTestimonials — one testimonial at a time in a card, advancing on a
+ * timer and by pressing a dot below it.
+ *
+ * The card holds a real `<blockquote>`: the quote is its `<p>`, the author a
+ * `<cite>` in its `<footer>`, so a reader announces it as a quotation.
+ *
+ * Mount is the animation: each testimonial gets a fresh `key`, so a change
+ * remounts the card and `hz-fade-up` (styles/motion.css) plays. The outgoing
+ * card unmounts with no exit.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import * as React from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { Card, CardContent } from './card.js';
+import { touch } from './gesture.js';
+import { slot } from './slot.js';
+const Frame = styled(YStack, {
+    name: 'AnimatedTestimonials',
+    position: 'relative',
+    minH: 200,
+    gap: '$4',
+});
+const Quote = styled(SizableText, {
+    name: 'AnimatedTestimonialsQuote',
+    size: '$5',
+    fontStyle: 'italic',
+});
+/** A `<cite>` is italic by default; the author reads upright under the quote. */
+const Author = styled(SizableText, {
+    name: 'AnimatedTestimonialsAuthor',
+    fontWeight: '500',
+    fontStyle: 'normal',
+});
+const Meta = styled(SizableText, {
+    name: 'AnimatedTestimonialsMeta',
+    size: '$2',
+    color: '$quiet',
+});
+/** A dot is 8px; `touch()` below meets the 44px floor without growing it. */
+const DOT = 8;
+const Dot = styled(YStack, {
+    name: 'AnimatedTestimonialsDot',
+    height: DOT,
+    rounded: 999,
+    bg: '$edge',
+    cursor: 'pointer',
+    variants: {
+        active: {
+            true: { width: DOT * 4, bg: '$ink' },
+            false: { width: DOT, hoverStyle: { bg: '$quiet' } },
+        },
+    },
+    defaultVariants: { active: false },
+});
+export function AnimatedTestimonials({ testimonials, autoPlay = true, duration = 5000, ...props }) {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    React.useEffect(() => {
+        if (!autoPlay || testimonials.length < 2)
+            return;
+        const id = setInterval(() => {
+            setActiveIndex((prev) => (prev + 1) % testimonials.length);
+        }, duration);
+        return () => clearInterval(id);
+    }, [autoPlay, duration, testimonials.length]);
+    // One index for the card and the dots, so a list that shrank under the
+    // current one never shows a card with no dot lit.
+    const index = Math.min(activeIndex, testimonials.length - 1);
+    const active = testimonials[index];
+    return (_jsxs(Frame, { ...slot('animated-testimonials'), ...props, children: [active && (_jsx(Card, { className: "hz-fade-up", children: _jsx(CardContent, { children: _jsxs(YStack, { render: "blockquote", gap: "$4", children: [_jsxs(Quote, { ...slot('animated-testimonials-quote'), render: "p", children: ["\u201C", active.content, "\u201D"] }), _jsxs(XStack, { render: "footer", items: "center", gap: "$4", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: active.avatar }), _jsx(AvatarFallback, { children: active.author.slice(0, 2).toUpperCase() })] }), _jsxs(YStack, { children: [_jsx(Author, { ...slot('animated-testimonials-author'), render: "cite", children: active.author }), active.role && (_jsxs(Meta, { ...slot('animated-testimonials-meta'), render: "p", children: [active.role, active.company && `, ${active.company}`] }))] })] })] }) }) }, active.id)), _jsx(XStack, { ...slot('animated-testimonials-dots'), justify: "center", gap: "$2", children: testimonials.map((t, i) => (_jsx(Dot, { ...slot('animated-testimonials-dot'), render: _jsx("button", { type: "button" }), active: i === index, "aria-label": `Go to testimonial ${i + 1}`, "aria-current": i === index, style: { transition: 'width .3s ease, background-color .3s ease' }, onPress: () => setActiveIndex(i), ...touch(DOT, 44) }, t.id))) })] }));
+}
+//# sourceMappingURL=animated-testimonials.js.map

package/dist/backends/gui/animated-testimonials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-testimonials.js","sourceRoot":"","sources":["../../../src/backends/gui/animated-testimonials.tsx"],"names":[],"mappings":"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"}