plass-ui 1.0.0 → 1.0.1

package/dist/components/accordion/PlAccordion.js

@@ -1,131 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';
-import { ChevronIcon } from '../../internal/icons.js';
-import { focusRingClasses, focusRingInsetClasses, gapClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetTitleClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const AccordionContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    density: 'default',
-    dividers: true
-});
-/**
- * A section sits one step down the radius ladder from the sheet it is inside,
- * so a hovered header's corner is visibly inside the pane's own corner rather
- * than fighting it.
- */
-const itemRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.sm,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.md
-};
-/**
- * The rule between two sections, written as `>div+div` rather than as a class
- * on each item so it holds however the caller composed them — through a
- * `.map()`, through fragments, through a component of their own that renders an
- * item.
- */
-const dividerClasses = '[&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]';
-/**
- * The space between a header and the body it opened.
- *
- * The header's own padding does **not** pay for it, which is what this used to
- * assume. An open header is a tinted band with its own bottom edge; the body
- * begins at that edge, and the first line of text lands against it with only
- * half a leading in between — the title and the paragraph explaining it read as
- * one run of text broken by a colour change. What the header's padding buys is
- * room around the *title*, and the body has to buy its own.
- *
- * It is a little under the padding below, because a paragraph's first line has
- * the leading above it and its last has nothing under, so equal numbers on the
- * two sides look bottom-heavy.
- */
-const panelPaddingTopClasses = {
-    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' }
-};
-/** And the space under it, on the same two tracks. */
-const panelPaddingBottomClasses = {
-    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' }
-};
-/**
- * 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 const PlAccordion = /* @__PURE__ */ React.forwardRef(function PlAccordion({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, multiple = false, value, defaultValue, onValueChange, dividers = true, disabled = false, hiddenUntilFound = false, keepMounted = false, className, style, children, ...props }, ref) {
-    const context = React.useMemo(() => ({ size, density, dividers }), [size, density, dividers]);
-    const classNames = [
-        'flex flex-col',
-        radiusClasses[size],
-        sheetRestClasses[variant],
-        transitionClasses,
-        // Scored, the rules have to reach both edges, so the sheet keeps no padding
-        // of its own and the corners clip whatever runs into them. Unscored, the
-        // sections are tiles and the sheet keeps a hair of padding so a hovered
-        // header does not run into the edge.
-        dividers ? `overflow-hidden ${dividerClasses}` : 'p-1',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx(AccordionContext.Provider, { value: context, children: _jsx(BaseUIAccordion.Root, { ref: ref, multiple: multiple, value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), disabled: disabled, hiddenUntilFound: hiddenUntilFound, keepMounted: keepMounted, className: classNames, style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: children }) }));
-});
-/**
- * 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 const PlAccordionItem = /* @__PURE__ */ React.forwardRef(function PlAccordionItem({ value, title, subtitle, startIcon, action, disabled = false, className, children, ...props }, ref) {
-    const { size, density, dividers } = React.useContext(AccordionContext);
-    const padX = sheetPaddingXClasses[density][size];
-    const padY = sheetPaddingYClasses[density][size];
-    return (_jsxs(BaseUIAccordion.Item, { ref: ref, value: value, disabled: disabled, className: ['flex flex-col', className ?? ''].filter(Boolean).join(' '), ...props, children: [_jsxs(BaseUIAccordion.Header, { className: "m-0 flex w-full items-center [font:inherit]", children: [_jsxs(BaseUIAccordion.Trigger, { className: [
-                            'flex min-w-0 flex-1 cursor-pointer items-center text-start',
-                            padX,
-                            padY,
-                            gapClasses[size],
-                            transitionClasses,
-                            iconClasses,
-                            // An outline on a clipped sheet would be cut off at the first and
-                            // last section, so it is drawn inside the header instead. Two
-                            // whole classes rather than one plus an override: a variant that
-                            // only moves the offset resolves against the base by its position
-                            // in the generated stylesheet, which is not something to bet a
-                            // focus ring on.
-                            dividers ? focusRingInsetClasses : `${focusRingClasses} ${itemRadiusClasses[size]}`,
-                            '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: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [hasContent(title) ? (_jsx("span", { className: `plass-title truncate font-semibold ${sheetTitleClasses[size]}`, children: title })) : null, hasContent(subtitle) ? (_jsx("span", { className: `truncate text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: subtitle })) : null] }), _jsx("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: _jsx(ChevronIcon, {}) })] }), hasContent(action) ? (_jsx("span", { className: `flex shrink-0 items-center ${padX}`, children: action })) : null] }), _jsx(BaseUIAccordion.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: _jsx("div", { className: [
-                        'text-(--plass-muted-fg)',
-                        sheetBodyClasses[size],
-                        padX,
-                        panelPaddingTopClasses[density][size],
-                        panelPaddingBottomClasses[density][size]
-                    ].join(' '), children: children }) })] }));
-});
+"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.js

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

package/dist/components/alert/PlAlert.js

@@ -1,109 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CloseIcon, severityIcon } from '../../internal/icons.js';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, iconClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * An alert **is** the thing being coloured — it is a notice about a severity,
- * not a container holding someone else's content — so unlike a PlCard its sheet
- * takes the tint. The same three materials they mean everywhere.
- *
- * `solid` carries no gloss line, exactly as a filled PlButton does not: the
- * gradient is the form, and a white edge over the top of it reads as lacquer.
- */
-const restClasses = {
-    solid: /* @__PURE__ */ [
-        'text-(--p-on-solid) [background-image:var(--p-fill)]',
-        '[box-shadow:var(--p-elev),var(--p-lift)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--plass-fg) bg-(--plass-glass)',
-        '[border-color:var(--p-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    // No sheet and no edge, only the tint. For an alert set among form fields,
-    // where a second bordered rectangle is one rectangle too many.
-    ghost: 'text-(--plass-fg) bg-(--p-soft)'
-};
-/**
- * On `solid` the surface already carries the family, so the glyph and the title
- * ride on it as one ink. On the other two the surface is only faintly tinted:
- * the message has to stay ordinary reading text, and the accent is spent on the
- * two things that say which kind of alert this is.
- */
-const accentClasses = {
-    solid: '',
-    glass: 'text-(--p-accent)',
-    ghost: 'text-(--p-accent)'
-};
-/**
- * The detail line under a title.
- *
- * On a tinted surface it drops to the muted ink, the same step a field's
- * description takes. On a filled one there is no muted ink to drop to — the
- * page's grey is invisible on a gradient — so the ink stays and the title does
- * the separating with its weight.
- */
-const detailClasses = {
-    solid: '',
-    glass: 'text-(--plass-muted-fg)',
-    ghost: 'text-(--plass-muted-fg)'
-};
-/**
- * Which live region an alert belongs in.
- *
- * `alert` interrupts whatever a screen reader is in the middle of saying;
- * `status` waits for a pause. "This failed" is worth interrupting for and
- * "saved" is not, so the severity decides — and a caller who knows better still
- * wins, because their props spread after this.
- */
-const rolesFor = {
-    primary: 'status',
-    secondary: 'status',
-    info: 'status',
-    success: 'status',
-    warning: 'alert',
-    danger: 'alert'
-};
-/**
- * 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 const PlAlert = /* @__PURE__ */ React.forwardRef(function PlAlert({ variant = 'glass', size = 'md', 
-// An alert with no severity named is an informational one. This is the one
-// place `primary` would be a lie: it is not the primary anything, it is a
-// note, and the palette already has the word for that.
-color = 'info', density = 'default', elevation = 0, title, icon, action, onClose, closeLabel = 'Dismiss', className, style, children, ...props }, ref) {
-    const glyph = icon === undefined ? severityIcon(color) : icon;
-    const accent = accentClasses[variant];
-    const titled = hasContent(title);
-    return (_jsxs("div", { ref: ref, role: rolesFor[color], className: [
-            'flex w-full items-start',
-            sheetPaddingXClasses[density][size],
-            sheetPaddingYClasses[density][size],
-            radiusClasses[size],
-            sheetSectionGapClasses[size],
-            sheetBodyClasses[size],
-            transitionClasses,
-            restClasses[variant],
-            iconClasses,
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [hasContent(glyph) ? (_jsx("span", { className: `flex h-[1lh] shrink-0 items-center ${accent}`, children: glyph })) : null, _jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [titled ? (_jsx("div", { className: `plass-title font-semibold ${sheetTitleClasses[size]} ${accent}`, children: title })) : null, hasContent(children) ? (_jsx("div", { className: titled ? detailClasses[variant] : undefined, children: children })) : null] }), hasContent(action) ? (_jsx("div", { className: "flex h-[1lh] shrink-0 items-center", children: action })) : null, onClose ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx("button", { type: "button", "aria-label": closeLabel, onClick: onClose, 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',
-                        focusRingClasses
-                    ].join(' '), children: _jsx(CloseIcon, {}) }) })) : null] }));
-});
+"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.js

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

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

@@ -1,71 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { animBaseClass, animationClasses, animationSlots, isInfinite, slideOffsets, useAnimationRun } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * 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 const PlAnimateAppear = /* @__PURE__ */ React.forwardRef(function PlAnimateAppear({ duration = 380, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, stagger = 70, from = 'bottom', distance = '0.75rem', fade = true, reverse = false, render, className, style, children, ...props }, ref) {
-    const run = useAnimationRun({
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    const { x, y } = slideOffsets(from, distance);
-    const items = React.Children.toArray(children);
-    const itemClassName = `${animBaseClass} ${animationClasses.slide}`;
-    const animated = items.map((child, index) => {
-        const step = reverse ? items.length - 1 - index : index;
-        const slots = animationSlots({
-            duration,
-            delay: delay + step * stagger,
-            easing,
-            repeat,
-            alternate,
-            x,
-            y,
-            opacity: fade ? 0 : 1
-        });
-        if (!React.isValidElement(child)) {
-            return (_jsx("span", { className: itemClassName, style: slots, children: child }, index));
-        }
-        const childProps = child.props;
-        return React.cloneElement(child, {
-            className: cx(itemClassName, childProps.className),
-            style: { ...slots, ...childProps.style }
-        });
-    });
-    return useRender({
-        render,
-        ref: [ref, run.ref],
-        props: {
-            ...props,
-            className,
-            // Only the play state lives on the root. Every other slot is per child,
-            // because the delay is what the whole effect is made of.
-            style: { '--p-anim-state': run.state, ...style },
-            ...run.handlers,
-            'data-plass-animation': 'appear',
-            'data-state': run.state,
-            children: animated
-        }
-    });
-});
+"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.js

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

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

@@ -1,47 +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 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 const PlAnimateBlink = /* @__PURE__ */ React.forwardRef(function PlAnimateBlink({ duration = 1000, delay = 0, easing, repeat = 'infinite', alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, min = 0, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'blink',
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        opacity: min,
-        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,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.js

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

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

@@ -1,48 +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 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 const PlAnimateFade = /* @__PURE__ */ React.forwardRef(function PlAnimateFade({ duration = 300, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 0, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'fade',
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        mode,
-        opacity: from,
-        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 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.js

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

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

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

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

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

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

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

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

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