plass-ui 1.0.0 → 1.0.1

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

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

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

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

@@ -1,45 +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 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
-        }
-    });
-});
+"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 PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:j,children:A,...P},Z){const b=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[Z,b.ref],props:{...P,className:n(b.className,N),style:{transformOrigin:"center",...b.style,...j},...b.props,children:A}})});

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

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

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1,58 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, radiusClasses } from '../../internal/styles.js';
-/**
- * The media a `fit` reaches, stretched to the box first.
- *
- * Written out one selector at a time rather than as a comma list, because
- * Tailwind only ever sees class names that appear literally in the source and a
- * grouped arbitrary variant is one string it has to parse rather than match.
- *
- * `iframe` takes the sizing and not the fit: an embed lays its own content out
- * and `object-fit` has nothing to act on.
- */
-const stretchClasses = /* @__PURE__ */ [
-    '[&>img]:size-full',
-    '[&>video]:size-full',
-    '[&>canvas]:size-full',
-    '[&>svg]:size-full',
-    '[&>iframe]:size-full',
-    '[&>picture]:size-full',
-    '[&>picture>img]:size-full'
-].join(' ');
-const fitClasses = {
-    cover: '[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover',
-    contain: '[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain',
-    fill: '[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill',
-    none: '[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none'
-};
-/**
- * A box that keeps a proportion whatever width it is given.
- *
- * It draws nothing — no sheet, no hairline, no shadow — which is what puts it
- * in `layout` beside `PlContainer` and `PlGrid` rather than in `surfaces`. What
- * it does is reserve the space: a card whose image arrives late does not reflow
- * the page around it, and a row of thumbnails is a row of one shape.
- *
- * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
- * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
- * media inside is stretched to the box and then fitted, which is the pair of
- * declarations every use of this component would otherwise start with.
- */
-export const PlAspectRatio = /* @__PURE__ */ React.forwardRef(function PlAspectRatio({ ratio = 1, fit = 'cover', rounded = false, size = 'md', render, className, style, children, ...props }, ref) {
-    const classNames = cx(
-    // `overflow-hidden` is not decoration: without it a `cover` image spills
-    // out of the proportion it was just given, and the box would only be
-    // reserving space rather than holding anything to it.
-    'relative block w-full overflow-hidden', stretchClasses, fitClasses[fit], rounded ? radiusClasses[size] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: { aspectRatio: ratio, ...style },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,radiusClasses as t}from"../../internal/styles.js";const c=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:l="cover",rounded:n=!1,size:s="md",render:a,className:f,style:m,children:u,...d},p){const b=o("relative block w-full overflow-hidden",c,r[l],n?t[s]:"",f);return i({render:a,ref:p,props:{className:b,style:{aspectRatio:e,...m},children:u,...d}})});

package/dist/components/aspect-ratio/index.js

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