plass-ui 0.0.1 → 1.0.0

package/dist/components/pill/PlPill.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { controlSlots, controlTextClasses, cx, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, iconSizeClasses, metaTextClasses, paddingXClasses, sheetBodyClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * The three materials, said the way a *control* says them — the surface takes
+ * the tint, as on a `PlButton` and a `PlChip`, because a pill is the thing being
+ * coloured rather than a sheet holding somebody else's content.
+ */
+const restClasses = {
+    solid: 'text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]',
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border text-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: `${glassClasses} text-(--p-accent) bg-(--p-soft)`
+};
+const hoverClasses = {
+    solid: 'hover:brightness-105 active:brightness-95',
+    glass: 'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)',
+    ghost: 'hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)'
+};
+/**
+ * The row's floor, as a minimum rather than as a height.
+ *
+ * The numbers are `controlHeightClasses`' — a collapsed pill lines up with a
+ * `PlButton` of the same `size` beside it — but a pill carrying a description is
+ * two lines tall and a fixed height would clip the second.
+ */
+const rowMinHeightClasses = {
+    xs: 'min-h-5.5',
+    sm: 'min-h-6.5',
+    md: 'min-h-8',
+    lg: 'min-h-10',
+    xl: 'min-h-12'
+};
+/**
+ * Exactly half the row's minimum height at every step — 22, 26, 32, 40 and 48px
+ * — so a collapsed pill is a true stadium.
+ *
+ * Written as a length rather than as `rounded-full`, and the difference only
+ * shows once the pill grows: `rounded-full` on a box that has taken a second
+ * line, or opened its `details`, is a corner half its new height, and a corner
+ * that big eats the first two words of every line. Pinning the radius to the
+ * *row* is what lets the lozenge grow into a rounded rectangle with the same
+ * corner it always had.
+ */
+const pillRadiusClasses = {
+    xs: 'rounded-[0.6875rem]',
+    sm: 'rounded-[0.8125rem]',
+    md: 'rounded-[1rem]',
+    lg: 'rounded-[1.25rem]',
+    xl: 'rounded-[1.5rem]'
+};
+/**
+ * The air either side of the middle, and the thing that makes this shape read as
+ * the lozenge it is rather than as a wide `PlChip`.
+ *
+ * Roughly double the control padding at every step. The leading glyph and the
+ * trailing slot are the pill's furniture; what it is *about* is the column
+ * between them, and giving that column noticeably more room than either
+ * neighbour is what puts the eye there first. `density` halves it, exactly as it
+ * does everywhere else.
+ */
+const centerPaddingClasses = {
+    default: { xs: 'px-3', sm: 'px-4', md: 'px-5', lg: 'px-6', xl: 'px-8' },
+    compact: { xs: 'px-1.5', sm: 'px-2', md: 'px-2.5', lg: 'px-3', xl: 'px-4' }
+};
+/**
+ * The leading box: a square the size of a standalone glyph, clipped round.
+ *
+ * `iconSizeClasses` rather than a ladder of its own, because that table already
+ * answers the same question — how big is a glyph that is not riding on a label —
+ * and the leading slot of a pill is exactly that.
+ */
+const mediaClasses = 'flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover';
+/**
+ * The description under the title.
+ *
+ * Mixed toward transparent rather than pointed at `--plass-muted-fg`: the middle
+ * of a pill sits on the colour family's own fill as often as on a bare surface,
+ * and a fixed grey that reads as secondary on white reads as dirt on `primary`.
+ * Taking the ink that is already there and letting some of the surface through
+ * is the one form of "one step quieter" that holds on all three materials.
+ */
+const descriptionClasses = '[color:color-mix(in_oklab,currentColor_72%,transparent)]';
+/** Where a pinned pill hangs, and how far in from the edge. */
+const positionClasses = {
+    static: { top: '', bottom: '' },
+    sticky: { top: 'sticky top-3 z-20', bottom: 'sticky bottom-3 z-20' },
+    fixed: {
+        // Centred by stretching the box across the viewport and letting `mx-auto`
+        // shrink it back, not by translating it half its own width. The house rule
+        // against transforming a surface holds here too, and `auto` margins are
+        // direction-agnostic, so the lozenge stays centred under RTL.
+        top: 'fixed inset-x-0 top-3 z-30 mx-auto w-fit',
+        bottom: 'fixed inset-x-0 bottom-3 z-30 mx-auto w-fit'
+    }
+};
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * The shape is a **stadium**, which the house radius rule otherwise forbids:
+ * every control is held just short of the 50% that would make it a pill, because
+ * the flat run along its top and bottom edge is what still reads as a sheet with
+ * the corners cut off it. This is the exception the rule is drawn against, and
+ * it works for the same reason the rule does — this is not a sheet lying on the
+ * page. It is an object hovering over one, and an object hovering over the page
+ * should not look as though it was cut from the same material.
+ *
+ * `details` is revealed by animating a measured height, exactly as a
+ * `PlAccordion` panel is: nothing is transformed and no text is resampled, the
+ * pill is simply a window that opens. The measurement is a `ResizeObserver`
+ * rather than a hardcoded height, so a details area whose content changes —
+ * which is what live information does — grows with it.
+ */
+export const PlPill = /* @__PURE__ */ React.forwardRef(function PlPill({ variant = 'solid', size = 'md', color = 'secondary', density = 'default', elevation = 2, startIcon, endIcon, title, description, details, expanded = false, position = 'static', side = 'top', className, style, children, onClick, ...props }, ref) {
+    const detailsRef = React.useRef(null);
+    const [detailsHeight, setDetailsHeight] = React.useState(0);
+    React.useEffect(() => {
+        const element = detailsRef.current;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => setDetailsHeight(element.scrollHeight));
+        observer.observe(element);
+        setDetailsHeight(element.scrollHeight);
+        return () => observer.disconnect();
+    }, [details]);
+    const interactive = Boolean(onClick);
+    const padX = paddingXClasses[density][size];
+    const row = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: cx(mediaClasses, iconSizeClasses[size]), children: startIcon })) : null, hasContent(title) || hasContent(description) || hasContent(children) ? (_jsxs("span", { className: cx('flex min-w-0 flex-1 flex-col items-center justify-center text-center', centerPaddingClasses[density][size]), children: [hasContent(title) ? _jsx("span", { className: "max-w-full truncate", children: title }) : null, hasContent(description) ? (_jsx("span", { className: cx('max-w-full truncate font-normal', metaTextClasses[size], descriptionClasses), children: description })) : null, children] })) : null] }));
+    return (_jsxs("div", { ref: ref, className: cx('inline-flex max-w-full flex-col overflow-hidden align-middle', pillRadiusClasses[size], 'font-medium whitespace-nowrap select-none', controlTextClasses[size], restClasses[variant], transitionClasses, iconClasses, interactive ? `plass-glow ${hoverClasses[variant]}` : '', positionClasses[position][side], className), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [_jsxs("div", { className: cx(
+                // `min-h` rather than a fixed height: one line keeps the stadium the
+                // radius ladder is cut for, and a title with a description under it
+                // grows into a rounded rectangle instead of being clipped. `py-1`
+                // costs nothing in the one-line case — the minimum is taller than
+                // the line plus the padding — and is what keeps two lines off the
+                // edges.
+                'flex shrink-0 items-center py-1', rowMinHeightClasses[size], gapClasses[size], 
+                // With a pressable middle the padding belongs to the button, so its
+                // hit area covers the whole row rather than just the words.
+                interactive ? 'ps-0' : padX, hasContent(endIcon) ? 'pe-1' : interactive ? 'pe-0' : ''), children: [interactive ? (_jsx("button", { type: "button", className: cx('flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch', 
+                        // `inherit`, so the focus ring traces the lozenge's own corners
+                        // rather than drawing a second, squarer rectangle inside them.
+                        'rounded-[inherit]', gapClasses[size], padX, focusRingClasses), onClick: onClick, children: row })) : (row), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: endIcon })) : null] }), hasContent(details) ? (_jsx("div", { className: cx('overflow-hidden', '[transition:height_var(--plass-duration-slow)_var(--plass-ease)]', 'motion-reduce:[transition-duration:0ms]'), style: { height: expanded ? detailsHeight : 0 }, 
+                // `inert` rather than `aria-hidden`: a collapsed panel is a
+                // zero-height box that its content is still perfectly focusable
+                // inside, and `aria-hidden` alone would leave a keyboard reader
+                // tabbing into something their screen reader has been told does not
+                // exist.
+                inert: !expanded, children: _jsx("div", { ref: detailsRef, className: cx('whitespace-normal pb-2', padX, sheetBodyClasses[size]), children: details }) })) : null] }));
+});

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

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

package/dist/components/pill/index.js

@@ -0,0 +1 @@
+export { PlPill } from './PlPill.js';

package/dist/components/popover/PlPopover.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Popover as BaseUIPopover } from '@base-ui/react/popover';
+import type { PlassAlign, PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * A popover takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for `PlMenu`'s reason: the three materials answer "how
+ * much does this surface assert itself against the page", and a popup that had
+ * to be asked for has already answered it. There is no `elevation` either — a
+ * popover genuinely floats, which is the one case the ladder exists for, so it
+ * is fixed at its top rung.
+ */
+export interface PlPopoverProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * The element the popup hangs off and that opens it. Exactly one element,
+     * which must accept a ref and spread props — every Plass component does.
+     *
+     * Optional: a controlled popover anchored from elsewhere needs none, though it
+     * then has nothing to position against and will sit against the viewport.
+     */
+    trigger?: React.ReactElement;
+    /** The heading, rendered as the element that names the popup. */
+    title?: React.ReactNode;
+    /** A line under the title, and the popup's accessible description. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'bottom'
+     */
+    side?: PlassSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: PlassAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     *
+     * Off by default, unlike on a `PlTooltip`. A tooltip is a filled plate and its
+     * wedge is the same solid colour; this surface is translucent over a blurred
+     * backdrop, and a wedge sticking out past the popup's own box cannot carry
+     * that backdrop with it. Turn it on where the trigger is far enough away that
+     * the popup needs to say what it belongs to.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the popover is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the page behind is taken away. `false` — the default — leaves the
+     * page scrollable and clickable, which is what separates a popover from a
+     * `PlModal`: it is a detail beside the page, not instead of it.
+     * `'trap-focus'` holds focus inside without locking the scroll.
+     * @default false
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the popup. Turn it off
+     * only for a popup with its own way out, because there will be no other.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** Shows the × in the corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the × button. Never drawn. @default 'Close' */
+    closeLabel?: string;
+    /**
+     * A hard cap on the popup's width, overriding the one `size` implies. Numbers
+     * are pixels. For the popover whose content decides its width — a form, a
+     * single line of help — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+}
+export type PlPopoverCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIPopover.Close>;
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for `PlModalClose`'s reason: an uncontrolled popover has no `setOpen`
+ * for its Cancel button to call, and making every popover controlled is a piece
+ * of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
+ * `<PlPopoverClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
+ */
+export declare const PlPopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a `PlTooltip` is that this one can be **reached**: it
+ * stays up until it is dismissed, it can be entered with the pointer or the
+ * keyboard, and what is inside it can be clicked and typed into. The difference
+ * from a `PlModal` is that it does not take the page — it is anchored to a
+ * control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window edge, the click-outside and Escape, returning focus to the trigger, and
+ * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
+ * surface, the width ladder and the header.
+ */
+export declare function PlPopover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;

package/dist/components/popover/PlPopover.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as BaseUIPopover } from '@base-ui/react/popover';
+import { CloseIcon } from '../../internal/icons.js';
+import { cx, focusRingClasses, glassClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
+/**
+ * How wide the popup is allowed to get, per `size` — the same axis `PlModal`
+ * folds its width into, one rung narrower at every step because a popover is a
+ * detail beside a control rather than a sheet in the middle of the page.
+ */
+const maxWidthClasses = {
+    xs: 'max-w-56',
+    sm: 'max-w-64',
+    md: 'max-w-80',
+    lg: 'max-w-96',
+    xl: 'max-w-lg'
+};
+/**
+ * The sheet. The same frosted panel a `PlSelect` popup and a `PlModal` draw, and
+ * for the same reason it carries the top of the shadow ladder: it is one of the
+ * few surfaces in the library that is genuinely meant to float.
+ */
+const popupClasses = /* @__PURE__ */ [
+    glassClasses,
+    'relative flex flex-col',
+    'border text-(--plass-fg) bg-(--plass-glass-press)',
+    '[border-color:var(--plass-glass-line)]',
+    '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]',
+    '[outline:none]',
+    // Opacity only. A popup that scales or slides in drags its own text across the
+    // screen for the length of the transition, which is the one thing the house
+    // style is against — and unlike a control, this one is full of text.
+    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
+    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
+].join(' ');
+/** The wedge, at roughly a third of the sheet's corner radius per step. */
+const arrowSizes = {
+    xs: 8,
+    sm: 9,
+    md: 10,
+    lg: 11,
+    xl: 12
+};
+/** The × in the corner, the same one a `PlModal` draws. */
+const closeButtonClasses = /* @__PURE__ */ [
+    'flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center',
+    'rounded-full text-(--plass-muted-fg)',
+    '[&_svg]:size-[1.1em] [&_svg]:shrink-0',
+    '[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]',
+    'hover:bg-(--p-soft) hover:text-(--plass-fg)',
+    focusRingClasses
+].join(' ');
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for `PlModalClose`'s reason: an uncontrolled popover has no `setOpen`
+ * for its Cancel button to call, and making every popover controlled is a piece
+ * of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
+ * `<PlPopoverClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
+ */
+export const PlPopoverClose = BaseUIPopover.Close;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a `PlTooltip` is that this one can be **reached**: it
+ * stays up until it is dismissed, it can be entered with the pointer or the
+ * keyboard, and what is inside it can be clicked and typed into. The difference
+ * from a `PlModal` is that it does not take the page — it is anchored to a
+ * control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window edge, the click-outside and Escape, returning focus to the trigger, and
+ * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
+ * surface, the width ladder and the header.
+ */
+export function PlPopover({ size = 'md', color = 'primary', density = 'default', trigger, title, description, children, side = 'bottom', align = 'center', sideOffset = 6, alignOffset = 0, arrow = false, open, defaultOpen, onOpenChange, modal = false, dismissible = true, showClose = false, closeLabel = 'Close', width, className, style, ...props }) {
+    const insetX = sheetPaddingXClasses[density][size];
+    const insetY = sheetPaddingYClasses[density][size];
+    const arrowSize = arrowSizes[size];
+    const hasHeader = hasContent(title) || hasContent(description);
+    return (_jsxs(BaseUIPopover.Root, { open: open, defaultOpen: defaultOpen, modal: modal, onOpenChange: (next, details) => {
+            // Base UI has no `disablePointerDismissal` on a popover, so both ways
+            // out are cancelled here by the reason the change arrives with. An
+            // imperative close and a `PlPopoverClose` press still get through, which
+            // is what keeps `dismissible={false}` from being a trap.
+            if (!dismissible &&
+                !next &&
+                (details.reason === 'escape-key' ||
+                    details.reason === 'outside-press' ||
+                    details.reason === 'focus-out')) {
+                details.cancel();
+                return;
+            }
+            onOpenChange?.(next);
+        }, children: [trigger ? _jsx(BaseUIPopover.Trigger, { render: trigger }) : null, _jsx(BaseUIPopover.Portal, { children: _jsx(BaseUIPopover.Positioner, { className: "plass-portal z-50 [outline:none]", side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, children: _jsxs(BaseUIPopover.Popup, { className: cx(popupClasses, radiusClasses[size], sheetBodyClasses[size], sheetSectionGapClasses[size], insetX, insetY, width === undefined ? maxWidthClasses[size] : '', className), style: {
+                            ...surfaceSlots(color, 3),
+                            ...(width === undefined
+                                ? null
+                                : { maxWidth: typeof width === 'number' ? `${width}px` : width }),
+                            ...style
+                        }, ...props, children: [arrow ? (_jsx(BaseUIPopover.Arrow
+                            // Base UI positions the wedge and reports which side it ended up
+                            // on. It is drawn pointing down once and turned to match — a
+                            // rotation of a glyph, which is the one allowance the
+                            // no-transform rule makes.
+                            , { 
+                                // Base UI positions the wedge and reports which side it ended up
+                                // on. It is drawn pointing down once and turned to match — a
+                                // rotation of a glyph, which is the one allowance the
+                                // no-transform rule makes.
+                                className: cx('data-[side=top]:bottom-[-1px]', 'data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180', 'data-[side=left]:right-[-1px] data-[side=left]:-rotate-90', 'data-[side=right]:left-[-1px] data-[side=right]:rotate-90'), children: _jsxs("svg", { width: arrowSize, height: arrowSize / 2, viewBox: "0 0 10 5", "aria-hidden": "true", className: "block", children: [_jsx("path", { d: "M0 0h10L5 5z", fill: "var(--plass-glass-press)" }), _jsx("path", { d: "M0 0 5 5 10 0", fill: "none", stroke: "var(--plass-glass-line)", strokeWidth: "1", vectorEffect: "non-scaling-stroke" })] }) })) : null, hasHeader || showClose ? (_jsxs("div", { className: "flex shrink-0 items-start gap-3", children: [_jsxs("div", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx(BaseUIPopover.Title, { className: cx('m-0 font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(description) ? (_jsx(BaseUIPopover.Description, { className: cx('m-0 text-(--plass-muted-fg)', metaTextClasses[size]), children: description })) : null] }), showClose ? (_jsx(BaseUIPopover.Close, { "aria-label": closeLabel, className: closeButtonClasses, children: _jsx(CloseIcon, {}) })) : null] })) : null, hasContent(children) ? _jsx("div", { className: "min-w-0", children: children }) : null] }) }) })] }));
+}

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

@@ -0,0 +1,2 @@
+export { PlPopover, PlPopoverClose } from './PlPopover.js';
+export type { PlPopoverCloseProps, PlPopoverProps } from './PlPopover.js';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { PlPopover, PlPopoverClose } from './PlPopover.js';

package/dist/components/progress-box/PlProgressBox.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressBoxProps extends PlassProgressProps {
+    /** Size of one plate. */
+    size?: PlassProgressProps['size'];
+    /**
+     * How many plates the row is made of.
+     *
+     * Four by default: enough that the wave reads as a wave, few enough that a
+     * determinate row can be counted at a glance rather than measured. Set it to
+     * the number of steps when the thing being waited on genuinely has steps.
+     * @default 4
+     */
+    count?: number;
+}
+/**
+ * A row of small glass plates that light up.
+ *
+ * The third shape, and the one that is about the material rather than about the
+ * quantity. A bar and a ring both say "this much of it is done"; a row of
+ * plates says "this is working" in the library's own vocabulary — the same
+ * groove, the same corner, the same gradient — which is what makes it the right
+ * one for a loading state inside a Plass surface, where a foreign grey spinner
+ * would look borrowed.
+ *
+ * It answers a value when it has one: the plates fill in order, the leading one
+ * partially, so four plates read as a four-segment bar rather than as four
+ * quarters. Without a value they cycle, each held back by its own index — and
+ * what cycles is the fill's **opacity**, because a gradient has no interpolation
+ * between itself and nothing.
+ */
+export declare const PlProgressBox: React.ForwardRefExoticComponent<PlProgressBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-box/PlProgressBox.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Progress } from '@base-ui/react/progress';
+import { fillTransitionClasses, plateGapClasses, plateRadiusClasses, plateSizeClasses, progressAriaText, progressFraction, progressSlots, progressText, trackClasses } from '../../internal/progress.js';
+import { cx, metaTextClasses, stackGapClasses } from '../../internal/styles.js';
+/**
+ * A row of small glass plates that light up.
+ *
+ * The third shape, and the one that is about the material rather than about the
+ * quantity. A bar and a ring both say "this much of it is done"; a row of
+ * plates says "this is working" in the library's own vocabulary — the same
+ * groove, the same corner, the same gradient — which is what makes it the right
+ * one for a loading state inside a Plass surface, where a foreign grey spinner
+ * would look borrowed.
+ *
+ * It answers a value when it has one: the plates fill in order, the leading one
+ * partially, so four plates read as a four-segment bar rather than as four
+ * quarters. Without a value they cycle, each held back by its own index — and
+ * what cycles is the fill's **opacity**, because a gradient has no interpolation
+ * between itself and nothing.
+ */
+export const PlProgressBox = /* @__PURE__ */ React.forwardRef(function PlProgressBox({ size = 'md', color = 'primary', count = 4, value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
+    const fraction = progressFraction(value, min, max);
+    const indeterminate = fraction === null;
+    const hasFormat = format !== undefined;
+    // A row of no plates is not a loading indicator, and a fractional count is a
+    // caller who divided something. Both land on one plate rather than on none.
+    const plates = Math.max(1, Math.floor(count));
+    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('inline-flex flex-col', stackGapClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [label || showValue ? (_jsxs("div", { className: cx('flex items-baseline gap-2', label ? 'justify-between' : 'justify-end', metaTextClasses[size]), children: [label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] })) : null, _jsx(Progress.Track, { className: cx('flex', plateGapClasses[size]), children: Array.from({ length: plates }, (_, index) => (_jsx("span", { className: cx('relative overflow-hidden', trackClasses, plateSizeClasses[size], plateRadiusClasses[size]), children: _jsx("span", { "aria-hidden": "true", className: cx('absolute inset-y-0 start-0 [background-image:var(--p-fill)]', indeterminate ? 'plass-plate-wave w-full' : fillTransitionClasses), style: indeterminate
+                            ? { '--p-i': index }
+                            : {
+                                width: `${Math.min(100, Math.max(0, (fraction * plates - index) * 100))}%`
+                            } }) }, index))) })] }));
+});

package/dist/components/progress-box/index.d.ts

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

package/dist/components/progress-box/index.js

@@ -0,0 +1 @@
+export { PlProgressBox } from './PlProgressBox.js';

package/dist/components/progress-circular/PlProgressCircular.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressCircularProps extends PlassProgressProps {
+    /** Diameter of the ring. Sits just under the control ladder at every step. */
+    size?: PlassProgressProps['size'];
+}
+/**
+ * A ring that fills, and the one to reach for where there is no room for a bar
+ * — inside a button, at the end of a table row, next to a field.
+ *
+ * The arc is the family's gradient rather than a flat colour, which takes a
+ * `<linearGradient>` of its own: an SVG stroke cannot be given a CSS gradient,
+ * so the two ends of the fill are lifted out of the slots and rebuilt at 135°.
+ * It is worth the extra element — a flat ring beside a swept bar is two
+ * materials for one idea.
+ *
+ * The value and the label sit *beside* the ring rather than inside it. A number
+ * in the middle of a dial is the picture everyone has of this component, and it
+ * only works at two of the five sizes: at `xs` the ring is fourteen pixels
+ * across and there is nowhere for "40%" to go. Beside it, every size reads.
+ */
+export declare const PlProgressCircular: React.ForwardRefExoticComponent<PlProgressCircularProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-circular/PlProgressCircular.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Progress } from '@base-ui/react/progress';
+import { progressAriaText, progressFraction, progressSlots, progressText, ringDiameters, ringStrokes } from '../../internal/progress.js';
+import { cx, gapClasses, metaTextClasses } from '../../internal/styles.js';
+/**
+ * A ring that fills, and the one to reach for where there is no room for a bar
+ * — inside a button, at the end of a table row, next to a field.
+ *
+ * The arc is the family's gradient rather than a flat colour, which takes a
+ * `<linearGradient>` of its own: an SVG stroke cannot be given a CSS gradient,
+ * so the two ends of the fill are lifted out of the slots and rebuilt at 135°.
+ * It is worth the extra element — a flat ring beside a swept bar is two
+ * materials for one idea.
+ *
+ * The value and the label sit *beside* the ring rather than inside it. A number
+ * in the middle of a dial is the picture everyone has of this component, and it
+ * only works at two of the five sizes: at `xs` the ring is fourteen pixels
+ * across and there is nowhere for "40%" to go. Beside it, every size reads.
+ */
+export const PlProgressCircular = /* @__PURE__ */ React.forwardRef(function PlProgressCircular({ size = 'md', color = 'primary', value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
+    const fraction = progressFraction(value, min, max);
+    const indeterminate = fraction === null;
+    const hasFormat = format !== undefined;
+    const gradientId = `${React.useId()}-fill`;
+    const diameter = ringDiameters[size];
+    const stroke = ringStrokes[size];
+    const centre = diameter / 2;
+    // The stroke straddles the path, so the radius has to come in by half of it
+    // or the ring is clipped by its own viewBox.
+    const radius = centre - stroke / 2;
+    const circumference = 2 * Math.PI * radius;
+    // Indeterminate draws a fixed quarter-arc and turns; determinate holds still
+    // and lets the gap close. Both are one dash pattern on one circle.
+    const dashArray = indeterminate ? `${circumference * 0.28} ${circumference}` : `${circumference}`;
+    const dashOffset = indeterminate ? 0 : circumference * (1 - fraction);
+    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('inline-flex items-center', gapClasses[size], metaTextClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [_jsxs("svg", { 
+                // The rotation is on the whole `<svg>` and not on a group inside it:
+                // `transform-origin: center` resolves against an element's border box,
+                // which an SVG child does not have one of unless `transform-box` is set
+                // as well. One element, one rule, no surprises across browsers.
+                className: cx('shrink-0', indeterminate && 'plass-ring-spin'), width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--p-solid)" }), _jsx("stop", { offset: "100%", stopColor: "var(--p-solid-to)" })] }) }), _jsx("circle", { cx: centre, cy: centre, r: radius, stroke: "var(--plass-track)", strokeWidth: stroke }), _jsx("circle", { cx: centre, cy: centre, r: radius, stroke: `url(#${gradientId})`, strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: dashArray, strokeDashoffset: dashOffset, 
+                        // An SVG geometry attribute rather than a CSS transform: this is where
+                        // the arc starts, not something the ring does when its state changes.
+                        // Without it a determinate ring would fill from three o'clock.
+                        transform: `rotate(-90 ${centre} ${centre})`, className: "[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]" })] }), label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] }));
+});

package/dist/components/progress-circular/index.d.ts

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

package/dist/components/progress-circular/index.js

@@ -0,0 +1 @@
+export { PlProgressCircular } from './PlProgressCircular.js';

package/dist/components/progress-linear/PlProgressLinear.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressLinearProps extends PlassProgressProps {
+    /** Thickness of the groove. Nothing else on a bar has a size. */
+    size?: PlassProgressProps['size'];
+}
+/**
+ * A bar that fills.
+ *
+ * The workhorse of the three: it is the only one that can show *how much* is
+ * left at a glance, because length is the one quantity a reader can compare
+ * without counting.
+ *
+ * The groove is `--plass-track`, the same neutral ink a PlSlider's rail and a
+ * PlSwitch's off state are cut in, and the segment over it is the family's
+ * gradient — so the filled part of the run is made of exactly the same material
+ * as the button that submits the form it is in. Which is also why the movement
+ * is on `width`: a gradient cannot be transitioned, and a length can.
+ *
+ * Both the groove and the segment are fully rounded, and that is the one place
+ * the library's rule about pills does not apply. The rule protects the flat run
+ * along a control's edge that a line of text sits on; at six pixels tall there
+ * is no flat run left to protect, and a square-ended bar reads as a rendering
+ * fault rather than as a cut edge.
+ *
+ * Base UI owns the semantics — `role="progressbar"`, the value and range
+ * attributes, `aria-valuetext`, and dropping the value entirely when the bar is
+ * indeterminate — and it computes the fill width too, so the determinate case
+ * here is a class list and nothing else.
+ */
+export declare const PlProgressLinear: React.ForwardRefExoticComponent<PlProgressLinearProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-linear/PlProgressLinear.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Progress } from '@base-ui/react/progress';
+import { barThicknessClasses, fillTransitionClasses, progressAriaText, progressFraction, progressSlots, progressText, trackClasses } from '../../internal/progress.js';
+import { cx, metaTextClasses, stackGapClasses } from '../../internal/styles.js';
+/**
+ * A bar that fills.
+ *
+ * The workhorse of the three: it is the only one that can show *how much* is
+ * left at a glance, because length is the one quantity a reader can compare
+ * without counting.
+ *
+ * The groove is `--plass-track`, the same neutral ink a PlSlider's rail and a
+ * PlSwitch's off state are cut in, and the segment over it is the family's
+ * gradient — so the filled part of the run is made of exactly the same material
+ * as the button that submits the form it is in. Which is also why the movement
+ * is on `width`: a gradient cannot be transitioned, and a length can.
+ *
+ * Both the groove and the segment are fully rounded, and that is the one place
+ * the library's rule about pills does not apply. The rule protects the flat run
+ * along a control's edge that a line of text sits on; at six pixels tall there
+ * is no flat run left to protect, and a square-ended bar reads as a rendering
+ * fault rather than as a cut edge.
+ *
+ * Base UI owns the semantics — `role="progressbar"`, the value and range
+ * attributes, `aria-valuetext`, and dropping the value entirely when the bar is
+ * indeterminate — and it computes the fill width too, so the determinate case
+ * here is a class list and nothing else.
+ */
+export const PlProgressLinear = /* @__PURE__ */ React.forwardRef(function PlProgressLinear({ size = 'md', color = 'primary', value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
+    const fraction = progressFraction(value, min, max);
+    const indeterminate = fraction === null;
+    const hasFormat = format !== undefined;
+    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('flex w-full flex-col', stackGapClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [label || showValue ? (_jsxs("div", { className: cx('flex items-baseline gap-2', label ? 'justify-between' : 'justify-end', metaTextClasses[size]), children: [label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] })) : null, _jsx(Progress.Track, { className: cx('relative w-full overflow-hidden rounded-full', trackClasses, barThicknessClasses[size]), children: _jsx(Progress.Indicator, { className: cx('rounded-full [background-image:var(--p-fill)]', 
+                    // `plass-progress-sweep` supplies the position, the width and the
+                    // animation; with a value Base UI supplies the width instead and
+                    // this transition is what makes it travel rather than jump. Both
+                    // change an inline size, never a transform.
+                    indeterminate ? 'plass-progress-sweep' : `absolute top-0 ${fillTransitionClasses}`) }) })] }));
+});

package/dist/components/progress-linear/index.d.ts

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

package/dist/components/progress-linear/index.js

@@ -0,0 +1 @@
+export { PlProgressLinear } from './PlProgressLinear.js';