plass-ui 0.0.1 → 1.0.1

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

@@ -0,0 +1,2 @@
+export { PlTab, PlTabPanel, PlTabs } from './PlTabs.js';
+export type { PlTabPanelProps, PlTabProps, PlTabValue, PlTabsProps } from './PlTabs.js';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export{PlTab,PlTabPanel,PlTabs}from"./PlTabs.js";

package/dist/components/text-field/{TextField.d.ts → PlTextField.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
-export type TextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
+export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
 /**
  * Native `<input>` attributes, minus the three that collide with the shared
  * vocabulary: `color` and `size` are Plass props here, and `onChange` is widened
  * below so the same handler types against a `<textarea>` in multiline mode.
  */
 type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
-export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
+export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it, and the one place in the library where a
@@ -30,7 +30,7 @@ export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
      * breaks a form's column, so only the vertical axis is on by default.
      * @default 'vertical'
      */
-    resize?: TextFieldResize;
+    resize?: PlTextFieldResize;
     /**
      * Label above the control, wired to it by Base UI's Field. There is no
      * floating variant on purpose: a floating label needs a `transform` on the
@@ -61,5 +61,5 @@ export interface TextFieldProps extends PlassStyleProps, NativeControlProps {
     fullWidth?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const PlTextField: React.ForwardRefExoticComponent<PlTextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};

package/dist/components/text-field/PlTextField.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as n}from"@base-ui/react/field";import{Input as s}from"@base-ui/react/input";import{Spinner as r}from"../../internal/icons.js";import{controlHeightClasses as i,controlTextLeadingClasses as a,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as p,hasContent as u,iconClasses as x,metaTextClasses as f,paddingXClasses as h,radiusClasses as g,stackGapClasses as $,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";const j={xs:`${p.xs} ${g.xs} ${a.xs}`,sm:`${p.sm} ${g.sm} ${a.sm}`,md:`${p.md} ${g.md} ${a.md}`,lg:`${p.lg} ${g.lg} ${a.lg}`,xl:`${p.xl} ${g.xl} ${a.xl}`},v={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},w={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},N=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",b,m,x].join(" "),z=d,k=c;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:a="glass",size:c="md",color:d="primary",density:m="default",elevation:p=0,multiline:x=!1,rows:g=3,resize:b="vertical",label:D,description:P,error:R,invalid:T,startIcon:B,endIcon:F,loading:I=!1,fullWidth:O=!1,readOnly:C=!1,disabled:E=!1,type:L="text",className:W,style:q,...A},G){const H=u(R),J=T??H,K=J?"danger":d,M=l.useRef(null),Q=l.useCallback(e=>{M.current=e,"function"==typeof G?G(e):G&&(G.current=e)},[G]),S=[N,j[c],x?`${v[c]} items-start`:`${i[c]} items-center`,h[m][c],E?o[a]:C?k[a]:z[a]].filter(Boolean).join(" "),U=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",x?`block ${w[b]}`:"self-stretch"].join(" "),V="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(n.Root,{disabled:E,invalid:J,className:["flex-col align-top",$[c],O?"flex w-full":"inline-flex",W??""].filter(Boolean).join(" "),style:{...y(K,p),...q},children:[D?e(n.Label,{className:[f[c],"font-semibold",E?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:D}):null,t("span",{className:S,onPointerDown:e=>{e.target!==e.currentTarget||E||(e.preventDefault(),M.current?.focus())},children:[B?e("span",{className:V,children:B}):null,e(s,{ref:Q,className:U,disabled:E,readOnly:C,"aria-busy":I||void 0,"data-loading":I||void 0,...x?{render:e("textarea",{rows:g})}:{type:L},...A}),I?e("span",{className:V,children:e(r,{})}):F?e("span",{className:V,children:F}):null]}),P?e(n.Description,{className:[f[c],"text-(--plass-muted-fg)"].join(" "),children:P}):null,H?e(n.Error,{match:!0,className:[f[c],"text-(--p-accent)"].join(" "),children:R}):null]})});

package/dist/components/text-field/index.d.ts

@@ -1,2 +1,2 @@
-export { TextField } from './TextField';
-export type { TextFieldProps, TextFieldResize } from './TextField';
+export { PlTextField } from './PlTextField.js';
+export type { PlTextFieldProps, PlTextFieldResize } from './PlTextField.js';

package/dist/components/text-field/index.js

@@ -1 +1 @@
-export{TextField}from"./TextField";
+export{PlTextField}from"./PlTextField.js";

package/dist/components/text-link/PlTextLink.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassSize } from '../../types.js';
+/**
+ * When the line under a link is drawn.
+ *
+ * `always` is the default, and the reason is `color`: a link takes no colour
+ * family unless one is asked for, so with the line off there would be nothing
+ * at all distinguishing it from the sentence it sits in. That is also why this
+ * is not a boolean — "no underline" is a real choice for a link in a nav bar or
+ * a footer, where position already says what it is, and it should have to be
+ * spelled out rather than fallen into.
+ */
+export type PlTextLinkUnderline = 'always' | 'hover' | 'none';
+export interface PlTextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color'> {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * When the underline is drawn.
+     * @default 'always'
+     */
+    underline?: PlTextLinkUnderline;
+    /**
+     * Semantic colour role. Unlike every control in the library this has **no
+     * default** — a link in a paragraph is usually the paragraph's own colour
+     * with a line under it, and a component that arrived pre-dyed is one a page
+     * has to undo.
+     */
+    color?: PlassColor;
+    /**
+     * The type scale. Also no default: a link inside a sentence is the size of
+     * the sentence. Set it for a link that stands on its own.
+     */
+    size?: PlassSize;
+    /**
+     * Opens the link in a new tab, with the `rel` that keeps the new page from
+     * reaching back into this one.
+     *
+     * A window changing under the reader is the one thing about a link that
+     * cannot be seen before it happens, so this also turns `icon` on by default
+     * and adds a line for a screen reader.
+     * @default false
+     */
+    newTab?: boolean;
+    /**
+     * The mark after the label. `true` draws the arrow leaving its box when
+     * `newTab` is on and the chain otherwise, `false` draws nothing, and a node
+     * of your own replaces the glyph.
+     *
+     * Left out, it follows `newTab`.
+     */
+    icon?: React.ReactNode | boolean;
+    /**
+     * What a screen reader hears after the label on a `newTab` link. Never drawn.
+     * @default '(opens in a new tab)'
+     */
+    newTabLabel?: string;
+    /**
+     * Renders something other than an `<a>` — the `Link` a router brings, most of
+     * the time. `href` still goes through, so `render={<NextLink href="…" />}`
+     * needs it written once, on the `PlTextLink`.
+     */
+    render?: useRender.RenderProp;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A link, in a sentence or on its own.
+ *
+ * Everything about it is deliberately smaller than a PlButton. It has no
+ * surface, no height of its own and no colour unless asked — what it has is a
+ * line under it, which is the one mark a reader already knows means "this goes
+ * somewhere".
+ *
+ * The three things it does that a bare `<a>` does not: it draws that line on a
+ * schedule (`always`, or only under the pointer), it marks a link that opens a
+ * new tab both visibly and for a screen reader, and it takes `render`, so the
+ * `Link` a router brings can wear all of it.
+ */
+export declare const PlTextLink: React.ForwardRefExoticComponent<PlTextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/text-link/PlTextLink.js

@@ -0,0 +1 @@
+"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as l,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as a,focusRingClasses as t,srOnlyClasses as c}from"../../internal/styles.js";const p={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),t,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:s,underline:t="always",color:d,size:m,newTab:f=!1,icon:v,newTabLabel:h="(opens in a new tab)",render:k,className:x,style:g,children:j,...b},w){const y=v??f,_=!0===y?n(f?l:o,{}):y,N=[u,m?a[m]:"",p[t],d?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",x??""].filter(Boolean).join(" "),T={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${d??"primary"}-ring)`,...d?{"--p-accent":`var(--plass-${d}-accent)`}:null},{rel:L,...z}=b,B=f?[...new Set([...(L??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" "):L;return i({render:k??n("a",{}),ref:w,props:{href:s,target:f?"_blank":void 0,className:N,style:{...T,...g},children:r(e,{children:[j,_?n("span",{className:"ms-[0.25em]",children:_}):null,f?r(e,{children:[" ",n("span",{className:c,children:h})]}):null]}),...z,rel:B}})});

package/dist/components/text-link/index.d.ts

@@ -0,0 +1,2 @@
+export { PlTextLink } from './PlTextLink.js';
+export type { PlTextLinkProps, PlTextLinkUnderline } from './PlTextLink.js';

package/dist/components/text-link/index.js

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

package/dist/components/time-picker/PlTimePicker.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { type PlassPickerLabels, type TimeUnit } from '../../internal/calendar.js';
+import { type PlassPickerShellProps } from '../../internal/picker.js';
+/**
+ * Which column of the clock a row belongs to. Re-exported so a caller writing a
+ * `shouldDisableTime` rule can name the argument it is handed.
+ */
+export type { TimeUnit };
+export interface PlTimePickerProps extends PlassPickerShellProps {
+    /** The chosen time. A `Date`, so it carries a day as well — see `referenceDate`. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The day a chosen time is written onto while there is no value yet.
+     * @default today
+     */
+    referenceDate?: Date;
+    /** The earliest time of day that may be chosen. Only the clock is read. */
+    minTime?: Date | null;
+    /** The latest time of day that may be chosen. */
+    maxTime?: Date | null;
+    /**
+     * Blocks individual rows. Called once per row per column with the instant that
+     * row would produce and the column it is in, so a rule may be as coarse as
+     * "no afternoons" or as fine as one minute.
+     */
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    /** Adds the seconds column. @default false */
+    showSeconds?: boolean;
+    /** How far apart the rows of each column are. @default 1 */
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    /**
+     * BCP 47 tag deciding whether the clock is on a 12-hour dial, what AM and PM
+     * are called, and how the trigger writes the time. Defaults to the browser's.
+     */
+    locale?: string;
+    /**
+     * How the trigger writes the chosen time. Passed straight to `Intl`.
+     * @default { hour: 'numeric', minute: '2-digit' }, plus seconds when shown
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Offers the shortcut to the current time in the footer. @default true */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as any column is touched. `false` by default and
+     * unlike `PlDatePicker`, because a time is two answers and closing after the
+     * first one would make choosing 9:30 a matter of opening the popup twice.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    /** The strings the picker says. Every one has an English default. */
+    labels?: Partial<PlassPickerLabels>;
+    /** Identifies the field when a form is submitted, as `HH:MM` (`HH:MM:SS`). */
+    name?: string;
+}
+/**
+ * A time of day, chosen from columns.
+ *
+ * Columns because they are the shape that answers what a time picker is actually
+ * asked: "half past nine" is two glances, and "any time at all, on the hour" is
+ * a column you never touch. A clock face is prettier and needs a `transform` to
+ * read, which this library does not have.
+ *
+ * The bounds are checked at the granularity of the column being drawn, which is
+ * the detail that separates a working time picker from a frustrating one. With a
+ * `minTime` of 09:30 the hour `9` stays available — the hour *contains* allowed
+ * minutes — and it is the minute column that greys out `00` through `25`. The
+ * naive check compares the whole candidate instant, hides the 9 entirely, and
+ * makes half past nine unreachable.
+ *
+ * The value is a `Date` rather than a string or a number of minutes, because
+ * everything else in this library that carries a moment is one, and because a
+ * time on its own has nowhere to record that it crossed a DST boundary.
+ * `referenceDate` is the day a bare time is written onto.
+ */
+export declare const PlTimePicker: React.ForwardRefExoticComponent<PlTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/time-picker/PlTimePicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{PlButton as l}from"../button/PlButton.js";import{TimeGrid as t,usePickerLabels as s}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as r}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isHour12 as u,isValidDate as m,secondsOfDay as p,timeUnitSpan as h,toISOTime as f,withPlaceholder as g,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */o.forwardRef(function PlTimePicker({value:y,defaultValue:v,onValueChange:j,open:C,defaultOpen:w,onOpenChange:k,referenceDate:x,minTime:z,maxTime:D,shouldDisableTime:O,hour12:T,showSeconds:P=!1,hourStep:M=1,minuteStep:V=1,secondStep:B=1,locale:I,format:N,placeholder:R,clearable:F=!1,showNowButton:H=!0,closeOnSelect:q=!1,labels:A,name:E,size:G="md",color:J="primary",density:K="default",readOnly:L=!1,disabled:Q=!1,startIcon:U,...W},X){const Y=s(A),Z=T??u(I),[$,_]=o.useState(v??null),ee=void 0!==y?y:$,[ne,oe]=o.useState(w??!1),le=C??ne,[te]=o.useState(()=>x??new Date),setOpen=e=>{e&&(L||Q)||(void 0===C&&oe(e),k?.(e))},commit=e=>{void 0===y&&_(e),j?.(e)},se=o.useCallback((e,n)=>{const[o,l]=h(n,e);return!!(m(z)&&l<p(z))||!!(m(D)&&o>p(D))||(O?.(e,n)??!1)},[z,D,O]),ae=o.useMemo(()=>N??{hour:"numeric",minute:"2-digit",...P?{second:"2-digit"}:{}},[N,P]),ie=new Date,re=S(x??te,{hours:ie.getHours(),minutes:ie.getMinutes(),seconds:P?ie.getSeconds():0}),ce=H||F||!q,de=o.useMemo(()=>g(c(I,ae),R),[I,ae,R]);return e(r,{...W,size:G,color:J,density:K,readOnly:L,disabled:Q,triggerRef:X,startIcon:U??e(a,{}),display:m(ee)?d(ee,I,ae):R??"",samples:de,empty:!m(ee),clearable:F,onClear:()=>commit(null),open:le,onOpenChange:setOpen,labels:Y,hiddenValues:E?[{name:E,value:m(ee)?f(ee,P):""}]:void 0,children:n("div",{className:b("flex flex-col",ce&&"gap-1.5"),children:[e(t,{size:G,density:K,locale:I,value:m(ee)?ee:null,referenceDate:x??te,onChange:e=>{commit(e),q&&setOpen(!1)},hour12:Z,showSeconds:P,hourStep:M,minuteStep:V,secondStep:B,shouldDisableTime:se,labels:Y,autoFocus:!0}),ce?n(i,{size:G,children:[F?e(l,{variant:"ghost",size:G,color:J,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:Y.clear}):null,H?e(l,{variant:"ghost",size:G,color:J,density:"compact",disabled:se(re,"second"),onClick:()=>{commit(re),setOpen(!1)},children:Y.now}):null,q?null:e(l,{variant:"solid",size:G,color:J,density:"compact",onClick:()=>setOpen(!1),children:Y.done})]}):null]})})});

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { PlTimePicker } from './PlTimePicker.js';
+export type { PlTimePickerProps, TimeUnit } from './PlTimePicker.js';

package/dist/components/time-picker/index.js

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

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+/**
+ * How far along one item is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done", and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type PlTimelineStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two items is drawn. `none` leaves the gap open. */
+export type PlTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * How far the sequence has got: the index of the item being worked on now.
+     * Everything before it is complete, everything after it is still to come.
+     *
+     * An index rather than a value, because a timeline has no selection — nothing
+     * here is chosen, and the only question is how far down the list reality has
+     * reached. Omit it and every item is `upcoming` unless it says otherwise; pass
+     * the item count to mark the whole sequence done.
+     */
+    active?: number;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** Spacing between items. Never the type scale, never the bullet. */
+    density?: PlassDensity;
+    /**
+     * Which way the sequence runs. `vertical` is the default and the one that
+     * takes an arbitrary number of steps with an arbitrary amount to say about
+     * each; `horizontal` is the stepper across the top of a checkout, and it is
+     * only honest while every label is short.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface PlTimelineItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'title'> {
+    /** The heading of this step. */
+    title?: React.ReactNode;
+    /**
+     * When it happened — a date, a duration, a name. Set beside the title on a
+     * wide item and under it on a narrow one.
+     */
+    meta?: React.ReactNode;
+    /**
+     * What goes inside the bullet: a number, an icon, an avatar. Omit it and the
+     * bullet is a plain disc, which is what a step with nothing to say about
+     * itself should be.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides what the timeline's `active` would have computed for this item — a
+     * step that failed and stopped the sequence, a step that was skipped.
+     */
+    status?: PlTimelineStatus;
+    /** Overrides the timeline's colour family for this item alone. */
+    color?: PlassColor;
+    /**
+     * How the line to the next item is drawn.
+     * @default 'solid'
+     */
+    connector?: PlTimelineConnector;
+    /** The body of the step. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlTimelineItem: React.ForwardRefExoticComponent<PlTimelineItemProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * 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 declare const PlTimeline: React.ForwardRefExoticComponent<PlTimelineProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/timeline/PlTimeline.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{cx as a,hasContent as s,iconClasses as o,metaTextClasses as n,sheetBodyClasses as i,sheetTitleClasses as d,surfaceSlots as p,transitionClasses as c}from"../../internal/styles.js";const m=/* @__PURE__ */r.createContext(null),u=/* @__PURE__ */r.createContext({index:0,last:!1}),x={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},f={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},b={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"}},g={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"}},v={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},h={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)]"},y={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"},N={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export const PlTimelineItem=/* @__PURE__ */r.forwardRef(function PlTimelineItem({title:t,meta:_,bullet:w,status:z,color:P,connector:j="solid",className:C,children:T,...k},I){const R=r.useContext(m),{index:$,last:A}=r.useContext(u),M=R?.size??"md",q=R?.density??"default",B=R?.orientation??"vertical",D=P??R?.color??"primary",E=R?.active??null,F=z??(null===E?"upcoming":$<E?"complete":$===E?"current":"upcoming"),G="horizontal"===B,H="none"!==j&&!A,J=e("span",{"aria-hidden":"true",className:a("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",h[F],c,o),children:w}),K=H?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",G?"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",v[j],y[F],c)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[s(t)||s(_)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[s(t)?e("span",{className:a("font-semibold",d[M],N[F],c),children:t}):null,s(_)?e("span",{className:a("text-(--plass-muted-fg)",n[M]),children:_}):null]}):null,s(T)?e("div",{className:a("text-(--plass-muted-fg)",i[M]),children:T}):null]});return l("li",{ref:I,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",A?"":g[q][M]):a("flex",f[M],A?"":b[q][M]),C),style:{"--p-bullet":x[M],...p(D,0),"--p-fill":`var(--plass-${D}-fill)`,"--p-on-solid":`var(--plass-${D}-on-solid)`},...k,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */r.forwardRef(function PlTimeline({active:l,size:s="md",color:o="primary",density:n="default",orientation:i="vertical",render:d,className:c,style:x,children:f,...b},g){const v=r.Children.toArray(f),h=v.length,y=r.useMemo(()=>({size:s,density:n,orientation:i,color:o,active:l??null}),[s,n,i,o,l]),N=t({render:d??e("ol",{}),ref:g,props:{role:"list",className:a("flex","horizontal"===i?"flex-row":"flex-col",c),style:{...p(o,0),...x},children:v.map((l,r)=>e(u.Provider,{value:{index:r,last:r===h-1},children:l},r)),...b}});return e(m.Provider,{value:y,children:N})});

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 @@
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{Toast as o}from"@base-ui/react/toast";import{CloseIcon as a,severityIcon as i}from"../../internal/icons.js";import{controlSlots as r,focusRingClasses as n,glassClasses as l,hasContent as c,iconClasses as p,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as g,sheetSectionGapClasses as v,sheetTitleClasses as x}from"../../internal/styles.js";const b={"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"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[l,"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__ */[l,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},w={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,actionLabel:a,onAction:i,...r}=t;return{...r,data:{color:e,variant:s,icon:o},actionProps:void 0===a?void 0:{children:a,onClick:i}}}export function usePlToast(){const t=o.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:l,color:b,size:j,density:N,closeLabel:T,swipeDirection:M}){const O=s.data?.variant??l??"glass",P=s.data?.color??b,k=void 0===s.data?.icon?i(P):s.data.icon,z=w[O],$=c(s.title);return e(o.Root,{toast:s,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",h[N??"default"][j],g[N??"default"][j],m[j],v[j],u[j],y[O],p,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",n,"[outline:none]"].filter(Boolean).join(" "),style:r(P,3,O),children:[c(k)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${z}`,children:k}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${f[j]}`,children:[t(o.Title,{className:`plass-title font-semibold ${x[j]} ${z}`}),t(o.Description,{className:$&&"solid"!==O?"text-(--plass-muted-fg)":""})]}),t(o.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",z||"text-(--p-on-solid)","hover:underline",n,d[j]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(o.Close,{"aria-label":T,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",n].join(" "),children:t(a,{})})})]})}function ToastViewport(e){const{toasts:s}=o.useToastManager(),{position:a,width:i,...r}=e,n=[a.startsWith("top")?"up":"down","left","right"];return t(o.Portal,{children:t(o.Viewport,{className:["plass-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",b[a]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof i?`${i}px`:i},children:t(ToastItem,{toast:e,swipeDirection:n,...r})},e.id))})})}export function PlToastProvider({variant:s="glass",size:a="md",color:i="primary",density:r="default",position:n="bottom-end",timeout:l=5e3,limit:c=3,width:p=380,closeLabel:d="Close",children:m}){return e(o.Provider,{timeout:l,limit:c,children:[m,t(ToastViewport,{position:n,variant:s,size:a,color:i,density:r,width:p,closeLabel:d})]})}

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 @@
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,hasContent as a,radiusClasses as l,sheetPaddingXClasses as n,sheetPaddingYClasses as c,sheetRestClasses as d,sheetSectionGapClasses as m,surfaceSlots as p,transitionClasses as f}from"../../internal/styles.js";const b=d,x={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"}},v={top:"border-b [border-color:var(--plass-divider)]",bottom:"border-t [border-color:var(--plass-divider)]"};export const PlToolbar=/* @__PURE__ */s.forwardRef(function PlToolbar({variant:s="glass",size:d="md",color:u="primary",density:h="default",elevation:y=0,position:w="static",side:g="top",divider:k=!1,start:z,end:N,render:j,className:P,style:T,children:F,...R},q){const A=o("flex w-full min-w-0 items-center",n[h][d],c[h][d],m[d],"static"===w?l[d]:"",b[s],k?v[g]:"",x[w][g],f,P);return i({render:j??e("div",{}),ref:q,props:{className:A,style:{...p(u,y),...T},children:r(t,{children:[a(z)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:z}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:F}),a(N)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:N}):null]}),...R}})});

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