plass-ui 0.0.1 → 1.0.0

package/dist/components/animate-marquee/PlAnimateMarquee.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { isInfinite, lengthValue, repeatValue, directionValue, useAnimationRun } from '../../internal/animate.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * Content scrolling steadily past, forever.
+ *
+ * The content is laid down twice, and each copy travels exactly its own length
+ * plus the gap — so the moment the first copy has left, the second is standing
+ * precisely where it began. There is no seam, no jump and no frame where the
+ * strip is empty, and none of that depends on measuring anything.
+ *
+ * What *is* measured is only the speed. A duration would mean a strip of four
+ * logos and a strip of forty crossing the same box in the same time, with the
+ * long one becoming unreadable; `speed` is pixels per second, so both move at
+ * the pace of a reader instead. The strip is re-measured whenever it changes
+ * size.
+ *
+ * `pauseOnHover` is on by default and is not decoration: content moving past a
+ * pointer cannot be clicked reliably, and a link inside a marquee that never
+ * stops is a link nobody can follow.
+ *
+ * Only the first copy is read out. The rest carry `aria-hidden`, or a screen
+ * reader would announce everything on the strip as many times as it was laid
+ * down.
+ */
+export const PlAnimateMarquee = /* @__PURE__ */ React.forwardRef(function PlAnimateMarquee({ duration, delay = 0, easing, repeat = 'infinite', alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, orientation = 'horizontal', reverse = false, speed = 60, gap = '2rem', copies = 2, pauseOnHover = true, className, style, children, ...props }, ref) {
+    const run = useAnimationRun({
+        trigger,
+        play,
+        once,
+        threshold,
+        paused,
+        infinite: isInfinite(repeat)
+    });
+    const boxRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const [travel, setTravel] = React.useState(0);
+    const vertical = orientation === 'vertical';
+    /**
+     * How far one copy has to go, in pixels: its own length plus the gap after
+     * it. The gap is read back off the computed style rather than parsed out of
+     * the prop, because `'2rem'` is only a number once a font size has been
+     * resolved — and the one on the page is the one that matters.
+     */
+    React.useEffect(() => {
+        const box = boxRef.current;
+        const track = trackRef.current;
+        if (!box || !track) {
+            return;
+        }
+        const measure = () => {
+            const styles = getComputedStyle(box);
+            const gapPx = parseFloat(vertical ? styles.rowGap : styles.columnGap) || 0;
+            const size = vertical ? track.offsetHeight : track.offsetWidth;
+            setTravel(size + gapPx);
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(track);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [vertical, children]);
+    // An explicit duration wins; otherwise the measurement decides, and until the
+    // first measurement lands there is a sane number rather than `0ms`, which
+    // browsers read as "finish immediately".
+    const runDuration = duration ?? (travel > 0 ? (travel / speed) * 1000 : 12000);
+    const track = (index) => (_jsx("div", { ref: index === 0 ? trackRef : undefined, className: "plass-marquee-track", "aria-hidden": index === 0 ? undefined : 'true', children: children }, index));
+    return (_jsx("div", { ref: (node) => {
+            boxRef.current = node;
+            run.ref(node);
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cx('plass-marquee', vertical && 'plass-marquee-vertical', className), style: {
+            '--p-anim-gap': lengthValue(gap),
+            // Linear unless a caller insists otherwise: an eased marquee slows at
+            // both ends of a loop that has no ends, which reads as the page
+            // stuttering.
+            ...(easing ? { '--p-anim-ease': easing } : {}),
+            '--p-anim-duration': `${Math.round(runDuration)}ms`,
+            '--p-anim-delay': `${delay}ms`,
+            '--p-anim-repeat': repeatValue(repeat),
+            '--p-anim-direction': directionValue(reverse ? 'out' : 'in', alternate),
+            '--p-anim-state': run.state,
+            ...style
+        }, "data-plass-animation": "marquee", "data-state": run.state, "data-pause-on-hover": pauseOnHover ? '' : undefined, ...run.handlers, ...props, children: Array.from({ length: Math.max(1, copies) }, (_, index) => track(index)) }));
+});

package/dist/components/animate-marquee/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateMarquee } from './PlAnimateMarquee.js';
+export type { PlAnimateMarqueeProps } from './PlAnimateMarquee.js';

package/dist/components/animate-marquee/index.js

@@ -0,0 +1 @@
+export { PlAnimateMarquee } from './PlAnimateMarquee.js';

package/dist/components/animate-rotate/PlAnimateRotate.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
+export interface PlAnimateRotateProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content turns into place or out of it.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The angle it starts at, in degrees. Negative is anticlockwise.
+     * @default -180
+     */
+    from?: number;
+    /**
+     * The angle it ends at, in degrees. Together with `from` this is what makes
+     * one component cover both a quarter turn into place and an endless spin:
+     * `from={0} to={360} repeat="infinite"`.
+     * @default 0
+     */
+    to?: number;
+    /**
+     * Which point it turns about — any CSS `transform-origin`.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it turns. Turn it off for a continuous spin, where a repeating
+     * fade would read as flickering.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content turning about a point.
+ *
+ * Two angles rather than one, which is what lets this be both effects a
+ * rotation is ever used for. `from` alone is an arrival — something swinging
+ * into place and stopping. `from` and `to` together with `repeat="infinite"`
+ * and `easing="linear"` is a spin that never lands, which is what a badge, a
+ * loading mark or a decorative glyph wants.
+ *
+ * Rotation is the one movement the design language allows on a glyph without
+ * argument — a chevron is turned rather than redrawn all over the library. What
+ * it is not for is text: a rotated word is resampled along its whole length,
+ * which is precisely what the rule against transforming a control exists to
+ * prevent.
+ */
+export declare const PlAnimateRotate: React.ForwardRefExoticComponent<PlAnimateRotateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-rotate/PlAnimateRotate.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { isInfinite, useAnimateElement } from '../../internal/animate.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * Content turning about a point.
+ *
+ * Two angles rather than one, which is what lets this be both effects a
+ * rotation is ever used for. `from` alone is an arrival — something swinging
+ * into place and stopping. `from` and `to` together with `repeat="infinite"`
+ * and `easing="linear"` is a spin that never lands, which is what a badge, a
+ * loading mark or a decorative glyph wants.
+ *
+ * Rotation is the one movement the design language allows on a glyph without
+ * argument — a chevron is turned rather than redrawn all over the library. What
+ * it is not for is text: a rotated word is resampled along its whole length,
+ * which is precisely what the rule against transforming a control exists to
+ * prevent.
+ */
+export const PlAnimateRotate = /* @__PURE__ */ React.forwardRef(function PlAnimateRotate({ duration = 440, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = -180, to = 0, origin = 'center', fade = true, render, className, style, children, ...props }, ref) {
+    const animate = useAnimateElement({
+        effect: 'rotate',
+        duration,
+        delay,
+        easing,
+        repeat,
+        alternate,
+        mode,
+        angle: `${from}deg`,
+        angleTo: `${to}deg`,
+        opacity: fade ? 0 : 1,
+        trigger,
+        play,
+        once,
+        threshold,
+        paused,
+        infinite: isInfinite(repeat)
+    });
+    return useRender({
+        render,
+        ref: [ref, animate.ref],
+        props: {
+            ...props,
+            className: cx(animate.className, className),
+            style: { transformOrigin: origin, ...animate.style, ...style },
+            ...animate.props,
+            children
+        }
+    });
+});

package/dist/components/animate-rotate/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateRotate } from './PlAnimateRotate.js';
+export type { PlAnimateRotateProps } from './PlAnimateRotate.js';

package/dist/components/animate-rotate/index.js

@@ -0,0 +1 @@
+export { PlAnimateRotate } from './PlAnimateRotate.js';

package/dist/components/animate-slide/PlAnimateSlide.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps, PlassSide } from '../../types.js';
+export interface PlAnimateSlideProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content slides in or slides away. `out` leaves by the same edge
+     * it would have come from.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * Which edge it travels from. Physical, as `PlassSide` is everywhere — a
+     * panel coming down from the top comes from the top in every writing
+     * direction.
+     * @default 'bottom'
+     */
+    from?: PlassSide;
+    /**
+     * How far it travels — a CSS length, or a number in pixels. `'100%'` is the
+     * element's own width or height, which is what makes it appear from behind
+     * its own edge.
+     * @default '100%'
+     */
+    distance?: number | string;
+    /**
+     * Fades in as it slides.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content travelling in from one edge.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and arrives without ever having been half drawn somewhere it does not
+ * belong. Put it in a box with `overflow: hidden` and the effect is a panel
+ * appearing from behind that box's edge.
+ *
+ * A slide moves the element, so what is *around* it does not move: this is a
+ * `translate` rather than a change of layout, and nothing on the page reflows
+ * while it runs. For a much shorter travel over a list of things, one after
+ * another, use PlAnimateAppear.
+ */
+export declare const PlAnimateSlide: React.ForwardRefExoticComponent<PlAnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-slide/PlAnimateSlide.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { isInfinite, slideOffsets, useAnimateElement } from '../../internal/animate.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * Content travelling in from one edge.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and arrives without ever having been half drawn somewhere it does not
+ * belong. Put it in a box with `overflow: hidden` and the effect is a panel
+ * appearing from behind that box's edge.
+ *
+ * A slide moves the element, so what is *around* it does not move: this is a
+ * `translate` rather than a change of layout, and nothing on the page reflows
+ * while it runs. For a much shorter travel over a list of things, one after
+ * another, use PlAnimateAppear.
+ */
+export const PlAnimateSlide = /* @__PURE__ */ React.forwardRef(function PlAnimateSlide({ duration = 360, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 'bottom', distance = '100%', fade = true, render, className, style, children, ...props }, ref) {
+    const { x, y } = slideOffsets(from, distance);
+    const animate = useAnimateElement({
+        effect: 'slide',
+        duration,
+        delay,
+        easing,
+        repeat,
+        alternate,
+        mode,
+        x,
+        y,
+        opacity: fade ? 0 : 1,
+        trigger,
+        play,
+        once,
+        threshold,
+        paused,
+        infinite: isInfinite(repeat)
+    });
+    return useRender({
+        render,
+        ref: [ref, animate.ref],
+        props: {
+            ...props,
+            className: cx(animate.className, className),
+            style: { ...animate.style, ...style },
+            ...animate.props,
+            children
+        }
+    });
+});

package/dist/components/animate-slide/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateSlide } from './PlAnimateSlide.js';
+export type { PlAnimateSlideProps } from './PlAnimateSlide.js';

package/dist/components/animate-slide/index.js

@@ -0,0 +1 @@
+export { PlAnimateSlide } from './PlAnimateSlide.js';

package/dist/components/animate-typing/PlAnimateTyping.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateTypingProps extends Omit<PlassAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * How fast it is typed, in characters per second.
+     * @default 24
+     */
+    speed?: number;
+    /**
+     * How long the finished text is held before it repeats, in milliseconds.
+     * @default 1400
+     */
+    hold?: number;
+    /**
+     * Deletes the text again before repeating, rather than clearing it in one
+     * frame. Only means anything when `repeat` is more than once.
+     * @default false
+     */
+    erase?: boolean;
+    /**
+     * How fast it is deleted, in characters per second. Deleting is usually about
+     * twice as fast as typing, which is what a person actually does.
+     * @default twice `speed`
+     */
+    eraseSpeed?: number;
+    /**
+     * The block after the text.
+     * @default true
+     */
+    caret?: boolean;
+    /** What the caret is drawn as. @default '|' */
+    caretChar?: React.ReactNode;
+    /** The text to type. Only text is typed — see below. */
+    children?: React.ReactNode;
+}
+/**
+ * Text appearing one character at a time.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. So
+ * the effect costs a reader who cannot see it nothing, and costs a reader who
+ * can nothing either: the box is not laid out from the characters that have
+ * arrived, so the text around it does not reflow on every frame.
+ *
+ * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
+ * type again. Without `erase` a repeat clears in one frame, which is right for
+ * a line that is being replaced rather than rewritten.
+ *
+ * Only text is typed. Pass a string, or strings; an element among the children
+ * contributes its text and nothing about its markup, because there is no honest
+ * way to reveal half of a link.
+ */
+export declare const PlAnimateTyping: React.ForwardRefExoticComponent<PlAnimateTypingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-typing/PlAnimateTyping.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { isInfinite, useAnimationRun, usePrefersReducedMotion } from '../../internal/animate.js';
+import { srOnlyClasses } from '../../internal/styles.js';
+/**
+ * Everything typeable in a node, flattened.
+ *
+ * Elements are deliberately not walked into. A typewriter reveals a string one
+ * grapheme at a time, and there is no honest way to reveal half of a `<strong>`
+ * — the effect is over text, so its input is text.
+ */
+function textOf(node) {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(textOf).join('');
+    }
+    return '';
+}
+/**
+ * The text split the way a reader would split it.
+ *
+ * Not `[...text]`, and not `text.split('')`. A code point is not a character:
+ * `👩‍👩‍👧` is seven of them, `한` typed on a Korean keyboard can be three, and a
+ * typewriter that advances by code points spends four frames assembling an
+ * emoji out of parts that mean nothing on their own. `Intl.Segmenter` knows
+ * where the boundaries actually are; the spread is the fallback for a runtime
+ * that does not have it.
+ */
+function graphemesOf(text, locale) {
+    if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+        const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
+        return [...segmenter.segment(text)].map((segment) => segment.segment);
+    }
+    return [...text];
+}
+/**
+ * Text appearing one character at a time.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. So
+ * the effect costs a reader who cannot see it nothing, and costs a reader who
+ * can nothing either: the box is not laid out from the characters that have
+ * arrived, so the text around it does not reflow on every frame.
+ *
+ * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
+ * type again. Without `erase` a repeat clears in one frame, which is right for
+ * a line that is being replaced rather than rewritten.
+ *
+ * Only text is typed. Pass a string, or strings; an element among the children
+ * contributes its text and nothing about its markup, because there is no honest
+ * way to reveal half of a link.
+ */
+export const PlAnimateTyping = /* @__PURE__ */ React.forwardRef(function PlAnimateTyping({ text, speed = 24, hold = 1400, erase = false, eraseSpeed, caret = true, caretChar = '|', duration, delay = 0, repeat = 1, paused, trigger = 'mount', play, once = true, threshold = 0.2, className, style, children, ...props }, ref) {
+    const run = useAnimationRun({
+        trigger,
+        play,
+        once,
+        threshold,
+        paused,
+        infinite: isInfinite(repeat)
+    });
+    const reduced = usePrefersReducedMotion();
+    const source = text ?? textOf(children);
+    const graphemes = React.useMemo(() => graphemesOf(source), [source]);
+    const total = graphemes.length;
+    const [shown, setShown] = React.useState(0);
+    /**
+     * How far along it is, outside React's state.
+     *
+     * The typing loop is a chain of timeouts rather than a render, so pausing
+     * tears it down and resuming builds a new one — and a new one has to know
+     * where the old one stopped. Reading `shown` would put the effect in a loop
+     * with its own output.
+     */
+    const progress = React.useRef(0);
+    /**
+     * `duration` is honoured as the time for the whole string, because a caller
+     * who has set a duration on every other PlAnimate component will reach for it
+     * here too. `speed` is the natural unit for a typewriter — a long paragraph
+     * and a short one should be typed at the same pace, not in the same time — so
+     * it is the default and the duration overrides it.
+     */
+    const typeDelay = duration && total > 0 ? duration / total : 1000 / Math.max(speed, 1);
+    const deleteDelay = 1000 / Math.max(eraseSpeed ?? speed * 2, 1);
+    // A new string starts a new performance rather than continuing the last.
+    React.useEffect(() => {
+        progress.current = 0;
+    }, [total]);
+    React.useEffect(() => {
+        if (reduced || total === 0) {
+            // Not "nothing happens" — the text is simply there, which is the only
+            // outcome that still delivers what the component was carrying.
+            setShown(total);
+            return;
+        }
+        if (!run.started) {
+            // Waiting is empty, not finished: a typewriter that showed its whole
+            // string until it scrolled into view and then blanked would be worse than
+            // no effect at all.
+            progress.current = 0;
+            setShown(0);
+            return;
+        }
+        if (paused) {
+            return;
+        }
+        let cancelled = false;
+        let timer;
+        let count = progress.current;
+        let pass = 1;
+        let deleting = false;
+        const passes = repeat === 'infinite' ? Infinity : Math.max(1, repeat);
+        if (count >= total && passes === 1) {
+            return;
+        }
+        const step = () => {
+            if (cancelled) {
+                return;
+            }
+            if (deleting) {
+                count -= 1;
+                progress.current = count;
+                setShown(count);
+                if (count <= 0) {
+                    deleting = false;
+                    pass += 1;
+                }
+                timer = setTimeout(step, deleting ? deleteDelay : typeDelay);
+                return;
+            }
+            count += 1;
+            progress.current = count;
+            setShown(count);
+            if (count < total) {
+                timer = setTimeout(step, typeDelay);
+                return;
+            }
+            if (pass >= passes) {
+                return;
+            }
+            if (erase) {
+                deleting = true;
+                timer = setTimeout(step, hold);
+                return;
+            }
+            pass += 1;
+            timer = setTimeout(() => {
+                if (cancelled) {
+                    return;
+                }
+                count = 0;
+                progress.current = 0;
+                setShown(0);
+                timer = setTimeout(step, typeDelay);
+            }, hold);
+        };
+        setShown(count);
+        // Resuming picks up at the next character; starting waits out the delay.
+        timer = setTimeout(step, count === 0 ? delay : typeDelay);
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [run.started, paused, reduced, total, typeDelay, deleteDelay, delay, hold, erase, repeat]);
+    return (_jsxs("div", { ref: (node) => {
+            run.ref(node);
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: className, style: style, "data-plass-animation": "typing", "data-state": run.state, ...run.handlers, ...props, children: [_jsx("span", { className: srOnlyClasses, children: source }), _jsxs("span", { "aria-hidden": "true", className: "whitespace-pre-wrap", children: [graphemes.slice(0, shown).join(''), caret ? _jsx("span", { className: "plass-caret", children: caretChar }) : null] })] }));
+});

package/dist/components/animate-typing/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateTyping } from './PlAnimateTyping.js';
+export type { PlAnimateTypingProps } from './PlAnimateTyping.js';

package/dist/components/animate-typing/index.js

@@ -0,0 +1 @@
+export { PlAnimateTyping } from './PlAnimateTyping.js';

package/dist/components/animate-zoom/PlAnimateZoom.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
+export interface PlAnimateZoomProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content comes forward or falls away.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * arrives oversized and settles back, which reads as coming *towards* the
+     * reader rather than up out of the page.
+     * @default 0.4
+     */
+    from?: number;
+    /**
+     * Fades in as it zooms.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving from the middle of where it will end up.
+ *
+ * The same arithmetic as Grow at more than twice the distance, and always about
+ * the centre — which is the whole difference. A Grow unfolds from somewhere; a
+ * Zoom comes at you. Use it for the one thing on a screen that is meant to
+ * interrupt: a confirmation, a result, a number that has just landed.
+ *
+ * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
+ * the library does not offer two spellings of one idea.
+ */
+export declare const PlAnimateZoom: React.ForwardRefExoticComponent<PlAnimateZoomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-zoom/PlAnimateZoom.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { isInfinite, useAnimateElement } from '../../internal/animate.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * Content arriving from the middle of where it will end up.
+ *
+ * The same arithmetic as Grow at more than twice the distance, and always about
+ * the centre — which is the whole difference. A Grow unfolds from somewhere; a
+ * Zoom comes at you. Use it for the one thing on a screen that is meant to
+ * interrupt: a confirmation, a result, a number that has just landed.
+ *
+ * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
+ * the library does not offer two spellings of one idea.
+ */
+export const PlAnimateZoom = /* @__PURE__ */ React.forwardRef(function PlAnimateZoom({ duration = 320, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 0.4, fade = true, render, className, style, children, ...props }, ref) {
+    const animate = useAnimateElement({
+        effect: 'zoom',
+        duration,
+        delay,
+        easing,
+        repeat,
+        alternate,
+        mode,
+        scale: from,
+        opacity: fade ? 0 : 1,
+        trigger,
+        play,
+        once,
+        threshold,
+        paused,
+        infinite: isInfinite(repeat)
+    });
+    return useRender({
+        render,
+        ref: [ref, animate.ref],
+        props: {
+            ...props,
+            className: cx(animate.className, className),
+            style: { transformOrigin: 'center', ...animate.style, ...style },
+            ...animate.props,
+            children
+        }
+    });
+});

package/dist/components/animate-zoom/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateZoom } from './PlAnimateZoom.js';
+export type { PlAnimateZoomProps } from './PlAnimateZoom.js';

package/dist/components/animate-zoom/index.js

@@ -0,0 +1 @@
+export { PlAnimateZoom } from './PlAnimateZoom.js';