plass-ui 0.0.1 → 1.0.1

package/dist/internal/grid.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+import type * as React from 'react';
+import type { PlassAlignItems, PlassAlignSelf, PlassBreakpoint, PlassJustify, PlassResponsive } from '../types.js';
+/** Smallest first, which is also the order the media queries have to be in. */
+export declare const breakpoints: readonly PlassBreakpoint[];
+/**
+ * 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 declare function responsiveSlots<T>(name: string, value: PlassResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
+/**
+ * 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 declare function withBaseline<T>(value: PlassResponsive<T> | undefined, baseline: T): PlassResponsive<T>;
+/**
+ * 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 declare function columnCount(value: number): string;
+/** A span or an offset. Same rounding; an offset of 0 is meaningful. */
+export declare function columnUnits(value: number, min: number): string;
+export declare const spanValue: (value: number) => string;
+export declare const offsetValue: (value: number) => string;
+/**
+ * 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 declare function spacingValue(units: number): string;
+export declare const justifyClasses: Record<PlassJustify, string>;
+export declare const alignItemsClasses: Record<PlassAlignItems, string>;
+/**
+ * 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 declare const alignContentClasses: Record<PlassJustify, string>;
+export declare const alignSelfClasses: Record<PlassAlignSelf, string>;

package/dist/internal/grid.js

@@ -0,0 +1 @@
+export const breakpoints=["xs","sm","md","lg","xl"];export function responsiveSlots(t,e,n){const s=function breakpointMap(t){return null==t?{}:"object"==typeof t?t:{xs:t}}(e),o={};for(const e of breakpoints){const r=s[e];void 0!==r&&(o[`--p-${t}-${e}`]=n(r))}return o}export function withBaseline(t,e){return null==t?e:"object"==typeof t?{xs:e,...t}:t}export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}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"};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 @@
-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 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"})]})}export function ChevronIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 6.5 3.5 3.5 3.5-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function ArrowRightIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3 8h10m-3.5-3.5L13 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EllipsisIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"3.5",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"8",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"12.5",cy:"8",r:"1.15",fill:"currentColor"})]})}export function CheckIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m3.5 8.5 3 3 6-6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export function MinusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function PlusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M8 3.5v9M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function CloseIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 4.5 7 7m0-7-7 7",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function ClockIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 4.5V8l2.4 1.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function CalendarIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"2.25",y:"3.25",width:"11.5",height:"10.5",rx:"2",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M2.25 6.5h11.5",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M5.5 1.75v2.5M10.5 1.75v2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function LinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("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"}),r("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"})]})}export function ExternalLinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("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"}),r("path",{d:"M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function NoteIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 7.25v4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"4.9",r:"0.85",fill:"currentColor"})]})}export function DotIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("circle",{cx:"8",cy:"8",r:"3.25"})})}export function StarIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("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"})})}export function StarOutlineIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("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"})})}export function severityIcon(o){return"success"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.25 8.25 1.9 1.9 3.6-3.9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}):"warning"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("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"}),r("path",{d:"M8 6.1v3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"11.2",r:"0.85",fill:"currentColor"})]}):"danger"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}):r(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 @@
+import*as t from"react";export const MenuContext=/* @__PURE__ */t.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 {};

package/dist/internal/picker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:B,display:E,samples:L,empty:T,clearable:V=!1,onClear:W,open:A,onOpenChange:G,labels:H,hiddenValues:J,children:K,triggerRef:M,...Q}){const U=s.useId(),X=I??`${U}-trigger`,Y=`${U}-label`,Z=`${U}-description`,ee=`${U}-error`,le=null!=z&&!1!==z&&""!==z,se=O??le,ae=se?"danger":x,re=S||q,te=[$?Z:null,le?ee:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:se,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(ae,k),...B},...Q,children:[C?e(a.Label,{id:Y,htmlFor:X,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:C}):null,l(r.Root,{open:A,onOpenChange:e=>G(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f]),children:[l(r.Trigger,{id:X,ref:M,disabled:S,"aria-labelledby":C?Y:void 0,"aria-describedby":te,"aria-required":D||void 0,"aria-invalid":se||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",re?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:E}),e(i,{samples:L??[]})]})]}),!V||T||re?null:e("button",{type:"button","aria-label":H.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),W()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(ae,3),children:K})})})]}),$?e(a.Description,{id:Z,className:d(b[g],"text-(--plass-muted-fg)"),children:$}):null,le?e(a.Error,{id:ee,match:!0,className:d(b[g],"text-(--p-accent)"),children:z}):null,J?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/progress.d.ts

@@ -0,0 +1,145 @@
+/**
+ * What the three progress indicators share.
+ *
+ * `PlProgressLinear`, `PlProgressCircular` and `PlProgressBox` are three shapes
+ * answering one question — how far along is this, and is it moving at all — so
+ * everything that is *not* the shape belongs here: the colour slots, the size
+ * ladders, and the arithmetic that turns `value`/`min`/`max` into a fraction.
+ *
+ * What is left in each component is the shape, which is the point: it is the
+ * only thing that genuinely differs.
+ */
+import type * as React from 'react';
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * The props all three take.
+ *
+ * Declared once and extended rather than written three times, because the whole
+ * claim being made is that these are one component in three shapes: a `value`
+ * of `null` has to mean the same thing on a bar, a ring and a row of plates, or
+ * the trio is three components that happen to share a prefix.
+ */
+export interface PlassProgressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How far along, between `min` and `max`.
+     *
+     * `null` — the default — is the indeterminate case: something is happening
+     * and nobody knows how much of it is left. That is the default on purpose. An
+     * indicator that has not been told a value should say so rather than draw an
+     * empty bar, which is a claim that no progress has been made.
+     * @default null
+     */
+    value?: number | null;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is loading. Read out with the value by a screen reader. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the shape. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How to format the value when it is shown — `Intl.NumberFormat` options, so
+     * bytes and currencies work as well as plain numbers. Without it the value is
+     * a percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * The slots an indicator reads.
+ *
+ * An indicator **is** the coloured thing — unlike a PlBox, which holds other
+ * people's content — so it gets `--p-fill`, the family's own gradient, and the
+ * filled part of a bar is made of exactly the same material as the button that
+ * submits the form it is in.
+ *
+ * There is no elevation ladder and no `--p-lift` here, on purpose. An indicator
+ * is cut *into* the surface it sits on, the way a groove is, and a groove does
+ * not float.
+ */
+export declare function progressSlots(color: PlassColor): React.CSSProperties;
+/**
+ * How thick the linear groove is.
+ *
+ * Its own ladder rather than a fraction of `controlHeightClasses`: a bar is not
+ * a control you can put a label inside, and at `md` it wants to be the weight
+ * of a rule between two paragraphs rather than a quarter of a button.
+ *
+ * They are `PlSlider`'s rail thicknesses, and deliberately: a rail and a bar are
+ * the same channel, one of which you drag and one of which you watch.
+ */
+export declare const barThicknessClasses: Record<PlassSize, string>;
+/**
+ * The diameter of the ring, in pixels.
+ *
+ * Numbers rather than classes because the same value has to reach the SVG's
+ * `viewBox` arithmetic, and a ring is one of the few things in the library that
+ * cannot be described by a Tailwind class alone.
+ *
+ * They sit just under the control ladder at every step — a `md` ring is 20px
+ * inside a 40px control — so a ring dropped into a button, a field or a table
+ * row never makes the row taller than it already was.
+ */
+export declare const ringDiameters: Record<PlassSize, number>;
+/** The ring's stroke, thickening with the ring so the hole stays in proportion. */
+export declare const ringStrokes: Record<PlassSize, number>;
+/**
+ * One plate of a `PlProgressBox`, on the tick ladder — an indicator beside a
+ * label, not a control you can put one inside.
+ */
+export declare const plateSizeClasses: Record<PlassSize, string>;
+/** The corner cut off a plate: the same ~30% the tick boxes take. */
+export declare const plateRadiusClasses: Record<PlassSize, string>;
+/** Between the plates. Tight — they are one object, not a row of squares. */
+export declare const plateGapClasses: Record<PlassSize, string>;
+/**
+ * The groove an indicator is cut into, and the transition that fills it.
+ *
+ * `--plass-track` is the one neutral ink the library grooves with — a
+ * PlSlider's rail and a PlSwitch's off track are the same colour — so a form
+ * with a slider, a switch and a progress bar in it is made of one material
+ * rather than three.
+ *
+ * The fill is `--p-fill`, and it is a `background-image` rather than a colour
+ * because that is what a Plass fill *is*: a gradient that turns in hue. Which is
+ * also why the movement is on `width` and never on the paint: a gradient cannot
+ * be transitioned, and a length can.
+ */
+export declare const trackClasses = "bg-(--plass-track)";
+/** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
+export declare const fillTransitionClasses = "[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";
+/**
+ * `value` as a fraction of the range, or `null` when there is nothing to say.
+ *
+ * The clamp is not defensive programming for its own sake — `value` usually
+ * arrives from a division somewhere, and a bar that renders 140% wide because
+ * one request finished twice is a worse bug than a bar that sits full.
+ */
+export declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * What the value reads as, both on screen and to a screen reader.
+ *
+ * Base UI's own default is `${value}%`, which is right only when the range
+ * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
+ * the percentage is computed from the fraction, and a caller who passed
+ * `format` gets Base UI's formatted string instead, because at that point they
+ * have said what the number means.
+ */
+export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
+/**
+ * The same string, shaped for Base UI's `getAriaValueText`.
+ *
+ * `undefined` when there is no value, which hands the indeterminate case back
+ * to Base UI — it already announces indeterminate progress, and re-inventing
+ * that here would be one more English string the library has to own.
+ */
+export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;

package/dist/internal/progress.js

@@ -0,0 +1 @@
+export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses="bg-(--plass-track)";export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}export function progressText(s,r,e){return null===s?null:e?r:`${Math.round(100*s)}%`}export function progressAriaText(s,r){if(null!==s)return e=>progressText(s,e,r)??""}

package/dist/internal/sizer.d.ts

@@ -0,0 +1,32 @@
+import type * as React from 'react';
+/**
+ * Holds a control open at the width of the widest thing it could ever say.
+ *
+ * A control that is not `fullWidth` is sized by what it is *currently* saying,
+ * which for anything whose value changes means the box changes with it. A
+ * PlSelect showing `Seoul` is narrower than the same one showing
+ * `Washington DC`. Either way the field moves under the pointer that just used
+ * it, and the whole row of controls beside it shuffles along.
+ *
+ * So the alternatives are laid out too, stacked in a box clipped to no height.
+ * The control's intrinsic width becomes the widest of them and stops depending
+ * on the value.
+ *
+ * Three things it deliberately is not:
+ *
+ * - **Not `hidden`, and not `display: none`.** Both take the box out of layout,
+ *   and a box that is not laid out reserves nothing.
+ * - **Not read out.** `aria-hidden`, or a screen reader would announce every
+ *   value the control might hold before the one it does.
+ * - **Not text.** A string sample is drawn as generated content off a data
+ *   attribute rather than as a text node. `content: attr(…)` lays out exactly
+ *   like text, so it reserves the same width — but it leaves nothing for
+ *   `getByText` or a screen reader's find-in-page to trip over, and a caller's
+ *   test asking for the option they selected keeps finding one element rather
+ *   than two. Only a sample that is not a string — an option whose label is a
+ *   node — has to be rendered for real, because there is nothing to put in an
+ *   attribute.
+ */
+export declare function WidthSizer({ samples }: {
+    samples: readonly React.ReactNode[];
+}): React.JSX.Element | null;

package/dist/internal/sizer.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>"string"==typeof a?e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`):e("span",{className:"block whitespace-nowrap",children:a},n))})}