plass-ui 1.0.0 → 1.0.2

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

@@ -1,126 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Field } from '@base-ui/react/field';
-import { Input } from '@base-ui/react/input';
-import { Spinner } from '../../internal/icons.js';
-import { controlHeightClasses, controlTextLeadingClasses, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusWithinRingClasses, gapClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * Type scale and radius, shared by both modes. The line height is explicit here
- * rather than `leading-none` as on PlButton, because in multiline mode it is what
- * decides the height of a row — and it has to agree with the single-line
- * heights below or a one-row textarea would not line up with an input.
- */
-const sizeClasses = {
-    xs: `${gapClasses.xs} ${radiusClasses.xs} ${controlTextLeadingClasses.xs}`,
-    sm: `${gapClasses.sm} ${radiusClasses.sm} ${controlTextLeadingClasses.sm}`,
-    md: `${gapClasses.md} ${radiusClasses.md} ${controlTextLeadingClasses.md}`,
-    lg: `${gapClasses.lg} ${radiusClasses.lg} ${controlTextLeadingClasses.lg}`,
-    xl: `${gapClasses.xl} ${radiusClasses.xl} ${controlTextLeadingClasses.xl}`
-};
-/**
- * Multiline cannot use a fixed height — `rows` decides it. Instead the vertical
- * padding is `(height - border - line-height) / 2`, which makes a one-row
- * textarea exactly as tall as the single-line field of the same size. The
- * `min-h-*` catches the variants that carry no border.
- *
- * These are keyed by `size` and never by `density`: density is horizontal
- * padding only, and letting it touch this would make the same `rows` produce
- * two different heights.
- */
-const multilineClasses = {
-    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]'
-};
-const resizeClasses = {
-    none: 'resize-none',
-    vertical: 'resize-y',
-    horizontal: 'resize-x',
-    both: 'resize'
-};
-const shellBaseClasses = /* @__PURE__ */ [
-    // `group` so the adornments can answer the control's focus; `cursor-text`
-    // because the whole shell behaves as the field, padding included.
-    'group relative flex w-full cursor-text',
-    '[-webkit-tap-highlight-color:transparent]',
-    transitionClasses,
-    // The ring belongs to the shell, not to the control inside it, so it traces
-    // the glass edge rather than a rectangle floating inside it.
-    focusWithinRingClasses,
-    iconClasses
-].join(' ');
-/**
- * The shell, the read-only treatment and the disabled treatment are the ones
- * `internal/styles` defines for every field-shaped control — a Select's trigger
- * is drawn on exactly the same box, and the two have to be indistinguishable.
- */
-const restClasses = fieldRestClasses;
-const readOnlyClasses = fieldReadOnlyClasses;
-export const PlTextField = /* @__PURE__ */ React.forwardRef(function PlTextField({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, multiline = false, rows = 3, resize = 'vertical', label, description, error, invalid, startIcon, endIcon, loading = false, fullWidth = false, readOnly = false, disabled = false, type = 'text', className, style, ...props }, ref) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so the edge, the ring,
-    // the caret and the message all turn over together and no state needs its own
-    // set of tokens.
-    const family = isInvalid ? 'danger' : color;
-    const controlRef = React.useRef(null);
-    const setControlRef = React.useCallback((node) => {
-        controlRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    const shellClasses = [
-        shellBaseClasses,
-        sizeClasses[size],
-        multiline
-            ? `${multilineClasses[size]} items-start`
-            : `${controlHeightClasses[size]} items-center`,
-        paddingXClasses[density][size],
-        // An if/else rather than stacked `data-*` variants: two Tailwind variants
-        // of equal specificity resolve by their order in the generated stylesheet.
-        disabled ? disabledClasses[variant] : readOnly ? readOnlyClasses[variant] : restClasses[variant]
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const controlClasses = [
-        'min-w-0 flex-1 bg-transparent [font:inherit] text-inherit',
-        // Not `outline-none`: that utility zeroes `--tw-outline-style`, and the
-        // shell's focus ring is drawn with the same variable family. The shorthand
-        // takes the outline off this element and leaves the ring alone.
-        '[outline:none]',
-        'placeholder:text-(--plass-muted-fg)',
-        'caret-(--p-accent) selection:bg-(--p-soft-press)',
-        'disabled:cursor-not-allowed',
-        multiline ? `block ${resizeClasses[resize]}` : 'self-stretch'
-    ].join(' ');
-    // `1lh` keeps an adornment centred on the first line rather than on the whole
-    // box, which is the only way it stays put when the control grows to 5 rows.
-    const adornmentClasses = 'inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)';
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: [
-            'flex-col align-top',
-            stackGapClasses[size],
-            fullWidth ? 'flex w-full' : 'inline-flex',
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...surfaceSlots(family, elevation), ...style }, children: [label ? (_jsx(Field.Label, { className: [
-                    metaTextClasses[size],
-                    'font-semibold',
-                    disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'
-                ].join(' '), children: label })) : null, _jsxs("span", { className: shellClasses, onPointerDown: (event) => {
-                    // Clicking the shell's own padding should put the caret in the field,
-                    // the way clicking anywhere inside a native input does. Only when the
-                    // shell itself was hit — a click on the control or on an adornment is
-                    // left alone so text selection still works.
-                    if (event.target === event.currentTarget && !disabled) {
-                        event.preventDefault();
-                        controlRef.current?.focus();
-                    }
-                }, children: [startIcon ? _jsx("span", { className: adornmentClasses, children: startIcon }) : null, _jsx(Input, { ref: setControlRef, className: controlClasses, disabled: disabled, readOnly: readOnly, "aria-busy": loading || undefined, "data-loading": loading || undefined, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : { type }), ...props }), loading ? (_jsx("span", { className: adornmentClasses, children: _jsx(Spinner, {}) })) : endIcon ? (_jsx("span", { className: adornmentClasses, children: endIcon })) : null] }), description ? (_jsx(Field.Description, { className: [metaTextClasses[size], 'text-(--plass-muted-fg)'].join(' '), children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: [metaTextClasses[size], 'text-(--p-accent)'].join(' '), children: error })) : null] }));
-});
+"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.js

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

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

@@ -1,136 +1 @@
-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 { ExternalLinkIcon, LinkIcon } from '../../internal/icons.js';
-import { controlTextLeadingClasses, focusRingClasses, srOnlyClasses } from '../../internal/styles.js';
-/**
- * Whether the line is drawn, and — with the colour below — the only two things
- * about a link that a prop changes. Everything else about the line is in
- * `styles.css`, under `.plass-link`.
- *
- * Every utility here is written through `[&.plass-link]`, which doubles the
- * component's own class into the selector and takes it to two classes. That is
- * not decoration: `<a>` is, with `<td>`, one of the two tags a host stylesheet
- * still styles by name — `.prose a`, `.vp-doc a`, every CSS framework — and all
- * of those are a class plus a type, which outranks a plain utility. A link that
- * lost its colour and its line inside a `.prose` block would have lost the only
- * two things it is.
- *
- * Hover deliberately leaves the *text* colour alone. A link inside running
- * prose that changes colour under the pointer drags the reader's eye off the
- * line they were reading — the same rule the library applies to a control's
- * label, on the one component that lives inside a sentence.
- */
-const underlineClasses = {
-    always: '[&.plass-link]:underline',
-    hover: '[&.plass-link]:no-underline [&.plass-link]:hover:underline',
-    // Nothing to hover, on purpose. A link with no line and no colour is a link
-    // whose surroundings are saying what it is.
-    none: '[&.plass-link]:no-underline'
-};
-/**
- * Only two properties move, so this is written out rather than taken from
- * `transitionClasses` — the house list has no `text-decoration-color` in it,
- * and adding one there would put a property on every control in the library
- * that no control draws.
- */
-const transition = /* @__PURE__ */ [
-    '[transition-property:color,text-decoration-color]',
-    '[transition-duration:var(--plass-duration)]',
-    '[transition-timing-function:var(--plass-ease)]'
-].join(' ');
-const baseClasses = /* @__PURE__ */ [
-    // Both a style hook and the specificity. `styles.css` doubles this class to
-    // write the parts of the line that never vary — its thickness, its offset,
-    // its colour — above whatever the host page says about an `<a>`, and every
-    // utility that *does* vary is written through it for the same reason.
-    'plass-link',
-    'cursor-pointer',
-    // The glyph rides on the label at just under its cap height, rather than at
-    // the `1.2em` an icon inside a control takes: this one sits in a sentence,
-    // and an icon as tall as the line spaces the words around it apart.
-    '[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0',
-    transition,
-    focusRingClasses,
-    'focus-visible:rounded-[0.25rem]'
-].join(' ');
-/**
- * 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 const PlTextLink = /* @__PURE__ */ React.forwardRef(function PlTextLink({ href, underline = 'always', color, size, newTab = false, icon, newTabLabel = '(opens in a new tab)', render, className, style, children, ...props }, ref) {
-    // `icon` left out follows `newTab`, which is the whole reason it is not a
-    // plain boolean with a `false` default: a link that takes over the window
-    // should say so, and a caller should have to ask for the silent version.
-    const mark = icon ?? newTab;
-    const glyph = mark === true ? newTab ? _jsx(ExternalLinkIcon, {}) : _jsx(LinkIcon, {}) : mark;
-    const classNames = [
-        baseClasses,
-        size ? controlTextLeadingClasses[size] : '',
-        underlineClasses[underline],
-        color ? '[&.plass-link]:text-(--p-accent)' : '[&.plass-link]:text-inherit',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    /*
-     * The two line colours and the focus ring, as slots.
-     *
-     * `--p-ring` is set even when no family was asked for, because the ring is
-     * written as the `outline` shorthand and an undefined `var()` inside it
-     * makes the browser drop the whole declaration — an uncoloured link would
-     * lose its focus ring entirely rather than fall back to something plainer.
-     *
-     * The line rests at 45% of whatever the text is and goes to the full colour
-     * on hover, so it works the same on an inherited colour as on an accent one.
-     */
-    const slots = {
-        '--p-underline': 'color-mix(in oklab, currentColor 45%, transparent)',
-        '--p-underline-hover': 'currentColor',
-        '--p-ring': `var(--plass-${color ?? 'primary'}-ring)`,
-        ...(color ? { '--p-accent': `var(--plass-${color}-accent)` } : null)
-    };
-    /*
-     * `rel` is the one thing here a caller's own value is merged with rather
-     * than replaced by, and the reason is that the two purposes of the
-     * attribute have nothing to do with each other.
-     *
-     * `noopener` is what stops the new page reaching back through
-     * `window.opener`; `noreferrer` sits beside it for the browsers that still
-     * need the pair. The common reason to write a `rel` by hand is `nofollow`
-     * or `sponsored`, which is an SEO decision — and spelled as a plain
-     * override it would silently take the protection off a link that still
-     * opens in a new tab. Whatever was asked for is kept, with the two tokens
-     * added if they are not already there.
-     */
-    const { rel: askedFor, ...rest } = props;
-    const rel = newTab
-        ? [
-            ...new Set([...(askedFor ?? '').split(/\s+/).filter(Boolean), 'noopener', 'noreferrer'])
-        ].join(' ')
-        : askedFor;
-    return useRender({
-        render: render ?? _jsx("a", {}),
-        ref,
-        props: {
-            href,
-            target: newTab ? '_blank' : undefined,
-            className: classNames,
-            style: { ...slots, ...style },
-            children: (_jsxs(_Fragment, { children: [children, glyph ? _jsx("span", { className: "ms-[0.25em]", children: glyph }) : null, newTab ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: srOnlyClasses, children: newTabLabel })] })) : null] })),
-            ...rest,
-            // After the spread on purpose: this is the merge above, not an override
-            // for a caller to win.
-            rel
-        }
-    });
-});
+"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.js

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

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

@@ -1,97 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../button/PlButton.js';
-import { TimeGrid, usePickerLabels } from '../../internal/calendar.js';
-import { ClockIcon } from '../../internal/icons.js';
-import { PickerFooter, PickerShell } from '../../internal/picker.js';
-import { displaySamples, formatDate, isHour12, isValidDate, secondsOfDay, timeUnitSpan, toISOTime, withPlaceholder, withTime } from '../../internal/date.js';
-import { cx } from '../../internal/styles.js';
-/**
- * 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 const PlTimePicker = /* @__PURE__ */ React.forwardRef(function PlTimePicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, referenceDate, minTime, maxTime, shouldDisableTime, hour12: hour12Prop, showSeconds = false, hourStep = 1, minuteStep = 1, secondStep = 1, locale, format, placeholder, clearable = false, showNowButton = true, closeOnSelect = false, labels: labelOverrides, name, size = 'md', color = 'primary', density = 'default', readOnly = false, disabled = false, startIcon, ...shell }, ref) {
-    const labels = usePickerLabels(labelOverrides);
-    const hour12 = hour12Prop ?? isHour12(locale);
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? null);
-    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
-    const open = openProp ?? uncontrolledOpen;
-    // Held still for as long as the picker is mounted, so a popup left open
-    // across midnight does not quietly move the value it is writing onto a new
-    // day.
-    const [fallbackDay] = React.useState(() => referenceDate ?? new Date());
-    const setOpen = (next) => {
-        if (next && (readOnly || disabled)) {
-            return;
-        }
-        if (openProp === undefined) {
-            setUncontrolledOpen(next);
-        }
-        onOpenChange?.(next);
-    };
-    const commit = (next) => {
-        if (valueProp === undefined) {
-            setUncontrolledValue(next);
-        }
-        onValueChange?.(next);
-    };
-    const isBlocked = React.useCallback((candidate, unit) => {
-        const [from, to] = timeUnitSpan(unit, candidate);
-        if (isValidDate(minTime) && to < secondsOfDay(minTime)) {
-            return true;
-        }
-        if (isValidDate(maxTime) && from > secondsOfDay(maxTime)) {
-            return true;
-        }
-        return shouldDisableTime?.(candidate, unit) ?? false;
-    }, [minTime, maxTime, shouldDisableTime]);
-    /* Memoised because `samples` below is keyed on it, and the fallback is a
-       fresh object every render — which is the case that runs by default, since
-       `format` is optional. Left bare, the sizer re-formatted all twenty-four
-       sample instants on every render the picker saw. */
-    const displayFormat = React.useMemo(() => format ?? {
-        hour: 'numeric',
-        minute: '2-digit',
-        ...(showSeconds ? { second: '2-digit' } : {})
-    }, [format, showSeconds]);
-    const now = new Date();
-    const nowValue = withTime(referenceDate ?? fallbackDay, {
-        hours: now.getHours(),
-        minutes: now.getMinutes(),
-        seconds: showSeconds ? now.getSeconds() : 0
-    });
-    const hasFooter = showNowButton || clearable || !closeOnSelect;
-    // Holds the trigger open at the width of the longest time it could show.
-    const samples = React.useMemo(() => withPlaceholder(displaySamples(locale, displayFormat), placeholder), [locale, displayFormat, placeholder]);
-    return (_jsx(PickerShell, { ...shell, size: size, color: color, density: density, readOnly: readOnly, disabled: disabled, triggerRef: ref, startIcon: startIcon ?? _jsx(ClockIcon, {}), display: isValidDate(value) ? formatDate(value, locale, displayFormat) : (placeholder ?? ''), samples: samples, empty: !isValidDate(value), clearable: clearable, onClear: () => commit(null), open: open, onOpenChange: setOpen, labels: labels, hiddenValues: name
-            ? [{ name, value: isValidDate(value) ? toISOTime(value, showSeconds) : '' }]
-            : undefined, children: _jsxs("div", { className: cx('flex flex-col', hasFooter && 'gap-1.5'), children: [_jsx(TimeGrid, { size: size, density: density, locale: locale, value: isValidDate(value) ? value : null, referenceDate: referenceDate ?? fallbackDay, onChange: (next) => {
-                        commit(next);
-                        if (closeOnSelect) {
-                            setOpen(false);
-                        }
-                    }, hour12: hour12, showSeconds: showSeconds, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, shouldDisableTime: isBlocked, labels: labels, autoFocus: true }), hasFooter ? (_jsxs(PickerFooter, { size: size, children: [clearable ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", onClick: () => {
-                                commit(null);
-                                setOpen(false);
-                            }, children: labels.clear })) : null, showNowButton ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", disabled: isBlocked(nowValue, 'second'), onClick: () => {
-                                commit(nowValue);
-                                setOpen(false);
-                            }, children: labels.now })) : null, !closeOnSelect ? (_jsx(PlButton, { variant: "solid", size: size, color: color, density: "compact", onClick: () => setOpen(false), children: labels.done })) : null] })) : null] }) }));
-});
+"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.js

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

package/dist/components/timeline/PlTimeline.js

@@ -1,207 +1 @@
-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 });
-});
+"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.js

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