plass-ui 0.0.1 → 1.0.0

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

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

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

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

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';