plass-ui 1.3.0 → 1.4.0

package/README.md

@@ -150,7 +150,7 @@ This package is installed and run from its own folder; there is no install at th
 
 ```bash
 npm install
-npm test              # Vitest, single run (headless Chromium)
+npm test              # Vitest, three shards of headless Chromium
 npm run typecheck     # tsc --noEmit over both TS projects
 npm run build         # tsc + terser + build-styles → dist/
 npm run lint          # ESLint

package/dist/components/alert/PlAlert.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{CloseIcon as a,severityIcon as i}from"../../internal/icons.js";import{controlSlots as r,focusRingClasses as o,glassClasses as n,hasContent as c,iconClasses as d,radiusClasses as f,sheetBodyClasses as m,sheetHeaderGapClasses as p,sheetPaddingXClasses as u,sheetPaddingYClasses as h,sheetSectionGapClasses as v,sheetTitleClasses as x,transitionClasses as g}from"../../internal/styles.js";const b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[n,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},y={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},j={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},N={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:n,color:w,density:k,elevation:$=0,title:z,icon:A,action:C,onClose:P,closeLabel:_="Dismiss",className:B,style:D,children:L,...R},q){const E=t(),F=n??E.size??"md",G=w??E.color??"info",H=k??E.density??"default",I=void 0===A?i(G):A,J=y[l],K=c(z);return e("div",{ref:q,role:N[G],className:["flex w-full items-start",u[H][F],h[H][F],f[F],v[F],m[F],g,b[l],d,B??""].filter(Boolean).join(" "),style:{...r(G,$,l),...D},...R,children:[c(I)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${J}`,children:I}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${p[F]}`,children:[K?s("div",{className:`plass-title font-semibold ${x[F]} ${J}`,children:z}):null,c(L)?s("div",{className:K?j[l]:void 0,children:L}):null]}),c(C)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null,P?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":_,onClick:P,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",o].join(" "),children:s(a,{})})}):null]})});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i,severityIcon as r}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as n,glassClasses as c,hasContent as d,iconClasses as m,radiusClasses as f,sheetBodyClasses as p,sheetHeaderGapClasses as u,sheetPaddingXClasses as h,sheetPaddingYClasses as v,sheetSectionGapClasses as x,sheetTitleClasses as g,transitionClasses as b}from"../../internal/styles.js";const y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},j={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},N={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},w={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:c,color:k,density:$,elevation:z=0,title:A,icon:C,action:P,onClose:_,closeLabel:B,className:L,style:R,children:q,...D},E){const F=t(),G=a(),H=B??G.dismiss,I=c??F.size??"md",J=k??F.color??"info",K=$??F.density??"default",M=void 0===C?r(J):C,O=j[l],Q=d(A);return e("div",{ref:E,role:w[J],className:["flex w-full items-start",h[K][I],v[K][I],f[I],x[I],p[I],b,y[l],m,L??""].filter(Boolean).join(" "),style:{...o(J,z,l),...R},...D,children:[d(M)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${O}`,children:M}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${u[I]}`,children:[Q?s("div",{className:`plass-title font-semibold ${g[I]} ${O}`,children:A}):null,d(q)?s("div",{className:Q?N[l]:void 0,children:q}):null]}),d(P)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:P}):null,_?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":H,onClick:_,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",n].join(" "),children:s(i,{})})}):null]})});

package/dist/components/anchor/PlAnchor.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+/** One heading in the list. */
+export interface PlAnchorItem {
+    /**
+     * The fragment it points at — `#getting-started`. The `id` it names is what
+     * the list watches, so a heading with no `id` cannot be tracked.
+     */
+    href: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /**
+     * How deep the heading sits, from `0`. Only the indent depends on it.
+     * @default 0
+     */
+    depth?: number;
+}
+export interface PlAnchorProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onSelect'> {
+    /** The headings, in the order they appear in the document. */
+    items: readonly PlAnchorItem[];
+    /**
+     * The `href` of the row that is lit, taking the tracking over.
+     *
+     * For a list driven by a router rather than by the scroll — a documentation
+     * site whose sections are separate pages, say. Leaving it out is the ordinary
+     * case and the reason the component exists.
+     */
+    active?: string;
+    /**
+     * How far below the top of the window the reading line sits, in pixels.
+     *
+     * The height of whatever is pinned over the page. Without it a heading goes
+     * on counting as the *next* one after it has already slid out of sight behind
+     * a sticky header — so the list stays a section behind the reader for the
+     * height of the bar.
+     * @default 0
+     */
+    offset?: number;
+    /** Called with the item that was clicked, before the browser moves. */
+    onSelect?: (item: PlAnchorItem, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** A heading for the list itself. Drawn above it. */
+    label?: React.ReactNode;
+    /** Accessible name of the navigation region. Never drawn. @default 'On this page' */
+    navLabel?: string;
+    /** @default 'sm' */
+    size?: PlassSize;
+    /** The family the lit row takes. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * A table of contents that follows the reader down the page.
+ *
+ * It takes its headings as **data** rather than as children, which is the
+ * opposite of most of this library and the right way round here: a table of
+ * contents is generated — from a Markdown file, from a CMS, from the document's
+ * own headings — and the thing that generates it produces a flat list, in
+ * document order, with a level on each entry.
+ *
+ * **It is a flat list and not a nested one**, and that is a decision rather
+ * than a shortcut. Real documents skip levels — an `h2` followed by an `h4` —
+ * so a nesting built from a flat list is a guess at a shape nobody wrote. The
+ * depth is carried by the indent, and the reading order is the document's own.
+ *
+ * The tracking is the component. What is lit is **the last heading whose top has
+ * passed the reading line**, not whichever heading happens to be on screen:
+ * three can be visible at once, and the one the reader is inside is the highest
+ * of them that is already above them. `offset` is where that line sits, and it
+ * is the height of whatever is pinned over the page — without it a heading goes
+ * on counting as the next one after it has slid out of sight behind the bar,
+ * and the list stays a section behind.
+ */
+export declare const PlAnchor: React.ForwardRefExoticComponent<PlAnchorProps & React.RefAttributes<HTMLElement>>;

package/dist/components/anchor/PlAnchor.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{controlTextLeadingClasses as o,cx as l,focusRingClasses as a,surfaceSlots as i,transitionClasses as c}from"../../internal/styles.js";export const PlAnchor=/* @__PURE__ */t.forwardRef(function PlAnchor({items:m,active:d,offset:f=0,onSelect:p,label:u,navLabel:h,size:g,color:v,className:w,style:x,...b},y){const E=n(),j=s(),N=h??j.onThisPage,A=g??E.size??"sm",L=v??E.color??"primary",[z,H]=t.useState(void 0),P=void 0!==d;t.useEffect(()=>{if(P)return;let e=0;const measure=()=>{e=0,H(function readingAt(e,r){if(0===e.length)return;const t=document.documentElement.scrollHeight;if(t>window.innerHeight+1&&window.innerHeight+window.scrollY>=t-2)return e[e.length-1].href;let n;for(const t of e){const e=document.getElementById(t.href.replace(/^#/,""));e&&e.getBoundingClientRect().top-r<=1&&(n=t.href)}return n}(m,f))},onScroll=()=>{e||=requestAnimationFrame(measure)};return measure(),window.addEventListener("scroll",onScroll,{passive:!0}),window.addEventListener("resize",onScroll,{passive:!0}),()=>{e&&cancelAnimationFrame(e),window.removeEventListener("scroll",onScroll),window.removeEventListener("resize",onScroll)}},[P,m,f]);const S=P?d:z;return r("nav",{ref:y,"aria-label":N,className:l("flex flex-col gap-2",o[A],w),style:{...i(L,0),...x},...b,children:[u?e("span",{className:"font-semibold text-(--plass-fg)",children:u}):null,e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:m.map(r=>{const t=r.href===S;return e("li",{className:"min-w-0",children:e("a",{href:r.href,"aria-current":t?"location":void 0,onClick:e=>p?.(r,e),className:l("block truncate rounded-(--plass-radius-xs) px-2 py-1","border-s-2",c,a,t?"[border-color:var(--p-accent)] bg-(--p-soft) font-medium text-(--p-accent)":"border-transparent text-(--plass-muted-fg) hover:bg-(--plass-glass-hover) hover:text-(--plass-fg)"),style:{paddingInlineStart:`calc(0.5rem + ${r.depth??0} * 0.75rem)`},children:r.label})},r.href)})})]})});

package/dist/components/anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnchor } from './PlAnchor.js';
+export type { PlAnchorItem, PlAnchorProps } from './PlAnchor.js';

package/dist/components/anchor/index.js

@@ -0,0 +1 @@
+export{PlAnchor}from"./PlAnchor.js";

package/dist/components/animate-appear/PlAnimateAppear.d.ts

@@ -5,9 +5,19 @@ export interface PlAnimateAppearProps extends PlassAnimateProps, React.Component
     /**
      * How long after one child the next one starts, in milliseconds. This is the
      * whole effect — everything else is what a single child does.
+     *
+     * The same prop the six single-keyframe effects take, and the same machinery
+     * under it; what differs is the default, because a stagger of `0` on a set is
+     * a set that is not a set.
      * @default 70
      */
     stagger?: number;
+    /**
+     * Milliseconds added to each child's duration, so later children take longer
+     * — or, negative, less long. Floored at `0`.
+     * @default 0
+     */
+    durationStep?: number;
     /**
      * Which edge each child drifts in from.
      * @default 'bottom'

package/dist/components/animate-appear/PlAnimateAppear.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as s,animationSlots as n,isInfinite as i,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const PlAnimateAppear=/* @__PURE__ */a.forwardRef(function PlAnimateAppear({duration:p=380,delay:d=0,easing:c,repeat:f=1,alternate:y,paused:u,trigger:h="mount",play:g,once:x=!0,threshold:A=.2,stagger:N=70,from:j="bottom",distance:b="0.75rem",fade:E=!0,reverse:P=!1,render:$,className:v,style:w,children:C,...R},V){const k=o({trigger:h,play:g,once:x,threshold:A,paused:u,infinite:i(f)}),{x:q,y:z}=l(j,b),B=a.Children.toArray(C),D=`${r} ${s.slide}`,F=B.map((t,r)=>{const s=P?B.length-1-r:r,i=n({duration:p,delay:d+s*N,easing:c,repeat:f,alternate:y,x:q,y:z,opacity:E?0:1});if(!a.isValidElement(t))return e("span",{className:D,style:i,children:t},r);const l=t.props;return a.cloneElement(t,{className:m(D,l.className),style:{...i,...l.style}})});return t({render:$,ref:[V,k.ref],props:{...R,className:v,style:{"--p-anim-state":k.state,...w},...k.handlers,"data-plass-animation":"appear","data-state":k.state,children:F}})});
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as t,animateChildren as r,animationClasses as n,animationSlots as s,isInfinite as i,slideOffsets as o,staggerSlots as d,useAnimationRun as p}from"../../internal/animate.js";export const PlAnimateAppear=/* @__PURE__ */e.forwardRef(function PlAnimateAppear({duration:e=380,delay:l=0,easing:m,repeat:c=1,alternate:u,paused:f,trigger:g="mount",play:y,once:h=!0,threshold:x=.2,stagger:A=70,durationStep:b=0,from:v="bottom",distance:N="0.75rem",fade:P=!0,reverse:S=!1,render:$,className:j,style:w,children:R,...k},q){const z=p({trigger:g,play:y,once:h,threshold:x,paused:f,infinite:i(c)}),{x:B,y:C}=o(v,N),D=r(R,`${t} ${n.slide}`,(a,t)=>s(d({duration:e,delay:l,easing:m,repeat:c,alternate:u,x:B,y:C,opacity:P?0:1},{index:a,count:t,stagger:A,durationStep:b,reverse:S})));return a({render:$,ref:[q,z.ref],props:{...k,className:j,style:{"--p-anim-state":z.state,...w},...z.handlers,"data-plass-animation":"appear","data-state":z.state,children:D}})});

package/dist/components/animate-blink/PlAnimateBlink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateProps } from '../../types.js';
-export interface PlAnimateBlinkProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateBlinkProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it
      * for something that has to stay readable while it pulses.

package/dist/components/animate-blink/PlAnimateBlink.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const PlAnimateBlink=/* @__PURE__ */e.forwardRef(function PlAnimateBlink({duration:e=1e3,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:m,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:k,...N},b){const j=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:u,trigger:p,play:c,once:d,threshold:f,paused:m,infinite:t(l)});return r({render:y,ref:[b,j.ref],props:{...N,className:a(j.className,g),style:{...j.style,...h},...j.props,children:k}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const PlAnimateBlink=/* @__PURE__ */e.forwardRef(function PlAnimateBlink({duration:e=1e3,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,timeline:g,range:u,stagger:y=0,durationStep:h=0,reverse:k=!1,min:N=0,render:b,className:j,style:v,children:A,...B},P){const S=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:N,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:t(l),timeline:g,range:u,stagger:y,durationStep:h,reverse:k,children:A});return r({render:b,ref:[P,S.ref],props:{...B,className:a(S.className,j),style:{...S.style,...v},...S.props,children:S.children}})});

package/dist/components/animate-counter/PlAnimateCounter.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateTrigger } from '../../types.js';
+export interface PlAnimateCounterProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The number it arrives at, and the one a screen reader is told. */
+    value: number;
+    /**
+     * The number it starts from.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How long the count takes, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /** How long it waits before starting, in milliseconds. @default 0 */
+    delay?: number;
+    /**
+     * How the number is written — `Intl.NumberFormat` options, so a currency, a
+     * percentage or a compact `1.2M` all work.
+     *
+     * This is the reason the count is JavaScript rather than a `@property` and a
+     * CSS counter, which is otherwise the neater way to animate a number: CSS can
+     * tick a value, and it cannot put a thousands separator in one.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * The shape of the count, as a function from `0`…`1` to `0`…`1`.
+     *
+     * A function rather than a CSS easing string, and not for want of trying: no
+     * CSS animation is running here, so there is nothing to hand a string to. It
+     * eases out by default, which is what a number arriving should do — quick
+     * enough to read as counting, slow enough at the end to land on the figure
+     * rather than snap to it.
+     */
+    easing?: (t: number) => number;
+    /**
+     * What starts the count.
+     *
+     * **`visible` by default**, and it is the one component in the library that
+     * does not start on mount. That is deliberate rather than an oversight: an
+     * entrance played off screen has still delivered its content, and a count
+     * that ran off screen delivered a number that was simply already there. A
+     * counter is the one effect whose whole point is being watched.
+     * @default 'visible'
+     */
+    trigger?: PlassAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /** With `visible`, whether it counts only the first time. @default true */
+    once?: boolean;
+    /** With `visible`, how much has to be on screen to count. @default 0.2 */
+    threshold?: number;
+    /** Holds the count where it is. */
+    paused?: boolean;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A number counting up to what it is.
+ *
+ * The one effect in the group that animates **content** rather than a box: what
+ * moves is the figure itself, one frame at a time, from `from` to `value`.
+ *
+ * It is JavaScript and not a keyframe, and the reason is formatting. A
+ * registered custom property and a CSS counter can tick a number perfectly
+ * well — and cannot put a thousands separator in one, or a currency symbol, or
+ * fold 1,200,000 into `1.2M`. A counter that cannot be formatted is a counter
+ * nobody can use on a dashboard, so `Intl.NumberFormat` decides what is drawn
+ * and the frame loop only decides which number it is drawing.
+ *
+ * **It starts when it is seen, not when it mounts**, which is the one place a
+ * `PlAnimate*` here departs from the rest. An entrance played off screen has
+ * still delivered its content; a count that ran off screen delivered a number
+ * that was already sitting there when the reader arrived.
+ *
+ * **What a screen reader hears is the final number, once.** The ticking figure
+ * is `aria-hidden` and the answer is beside it in a clipped span, because a
+ * number changing sixty times a second in the accessibility tree is either
+ * silence or sixty announcements, and neither is the figure.
+ */
+export declare const PlAnimateCounter: React.ForwardRefExoticComponent<PlAnimateCounterProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-counter/PlAnimateCounter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{useAnimationRun as s}from"../../internal/animate.js";import{useDefaults as i}from"../../internal/defaults.js";import{usePrefersReducedMotion as o}from"../../internal/media.js";import{cx as m,srOnlyClasses as l}from"../../internal/styles.js";function easeOut(e){return 1-(1-e)**3}export const PlAnimateCounter=/* @__PURE__ */a.forwardRef(function PlAnimateCounter({value:u,from:c=0,duration:d=1200,delay:f=0,format:p,easing:h=easeOut,trigger:j="visible",play:g,once:A=!0,threshold:F=.2,paused:x,render:b,className:v,...y},N){const q=i(),M=o(),w=s({trigger:j,play:g,once:A,threshold:F,paused:x,infinite:!1,nonce:u}),C=a.useMemo(()=>new Intl.NumberFormat(q.locale,p),[q.locale,p]),[O,P]=a.useState(()=>M?u:c);a.useEffect(()=>{if(M)return void P(u);if(!w.started)return void P(c);if(x)return;let e=0,r=0;const step=t=>{r||=t;const a=Math.min(1,(t-r-f)/Math.max(1,d));a<0?e=requestAnimationFrame(step):(P(c+(u-c)*h(a)),a<1&&(e=requestAnimationFrame(step)))};return e=requestAnimationFrame(step),()=>cancelAnimationFrame(e)},[w.started,M,x,u,c,d,f,h]);const E=C.format(u);return n({render:b??e("span",{}),ref:[N,w.ref],props:{className:m("tabular-nums",v),...w.handlers,"data-plass-animation":"counter","data-state":w.state,children:t(r,{children:[e("span",{className:l,children:E}),e("span",{"aria-hidden":"true",children:C.format(O)})]}),...y}})});

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

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

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

@@ -0,0 +1 @@
+export{PlAnimateCounter}from"./PlAnimateCounter.js";

package/dist/components/animate-fade/PlAnimateFade.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateFadeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateFadeProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves.
      * @default 'in'

package/dist/components/animate-fade/PlAnimateFade.js

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

package/dist/components/animate-float/PlAnimateFloat.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps, PlassOrientation } from '../../types.js';
+export interface PlAnimateFloatProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it drifts from where it started. A number is pixels.
+     *
+     * Small on purpose. A float is meant to be noticed at the edge of attention
+     * and not looked at, and past about a dozen pixels it stops being a drift and
+     * starts being something moving on the page.
+     * @default 8
+     */
+    distance?: number | string;
+    /**
+     * Which way it drifts.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content drifting gently, and not going anywhere.
+ *
+ * The odd one out among the `PlAnimate*` components, and the page says so: the
+ * other effects are **entrances**, played once when content arrives. This one
+ * never finishes. It is for the thing that is meant to read as weightless — an
+ * illustration on a landing page, a mark over an empty state — and for nothing
+ * that a reader has to read while it moves.
+ *
+ * That is also why it is **not** in `PlassAnimation`, the union `mode`,
+ * `stagger` and the shared effect map are built on. That union is the set of
+ * ways content can arrive; an endless drift is not an arrival, and every
+ * component importing the map would have paid for a row nothing else could
+ * want.
+ *
+ * The cycle is symmetric — home, out, home — so however many times it runs it
+ * ends where it started. A float stopped mid-cycle would leave the element
+ * permanently a few pixels out of place, which reads as a layout bug rather
+ * than as an effect that ended.
+ *
+ * `easing` defaults to `ease-in-out` rather than to the house curve, which is
+ * the one place in the library that is right: the house curve is an entrance's,
+ * fast out of the gate and slow into place, and a drift with it would lurch at
+ * each end of the cycle instead of turning around.
+ *
+ * A reader who asked for less motion sees none of it, as with every effect
+ * here. Nothing may depend on the movement.
+ */
+export declare const PlAnimateFloat: React.ForwardRefExoticComponent<PlAnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-float/PlAnimateFloat.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as r,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:l=0,easing:s="ease-in-out",repeat:o="infinite",alternate:c,paused:d,trigger:m="mount",play:p,once:f=!0,threshold:u=.2,distance:y=8,orientation:h="vertical",render:g,className:N,style:j,children:v,...x},A){const F=r(y),P="vertical"===h,b=n({effect:null,duration:e,delay:l,easing:s,repeat:o,alternate:c,x:P?"0":F,y:P?`-${F}`:"0",trigger:m,play:p,once:f,threshold:u,paused:d,infinite:!0,children:v});return a({render:g,ref:[A,b.ref],props:{...x,className:i(t,"plass-anim-float",b.className,N),style:{...b.style,...j},...b.props,"data-plass-animation":"float",children:b.children}})});

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

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

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

@@ -0,0 +1 @@
+export{PlAnimateFloat}from"./PlAnimateFloat.js";

package/dist/components/animate-grow/PlAnimateGrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateGrowProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateGrowProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away.
      * @default 'in'

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

@@ -1 +1 @@
-"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}})});
+"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:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:g=.2,timeline:f,range:u,stagger:y=0,durationStep:h=0,reverse:w=!1,mode:N="in",from:j=.8,origin:v="center",fade:A=!0,render:G,className:P,style:S,children:b,...x},R){const k=a({effect:"grow",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:N,scale:j,opacity:A?0:1,trigger:m,play:c,once:p,threshold:g,paused:d,infinite:t(s),timeline:f,range:u,origin:v,stagger:y,durationStep:h,reverse:w,children:b});return r({render:G,ref:[R,k.ref],props:{...x,className:n(k.className,P),style:{...k.style,...S},...k.props,children:k.children}})});

package/dist/components/animate-reveal/PlAnimateReveal.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassSide } from '../../types.js';
+export interface PlAnimateRevealProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content is uncovered or covered again. `out` is the same wipe
+     * run backwards, so it closes from the edge it opened towards.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * Which edge the wipe starts at. Physical, as `PlassSide` is everywhere — a
+     * heading uncovered from the top is uncovered from the top in every writing
+     * direction.
+     * @default 'left'
+     */
+    from?: PlassSide;
+    /**
+     * Fades in behind the wipe.
+     *
+     * **Off by default**, which is the opposite of every other effect here and is
+     * the whole point of this one: a reveal is not a fade. Turn it on only if you
+     * want both.
+     * @default false
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content uncovered behind a moving edge.
+ *
+ * The only entrance in the set where **nothing moves and no colour changes**.
+ * A fade changes the ink, a slide changes the position, a grow changes the
+ * size; this changes how much of the element is drawn and leaves every pixel it
+ * has drawn exactly where it will finally be. That makes it the effect for
+ * anything whose position is itself the information — a heading over the
+ * paragraph it belongs to, a rule between two sections, the plot area of a
+ * chart, a row of figures that must not be read from the wrong place.
+ *
+ * It is also the cheapest entrance in the set to lay out, because there is
+ * nothing to lay out: no wrapper, no `overflow` box, no second element in the
+ * flow. `clip-path` paints less of the element and the page around it never
+ * learns that anything happened.
+ *
+ * `fade` is off by default, alone among the effects that offer it. Fading a
+ * reveal is asking for two entrances at once, and the reason to have reached
+ * for this one is usually that the first was the problem.
+ */
+export declare const PlAnimateReveal: React.ForwardRefExoticComponent<PlAnimateRevealProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-reveal/PlAnimateReveal.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,revealClip as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateReveal=/* @__PURE__ */e.forwardRef(function PlAnimateReveal({duration:e=520,delay:l=0,easing:s,repeat:o=1,alternate:d,paused:m,trigger:p="mount",play:c,once:f=!0,threshold:g=.2,timeline:u,range:y,stagger:h=0,durationStep:v=0,reverse:N=!1,mode:R="in",from:j="left",fade:A=!1,render:P,className:S,style:b,children:w,...x},k){const q=n({effect:"reveal",duration:e,delay:l,easing:s,repeat:o,alternate:d,mode:R,clip:a(j),opacity:A?0:1,trigger:p,play:c,once:f,threshold:g,paused:m,infinite:t(o),timeline:u,range:y,stagger:h,durationStep:v,reverse:N,children:w});return r({render:P,ref:[k,q.ref],props:{...x,className:i(q.className,S),style:{...q.style,...b},...q.props,children:q.children}})});

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

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

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

@@ -0,0 +1 @@
+export{PlAnimateReveal}from"./PlAnimateReveal.js";

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

@@ -1,7 +1,7 @@
 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'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateRotateProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content turns into place or out of it.
      * @default 'in'

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

@@ -1 +1 @@
-"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}})});
+"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:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:g=!0,threshold:p=.2,timeline:f,range:u,stagger:y=0,durationStep:h=0,reverse:N=!1,mode:R="in",from:j=-180,to:v=0,origin:A="center",fade:P=!0,render:S,className:$,style:b,children:w,...x},T){const k=a({effect:"rotate",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:R,angle:`${j}deg`,angleTo:`${v}deg`,opacity:P?0:1,trigger:m,play:c,once:g,threshold:p,paused:d,infinite:t(s),timeline:f,range:u,origin:A,stagger:y,durationStep:h,reverse:N,children:w});return r({render:S,ref:[T,k.ref],props:{...x,className:n(k.className,$),style:{...k.style,...b},...k.props,children:k.children}})});

package/dist/components/animate-scramble/PlAnimateScramble.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateTrigger } from '../../types.js';
+export interface PlAnimateScrambleProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * The line that resolves. A string, and it has to be: the effect works on
+     * characters, and there is no character in a `<strong>`.
+     */
+    children: string;
+    /**
+     * The glyphs the unsettled characters are drawn from.
+     *
+     * Left out, it is **the line's own characters**. Every scrambler that ships a
+     * default alphabet ships an English one, and English noise over a Korean or a
+     * Greek headline is a different script flickering rather than a word
+     * arriving. Set it for the caller who genuinely wants a terminal look.
+     */
+    characters?: string;
+    /**
+     * How long the line takes to settle, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /** How long it waits before starting, in milliseconds. @default 0 */
+    delay?: number;
+    /**
+     * How often the unsettled characters are redrawn, in milliseconds.
+     *
+     * Not every frame, on purpose. At sixty a second a line of changing glyphs
+     * strobes, which is unpleasant to look at and is the kind of flicker a
+     * reader with a sensitivity to it should never be handed.
+     * @default 45
+     */
+    tick?: number;
+    /**
+     * What starts it. `visible` for `PlAnimateCounter`'s reason: a line that
+     * resolved off screen delivered text that was simply already there.
+     * @default 'visible'
+     */
+    trigger?: PlassAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /** With `visible`, whether it runs only the first time. @default true */
+    once?: boolean;
+    /** With `visible`, how much has to be on screen to count. @default 0.2 */
+    threshold?: number;
+    /** Holds it where it is. */
+    paused?: boolean;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A line of text resolving out of noise.
+ *
+ * The second of the two effects that animate **content** rather than a box, and
+ * it takes a `string` rather than a node for the same reason a
+ * [PlAnimateCounter](./animate-counter) takes a number: there is no character
+ * to scramble inside a `<strong>`.
+ *
+ * **The noise is made of the line's own characters.** Every scrambler that
+ * ships a default alphabet ships an English one, and English noise over a
+ * Korean, Greek or Arabic headline is not a word arriving — it is a different
+ * script flickering where a word is about to be. Shuffling the string's own
+ * glyphs costs nothing and is right in every script; it also keeps the line's
+ * colour and width steady, because every frame is drawn out of exactly the
+ * characters the finished line is made of.
+ *
+ * It settles **left to right**, which is what makes it read as a word arriving
+ * rather than as a slot machine, and whitespace is never scrambled — the gaps
+ * between words are what keeps a line of noise looking like a sentence.
+ *
+ * **A screen reader is told the line, once**, and never the noise. Everything a
+ * `PlAnimateCounter` says about that applies here word for word.
+ */
+export declare const PlAnimateScramble: React.ForwardRefExoticComponent<PlAnimateScrambleProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-scramble/PlAnimateScramble.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{useAnimationRun as s}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{poolOf as m,scrambleAt as o}from"../../internal/scramble.js";import{cx as c,srOnlyClasses as l}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */t.forwardRef(function PlAnimateScramble({children:d,characters:f,duration:p=1200,delay:u=0,tick:h=45,trigger:x="visible",play:j,once:M=!0,threshold:b=.2,paused:g,render:A,className:y,...F},v){const N=i(),S=s({trigger:x,play:j,once:M,threshold:b,paused:g,infinite:!1,nonce:d}),q=t.useMemo(()=>f??m(d),[f,d]),[w,P]=t.useState(()=>d);return t.useEffect(()=>{if(N)return void P(d);if(!S.started)return void P(o(d,q,0,0));if(g)return;const e=performance.now();let r=0,a=0,t=-1;const step=n=>{const s=n-e-u,i=Math.min(1,s/Math.max(1,p)),m=Math.floor(Math.max(0,s)/Math.max(1,h));m!==t&&(t=m,a+=1,P(o(d,q,Math.max(0,i),a))),i<1?r=requestAnimationFrame(step):P(d)};return r=requestAnimationFrame(step),()=>cancelAnimationFrame(r)},[S.started,N,g,d,q,p,u,h]),n({render:A??e("span",{}),ref:[v,S.ref],props:{className:c(y),...S.handlers,"data-plass-animation":"scramble","data-state":S.state,children:a(r,{children:[e("span",{className:l,children:d}),e("span",{"aria-hidden":"true",children:w})]}),...F}})});

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

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

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

@@ -0,0 +1 @@
+export{PlAnimateScramble}from"./PlAnimateScramble.js";

package/dist/components/animate-shake/PlAnimateShake.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateShakeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Plays the shake again whenever this value changes, and never on the first
+     * render.
+     *
+     * The prop the component exists around. `play` is a boolean, so replaying
+     * with it means toggling off and on — two renders for one event, and a piece
+     * of state whose only job is to be flipped back. A refusal is an **event**,
+     * and a value that has changed is the closest React has to one: a count of
+     * failed attempts already is this.
+     *
+     * ```tsx
+     * <PlAnimateShake replay={attempts}>…</PlAnimateShake>
+     * ```
+     */
+    replay?: unknown;
+    /**
+     * How far it travels either side of where it started. A number is pixels.
+     * @default 6
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A refusal.
+ *
+ * The one effect in the set that is a **response** rather than an entrance: it
+ * is what a form does when the password was wrong again, what a locked control
+ * does when it is pressed. So it starts held still and plays only when it is
+ * told to, where every other effect here starts on mount.
+ *
+ * `replay` is the prop it exists around. A refusal can happen twice, and
+ * `play`, being a boolean, cannot say "again" — replaying with it means
+ * toggling off and on, which is two renders for one event and a piece of state
+ * whose only job is to be flipped back. A value that has changed is the closest
+ * React has to an event, and the count of failed attempts a form already keeps
+ * is exactly that value.
+ *
+ * It is not in `PlassAnimation`, for `PlAnimateFloat`'s reason: that union is
+ * the set of ways content can arrive, and this is not an arrival.
+ *
+ * Three shudders either side of home and back to nothing, so a shaken element
+ * is exactly where it was. This is the one effect a caller will run over
+ * content that is still being typed into, and a field left a few pixels off its
+ * label would be worse than the error it was reporting.
+ *
+ * **A reader who asked for less motion sees none of it**, which is the whole
+ * reason the words matter more than the shake: whatever a refusal is saying has
+ * to be said in text as well, in something a screen reader is told about. The
+ * shake is emphasis, never the message.
+ */
+export declare const PlAnimateShake: React.ForwardRefExoticComponent<PlAnimateShakeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-shake/PlAnimateShake.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as r,lengthValue as n,useAnimateElement as t}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:i,repeat:o=1,alternate:c,paused:d,trigger:p="manual",play:m=!1,once:f=!0,threshold:h=.2,replay:u,distance:y=6,render:g,className:k,style:N,children:j,...x},A){const P=t({effect:null,duration:e,delay:l,easing:i,repeat:o,alternate:c,x:n(y),trigger:p,play:m,once:f,threshold:h,paused:d,infinite:!1,nonce:u,children:j});return a({render:g,ref:[A,P.ref],props:{...x,className:s(r,"plass-anim-shake",P.className,k),style:{...P.style,...N},...P.props,"data-plass-animation":"shake",children:P.children}})});

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

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

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

@@ -0,0 +1 @@
+export{PlAnimateShake}from"./PlAnimateShake.js";