plass-ui 1.0.0 → 1.0.2

package/dist/components/animate-grow/PlAnimateGrow.js

@@ -1,49 +1 @@
-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 unfolding from a point.
- *
- * The difference from Zoom is `origin` and how far it travels: a Grow starts
- * close to its final size and can be anchored to an edge, so it reads as
- * something opening out of the thing beside it — a panel out of a toolbar, a
- * card out of the row it belongs to. A Zoom starts much smaller and always from
- * the middle.
- *
- * Short travel is what makes it safe on glass. A sheet growing from 0.8 stays
- * recognisably the same sheet the whole way, and the blur behind it never has
- * to resolve a surface that is a fifth of the size it is about to be.
- */
-export const PlAnimateGrow = /* @__PURE__ */ React.forwardRef(function PlAnimateGrow({ duration = 320, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 0.8, origin = 'center', fade = true, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'grow',
-        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),
-            // `transform-origin` governs the standalone `scale` property too, which
-            // is what lets the effect stay off the `transform` shorthand entirely.
-            style: { transformOrigin: origin, ...animate.style, ...style },
-            ...animate.props,
-            children
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateGrow=/* @__PURE__ */e.forwardRef(function PlAnimateGrow({duration:e=320,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:g=.8,origin:y="center",fade:h=!0,render:w,className:N,style:j,children:A,...G},P){const b=a({effect:"grow",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:u,scale:g,opacity:h?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(s)});return r({render:w,ref:[P,b.ref],props:{...G,className:n(b.className,N),style:{transformOrigin:y,...b.style,...j},...b.props,children:A}})});

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

@@ -1 +1 @@
-export { PlAnimateGrow } from './PlAnimateGrow.js';
+export{PlAnimateGrow}from"./PlAnimateGrow.js";

package/dist/components/animate-headline/PlAnimateHeadline.js

@@ -1,120 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { isInfinite, lengthValue, useAnimationRun, usePrefersReducedMotion } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * One line replacing the one above it, on a timer.
- *
- * Every line sits in the same grid cell, so the box is as tall as the longest of
- * them from the first frame and never resizes as the reel turns — which is the
- * whole difficulty with this effect, and the reason the lines that are not
- * showing keep their space with `visibility` rather than being taken out of the
- * layout.
- *
- * It is deliberately not a ticker. A line comes up, it stops, and it is held
- * long enough to read; `interval` is counted from the moment it arrives rather
- * than from the start of the cycle, so raising `duration` does not quietly eat
- * the reading time.
- *
- * Use it for a set of phrases where any one of them would have done — three
- * ways of saying what a product is, a rotating set of customer names. What it is
- * not for is content a reader has to see, because there is no guarantee they are
- * looking during the two seconds it is up, and a screen reader is given the line
- * that happens to be showing rather than the set.
- */
-export const PlAnimateHeadline = /* @__PURE__ */ React.forwardRef(function PlAnimateHeadline({ duration = 460, delay = 0, easing, repeat = 'infinite', paused, trigger = 'mount', play, once = true, threshold = 0.2, interval = 2600, index, defaultIndex = 0, onIndexChange, loop = true, rise = '100%', className, style, children, ...props }, ref) {
-    const run = useAnimationRun({
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    const reduced = usePrefersReducedMotion();
-    const items = React.Children.toArray(children);
-    const count = items.length;
-    const [uncontrolled, setUncontrolled] = React.useState(defaultIndex);
-    const active = Math.min(index ?? uncontrolled, Math.max(count - 1, 0));
-    /** The line on its way out. Cleared once its animation has had its time. */
-    const [leaving, setLeaving] = React.useState(null);
-    const previous = React.useRef(active);
-    React.useEffect(() => {
-        if (previous.current !== active) {
-            setLeaving(previous.current);
-            previous.current = active;
-        }
-    }, [active]);
-    React.useEffect(() => {
-        if (leaving === null) {
-            return;
-        }
-        const timer = setTimeout(() => setLeaving(null), duration);
-        return () => clearTimeout(timer);
-    }, [leaving, duration]);
-    const advance = React.useCallback(() => {
-        const next = active + 1;
-        if (next >= count) {
-            if (!loop) {
-                return;
-            }
-            if (index === undefined) {
-                setUncontrolled(0);
-            }
-            onIndexChange?.(0);
-            return;
-        }
-        if (index === undefined) {
-            setUncontrolled(next);
-        }
-        onIndexChange?.(next);
-    }, [active, count, loop, index, onIndexChange]);
-    /**
-     * The reel only turns on its own when it was not handed an `index`. A
-     * controlled Headline is somebody else's timer, and a second one running
-     * underneath it would fight for the same state.
-     */
-    const turned = React.useRef(false);
-    React.useEffect(() => {
-        if (index !== undefined || count < 2 || run.state !== 'running') {
-            return;
-        }
-        if (!loop && active === count - 1) {
-            return;
-        }
-        // `delay` is what happens before the reel starts turning at all, so it is
-        // added once rather than to every line — which is what an `interval` is.
-        const timer = setTimeout(() => {
-            turned.current = true;
-            advance();
-        }, interval + (turned.current ? 0 : delay));
-        return () => clearTimeout(timer);
-    }, [index, count, run.state, interval, delay, advance, loop, active]);
-    return (_jsx("div", { ref: (node) => {
-            run.ref(node);
-            if (typeof ref === 'function') {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, className: cx('plass-headline', className), style: {
-            '--p-anim-duration': `${duration}ms`,
-            '--p-anim-rise': lengthValue(rise),
-            ...(easing ? { '--p-anim-ease': easing } : {}),
-            '--p-anim-state': run.state,
-            ...style
-        }, "data-plass-animation": "headline", "data-state": run.state, ...run.handlers, ...props, children: items.map((child, position) => {
-            const state = position === active ? 'active' : position === leaving && !reduced ? 'leaving' : undefined;
-            const wrap = (content, key) => (_jsx("span", { className: "plass-headline-item", "data-state": state, children: content }, key));
-            if (!React.isValidElement(child)) {
-                return wrap(child, position);
-            }
-            const childProps = child.props;
-            return React.cloneElement(child, {
-                key: position,
-                className: cx('plass-headline-item', childProps.className),
-                'data-state': state
-            });
-        }) }));
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as n,lengthValue as a,useAnimationRun as r,usePrefersReducedMotion as i}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateHeadline=/* @__PURE__ */t.forwardRef(function PlAnimateHeadline({duration:l=460,delay:o=0,easing:u,repeat:c="infinite",paused:m,trigger:d="mount",play:f,once:p=!0,threshold:h=.2,interval:g=2600,index:v,defaultIndex:y=0,onIndexChange:x,loop:E=!0,rise:N="100%",className:j,style:T,children:A,...C},R){const k=r({trigger:d,play:f,once:p,threshold:h,paused:m,infinite:n(c)}),H=i(),I=t.Children.toArray(A),M=I.length,[P,S]=t.useState(y),b=Math.min(v??P,Math.max(M-1,0)),[w,V]=t.useState(null),$=t.useRef(b);t.useEffect(()=>{$.current!==b&&(V($.current),$.current=b)},[b]),t.useEffect(()=>{if(null===w)return;const e=setTimeout(()=>V(null),l);return()=>clearTimeout(e)},[w,l]);const q=t.useCallback(()=>{const e=b+1;if(e>=M){if(!E)return;return void 0===v&&S(0),void x?.(0)}void 0===v&&S(e),x?.(e)},[b,M,E,v,x]),z=t.useRef(!1);return t.useEffect(()=>{if(void 0!==v||M<2||"running"!==k.state)return;if(!E&&b===M-1)return;const e=setTimeout(()=>{z.current=!0,q()},g+(z.current?0:o));return()=>clearTimeout(e)},[v,M,k.state,g,o,q,E,b]),e("div",{ref:e=>{k.ref(e),"function"==typeof R?R(e):R&&(R.current=e)},className:s("plass-headline",j),style:{"--p-anim-duration":`${l}ms`,"--p-anim-rise":a(N),...u?{"--p-anim-ease":u}:{},"--p-anim-state":k.state,...T},"data-plass-animation":"headline","data-state":k.state,...k.handlers,...C,children:I.map((n,a)=>{const r=a===b?"active":a!==w||H?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"plass-headline-item","data-state":r,children:n},a);const i=n.props;return t.cloneElement(n,{key:a,className:s("plass-headline-item",i.className),"data-state":r})})})});

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

@@ -1 +1 @@
-export { PlAnimateHeadline } from './PlAnimateHeadline.js';
+export{PlAnimateHeadline}from"./PlAnimateHeadline.js";

package/dist/components/animate-lighting/PlAnimateLighting.js

@@ -1,65 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { isInfinite, useAnimateElement } from '../../internal/animate.js';
-import { cx, radiusClasses } from '../../internal/styles.js';
-/**
- * A light travelling around the outside of something.
- *
- * The light is **behind** the content rather than on it, so what a reader sees
- * is a glow escaping from under the edges — which is why it works on a PlCard
- * or a PlButton without touching anything about how they are drawn. Nothing
- * inside is altered, nothing is overlaid, and the content stays exactly as
- * legible as it was.
- *
- * The arc itself is a gradient that turns between the two ends of the family,
- * which is the same rule every filled surface in the library follows: a flat
- * coloured arc would be paint, and nothing here is paint.
- *
- * Use it to mark the one thing on a screen that is currently live — the row
- * that is processing, the field being checked, the plan being recommended. It
- * draws attention with light rather than by moving anything, which is the only
- * way this library has of saying "here" without also saying "and it moved".
- *
- * `size` has to agree with the radius of what is inside it. The glow follows
- * the wrapper's own corners, so an `lg` card in an `xs` Lighting will show light
- * poking out of four corners the card has already rounded away.
- */
-export const PlAnimateLighting = /* @__PURE__ */ React.forwardRef(function PlAnimateLighting({ duration = 3000, delay = 0, easing, repeat = 'infinite', alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, color = 'primary', glow, size = 'md', spread = 3, arc = 50, blur = 5, reverse = false, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        // The keyframe runs on a pseudo-element rather than on the root, so there
-        // is no effect class to apply here — only the slots it reads.
-        effect: null,
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        mode: reverse ? 'out' : 'in',
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    return useRender({
-        render,
-        ref: [ref, animate.ref],
-        props: {
-            ...props,
-            className: cx('plass-anim-lighting', radiusClasses[size], className),
-            style: {
-                ...animate.style,
-                '--p-anim-glow-from': glow ?? `var(--plass-${color}-solid)`,
-                '--p-anim-glow-to': glow ?? `var(--plass-${color}-solid-to)`,
-                '--p-anim-glow-width': `${spread}px`,
-                '--p-anim-glow-arc': `${arc}deg`,
-                '--p-anim-glow-blur': `${blur}px`,
-                ...style
-            },
-            ...animate.props,
-            'data-plass-animation': 'lighting',
-            children
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as i}from"../../internal/animate.js";import{cx as t,radiusClasses as n}from"../../internal/styles.js";export const PlAnimateLighting=/* @__PURE__ */e.forwardRef(function PlAnimateLighting({duration:e=3e3,delay:l=0,easing:o,repeat:s="infinite",alternate:p,paused:m,trigger:d="mount",play:g,once:c=!0,threshold:f=.2,color:u="primary",glow:h,size:y="md",spread:w=3,arc:$=50,blur:b=5,reverse:v=!1,render:x,className:j,style:A,children:L,...N},P){const z=i({effect:null,duration:e,delay:l,easing:o,repeat:s,alternate:p,mode:v?"out":"in",trigger:d,play:g,once:c,threshold:f,paused:m,infinite:a(s)});return r({render:x,ref:[P,z.ref],props:{...N,className:t("plass-anim-lighting",n[y],j),style:{...z.style,"--p-anim-glow-from":h??`var(--plass-${u}-solid)`,"--p-anim-glow-to":h??`var(--plass-${u}-solid-to)`,"--p-anim-glow-width":`${w}px`,"--p-anim-glow-arc":`${$}deg`,"--p-anim-glow-blur":`${b}px`,...A},...z.props,"data-plass-animation":"lighting",children:L}})});

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

@@ -1 +1 @@
-export { PlAnimateLighting } from './PlAnimateLighting.js';
+export{PlAnimateLighting}from"./PlAnimateLighting.js";

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

@@ -1,94 +1 @@
-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)) }));
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as a,lengthValue as r,repeatValue as n,directionValue as s,useAnimationRun as i}from"../../internal/animate.js";import{cx as o}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:l,delay:u=0,easing:m,repeat:p="infinite",alternate:c,paused:d,trigger:f="mount",play:h,once:v=!0,threshold:y=.2,orientation:g="horizontal",reverse:q=!1,speed:R=60,gap:b="2rem",copies:j=2,pauseOnHover:x=!0,className:M,style:w,children:z,...A},N){const O=i({trigger:f,play:h,once:v,threshold:y,paused:d,infinite:a(p)}),G=t.useRef(null),H=t.useRef(null),[P,S]=t.useState(0),$="vertical"===g;t.useEffect(()=>{const e=G.current,t=H.current;if(!e||!t)return;const measure=()=>{const a=getComputedStyle(e),r=parseFloat($?a.rowGap:a.columnGap)||0,n=$?t.offsetHeight:t.offsetWidth;S(n+r)};if(measure(),"undefined"==typeof ResizeObserver)return;const a=new ResizeObserver(measure);return a.observe(t),a.observe(e),()=>a.disconnect()},[$,z]);const k=l??(P>0?P/R*1e3:12e3);return e("div",{ref:e=>{G.current=e,O.ref(e),"function"==typeof N?N(e):N&&(N.current=e)},className:o("plass-marquee",$&&"plass-marquee-vertical",M),style:{"--p-anim-gap":r(b),...m?{"--p-anim-ease":m}:{},"--p-anim-duration":`${Math.round(k)}ms`,"--p-anim-delay":`${u}ms`,"--p-anim-repeat":n(p),"--p-anim-direction":s(q?"out":"in",c),"--p-anim-state":O.state,...w},"data-plass-animation":"marquee","data-state":O.state,"data-pause-on-hover":x?"":void 0,...O.handlers,...A,children:Array.from({length:Math.max(1,j)},(t,a)=>(t=>e("div",{ref:0===t?H:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",children:z},t))(a))})});

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

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

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

@@ -1,50 +1 @@
-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
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateRotate=/* @__PURE__ */e.forwardRef(function PlAnimateRotate({duration:e=440,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:g="in",from:u=-180,to:y=0,origin:h="center",fade:N=!0,render:R,className:j,style:A,children:P,...$},b){const w=a({effect:"rotate",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:g,angle:`${u}deg`,angleTo:`${y}deg`,opacity:N?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:R,ref:[b,w.ref],props:{...$,className:n(w.className,j),style:{transformOrigin:h,...w.style,...A},...w.props,children:P}})});

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

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

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

@@ -1,49 +1 @@
-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
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateSlide=/* @__PURE__ */e.forwardRef(function PlAnimateSlide({duration:e=360,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:j,children:A,...P},S){const{x:w,y:R}=a(g,h),k=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:u,x:w,y:R,opacity:x?0:1,trigger:c,play:p,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[S,k.ref],props:{...P,className:i(k.className,b),style:{...k.style,...j},...k.props,children:A}})});

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

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

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

@@ -1,177 +1 @@
-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] })] }));
-});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a,usePrefersReducedMotion as i}from"../../internal/animate.js";import{srOnlyClasses as s}from"../../internal/styles.js";function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):""}export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:o,speed:u=24,hold:m=1400,erase:c=!1,eraseSpeed:l,caret:f=!0,caretChar:p="|",duration:d,delay:h=0,repeat:g=1,paused:y,trigger:x="mount",play:T,once:j=!0,threshold:v=.2,className:N,style:S,children:w,...A},M){const O=a({trigger:x,play:T,once:j,threshold:v,paused:y,infinite:n(g)}),I=i(),E=o??textOf(w),P=r.useMemo(()=>function graphemesOf(e,t){return"undefined"!=typeof Intl&&"Segmenter"in Intl?[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment):[...e]}(E),[E]),R=P.length,[b,C]=r.useState(0),k=r.useRef(0),q=d&&R>0?d/R:1e3/Math.max(u,1),z=1e3/Math.max(l??2*u,1);return r.useEffect(()=>{k.current=0},[R]),r.useEffect(()=>{if(I||0===R)return void C(R);if(!O.started)return k.current=0,void C(0);if(y)return;let e,t=!1,r=k.current,n=1,a=!1;const i="infinite"===g?1/0:Math.max(1,g);if(r>=R&&1===i)return;const step=()=>{if(!t){if(a)return r-=1,k.current=r,C(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(step,a?z:q));if(r+=1,k.current=r,C(r),r<R)e=setTimeout(step,q);else if(!(n>=i)){if(c)return a=!0,void(e=setTimeout(step,m));n+=1,e=setTimeout(()=>{t||(r=0,k.current=0,C(0),e=setTimeout(step,q))},m)}}};return C(r),e=setTimeout(step,0===r?h:q),()=>{t=!0,clearTimeout(e)}},[O.started,y,I,R,q,z,h,m,c,g]),t("div",{ref:e=>{O.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:N,style:S,"data-plass-animation":"typing","data-state":O.state,...O.handlers,...A,children:[e("span",{className:s,children:E}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[P.slice(0,b).join(""),f?e("span",{className:"plass-caret",children:p}):null]})]})});