plass-ui 0.0.1 → 1.0.0

package/dist/components/timeline/PlTimeline.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cx, hasContent, iconClasses, metaTextClasses, sheetBodyClasses, sheetTitleClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+const TimelineContext = /* @__PURE__ */ React.createContext(null);
+const TimelineItemContext = /* @__PURE__ */ React.createContext({
+    index: 0,
+    last: false
+});
+/* ---------------------------------------------------------------------------
+ * Scales
+ * ------------------------------------------------------------------------- */
+/**
+ * The bullet.
+ *
+ * Its own ladder rather than a step off `controlHeightClasses`, for the reason
+ * `tickSizeClasses` has one: a bullet is not a control you can put a label
+ * inside. It is a mark beside one, sized against the title next to it — which is
+ * why the steps are close to the tick ladder and not to the control ladder.
+ *
+ * It is written as a custom property rather than as a class because the
+ * connector has to know it: the line is centred on the bullet, and centring is
+ * arithmetic on this number.
+ */
+const bulletSizeValues = {
+    xs: '0.875rem',
+    sm: '1rem',
+    md: '1.25rem',
+    lg: '1.5rem',
+    xl: '1.875rem'
+};
+/** Between the bullet column and the content beside it. */
+const bulletGapClasses = {
+    xs: 'gap-2',
+    sm: 'gap-2.5',
+    md: 'gap-3',
+    lg: 'gap-3.5',
+    xl: 'gap-4'
+};
+/**
+ * How far apart two items sit, and the one thing `density` is allowed to touch
+ * here — a compact timeline is the same type at the same bullet size with less
+ * air between the steps.
+ *
+ * The floor is set by the item with nothing in it. A step that is only a title
+ * and a time is one line tall, so the gap is the *whole* of what separates it
+ * from the next one — where a step with a paragraph under it has the paragraph's
+ * own leading working for it as well. Tuned against that case, which is why even
+ * `compact` keeps more air than a list of one-liners would otherwise suggest.
+ */
+const itemGapClasses = {
+    default: { xs: 'pb-5', sm: 'pb-6', md: 'pb-7', lg: 'pb-8', xl: 'pb-10' },
+    compact: { xs: 'pb-3', sm: 'pb-3.5', md: 'pb-4', lg: 'pb-5', xl: 'pb-6' }
+};
+/** The same ladder across, for the horizontal form. */
+const itemGapXClasses = {
+    default: { xs: 'pe-5', sm: 'pe-6', md: 'pe-7', lg: 'pe-8', xl: 'pe-10' },
+    compact: { xs: 'pe-3', sm: 'pe-3.5', md: 'pe-4', lg: 'pe-5', xl: 'pe-6' }
+};
+const borderStyleClasses = {
+    solid: 'border-solid',
+    dashed: 'border-dashed',
+    dotted: 'border-dotted',
+    none: ''
+};
+/**
+ * The bullet at each of the three states.
+ *
+ * Every one of them is a different axis, never a different opacity: `complete`
+ * is the family's gradient, `current` is that gradient with a halo of the soft
+ * tint around it, and `upcoming` is a hairline ring on the page's own surface. A
+ * reader who cannot tell the colours apart still has a filled shape, a haloed
+ * shape and an empty one.
+ *
+ * There is no gloss line on the two filled ones, for the reason a filled
+ * `PlButton` has none — the gradient is the form. The `upcoming` ring is drawn
+ * in the neutral hairline rather than the sheet's white one, the same call a
+ * checkbox's edge makes: a bullet is small enough that its edge *is* the object,
+ * and white light on a translucent pane disappears on a light card.
+ */
+const bulletStatusClasses = {
+    complete: '[background-image:var(--p-fill)] text-(--p-on-solid)',
+    current: '[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]',
+    upcoming: 'border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]'
+};
+/**
+ * The line *after* an item, which is what makes it the item's own property: a
+ * connector is coloured by whether the step it leaves has been reached, not by
+ * where it arrives.
+ */
+const connectorColorClasses = {
+    complete: '[border-color:var(--p-line-hover)]',
+    current: '[border-color:var(--plass-border)]',
+    upcoming: '[border-color:var(--plass-border)]'
+};
+const titleStatusClasses = {
+    complete: 'text-(--plass-fg)',
+    current: 'text-(--p-accent)',
+    upcoming: 'text-(--plass-muted-fg)'
+};
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: an item that had to be told where it
+ * was in the list would be an item every caller could put in the wrong place,
+ * and `active={2}` would stop meaning anything. The `PlTimeline` numbers its
+ * children as it walks them, and hands each one its index through a context.
+ */
+export const PlTimelineItem = /* @__PURE__ */ React.forwardRef(function PlTimelineItem({ title, meta, bullet, status, color, connector = 'solid', className, children, ...props }, ref) {
+    const timeline = React.useContext(TimelineContext);
+    const { index, last } = React.useContext(TimelineItemContext);
+    // A bare item outside a timeline still renders — it is just one step with
+    // nothing before or after it. The defaults are the timeline's own.
+    const size = timeline?.size ?? 'md';
+    const density = timeline?.density ?? 'default';
+    const orientation = timeline?.orientation ?? 'vertical';
+    const family = color ?? timeline?.color ?? 'primary';
+    const active = timeline?.active ?? null;
+    const resolved = status ??
+        (active === null
+            ? 'upcoming'
+            : index < active
+                ? 'complete'
+                : index === active
+                    ? 'current'
+                    : 'upcoming');
+    const horizontal = orientation === 'horizontal';
+    // The last item's line would run off the end of the sequence into nothing.
+    const drawsConnector = connector !== 'none' && !last;
+    const bulletBox = (_jsx("span", { "aria-hidden": "true", className: cx('relative z-10 flex shrink-0 items-center justify-center rounded-full', 
+        // The label inside the bullet is sized off the bullet rather than off
+        // the page's own text, so a number in an `xs` bullet is not the same
+        // 8px it would be in an `xl` one.
+        'size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums', bulletStatusClasses[resolved], transitionClasses, iconClasses), children: bullet }));
+    /*
+     * The line, drawn as one border edge on an absolutely positioned box rather
+     * than as a filled `<div>`, so `dashed` and `dotted` are the browser's own
+     * dashes and land on the device pixel grid the way every other edge in the
+     * library does.
+     *
+     * It starts at the far edge of the bullet and runs to the edge of the item,
+     * which is where the next bullet begins — so the arithmetic is the bullet
+     * size, and that is the whole reason it is a custom property.
+     */
+    const connectorLine = drawsConnector ? (_jsx("span", { "aria-hidden": "true", className: cx('pointer-events-none absolute', 
+        // Half the bullet, less half the line, so the 2px rule is centred on
+        // the bullet rather than starting at its centre.
+        horizontal
+            ? 'top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2'
+            : 'top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2', borderStyleClasses[connector], connectorColorClasses[resolved], transitionClasses) })) : null;
+    const body = (_jsxs("div", { className: cx('flex min-w-0 flex-col gap-0.5', horizontal ? 'mt-2' : ''), children: [hasContent(title) || hasContent(meta) ? (_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [hasContent(title) ? (_jsx("span", { className: cx('font-semibold', sheetTitleClasses[size], titleStatusClasses[resolved], transitionClasses), children: title })) : null, hasContent(meta) ? (_jsx("span", { className: cx('text-(--plass-muted-fg)', metaTextClasses[size]), children: meta })) : null] })) : null, hasContent(children) ? (_jsx("div", { className: cx('text-(--plass-muted-fg)', sheetBodyClasses[size]), children: children })) : null] }));
+    return (_jsxs("li", { ref: ref, "aria-current": resolved === 'current' ? 'step' : undefined, "data-status": resolved, className: cx('relative', horizontal
+            ? cx('flex min-w-0 flex-1 flex-col', last ? '' : itemGapXClasses[density][size])
+            : cx('flex', bulletGapClasses[size], last ? '' : itemGapClasses[density][size]), className), style: {
+            '--p-bullet': bulletSizeValues[size],
+            ...surfaceSlots(family, 0),
+            // A container's slots leave the sheet undyed, which is right for the
+            // ground a bullet sits on — but a bullet *is* the thing being
+            // coloured, so the two fills it needs are put back.
+            '--p-fill': `var(--plass-${family}-fill)`,
+            '--p-on-solid': `var(--plass-${family}-on-solid)`
+        }, ...props, children: [connectorLine, bulletBox, body] }));
+});
+/**
+ * A sequence of steps, in the order they happen in.
+ *
+ * There is no Base UI primitive under this and there should not be: a timeline
+ * has no selection, no roving focus and no keyboard contract — it is a list, and
+ * reaching for a composite primitive to draw one would hand every consumer's
+ * record of events the semantics of a widget.
+ *
+ * It is an `<ol>` for the reason it exists at all: the order *is* the content. A
+ * screen reader announcing "list of 5 items" over an unordered list would be
+ * describing something else.
+ *
+ * The children are numbered here rather than by a prop on each item, so `active`
+ * has something to count against and inserting a step in the middle does not
+ * mean renumbering the ones after it.
+ */
+export const PlTimeline = /* @__PURE__ */ React.forwardRef(function PlTimeline({ active, size = 'md', color = 'primary', density = 'default', orientation = 'vertical', render, className, style, children, ...props }, ref) {
+    // `toArray` is what drops the `null`s and `false`s a conditional step leaves
+    // behind, so `active={2}` counts the steps that are actually on the page.
+    const items = React.Children.toArray(children);
+    const count = items.length;
+    const context = React.useMemo(() => ({
+        size,
+        density,
+        orientation,
+        color,
+        active: active ?? null
+    }), [size, density, orientation, color, active]);
+    const element = useRender({
+        render: render ?? _jsx("ol", {}),
+        ref,
+        props: {
+            // Tailwind's reset takes the markers off every `<ol>`, and Safari takes
+            // the list semantics off with them. Saying `role="list"` out loud is the
+            // one-line fix, and it costs nothing when the reset is not there.
+            role: 'list',
+            className: cx('flex', orientation === 'horizontal' ? 'flex-row' : 'flex-col', className),
+            style: { ...surfaceSlots(color, 0), ...style },
+            children: items.map((item, index) => (_jsx(TimelineItemContext.Provider, { value: { index, last: index === count - 1 }, children: item }, index))),
+            ...props
+        }
+    });
+    return _jsx(TimelineContext.Provider, { value: context, children: element });
+});

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

@@ -0,0 +1,2 @@
+export { PlTimeline, PlTimelineItem } from './PlTimeline.js';
+export type { PlTimelineConnector, PlTimelineItemProps, PlTimelineProps, PlTimelineStatus } from './PlTimeline.js';

package/dist/components/timeline/index.js

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

package/dist/components/toast/PlToast.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassStyleProps, PlassVariant } from '../../types.js';
+/**
+ * Where the stack sits.
+ *
+ * Written as two words rather than as a `side` plus an `align` pair, because
+ * they are not independent: a toast stack is always pinned to the top or the
+ * bottom, never to a side, and offering `left`/`right` as a "side" would invite
+ * a stack down the middle of the screen that nothing in the layout survives.
+ * The second half is `PlassAlign`, the same word every other component uses.
+ */
+export type PlToastPosition = `top-${PlassAlign}` | `bottom-${PlassAlign}`;
+/**
+ * The Plass style props a single toast can override, carried in Base UI's
+ * per-toast `data`. Anything not set here falls back to the provider.
+ */
+export interface PlToastData {
+    color?: PlassColor;
+    variant?: PlassVariant;
+    icon?: React.ReactNode | false;
+}
+export interface PlToastOptions extends PlToastData {
+    /**
+     * Reusing an id updates that toast in place and restarts its timer, which is
+     * what "uploading… / uploaded" wants: one toast that changed its mind, not two
+     * stacked on each other.
+     */
+    id?: string;
+    /** The headline. */
+    title?: React.ReactNode;
+    /** The detail under it. A toast with only this is a one-line toast. */
+    description?: React.ReactNode;
+    /**
+     * How long before it dismisses itself, in milliseconds. `0` means it stays
+     * until it is closed — which is the right answer for anything the reader has
+     * to act on, because a toast that leaves before it is read said nothing.
+     */
+    timeout?: number;
+    /**
+     * `high` interrupts a screen reader; `low` waits for a pause. An error is
+     * worth interrupting for and a save confirmation is not.
+     * @default 'low'
+     */
+    priority?: 'low' | 'high';
+    /** The label of the action button. Passing it is what makes the button appear. */
+    actionLabel?: React.ReactNode;
+    onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called when the toast closes, however it closed. */
+    onClose?: () => void;
+    /** Called once it has finished animating out and left the DOM. */
+    onRemove?: () => void;
+}
+export interface PlToastProviderProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'> {
+    /** The default colour family. A single toast overrides it in `add`. */
+    color?: PlassColor;
+    /** @default 'bottom-end' */
+    position?: PlToastPosition;
+    /**
+     * How long a toast lasts by default, in milliseconds. `0` keeps every toast up
+     * until it is closed.
+     * @default 5000
+     */
+    timeout?: number;
+    /**
+     * How many are shown at once. The rest are kept and revealed as the stack
+     * drains rather than being thrown away.
+     * @default 3
+     */
+    limit?: number;
+    /**
+     * How wide a toast is allowed to get. Numbers are pixels.
+     * @default 380
+     */
+    width?: number | string;
+    /**
+     * Accessible name of every toast's × button. Never drawn.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Raises toasts from anywhere under a `PlToastProvider`.
+ *
+ * A hook rather than a component, because the thing a caller has at the moment a
+ * toast is warranted is a click handler, not a place in the tree — and a
+ * `<PlToast open={…} />` they would have to keep mounted, with a piece of state
+ * per message, is the shape this component exists to avoid.
+ */
+export declare function usePlToast(): {
+    /** Raises a toast and returns its id. */
+    add: (options: PlToastOptions) => string;
+    /** Closes one toast, or every toast when called with nothing. */
+    close: (id?: string) => void;
+    /** Changes a toast already on screen. */
+    update: (id: string, options: PlToastOptions) => void;
+    /**
+     * One toast that follows a promise: the loading message while it runs, then
+     * the success or the error. `timeout: 0` is applied to the loading state by
+     * Base UI, so a slow request cannot dismiss its own toast.
+     */
+    promise: <Value>(promise: Promise<Value>, options: {
+        loading: PlToastOptions;
+        success: PlToastOptions | ((value: Value) => PlToastOptions);
+        error: PlToastOptions | ((error: unknown) => PlToastOptions);
+    }) => Promise<Value>;
+    /** Every toast currently in the stack, newest first. */
+    toasts: import("@base-ui/react").ToastObject<PlToastData>[];
+};
+/**
+ * Puts the toast stack on the page and lets anything under it raise a message.
+ *
+ * Wrap the application once. Everything about how a toast *looks* is decided
+ * here — where the stack sits, how wide it is, which material it wears, how long
+ * it lasts — so the call site stays the one thing it should be: what happened.
+ *
+ * Base UI owns the parts of this that are genuinely hard and invisible when they
+ * work: the timers and their pausing on hover and on window blur, the limit, the
+ * swipe, the F6 focus hotkey, and the live region that makes a message which
+ * appeared out of nowhere reach a screen reader at all.
+ */
+export declare function PlToastProvider({ variant, size, color, density, position, timeout, limit, width, closeLabel, children }: PlToastProviderProps): React.JSX.Element;

package/dist/components/toast/PlToast.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Toast as BaseUIToast } from '@base-ui/react/toast';
+import { CloseIcon, severityIcon } from '../../internal/icons.js';
+import { controlSlots, focusRingClasses, glassClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses } from '../../internal/styles.js';
+/**
+ * How a stack is pinned, per position.
+ *
+ * The viewport is full width in every case and the alignment is done with
+ * `items-*`, rather than by pinning one edge and nudging the centre back with a
+ * translate. That keeps the one `transform` this component could have wanted out
+ * of it, and it means the same three classes serve all six positions.
+ */
+const viewportClasses = {
+    'top-start': 'top-0 items-start',
+    'top-center': 'top-0 items-center',
+    'top-end': 'top-0 items-end',
+    'bottom-start': 'bottom-0 flex-col-reverse items-start',
+    'bottom-center': 'bottom-0 flex-col-reverse items-center',
+    'bottom-end': 'bottom-0 flex-col-reverse items-end'
+};
+/**
+ * A toast floats over the page, so — with the `PlSelect` popup, the `PlModal`
+ * sheet and the `PlTooltip` plate — it carries a shadow by default, at level 3.
+ *
+ * The two undyed materials are the glass at its most opaque, for the reason the
+ * modal's sheet is: what is behind a toast is arbitrary, and a 62%-translucent
+ * pane over a photograph is a pane you read the photograph through.
+ */
+const rootClasses = {
+    solid: /* @__PURE__ */ [
+        'text-(--p-on-solid) [background-image:var(--p-fill)]',
+        '[box-shadow:var(--plass-shadow-3),var(--p-lift)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border text-(--plass-fg) bg-(--plass-glass-press)',
+        '[border-color:var(--p-line)]',
+        '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: /* @__PURE__ */ [
+        glassClasses,
+        'text-(--plass-fg) bg-(--plass-glass-press)',
+        '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]'
+    ].join(' ')
+};
+const accentClasses = {
+    solid: '',
+    glass: 'text-(--p-accent)',
+    ghost: 'text-(--p-accent)'
+};
+/**
+ * Turns a Plass toast into the object Base UI's manager stores.
+ *
+ * The style props go into `data` rather than becoming top-level fields, because
+ * `data` is the slot Base UI reserves for exactly this and the alternative —
+ * shadowing the manager's own option names — is how a library ends up with two
+ * `type` props that mean different things.
+ */
+function toManagerOptions(options) {
+    const { color, variant, icon, actionLabel, onAction, ...rest } = options;
+    return {
+        ...rest,
+        data: { color, variant, icon },
+        actionProps: actionLabel === undefined
+            ? undefined
+            : { children: actionLabel, onClick: onAction }
+    };
+}
+/**
+ * Raises toasts from anywhere under a `PlToastProvider`.
+ *
+ * A hook rather than a component, because the thing a caller has at the moment a
+ * toast is warranted is a click handler, not a place in the tree — and a
+ * `<PlToast open={…} />` they would have to keep mounted, with a piece of state
+ * per message, is the shape this component exists to avoid.
+ */
+export function usePlToast() {
+    const manager = BaseUIToast.useToastManager();
+    return React.useMemo(() => ({
+        /** Raises a toast and returns its id. */
+        add: (options) => manager.add(toManagerOptions(options)),
+        /** Closes one toast, or every toast when called with nothing. */
+        close: (id) => manager.close(id),
+        /** Changes a toast already on screen. */
+        update: (id, options) => manager.update(id, toManagerOptions(options)),
+        /**
+         * One toast that follows a promise: the loading message while it runs, then
+         * the success or the error. `timeout: 0` is applied to the loading state by
+         * Base UI, so a slow request cannot dismiss its own toast.
+         */
+        promise: (promise, options) => manager.promise(promise, {
+            loading: toManagerOptions(options.loading),
+            success: (value) => toManagerOptions(typeof options.success === 'function' ? options.success(value) : options.success),
+            error: (error) => toManagerOptions(typeof options.error === 'function' ? options.error(error) : options.error)
+        }),
+        /** Every toast currently in the stack, newest first. */
+        toasts: manager.toasts
+    }), [manager]);
+}
+function ToastItem({ toast, variant: providerVariant, color: providerColor, size, density, closeLabel, swipeDirection }) {
+    const variant = toast.data?.variant ?? providerVariant ?? 'glass';
+    const color = toast.data?.color ?? providerColor;
+    const glyph = toast.data?.icon === undefined ? severityIcon(color) : toast.data.icon;
+    const accent = accentClasses[variant];
+    const titled = hasContent(toast.title);
+    return (_jsxs(BaseUIToast.Root, { toast: toast, swipeDirection: swipeDirection, className: [
+            'pointer-events-auto flex w-full items-start',
+            sheetPaddingXClasses[density ?? 'default'][size],
+            sheetPaddingYClasses[density ?? 'default'][size],
+            radiusClasses[size],
+            sheetSectionGapClasses[size],
+            sheetBodyClasses[size],
+            rootClasses[variant],
+            iconClasses,
+            // Opacity, and only opacity — the same restraint the modal shows, and
+            // for the same reason: this is a box full of text. Base UI still moves
+            // it while a finger is dragging it, which is the reader's hand rather
+            // than a state change, and it stops the moment the finger lifts.
+            '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
+            'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
+            // A toast pushed out by the limit is kept in the DOM so it can come
+            // back; it just has nothing to say while it waits.
+            'data-[limited]:hidden',
+            focusRingClasses,
+            '[outline:none]'
+        ]
+            .filter(Boolean)
+            .join(' '), style: controlSlots(color, 3, variant), 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: [_jsx(BaseUIToast.Title, { className: `plass-title font-semibold ${sheetTitleClasses[size]} ${accent}` }), _jsx(BaseUIToast.Description, { className: titled && variant !== 'solid' ? 'text-(--plass-muted-fg)' : '' })] }), _jsx(BaseUIToast.Action, { className: [
+                    'flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2',
+                    'font-medium underline-offset-2',
+                    accent || 'text-(--p-on-solid)',
+                    'hover:underline',
+                    focusRingClasses,
+                    metaTextClasses[size]
+                ].join(' ') }), _jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUIToast.Close, { "aria-label": closeLabel, 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, {}) }) })] }));
+}
+/** The stack itself. Rendered by the provider, never by a caller. */
+function ToastViewport(props) {
+    const { toasts } = BaseUIToast.useToastManager();
+    const { position, width, ...rest } = props;
+    const swipeDirection = [
+        position.startsWith('top') ? 'up' : 'down',
+        'left',
+        'right'
+    ];
+    return (_jsx(BaseUIToast.Portal, { children: _jsx(BaseUIToast.Viewport, { className: [
+                // Full width and `pointer-events-none`, so the strip across the top or
+                // the bottom of the page is not a wall the rest of the app is behind.
+                // The toasts themselves take their events back.
+                'plass-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4',
+                viewportClasses[position]
+            ].join(' '), children: toasts.map((toast) => (_jsx("div", { className: "w-full", style: { maxWidth: typeof width === 'number' ? `${width}px` : width }, children: _jsx(ToastItem, { toast: toast, swipeDirection: swipeDirection, ...rest }) }, toast.id))) }) }));
+}
+/**
+ * Puts the toast stack on the page and lets anything under it raise a message.
+ *
+ * Wrap the application once. Everything about how a toast *looks* is decided
+ * here — where the stack sits, how wide it is, which material it wears, how long
+ * it lasts — so the call site stays the one thing it should be: what happened.
+ *
+ * Base UI owns the parts of this that are genuinely hard and invisible when they
+ * work: the timers and their pausing on hover and on window blur, the limit, the
+ * swipe, the F6 focus hotkey, and the live region that makes a message which
+ * appeared out of nowhere reach a screen reader at all.
+ */
+export function PlToastProvider({ variant = 'glass', size = 'md', color = 'primary', density = 'default', position = 'bottom-end', timeout = 5000, limit = 3, width = 380, closeLabel = 'Close', children }) {
+    return (_jsxs(BaseUIToast.Provider, { timeout: timeout, limit: limit, children: [children, _jsx(ToastViewport, { position: position, variant: variant, size: size, color: color, density: density, width: width, closeLabel: closeLabel })] }));
+}

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

@@ -0,0 +1,2 @@
+export { PlToastProvider, usePlToast } from './PlToast.js';
+export type { PlToastData, PlToastOptions, PlToastPosition, PlToastProviderProps } from './PlToast.js';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { PlToastProvider, usePlToast } from './PlToast.js';

package/dist/components/toolbar/PlToolbar.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+export interface PlToolbarProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` — the default — is flat even when the bar is pinned:
+     * a shadow under a header is a way of saying "there is content beneath this",
+     * and that is only true once the page has been scrolled. Raise it yourself, or
+     * leave it flat and turn on `divider`.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * - `static` — in the flow, scrolling away with the content.
+     * - `sticky` — in the flow until it reaches the edge, then held there. What an
+     *   application header usually wants: it takes up its own space, so nothing
+     *   underneath has to be padded around it.
+     * - `fixed` — out of the flow entirely. The page needs padding of its own, or
+     *   the first screenful sits behind the bar.
+     * @default 'static'
+     */
+    position?: PlassPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: 'top' | 'bottom';
+    /**
+     * Draws a hairline along the edge that faces the content — under a `top` bar,
+     * over a `bottom` one.
+     * @default false
+     */
+    divider?: boolean;
+    /** Pinned to the start of the bar: a logo, a title, a back button. */
+    start?: React.ReactNode;
+    /** Pinned to the end: the actions. */
+    end?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — `render={<header />}`,
+     * `render={<nav />}`. Base UI's own escape hatch, and worth reaching for here:
+     * a page's header should be a `<header>`.
+     */
+    render?: useRender.RenderProp;
+    /** The middle. Takes whatever width `start` and `end` leave. */
+    children?: React.ReactNode;
+}
+/**
+ * A bar of controls: an application header, a page's action row, the strip along
+ * the bottom of an editor.
+ *
+ * Three slots and a row. `start` and `end` are pinned to their ends and
+ * `children` takes what is left, which is the arrangement every toolbar has ever
+ * had — so it is laid out here rather than left to a caller and a spacer `<div>`
+ * they have to remember.
+ *
+ * The one thing it does not do is take a height. A toolbar is as tall as the
+ * controls in it plus its padding, and that padding is the `size` / `density`
+ * pair every other surface uses — so `density="compact"` gives the dense bar
+ * without a second prop meaning the same thing, and without the type scale
+ * moving.
+ *
+ * It has **no `role="toolbar"`**, deliberately. That role is a promise about
+ * keyboard behaviour — one tab stop for the whole bar, arrow keys between the
+ * controls in it — and a bar that claims it without implementing it is worse for
+ * a keyboard reader than one that never claimed anything. What a page header
+ * wants is `render={<header />}`; what a genuine roving-focus set of choices
+ * wants is a `PlSegmentedButton`, which is one.
+ */
+export declare const PlToolbar: React.ForwardRefExoticComponent<PlToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toolbar/PlToolbar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cx, hasContent, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetSectionGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/**
+ * The three materials, said the way a *container* says them — the bar is never
+ * dyed, exactly as on a `PlBox` and a `PlCard`. A toolbar holds other people's
+ * controls, and those controls arrive with colours of their own.
+ */
+const variantClasses = sheetRestClasses;
+const positionClasses = {
+    static: { top: '', bottom: '' },
+    sticky: { top: 'sticky top-0 z-20', bottom: 'sticky bottom-0 z-20' },
+    fixed: { top: 'fixed inset-x-0 top-0 z-30', bottom: 'fixed inset-x-0 bottom-0 z-30' }
+};
+/**
+ * The rule faces the content, so it moves to the other edge on a bottom bar.
+ *
+ * `--plass-divider` and not the sheet's own white edge line: this is a mark the
+ * sheet makes on *itself*, and white light on a cut edge only reads when the
+ * page wash is behind it.
+ */
+const dividerClasses = {
+    top: 'border-b [border-color:var(--plass-divider)]',
+    bottom: 'border-t [border-color:var(--plass-divider)]'
+};
+/**
+ * A bar of controls: an application header, a page's action row, the strip along
+ * the bottom of an editor.
+ *
+ * Three slots and a row. `start` and `end` are pinned to their ends and
+ * `children` takes what is left, which is the arrangement every toolbar has ever
+ * had — so it is laid out here rather than left to a caller and a spacer `<div>`
+ * they have to remember.
+ *
+ * The one thing it does not do is take a height. A toolbar is as tall as the
+ * controls in it plus its padding, and that padding is the `size` / `density`
+ * pair every other surface uses — so `density="compact"` gives the dense bar
+ * without a second prop meaning the same thing, and without the type scale
+ * moving.
+ *
+ * It has **no `role="toolbar"`**, deliberately. That role is a promise about
+ * keyboard behaviour — one tab stop for the whole bar, arrow keys between the
+ * controls in it — and a bar that claims it without implementing it is worse for
+ * a keyboard reader than one that never claimed anything. What a page header
+ * wants is `render={<header />}`; what a genuine roving-focus set of choices
+ * wants is a `PlSegmentedButton`, which is one.
+ */
+export const PlToolbar = /* @__PURE__ */ React.forwardRef(function PlToolbar({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, position = 'static', side = 'top', divider = false, start, end, render, className, style, children, ...props }, ref) {
+    const classNames = cx('flex w-full min-w-0 items-center', sheetPaddingXClasses[density][size], sheetPaddingYClasses[density][size], sheetSectionGapClasses[size], 
+    // A pinned bar spans an edge of the window, and a rounded corner against
+    // the edge of the screen is a gap with nothing behind it. Only a bar
+    // sitting in the flow is a sheet with corners.
+    position === 'static' ? radiusClasses[size] : '', variantClasses[variant], divider ? dividerClasses[side] : '', positionClasses[position][side], transitionClasses, className);
+    return useRender({
+        render: render ?? _jsx("div", {}),
+        ref,
+        props: {
+            className: classNames,
+            style: { ...surfaceSlots(color, elevation), ...style },
+            children: (_jsxs(_Fragment, { children: [hasContent(start) ? (_jsx("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: start })) : null, _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: children }), hasContent(end) ? (_jsx("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: end })) : null] })),
+            ...props
+        }
+    });
+});

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

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

package/dist/components/toolbar/index.js

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