plass-ui 0.0.1 → 1.0.0

package/dist/internal/grid.js

@@ -0,0 +1,143 @@
+/**
+ * The arithmetic and the vocabulary `PlGrid` and `PlGridItem` share.
+ *
+ * Like `internal/styles.ts` this is the library talking to itself, and it lives
+ * here rather than in either component's folder for one reason: the two are one
+ * system in two elements, and neither should have to import the other.
+ *
+ * What is *not* here is the layout itself. A column width is
+ * `(100% + gap) * span / columns - gap`, it has to change at four breakpoints,
+ * and it is the width of an element whose column count is declared on its
+ * parent — none of which Tailwind can spell, because Tailwind only ever sees
+ * class names written out literally and `columns` is a number a caller picks.
+ * So the widths are real CSS in `styles.css`, driven by the `--p-*` slots this
+ * file generates. That is the same split the rest of the library makes:
+ * per-instance values go in inline custom properties, never in class names.
+ */
+/** Smallest first, which is also the order the media queries have to be in. */
+export const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+/**
+ * One step of `spacing`, in `rem`.
+ *
+ * This is Tailwind's spacing scale and not Material's 8px one: `spacing={4}` is
+ * `1rem`, exactly what `gap-4` already means and what `p-4` in the sheet
+ * padding tables already is. Every other number in this library is on that
+ * ladder, and a grid that measured its gutters differently from the card around
+ * it would be the one place a caller has to stop and convert.
+ */
+const SPACING_STEP = 0.25;
+/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
+function breakpointMap(value) {
+    if (value === undefined || value === null)
+        return {};
+    if (typeof value === 'object')
+        return value;
+    return { xs: value };
+}
+/**
+ * Turns a responsive value into the `--p-{name}-{breakpoint}` slots the CSS
+ * reads, emitting only the breakpoints the caller actually named.
+ *
+ * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
+ * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
+ * That keeps the inline style on a grid item down to what was asked for.
+ */
+export function responsiveSlots(name, value, toCss) {
+    const map = breakpointMap(value);
+    const slots = {};
+    for (const breakpoint of breakpoints) {
+        const entry = map[breakpoint];
+        if (entry !== undefined)
+            slots[`--p-${name}-${breakpoint}`] = toCss(entry);
+    }
+    return slots;
+}
+/**
+ * Fills in the `xs` entry of a partial map with the prop's own default.
+ *
+ * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
+ * below 48rem — the CSS fallback rather than the documented default — and a
+ * caller who narrowed one breakpoint would silently lose every other one. A map
+ * says "from here up, use this instead"; it does not say "and nothing below".
+ */
+export function withBaseline(value, baseline) {
+    if (value === undefined || value === null)
+        return baseline;
+    if (typeof value === 'object') {
+        return { xs: baseline, ...value };
+    }
+    return value;
+}
+/**
+ * A count of columns, as a plain number for `calc()` to divide by.
+ *
+ * Rounded and floored at 1 because the value ends up as a divisor: a grid of
+ * 2.5 columns is not a thing anybody meant, and a grid of 0 is a division by
+ * zero that would take the width declaration down with it.
+ */
+export function columnCount(value) {
+    return String(Math.max(1, Math.round(value)));
+}
+/** A span or an offset. Same rounding; an offset of 0 is meaningful. */
+export function columnUnits(value, min) {
+    return String(Math.max(min, Math.round(value)));
+}
+export const spanValue = (value) => columnUnits(value, 1);
+export const offsetValue = (value) => columnUnits(value, 0);
+/**
+ * A gutter, as a length.
+ *
+ * Fractions are the point — `spacing={1.5}` is `0.375rem`, the same step
+ * `gap-1.5` is — so the multiplication is rounded to five places rather than
+ * left to print `0.30000000000000004rem` into the DOM.
+ */
+export function spacingValue(units) {
+    const rem = Math.max(0, units) * SPACING_STEP;
+    return `${Number(rem.toFixed(5))}rem`;
+}
+/* ---------------------------------------------------------------------------
+ * Alignment
+ *
+ * These *are* literal class names, so they stay in Tailwind. The positional
+ * values map onto `flex-start`/`flex-end` rather than the logical `start`/`end`
+ * because a flex container is what is underneath, and the bare logical keywords
+ * are the newer spelling of the two.
+ * ------------------------------------------------------------------------- */
+export const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+    stretch: 'justify-stretch'
+};
+export const alignItemsClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline'
+};
+/**
+ * Where the *rows* sit when the grid is shorter than the box holding it. Only
+ * ever visible on a grid with a height of its own, which is why it takes the
+ * full distribution vocabulary and `alignItems` does not.
+ */
+export const alignContentClasses = {
+    start: 'content-start',
+    center: 'content-center',
+    end: 'content-end',
+    'space-between': 'content-between',
+    'space-around': 'content-around',
+    'space-evenly': 'content-evenly',
+    stretch: 'content-stretch'
+};
+export const alignSelfClasses = {
+    auto: 'self-auto',
+    start: 'self-start',
+    center: 'self-center',
+    end: 'self-end',
+    stretch: 'self-stretch',
+    baseline: 'self-baseline'
+};

package/dist/internal/icons.d.ts

@@ -4,10 +4,11 @@
  * A component that needs a shape nobody else needs draws it in its own file.
  * What lands here is what two components would otherwise each have a copy of —
  * and the reason that matters is not the duplication, it is that two copies
- * drift: a spinner in a Button and a spinner in a TextField have to be the same
+ * drift: a spinner in a PlButton and a spinner in a PlTextField have to be the same
  * object in motion, or a form that is saving looks like two things loading.
  */
 import * as React from 'react';
+import type { PlassColor } from '../types.js';
 /**
  * The one thing in the library that moves on its own, and the only place that
  * is allowed: an indeterminate indicator that does not move is a decoration.
@@ -16,3 +17,87 @@ import * as React from 'react';
  * it tracks the label rather than carrying a size of its own.
  */
 export declare function Spinner(): React.ReactElement;
+/**
+ * The disclosure chevron, drawn pointing **down**.
+ *
+ * One drawing for every direction: a PlAccordion's header, a PlSelect's
+ * trigger, a PlPagination's stepper all want the same wedge turned a different
+ * way. Turning it is the one allowance the no-transform rule makes — the rule
+ * is about a control resampling its own label under the pointer, and a glyph
+ * has no text in it to resample.
+ */
+export declare function ChevronIcon(): React.ReactElement;
+/**
+ * The arrow, drawn pointing **right**.
+ *
+ * One of the two marks a trail can put between its steps, and the one that says
+ * "and then" out loud. It is turned back under RTL by whoever draws it rather
+ * than being redrawn, the same allowance the chevron takes.
+ */
+export declare function ArrowRightIcon(): React.ReactElement;
+/** Three dots: the middle of something that has been folded away. */
+export declare function EllipsisIcon(): React.ReactElement;
+/** The tick: a chosen option, a ticked menu item, a checked box. */
+export declare function CheckIcon(): React.ReactElement;
+/**
+ * The two steppers' marks.
+ *
+ * A pair, and they stay one: a minus drawn at a different weight from the plus
+ * beside it reads as two toolkits in one control.
+ */
+export declare function MinusIcon(): React.ReactElement;
+export declare function PlusIcon(): React.ReactElement;
+/**
+ * The ×.
+ *
+ * One drawing for every dismissal in the library — a file's remove button, an
+ * alert's close, a modal's. Two copies of an × drift by half a pixel of stroke
+ * weight, and then a page has two kinds of "close" on it.
+ */
+export declare function CloseIcon(): React.ReactElement;
+/** The clock: something that has been started and has not finished. */
+export declare function ClockIcon(): React.ReactElement;
+/** The calendar: a page with a binding across the top. The pickers' glyph. */
+export declare function CalendarIcon(): React.ReactElement;
+/** The chain: a link that stays on this page. */
+export declare function LinkIcon(): React.ReactElement;
+/** The arrow leaving its box: a link that takes over a new tab. */
+export declare function ExternalLinkIcon(): React.ReactElement;
+/**
+ * The filled dot a chosen radio row is marked with.
+ *
+ * A dot and not a tick, which is the distinction `PlCheckbox` and `PlRadioGroup`
+ * make everywhere else: a tick says "and", a dot says "instead of".
+ */
+export declare function DotIcon(): React.ReactElement;
+/**
+ * A star, filled, in the same 16-unit box every other glyph here uses.
+ *
+ * `StarIcon` and `StarOutlineIcon` are the same five points traced twice —
+ * once painted, once stroked — and they have to be, because `PlRating` lays one
+ * over the other and clips the top copy to a fraction of the width. Two stars
+ * of two shapes would show as a rim that does not line up with what is inside
+ * it.
+ */
+export declare function StarIcon(): React.ReactElement;
+/** The same five points, stroked. See `StarIcon`. */
+export declare function StarOutlineIcon(): React.ReactElement;
+/**
+ * One drawing per colour family, and a piece of the design language rather than
+ * a convenience.
+ *
+ * An alert that says "this went wrong" only in red says it only to some
+ * readers, so the shape has to carry the meaning too — and that only holds if
+ * every component uses the same shape for the same family.
+ *
+ * `primary` and `secondary` have no severity to draw, so they take the note the
+ * informational one uses: three shapes for six families, because the three that
+ * mean something are the three worth telling apart.
+ *
+ * A function and not the table of elements it reads like, because a table is
+ * the one shape a bundler cannot take apart: six entries built at module load,
+ * kept whole or not at all, and pulled into every component that touches the
+ * file. A function declaration is dropped outright by anything that does not
+ * call it, which is most of the library.
+ */
+export declare function severityIcon(color: PlassColor): React.ReactElement;

package/dist/internal/icons.js

@@ -1 +1,138 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";export function Spinner(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[r("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),r("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The one thing in the library that moves on its own, and the only place that
+ * is allowed: an indeterminate indicator that does not move is a decoration.
+ *
+ * Sized in `em` by `iconClasses`, like every other glyph inside a control, so
+ * it tracks the label rather than carrying a size of its own.
+ */
+export function Spinner() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "animate-spin", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M14.5 8A6.5 6.5 0 0 0 8 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+}
+/**
+ * The disclosure chevron, drawn pointing **down**.
+ *
+ * One drawing for every direction: a PlAccordion's header, a PlSelect's
+ * trigger, a PlPagination's stepper all want the same wedge turned a different
+ * way. Turning it is the one allowance the no-transform rule makes — the rule
+ * is about a control resampling its own label under the pointer, and a glyph
+ * has no text in it to resample.
+ */
+export function ChevronIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 6.5 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * The arrow, drawn pointing **right**.
+ *
+ * One of the two marks a trail can put between its steps, and the one that says
+ * "and then" out loud. It is turned back under RTL by whoever draws it rather
+ * than being redrawn, the same allowance the chevron takes.
+ */
+export function ArrowRightIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 8h10m-3.5-3.5L13 8l-3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/** Three dots: the middle of something that has been folded away. */
+export function EllipsisIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "3.5", cy: "8", r: "1.15", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.15", fill: "currentColor" }), _jsx("circle", { cx: "12.5", cy: "8", r: "1.15", fill: "currentColor" })] }));
+}
+/** The tick: a chosen option, a ticked menu item, a checked box. */
+export function CheckIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-6", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * The two steppers' marks.
+ *
+ * A pair, and they stay one: a minus drawn at a different weight from the plus
+ * beside it reads as two toolkits in one control.
+ */
+export function MinusIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
+}
+export function PlusIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8 3.5v9M3.5 8h9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
+}
+/**
+ * The ×.
+ *
+ * One drawing for every dismissal in the library — a file's remove button, an
+ * alert's close, a modal's. Two copies of an × drift by half a pixel of stroke
+ * weight, and then a page has two kinds of "close" on it.
+ */
+export function CloseIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
+}
+/** The clock: something that has been started and has not finished. */
+export function ClockIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 4.5V8l2.4 1.6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/** The calendar: a page with a binding across the top. The pickers' glyph. */
+export function CalendarIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "2.25", y: "3.25", width: "11.5", height: "10.5", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M2.25 6.5h11.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M5.5 1.75v2.5M10.5 1.75v2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+/** The chain: a link that stays on this page. */
+export function LinkIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+/** The arrow leaving its box: a link that takes over a new tab. */
+export function ExternalLinkIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/** The neutral note: a circled `i` without the serif problem an `i` has at 16px. */
+function NoteIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 7.25v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "4.9", r: "0.85", fill: "currentColor" })] }));
+}
+/**
+ * The filled dot a chosen radio row is marked with.
+ *
+ * A dot and not a tick, which is the distinction `PlCheckbox` and `PlRadioGroup`
+ * make everywhere else: a tick says "and", a dot says "instead of".
+ */
+export function DotIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("circle", { cx: "8", cy: "8", r: "3.25" }) }));
+}
+/**
+ * A star, filled, in the same 16-unit box every other glyph here uses.
+ *
+ * `StarIcon` and `StarOutlineIcon` are the same five points traced twice —
+ * once painted, once stroked — and they have to be, because `PlRating` lays one
+ * over the other and clips the top copy to a fraction of the width. Two stars
+ * of two shapes would show as a rim that does not line up with what is inside
+ * it.
+ */
+export function StarIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z" }) }));
+}
+/** The same five points, stroked. See `StarIcon`. */
+export function StarOutlineIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) }));
+}
+/**
+ * One drawing per colour family, and a piece of the design language rather than
+ * a convenience.
+ *
+ * An alert that says "this went wrong" only in red says it only to some
+ * readers, so the shape has to carry the meaning too — and that only holds if
+ * every component uses the same shape for the same family.
+ *
+ * `primary` and `secondary` have no severity to draw, so they take the note the
+ * informational one uses: three shapes for six families, because the three that
+ * mean something are the three worth telling apart.
+ *
+ * A function and not the table of elements it reads like, because a table is
+ * the one shape a bundler cannot take apart: six entries built at module load,
+ * kept whole or not at all, and pulled into every component that touches the
+ * file. A function declaration is dropped outright by anything that does not
+ * call it, which is most of the library.
+ */
+export function severityIcon(color) {
+    if (color === 'success') {
+        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    }
+    if (color === 'warning') {
+        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), _jsx("path", { d: "M8 6.1v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "11.2", r: "0.85", fill: "currentColor" })] }));
+    }
+    if (color === 'danger') {
+        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+    }
+    return _jsx(NoteIcon, {});
+}

package/dist/internal/menu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * What every row of a `PlMenu` inherits from the popup around it.
+ *
+ * A context rather than props threaded down, and a file of its own rather than
+ * something exported from the component, for one reason: `PlMenu` and
+ * `PlContextMenu` are two triggers onto the same surface, and a row written
+ * inside either has to come out identical. A context declared in one of them
+ * would make the other import from it.
+ *
+ * `size`, `color` and `density` belong to the *set*. A menu whose third row is
+ * a size out is not a menu.
+ */
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../types.js';
+export interface PlassMenuContextValue {
+    size: PlassSize;
+    color: PlassColor;
+    density: PlassDensity;
+}
+export declare const MenuContext: React.Context<PlassMenuContextValue>;

package/dist/internal/menu.js

@@ -0,0 +1,18 @@
+/**
+ * What every row of a `PlMenu` inherits from the popup around it.
+ *
+ * A context rather than props threaded down, and a file of its own rather than
+ * something exported from the component, for one reason: `PlMenu` and
+ * `PlContextMenu` are two triggers onto the same surface, and a row written
+ * inside either has to come out identical. A context declared in one of them
+ * would make the other import from it.
+ *
+ * `size`, `color` and `density` belong to the *set*. A menu whose third row is
+ * a size out is not a menu.
+ */
+import * as React from 'react';
+export const MenuContext = /* @__PURE__ */ React.createContext({
+    size: 'md',
+    color: 'primary',
+    density: 'default'
+});

package/dist/internal/picker.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import type { PlassPickerLabels } from './calendar.js';
+import type { PlassColor, PlassElevation, PlassSize, PlassStyleProps } from '../types.js';
+/**
+ * The shell all four pickers wear: a field-shaped trigger with a popup hanging
+ * off it.
+ *
+ * It is here rather than in one of the components for the reason the calendar
+ * is: four components need it, and none of them should have to import another.
+ * What it draws is deliberately not new — the trigger is `fieldRestClasses`,
+ * the same box a `PlTextField` and a `PlSelect`'s trigger are drawn on, to the
+ * pixel. A form where the date field is a different height, radius or material
+ * from the text field beside it is a form that looks assembled rather than
+ * designed.
+ *
+ * The one thing the pickers do *not* offer is typing a date into the trigger.
+ * Parsing a date out of free text is locale-dependent in a way that cannot be
+ * done honestly without a date library, and a field that understands `27/7/26`
+ * in one browser and not the next is worse than one that never claimed to. So
+ * the trigger is a button, exactly as a select's is, and the calendar is where
+ * the answer comes from.
+ */
+/**
+ * The popup's slots: a container's undyed sheet with the *control* fill added
+ * back on top.
+ *
+ * Neither generator in `internal/styles` says this on its own, and the reason is
+ * that a picker's popup is both things at once. It is a container — it holds a
+ * grid of forty-two days, and dyeing the sheet under them would put every one of
+ * them on a background it was not chosen against — and it also holds the one
+ * filled token in the library that has to be found without being read, which is
+ * the day you picked. So the sheet stays clear glass and the family arrives in
+ * the two fill slots the chosen cell reads.
+ */
+export declare function popupSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
+/**
+ * The popup. Like every floating surface in the library it carries a shadow by
+ * default, at level 3 — as far as the ladder goes without hovering — because it
+ * is genuinely off the page rather than merely on top of it.
+ */
+export declare const pickerPopupClasses: string;
+/** The popup's own padding, one track tighter than a control's. */
+export declare const popupPaddingClasses: Record<PlassSize, string>;
+export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'defaultValue'> {
+    /**
+     * Drop shadow depth of the *trigger*. `0`, like a `PlTextField`: a field is
+     * cut into the sheet rather than resting on it. The popup has its own, fixed
+     * at `3` — it genuinely floats above the page.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Label above the trigger. */
+    label?: React.ReactNode;
+    /** Helper text below it. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the control invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to whether `error` has content. */
+    invalid?: boolean;
+    /** The glyph before the value — a calendar or a clock. */
+    startIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The value is shown but cannot be changed, and the popup does not open. */
+    readOnly?: boolean;
+    /** Whether a value must be chosen before the form is submitted. */
+    required?: boolean;
+    id?: string;
+}
+interface InternalShellProps extends PlassPickerShellProps {
+    /** What the trigger reads. A placeholder when `empty`. */
+    display: React.ReactNode;
+    /**
+     * Every string the display could hold, so the trigger stops changing width
+     * with its value. `displaySamples` in `internal/date` produces them and
+     * `WidthSizer` is what lays them out.
+     */
+    samples?: string[];
+    /** Nothing has been chosen yet, so the display is muted. */
+    empty: boolean;
+    /** Offers the × that empties the control. */
+    clearable?: boolean;
+    onClear: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    labels: PlassPickerLabels;
+    /** `<input type="hidden">` rows, so the control submits with a form. */
+    hiddenValues?: Array<{
+        name: string;
+        value: string;
+    }>;
+    children: React.ReactNode;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * A trigger, a label, the two lines of text under it, and a popup.
+ *
+ * Everything about it that is visible is a decision already made elsewhere: the
+ * shell classes, the read-only and disabled treatments, the label's type scale
+ * and the way `invalid` re-points the whole colour family at `danger` so the
+ * edge, the ring and the message turn over together.
+ */
+export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+/**
+ * The row of shortcuts under a picker's panel.
+ *
+ * A hairline above it rather than a gap, because the actions act on the panel
+ * and a gap would read as a second popup stacked under the first.
+ */
+export declare function PickerFooter({ size, children }: {
+    size: PlassSize;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The vertical hairline between a calendar and the clock beside it. */
+export declare function PickerDivider(): React.JSX.Element;
+export {};