plass-ui 0.0.1 → 1.0.1

package/dist/components/accordion/PlAccordion.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlAccordionProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Drop shadow depth. `0` is the default — an accordion is part of the page it
+     * is set into, not a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Whether more than one section may be open at once.
+     *
+     * `false` by default, which is the whole reason an accordion is not just a
+     * stack of collapsibles: closing the last one as the next opens is what keeps
+     * the page from growing under the reader.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Which sections are open. Use with `onValueChange` for a controlled accordion. */
+    value?: (string | number)[];
+    /** Which sections start open, for an uncontrolled one. */
+    defaultValue?: (string | number)[];
+    onValueChange?: (value: (string | number)[]) => void;
+    /**
+     * Scores the sheet between sections with a hairline instead of separating
+     * them with space.
+     *
+     * On by default: the rule is what says the folds are parts of one pane rather
+     * than a stack of unrelated tiles.
+     * @default true
+     */
+    dividers?: boolean;
+    /** Unavailable. Every section stops answering. */
+    disabled?: boolean;
+    /**
+     * Keeps closed panels in the DOM so the browser's own page search can find
+     * and open them. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps closed panels in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlAccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
+    /**
+     * Identifies the section to `value` / `defaultValue`. Base UI generates one
+     * when it is left out, which is enough for an accordion nobody drives from
+     * code.
+     */
+    value?: string | number;
+    /** The heading on the fold. */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — an icon, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, before the chevron.
+     *
+     * Deliberately outside the trigger: a header that both folds and holds a
+     * switch has two things to press, and one of them cannot be nested inside the
+     * other — the browser rewrites a `<button>` inside a `<button>` on parse.
+     */
+    action?: React.ReactNode;
+    /** Unavailable. This section stops folding; the rest keep working. */
+    disabled?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of sections, one of which is open.
+ *
+ * Base UI owns the parts that are genuinely hard: the `button` / `region`
+ * pairing and the `aria-controls` / `aria-expanded` wiring between them, the
+ * open set, and measuring the panel so it has a height to animate from.
+ *
+ * What is here is the sheet, the ladders and the one motion decision. The
+ * panel's height *is* animated, which looks like an exception to the rule
+ * against moving things and is not: nothing is transformed, no text is
+ * resampled, and the content does not shift relative to the panel it is in —
+ * the panel is a window opening onto it. An accordion whose sections appear
+ * instantly is a page that jumps, which is the failure the rule exists to
+ * prevent.
+ */
+export declare const PlAccordion: React.ForwardRefExoticComponent<PlAccordionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One section.
+ *
+ * The header is always a row; what is inside it is a real `<button>` covering
+ * the title and the chevron, with `action` sitting outside that button as a
+ * control of its own.
+ */
+export declare const PlAccordionItem: React.ForwardRefExoticComponent<PlAccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/PlAccordion.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Accordion as s}from"@base-ui/react/accordion";import{ChevronIcon as a}from"../../internal/icons.js";import{focusRingClasses as n,focusRingInsetClasses as i,gapClasses as r,hasContent as d,iconClasses as o,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetRestClasses as h,sheetTitleClasses as v,surfaceSlots as b,transitionClasses as g}from"../../internal/styles.js";const N=/* @__PURE__ */l.createContext({size:"md",density:"default",dividers:!0}),j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md},y={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},w={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlAccordion=/* @__PURE__ */l.forwardRef(function PlAccordion({variant:t="glass",size:a="md",color:n="primary",density:i="default",elevation:r=0,multiple:d=!1,value:o,defaultValue:c,onValueChange:m,dividers:f=!0,disabled:u=!1,hiddenUntilFound:x=!1,keepMounted:v=!1,className:j,style:y,children:w,...P},$){const k=l.useMemo(()=>({size:a,density:i,dividers:f}),[a,i,f]),A=["flex flex-col",p[a],h[t],g,f?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]":"p-1",j??""].filter(Boolean).join(" ");return e(N.Provider,{value:k,children:e(s.Root,{ref:$,multiple:d,value:o,defaultValue:c,onValueChange:e=>m?.(e),disabled:u,hiddenUntilFound:x,keepMounted:v,className:A,style:{...b(n,r),...y},...P,children:w})})});export const PlAccordionItem=/* @__PURE__ */l.forwardRef(function PlAccordionItem({value:p,title:h,subtitle:b,startIcon:P,action:$,disabled:k=!1,className:A,children:z,...C},I){const{size:V,density:_,dividers:B}=l.useContext(N),M=u[_][V],R=x[_][V];return t(s.Item,{ref:I,value:p,disabled:k,className:["flex flex-col",A??""].filter(Boolean).join(" "),...C,children:[t(s.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[t(s.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",M,R,r[V],g,o,B?i:`${n} ${j[V]}`,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"].filter(Boolean).join(" "),children:[d(P)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:P}):null,t("span",{className:`flex min-w-0 flex-1 flex-col ${f[V]}`,children:[d(h)?e("span",{className:`plass-title truncate font-semibold ${v[V]}`,children:h}):null,d(b)?e("span",{className:`truncate text-(--plass-muted-fg) ${c[V]}`,children:b}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(a,{})})]}),d($)?e("span",{className:`flex shrink-0 items-center ${M}`,children:$}):null]}),e(s.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--plass-muted-fg)",m[V],M,y[_][V],w[_][V]].join(" "),children:z})})]})});

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

@@ -0,0 +1,2 @@
+export { PlAccordion, PlAccordionItem } from './PlAccordion.js';
+export type { PlAccordionProps, PlAccordionItemProps } from './PlAccordion.js';

package/dist/components/accordion/index.js

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

package/dist/components/alert/PlAlert.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlAlertProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Drop shadow depth. `0` is the default — an alert belongs to the flow of the
+     * page it interrupts. The one that floats above it is a dialog.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * The heading line. With it the alert is two-part — a headline and the detail
+     * under it; without it the whole thing is one line.
+     */
+    title?: React.ReactNode;
+    /**
+     * The glyph at the start. Defaults to the one that goes with `color`; pass
+     * `false` to drop it, or a node to replace it. A node is sized in `em`, so it
+     * tracks whichever line it sits on.
+     */
+    icon?: React.ReactNode | false;
+    /**
+     * Content pinned to the end of the row — a "Retry" button, a link. Kept out
+     * of `children` so it stays on the first line while the message wraps.
+     */
+    action?: React.ReactNode;
+    /** Passing it is what makes the dismiss button appear. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the dismiss button. Never drawn.
+     * @default 'Dismiss'
+     */
+    closeLabel?: string;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * A message about something that happened, set into the page it is about.
+ *
+ * The three shapes people mean by "an alert" are one component with different
+ * slots filled rather than three components: a bare line
+ * (`<PlAlert icon={false}>`), a line with a glyph (the default), and a glyph
+ * with a headline and the detail under it (`title` plus `children`). Nothing
+ * about the surface changes between them — only how much of it is used.
+ *
+ * There is no Base UI primitive under this, and there should not be: an alert
+ * has no interaction to delegate. It is a live region with a layout, and the
+ * only interactive parts it can grow — the action and the dismiss button — are
+ * real buttons that the caller either passes in or gets by passing `onClose`.
+ */
+export declare const PlAlert: React.ForwardRefExoticComponent<PlAlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/alert/PlAlert.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CloseIcon as t,severityIcon as a}from"../../internal/icons.js";import{controlSlots as i,focusRingClasses as r,glassClasses as n,hasContent as o,iconClasses as c,radiusClasses as d,sheetBodyClasses as f,sheetHeaderGapClasses as m,sheetPaddingXClasses as p,sheetPaddingYClasses as u,sheetSectionGapClasses as h,sheetTitleClasses as v,transitionClasses as x}from"../../internal/styles.js";const g={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)"},b={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},y={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},j={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="md",color:N="info",density:w="default",elevation:k=0,title:$,icon:z,action:A,onClose:C,closeLabel:P="Dismiss",className:_,style:B,children:D,...L},R){const q=void 0===z?a(N):z,E=b[l],F=o($);return e("div",{ref:R,role:j[N],className:["flex w-full items-start",p[w][n],u[w][n],d[n],h[n],f[n],x,g[l],c,_??""].filter(Boolean).join(" "),style:{...i(N,k,l),...B},...L,children:[o(q)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${E}`,children:q}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${m[n]}`,children:[F?s("div",{className:`plass-title font-semibold ${v[n]} ${E}`,children:$}):null,o(D)?s("div",{className:F?y[l]:void 0,children:D}):null]}),o(A)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:A}):null,C?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":P,onClick:C,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",r].join(" "),children:s(t,{})})}):null]})});

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

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

package/dist/components/alert/index.js

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

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps, PlassSide } from '../../types.js';
+export interface PlAnimateAppearProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How long after one child the next one starts, in milliseconds. This is the
+     * whole effect — everything else is what a single child does.
+     * @default 70
+     */
+    stagger?: number;
+    /**
+     * Which edge each child drifts in from.
+     * @default 'bottom'
+     */
+    from?: PlassSide;
+    /**
+     * How far each child travels. Short on purpose: this is a settling, not an
+     * entrance from off screen, and a long travel over a list of eight turns the
+     * whole block into something moving.
+     * @default '0.75rem'
+     */
+    distance?: number | string;
+    /**
+     * Fades each child in as it settles.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Runs the list from the last child to the first.
+     * @default false
+     */
+    reverse?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The things that appear, one after another. */
+    children?: React.ReactNode;
+}
+/**
+ * A list of things settling into place one after another.
+ *
+ * Each child takes the same short drift and fade, held back by its position — so
+ * the effect belongs to the *set* rather than to any one item, and a reader's
+ * eye is walked down the list in the order it should be read.
+ *
+ * The animation is written onto the children themselves rather than onto
+ * wrappers around them. A row of `<li>`s stays a row of `<li>`s, a grid's cells
+ * stay its direct children, and nothing about the layout changes because the
+ * list is being animated. Only a bare string has no element to write onto, so
+ * that one is wrapped in a `<span>`.
+ *
+ * The stagger is per *child*, which means what you pass matters: eight children
+ * are eight steps, and one child holding eight things is one step. That is also
+ * how to opt part of a list out — group it.
+ */
+export declare const PlAnimateAppear: React.ForwardRefExoticComponent<PlAnimateAppearProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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}})});

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

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

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

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

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

@@ -0,0 +1,30 @@
+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'> {
+    /**
+     * 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.
+     * @default 0
+     */
+    min?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content pulsing between full opacity and a floor.
+ *
+ * The cycle is symmetric — full, faint, full — so however many times it runs it
+ * ends where it started. A blink that finished halfway would leave the element
+ * permanently half drawn, which reads as a rendering fault rather than as an
+ * effect that ended.
+ *
+ * It repeats forever unless told otherwise, because a single blink is a flicker
+ * and nobody asks for a flicker. Two things are worth saying about using it at
+ * all: something that never stops moving in the corner of a page being read is
+ * the one kind of motion this library otherwise refuses, and a reader with a
+ * reduced-motion preference will see none of it — so `min` is a dimming, never
+ * the only thing carrying the message. If it is urgent, say so in words too.
+ */
+export declare const PlAnimateBlink: React.ForwardRefExoticComponent<PlAnimateBlinkProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-blink/PlAnimateBlink.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,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}})});

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

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

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

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

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

@@ -0,0 +1,35 @@
+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'> {
+    /**
+     * Whether the content arrives or leaves.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The opacity it starts from, between `0` and `1`. Raise it for content that
+     * should never be completely gone.
+     * @default 0
+     */
+    from?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving or leaving on opacity alone.
+ *
+ * The plainest effect in the set and the one to reach for first: nothing moves,
+ * so nothing reflows and nothing is resampled. A fade is the only entrance that
+ * is safe on a block of text at any size.
+ *
+ * It is also the effect that suits glass. A Plass sheet is defined by what
+ * shows through it, and opacity is the axis the material already answers on —
+ * the same axis the glass ladder itself is built from.
+ *
+ * `mode="out"` is the same animation run backwards, and it is held at the end:
+ * a faded-out element stays faded out rather than snapping back into view when
+ * the animation finishes.
+ */
+export declare const PlAnimateFade: React.ForwardRefExoticComponent<PlAnimateFadeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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}})});

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

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

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

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

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

@@ -0,0 +1,45 @@
+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'> {
+    /**
+     * Whether the content unfolds or folds away.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * settles down onto the page instead of up out of it.
+     * @default 0.8
+     */
+    from?: number;
+    /**
+     * Which point stays put while the rest moves — any CSS `transform-origin`.
+     * `'top'` unfolds downwards, `'bottom left'` out of a corner.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it grows. Turn it off for something already on the page that is
+     * only changing size.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlAnimateGrow: React.ForwardRefExoticComponent<PlAnimateGrowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-grow/PlAnimateGrow.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,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.d.ts

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

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

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

package/dist/components/animate-headline/PlAnimateHeadline.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateHeadlineProps extends Omit<PlassAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How long each line is held before the next one comes up, in milliseconds.
+     * Counted from the moment a line arrives, so it is reading time rather than a
+     * cycle length.
+     * @default 2600
+     */
+    interval?: number;
+    /**
+     * Which line is showing. Pass it to drive the reel yourself — from a step in
+     * a form, a tab, or a timer of your own.
+     */
+    index?: number;
+    /** Where an uncontrolled reel starts. @default 0 */
+    defaultIndex?: number;
+    /** Called with the line that has just come up. */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Starts again after the last line. Off, the reel stops on the last one and
+     * stays there.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * How far a line travels as it comes up or leaves — a CSS length, or a number
+     * in pixels. `'100%'` is one line's own height.
+     * @default '100%'
+     */
+    rise?: number | string;
+    /** The lines, in the order they should be read. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlAnimateHeadline: React.ForwardRefExoticComponent<PlAnimateHeadlineProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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

package/dist/components/animate-lighting/PlAnimateLighting.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps, PlassColor, PlassSize } from '../../types.js';
+export interface PlAnimateLightingProps extends PlassAnimateProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which family the light is drawn in. The arc turns between that family's two
+     * ends as it travels, exactly as a `solid` fill does.
+     * @default 'primary'
+     */
+    color?: PlassColor;
+    /**
+     * A CSS colour, when a semantic family is not what is wanted. Overrides
+     * `color`, and the arc stops turning — one colour has nowhere to turn to.
+     */
+    glow?: string;
+    /**
+     * The radius the light follows, on the shared ladder. It has to match what is
+     * inside, or the glow will cut a corner the content has rounded off.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * How far past the content the light reaches, in pixels.
+     * @default 3
+     */
+    spread?: number;
+    /**
+     * How much of the outline is lit at once, in degrees. Small is a travelling
+     * spark; large is a sweep.
+     * @default 50
+     */
+    arc?: number;
+    /**
+     * How soft the light is, in pixels. At `0` it is a hard-edged wedge, which
+     * reads as a graphic rather than as light.
+     * @default 5
+     */
+    blur?: number;
+    /** Runs the light the other way round. @default false */
+    reverse?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlAnimateLighting: React.ForwardRefExoticComponent<PlAnimateLightingProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { PlassAnimateProps, PlassOrientation } from '../../types.js';
+export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the strip runs.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Runs it the other way — left to right, or bottom to top.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * How fast the content travels, in pixels per second. A speed rather than a
+     * duration, so a strip of four logos and a strip of forty move at the same
+     * pace instead of the long one becoming a blur.
+     * @default 60
+     */
+    speed?: number;
+    /**
+     * The gap between items, and between the last item and the first of the next
+     * pass — a CSS length, or a number in pixels.
+     * @default '2rem'
+     */
+    gap?: number | string;
+    /**
+     * How many copies of the content are laid end to end. Two is enough for
+     * anything at least as wide as its container; raise it when the content is
+     * short enough to leave a hole behind itself.
+     * @default 2
+     */
+    copies?: number;
+    /**
+     * Stops while the pointer is on it, so something scrolling past can actually
+     * be read or clicked.
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /** The things that scroll past. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlAnimateMarquee: React.ForwardRefExoticComponent<PlAnimateMarqueeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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