plass-ui 1.3.0 → 1.4.0

package/dist/components/how-to-steps/PlHowToSteps.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** How far along one step is. The same three a `PlStepper` and a `PlTimeline` draw. */
+export type PlHowToStepStatus = PlassStepStatus;
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlHowToStepsConnector = PlassStepConnector;
+export interface PlHowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * Which step is being worked on now, as an index.
+     *
+     * Optional, and left out for the ordinary case: a set of instructions is
+     * something a reader works through at their own pace, and a guide that
+     * claimed to know where they had got to would be guessing. Pass it for a
+     * guide that genuinely knows — a setup wizard reporting what it has already
+     * done for them.
+     */
+    active?: number;
+    /**
+     * Numbers the steps.
+     *
+     * On by default, because that is what instructions are: "do this, then this"
+     * is an order and the number is how a reader finds their place again after
+     * looking away. Turn it off for a set of things to do in any order, which is
+     * a checklist rather than a how-to.
+     * @default true
+     */
+    numbered?: boolean;
+    /**
+     * The line between one step and the next.
+     * @default 'solid'
+     */
+    connector?: PlHowToStepsConnector;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The space between steps. Never the type scale, never the bullet. */
+    density?: PlassDensity;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The `PlHowToStep`s. */
+    children?: React.ReactNode;
+}
+export interface PlHowToStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'title'> {
+    /** What the step is. The line the reader scans for. */
+    title?: React.ReactNode;
+    /**
+     * A glyph in place of the number. The step keeps its place in the order
+     * either way — what changes is only what is drawn in the disc.
+     */
+    icon?: React.ReactNode;
+    /** Overrides what the guide worked out from `active`. */
+    status?: PlHowToStepStatus;
+    /** What to do. */
+    children?: React.ReactNode;
+}
+/**
+ * Instructions, numbered, with what to do under each one.
+ *
+ * Three components put things in order and they answer different questions.
+ * A [PlStepper](../navigation/stepper) and a [PlTimeline](../display/timeline)
+ * both say **where you are** — one in a process the reader is moving through
+ * now, the other in a sequence that has already happened. This one says **what
+ * to do**, and that is the difference the shape follows from: every step's body
+ * is open at once, because somebody following instructions reads ahead, goes
+ * back a step, and works at their own pace.
+ *
+ * Which is also why `active` is optional here and not on the other two. A guide
+ * that claimed to know how far a reader had got would be guessing. Pass it only
+ * for the guide that genuinely knows.
+ *
+ * It is a real `<ol>` of `<li>`s, and the numbers a reader sees are the same
+ * ones the list carries. A screen reader announces "list, five items, item
+ * two" on its own — the position a heading per step would only approximate —
+ * which is what a reader who has looked away and come back is asking for.
+ */
+export declare const PlHowToSteps: React.ForwardRefExoticComponent<PlHowToStepsProps & React.RefAttributes<HTMLOListElement>>;
+/**
+ * One instruction.
+ *
+ * The number is the guide's, not the step's: a step never takes an index, and
+ * the list numbers its children as it walks them — so inserting one in the
+ * middle renumbers the rest without anything being edited.
+ */
+export declare const PlHowToStep: React.ForwardRefExoticComponent<PlHowToStepProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/how-to-steps/PlHowToSteps.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext(null),w=/* @__PURE__ */r.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */r.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:a,color:i,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=a??b.size??"md",j=i??b.color??"primary",H=c??b.density??"default",S=r.Children.toArray(f).filter(r.isValidElement),T=r.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:l({render:d??e("ol",{}),ref:N,props:{className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,r)=>e(w.Provider,{value:{index:r,last:r===S.length-1},children:t},t.key??r)),...h}})})});export const PlHowToStep=/* @__PURE__ */r.forwardRef(function PlHowToStep({title:l,icon:s,status:x,className:y,children:N,...b},P){const j=r.useContext(v),{index:H,last:S}=r.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,a[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],i[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(l)?e("div",{className:p("font-semibold",h[T],m[R]),children:l}):null,u(N)?e("div",{className:p(u(l)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});

package/dist/components/how-to-steps/index.d.ts

@@ -0,0 +1,2 @@
+export { PlHowToStep, PlHowToSteps } from './PlHowToSteps.js';
+export type { PlHowToStepProps, PlHowToStepsConnector, PlHowToStepsProps, PlHowToStepStatus } from './PlHowToSteps.js';

package/dist/components/how-to-steps/index.js

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

package/dist/components/image/PlImage.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{PlOverlay as t}from"../overlay/PlOverlay.js";import{PlSkeleton as r}from"../skeleton/PlSkeleton.js";import{cx as n,focusRingClasses as i,radiusClasses as c,transitionClasses as d}from"../../internal/styles.js";const m={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:p,src:f,ratio:u,fit:b="cover",rounded:h=!1,size:g,color:j,placeholder:v,fallback:y,preview:x=!1,previewLabel:w="Preview",onStatusChange:N,className:k,style:z,loading:P="lazy",...C},S){const L=s(),E=g??L.size??"md",I=j??L.color??"primary",[O,R]=l.useState("loading"),[$,F]=l.useState(!1);l.useEffect(()=>{R("loading")},[f]);const settle=e=>{R(e),N?.(e)},q=h?c[E]:"",A=e("img",{ref:S,src:f,alt:p,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:n("block size-full",m[b],d,"loaded"===O?"opacity-100":"opacity-0","error"===O?"hidden":""),...C}),B=a(o,{children:[A,"loading"===O?e("span",{className:"absolute inset-0",children:void 0===v?e(r,{shape:"rect",color:I,size:E,width:"100%",height:"100%",className:q}):v}):null,"error"===O?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:y??p}):null]}),D=n("relative block overflow-hidden",q,k),G={aspectRatio:u,...z};return x?a(o,{children:[e("button",{type:"button","aria-label":p?`${p} — ${w.toLowerCase()}`:w,onClick:()=>F(!0),disabled:"loaded"!==O,className:n(D,"cursor-zoom-in p-0",i),style:G,children:B}),e(t,{open:$,onOpenChange:F,tone:"glass",dismissible:!0,color:I,label:w,children:e("img",{src:f,alt:p,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:D,style:G,children:B})});
+"use client";import{jsx as e,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";import{PlSkeleton as n}from"../skeleton/PlSkeleton.js";import{cx as i,focusRingClasses as c,radiusClasses as m,transitionClasses as d}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:f,src:u,ratio:b,fit:h="cover",rounded:g=!1,size:j,color:v,placeholder:y,fallback:x,preview:w=!1,previewLabel:N,onStatusChange:k,className:z,style:C,loading:P="lazy",...S},L){const E=s(),I=t(),O=N??I.preview,R=j??E.size??"md",$=v??E.color??"primary",[F,q]=l.useState("loading"),[A,B]=l.useState(!1);l.useEffect(()=>{q("loading")},[u]);const settle=e=>{q(e),k?.(e)},D=g?m[R]:"",G=e("img",{ref:L,src:u,alt:f,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:i("block size-full",p[h],d,"loaded"===F?"opacity-100":"opacity-0","error"===F?"hidden":""),...S}),H=a(o,{children:[G,"loading"===F?e("span",{className:"absolute inset-0",children:void 0===y?e(n,{shape:"rect",color:$,size:R,width:"100%",height:"100%",className:D}):y}):null,"error"===F?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:x??f}):null]}),J=i("relative block overflow-hidden",D,z),K={aspectRatio:b,...C};return w?a(o,{children:[e("button",{type:"button","aria-label":f?`${f} — ${O.toLowerCase()}`:O,onClick:()=>B(!0),disabled:"loaded"!==F,className:i(J,"cursor-zoom-in p-0",c),style:K,children:H}),e(r,{open:A,onOpenChange:B,tone:"glass",dismissible:!0,color:$,label:O,children:e("img",{src:u,alt:f,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:J,style:K,children:H})});

package/dist/components/line-chart/PlLineChart.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+export interface PlLineChartProps extends CartesianChartProps {
+    /**
+     * How the line gets from one point to the next.
+     *
+     * - `linear` — straight segments. The default, and the only one that claims
+     *   nothing the data did not say.
+     * - `smooth` — a monotone cubic. Curved, but it will not dip below a value
+     *   that both of its neighbours are above; a plain spline would.
+     * - `step` — held at each value until the next one. What a rate, a tier or a
+     *   setting actually did between two readings, rather than a diagonal
+     *   pretending it drifted.
+     * @default 'linear'
+     */
+    curve?: PlassChartCurve;
+    /**
+     * Dots on the points.
+     *
+     * `auto` — the default — draws them while there are few enough points for a
+     * dot to mean something, and stops at fourteen. Whatever this says, the point
+     * under the pointer always gets one: that is what tells the reader which
+     * column the tooltip is about.
+     * @default 'auto'
+     */
+    markers?: ChartMarkers;
+    /**
+     * Fades the line from a paler step of its own hue at the start to the full
+     * colour at the end, so the recent end of a long series is the loud one.
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * Draws the line straight through a `null` instead of breaking at it.
+     *
+     * Off, and it should stay off unless the gap is an artefact of how the data
+     * was collected. A bridged gap is a number the chart made up.
+     * @default false
+     */
+    connectNulls?: boolean;
+    /**
+     * Which values are written on the line. `last` is the one to reach for — it
+     * names where each series ended up, which is the question a line chart is
+     * usually being asked.
+     * @default 'none'
+     */
+    valueLabels?: PlassChartValueLabels;
+    /**
+     * Stacks the series, each line riding on the total of the ones below it.
+     *
+     * Rare on a line chart and worth thinking twice about: the reader can follow
+     * the bottom series and the top total, and nothing in between. An
+     * [`PlAreaChart`](./area-chart) is the shape that makes stacking legible.
+     * @default false
+     */
+    stacked?: boolean;
+}
+/**
+ * A value against time, or against anything else with an order to it.
+ *
+ * The line is the mark that says *change*: it claims the space between two
+ * points is a journey rather than two separate facts, which is true of a
+ * temperature and false of four product categories. Reach for a
+ * [`PlBarChart`](./bar-chart) when the categories could be shuffled without losing
+ * anything.
+ *
+ * Everything around the line — the axes, the grid, the crosshair, the legend,
+ * the tooltip and the table a screen reader gets instead of the picture — comes
+ * from the shared frame, which is what makes a PlLineChart and a PlBarChart on one
+ * dashboard read as one drawing rather than two.
+ */
+export declare function PlLineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: PlLineChartProps): React.JSX.Element;

package/dist/components/line-chart/PlLineChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function PlLineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:l="none",stacked:s=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:s,inset:!0,includeZero:!1,headroom:"none"===l?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:s,markers:c,valueLabels:l,connectNulls:o,gradient:i,idPrefix:u})})}

package/dist/components/line-chart/index.d.ts

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

package/dist/components/line-chart/index.js

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

package/dist/components/meter/PlMeter.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize, PlassThreshold } from '../../types.js';
+/**
+ * Where a band starts, and what the bar is made of from there up.
+ *
+ * The library's own `PlassThreshold` under the name this component shipped it
+ * as. A gauge reads the same bands, so the shape moved to `src/types.ts` and
+ * this stayed as the name a caller already imports.
+ */
+export type PlMeterThreshold = PlassThreshold;
+export interface PlMeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How much there is.
+     *
+     * **Required, and that is the whole difference from a `PlProgressLinear`.** A
+     * meter reports a quantity that is already known — disk used, seats taken,
+     * how full a battery is — so there is no indeterminate case for it to have a
+     * default for. A bar with nothing to report is not a meter; it is a bar that
+     * should not have been drawn yet.
+     */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is being measured. Read out with the value. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the bar. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How the value is written when it is shown — `Intl.NumberFormat` options, so
+     * bytes, currencies and plain counts all work. 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;
+    /**
+     * Bands that change the bar's family as the value climbs.
+     *
+     * The band with the highest `from` at or below the value wins, and `color` is
+     * what the bar is made of below all of them. Order does not matter; the list
+     * is read, not walked.
+     *
+     * This is the prop a meter exists for: a quota bar that is `primary` at a
+     * third full, `warning` at three quarters and `danger` at ninety percent
+     * says something a fixed colour cannot. The number is still written out by
+     * `showValue`, because a band is a second way of saying it and never the
+     * only one.
+     */
+    thresholds?: readonly PlMeterThreshold[];
+    /** Thickness of the groove. Nothing else on a meter has a size. */
+    size?: PlassSize;
+    /** The family the bar takes where no threshold applies. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * A quantity inside a range, drawn as a bar.
+ *
+ * It looks like a [PlProgressLinear](./progress-linear) and it is not one, and
+ * the difference is worth stating because it decides which to reach for.
+ * **Progress is something advancing; a meter is something already known.** Disk
+ * used, seats taken, a password's strength, how full a battery is — none of
+ * them is going anywhere on its own, and none of them has an indeterminate
+ * state. So `value` is required here, there is no sweep, and the role a screen
+ * reader is given is `meter` rather than `progressbar`.
+ *
+ * `thresholds` is the prop it exists for. A quota bar that turns amber at three
+ * quarters and red at ninety percent says something a fixed colour cannot, and
+ * the colour is derived from the value rather than chosen by the caller at the
+ * moment they happened to be looking.
+ *
+ * Base UI owns the semantics — the role, the range attributes, `aria-valuetext`
+ * and the formatting — and it computes the fill width too, so what is left here
+ * is the material: the groove is `--plass-track` and the fill is the family's
+ * gradient, both the same as a progress bar's. One material, two meanings. The
+ * fill travels on `width` because a gradient cannot be transitioned and a
+ * length can.
+ */
+export declare const PlMeter: React.ForwardRefExoticComponent<PlMeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/meter/PlMeter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as a}from"@base-ui/react/meter";import{useDefaults as s}from"../../internal/defaults.js";import{barThicknessClasses as t,fillTransitionClasses as o,progressSlots as i,trackClasses as m}from"../../internal/progress.js";import{cx as n,metaTextClasses as c,stackGapClasses as f}from"../../internal/styles.js";import{bandColor as u}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:d=0,max:p=100,label:h,showValue:x=!1,format:j,thresholds:b,size:w,color:N,className:g,style:v,...y},k){const z=s(),M=w??z.size??"md",P=N??z.color??"primary";return l(a.Root,{ref:k,value:r,min:d,max:p,format:j,locale:z.locale,className:n("flex w-full flex-col",f[M],g),style:{...i(u(r,P,b)),...v},...y,children:[h||x?l("div",{className:n("flex items-baseline gap-2",h?"justify-between":"justify-end",c[M]),children:[h?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:h}):null,x?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(a.Track,{className:n("relative w-full overflow-hidden rounded-full",m,t[M]),children:e(a.Indicator,{className:n("rounded-full [background-image:var(--p-fill)]",o)})})]})});

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

@@ -0,0 +1,2 @@
+export { PlMeter } from './PlMeter.js';
+export type { PlMeterProps, PlMeterThreshold } from './PlMeter.js';

package/dist/components/meter/index.js

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

package/dist/components/mockup/PlMockup.d.ts

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+import type { PlassColor, PlassElevation, PlassSize } from '../../types.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: PlMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs `ios`
+     * or `android`. Anything else falls back to the device's own default —
+     * `macos`, `ipados` and `ios` respectively.
+     */
+    os?: PlMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: PlMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — from a 320-wide phone to a 430-wide one, from a 1024-wide desktop to a
+     * 1920-wide one.
+     *
+     * As on Box, `size` here does not set a height or a type scale. What it sets
+     * is the resolution of the screen, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean. This is the viewport the content is laid out
+     * against, not the panel's physical pixel count.
+     */
+    resolution?: PlMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: PlMockupOrientation;
+    /**
+     * How much hardware there is around the screen. `none` is not a thinner
+     * bezel — it is no hardware at all, leaving the screen on its own with its
+     * corners cut, which is what a mockup that only wants the viewport asks for.
+     * `thick` is an older device: narrow sides, a forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: PlMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: PlMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: PlMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar. Each one takes its own space rather than covering the
+     * content, so turning it off gives the screen back to `children` rather than
+     * uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * Whether content taller than the screen scrolls. Off, it is clipped, which is
+     * what a still picture of a device wants.
+     * @default false
+     */
+    scroll?: boolean;
+    /**
+     * What is behind the content: any CSS `background` value — a colour, a
+     * gradient, a `url()`.
+     * @default the page's own surface colour
+     */
+    wallpaper?: string;
+    /**
+     * The clock in the status bar or the taskbar, and the only text the chrome
+     * draws. A string rather than a `Date`, because a mockup's clock is a prop of
+     * the picture and reading the real one would differ between the server that
+     * renders the page and the browser that hydrates it.
+     * @default '9:41'
+     */
+    time?: string;
+    /**
+     * The rendered width of the whole device on the page — a number in pixels or
+     * any CSS length. The device is laid out at its own resolution and then scaled
+     * to whatever this comes to, so the content inside is genuinely a screen's
+     * worth rather than a page's worth shrunk.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The rendered height. Given on its own it decides the size and the width
+     * follows the device's proportion, which is what a mockup in a row of fixed
+     * height wants.
+     */
+    height?: number | string;
+    /** Reaches the accent in the chrome — a dock's first icon, a taskbar's. */
+    color?: PlassColor;
+    /**
+     * How far off the page the device sits. Drawn as a silhouette rather than a
+     * box, so the shadow follows a lid on a neck on a foot, and it does not shrink
+     * with the device.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Renders something other than a `<div>`: `render={<figure />}`. */
+    render?: useRender.RenderProp;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A device with a screen you can put anything on: a phone, a tablet, a monitor
+ * or a laptop, with the system's own bars drawn on it.
+ *
+ * The screen is a viewport at the device's own resolution — a `md` phone is 390
+ * by 844 CSS pixels — and the whole device is then scaled once to whatever room
+ * it has been given. So the content inside is laid out against a screen rather
+ * than against the page: a 390-pixel column wraps where it would wrap on a
+ * phone, and the mockup can be 200 pixels wide on the page without the content
+ * knowing.
+ *
+ * That scale is a `transform`, and it is the one place in the library where one
+ * is used. The rule it is an exception to is about controls, where a scale
+ * resamples a label under the pointer that is pressing it. Nothing here is
+ * pressed and the scale never changes on an interaction: it is set once from the
+ * space available, which is the only way to draw a 1440-pixel desktop in a
+ * paragraph's width at all.
+ *
+ * The screen is also a container (`plass-screen`), so content inside can answer
+ * to the device's width with a container query rather than to the window's.
+ */
+export declare const PlMockup: React.ForwardRefExoticComponent<PlMockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/PlMockup.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as l,elevationFilters as o,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:j,systemUi:M=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,x),K=j??l(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),re=M?d({os:J,notch:K,landscape:L,time:W}):{},ae="none"===R,se=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:ae?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),re.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),le=p("plass-mockup relative block",I??"");return a({render:F,ref:ie,props:{className:le,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:o[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===te?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${te??1})`},children:[e("div",{className:ae?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:se}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});

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

@@ -0,0 +1,2 @@
+export { PlMockup } from './PlMockup.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupProps, PlMockupResolution } from './PlMockup.js';

package/dist/components/mockup/index.js

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

package/dist/components/modal/PlModal.d.ts

@@ -111,4 +111,4 @@ export declare const PlModalClose: React.ForwardRefExoticComponent<Omit<import("
  * the header and the actions stay put while only the body scrolls, which is why
  * `dividers` matters more here than on a PlCard.
  */
-export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;
+export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;

package/dist/components/modal/PlModal.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{Dialog as a}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as o,focusRingClasses as r,glassClasses as t,hasContent as n,metaTextClasses as d,radiusClasses as c,sheetBodyClasses as p,sheetHeaderGapClasses as m,sheetLineClasses as f,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as g,surfaceSlots as v}from"../../internal/styles.js";const y={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=/* @__PURE__ */[t,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),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(" "),w=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=a.Close;export function PlModal({size:t,color:j,density:N,open:k,defaultOpen:$,onOpenChange:_,trigger:z,title:C,description:P,actions:B,dividers:O=!1,showClose:D=!0,closeLabel:M="Close",width:T,fullWidth:W=!0,fullScreen:L=!1,modal:R=!0,dismissible:S=!0,className:V,classNames:q,style:A,children:E,...F}){const G=l(),H=t??G.size??"md",I=j??G.color??"primary",J=N??G.density??"default",K=u[J][H],Q=x[J][H],U=O?`${K} ${Q}`:K,X=n(C)||n(P),Y=n(B);return s(a.Root,{open:k,defaultOpen:$,modal:R,disablePointerDismissal:!S,onOpenChange:(e,s)=>{S||e||"escape-key"!==s.reason?_?.(e):s.cancel()},children:[z?e(a.Trigger,{render:z}):null,s(a.Portal,{children:[e(a.Backdrop,{className:o("plass-portal",w,q?.backdrop)}),e(a.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",L?"items-stretch":"items-center p-4"].join(" "),children:s(a.Popup,{className:[b,p[H],L?"h-full max-w-none rounded-none":`max-h-full ${c[H]} ${void 0===T?y[H]:""}`,L||W?"":"w-auto",O?"":`${Q} ${h[H]}`,V??""].filter(Boolean).join(" "),style:{...v(I,3),...void 0===T?null:{maxWidth:"number"==typeof T?`${T}px`:T},...A},...F,children:[X||D?s("div",{className:`flex shrink-0 items-start gap-3 ${U}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${m[H]}`,children:[n(C)?e(a.Title,{className:`m-0 font-semibold ${g[H]}`,children:C}):null,n(P)?e(a.Description,{className:`m-0 text-(--plass-muted-fg) ${d[H]}`,children:P}):null]}),D?e(a.Close,{"aria-label":M,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",r].join(" "),children:e(i,{})}):null]}):null,n(E)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",U,O&&(X||D)?f:"",O?"":"-my-1 py-1"].filter(Boolean).join(" "),children:E}):null,Y?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",U,O?f:""].filter(Boolean).join(" "),children:B}):null]})})]})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Dialog as o}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as r,focusRingClasses as t,glassClasses as n,hasContent as d,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetLineClasses as u,sheetPaddingXClasses as x,sheetPaddingYClasses as h,sheetSectionGapClasses as g,sheetTitleClasses as v,surfaceSlots as y}from"../../internal/styles.js";const b={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},w=/* @__PURE__ */[n,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=o.Close;export function PlModal({size:n,color:N,density:k,open:$,defaultOpen:_,onOpenChange:z,trigger:C,title:P,description:B,actions:O,dividers:D=!1,showClose:M=!0,closeLabel:T,width:W,fullWidth:L=!0,fullScreen:R=!1,modal:S=!0,dismissible:V=!0,className:q,classNames:A,style:E,children:F,...G}){const H=l(),I=a(),J=T??I.close,K=n??H.size??"md",Q=N??H.color??"primary",U=k??H.density??"default",X=x[U][K],Y=h[U][K],Z=D?`${X} ${Y}`:X,ee=d(P)||d(B),se=d(O);return s(o.Root,{open:$,defaultOpen:_,modal:S,disablePointerDismissal:!V,onOpenChange:(e,s)=>{V||e||"escape-key"!==s.reason?z?.(e):s.cancel()},children:[C?e(o.Trigger,{render:C}):null,s(o.Portal,{children:[e(o.Backdrop,{className:r("plass-portal",j,A?.backdrop)}),e(o.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",R?"items-stretch":"items-center p-4"].join(" "),children:s(o.Popup,{className:[w,m[K],R?"h-full max-w-none rounded-none":`max-h-full ${p[K]} ${void 0===W?b[K]:""}`,R||L?"":"w-auto",D?"":`${Y} ${g[K]}`,q??""].filter(Boolean).join(" "),style:{...y(Q,3),...void 0===W?null:{maxWidth:"number"==typeof W?`${W}px`:W},...E},...G,children:[ee||M?s("div",{className:`flex shrink-0 items-start gap-3 ${Z}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${f[K]}`,children:[d(P)?e(o.Title,{className:`m-0 font-semibold ${v[K]}`,children:P}):null,d(B)?e(o.Description,{className:`m-0 text-(--plass-muted-fg) ${c[K]}`,children:B}):null]}),M?e(o.Close,{"aria-label":J,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" "),children:e(i,{})}):null]}):null,d(F)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",Z,D&&(ee||M)?u:"",D?"":"-my-1 py-1"].filter(Boolean).join(" "),children:F}):null,se?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",Z,D?u:""].filter(Boolean).join(" "),children:O}):null]})})]})]})}

package/dist/components/number-field/PlNumberField.d.ts

@@ -141,4 +141,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/PlNumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{NumberField as t}from"@base-ui/react/number-field";import{Field as s}from"@base-ui/react/field";import{MinusIcon as n,PlusIcon as r}from"../../internal/icons.js";import{hotKeyHandler as i}from"../../internal/keys.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as p,fieldReadOnlyClasses as m,fieldRestClasses as u,focusRingClasses as f,focusWithinRingClasses as h,gapClasses as b,hasContent as x,iconClasses as g,metaTextClasses as v,paddingXClasses as N,radiusClasses as y,stackGapClasses as j,surfaceSlots as w,transitionClasses as k}from"../../internal/styles.js";const S=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",k,"focus-within:[transition-duration:0ms]",h,g].join(" "),_=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",f,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:f="glass",size:h,color:g,density:k,elevation:V=0,value:I,defaultValue:z,onValueChange:C,onValueCommitted:D,min:O,max:B,step:L,largeStep:W,smallStep:q,snapOnStep:F,allowWheelScrub:K=!1,format:R,locale:E,steppers:G="end",incrementLabel:P="Increase",decrementLabel:$="Decrease",label:A,description:H,error:J,invalid:M,startIcon:Q,endIcon:T,fullWidth:U=!1,disabled:X=!1,readOnly:Y=!1,required:Z=!1,name:ee,placeholder:le,id:ae,className:te,hotKeys:se,classNames:ne,style:re,...ie}){const oe=a(),ce=E??oe.locale,de=h??oe.size??"md",pe=g??oe.color??"primary",me=k??oe.density??"default",ue=x(J),fe=M??ue,he=fe?"danger":pe,be=N[me][de],xe={end:`${be} pe-1`,split:"px-1",none:be},ge=e(t.Decrement,{"aria-label":$,className:_,children:e(n,{})}),ve=e(t.Increment,{"aria-label":P,className:_,children:e(r,{})}),Ne="none"!==G&&!Y;return l(s.Root,{disabled:X,invalid:fe,className:["flex-col align-top",j[de],U?"flex w-full":"inline-flex",te??""].filter(Boolean).join(" "),style:{...w(he,V),...re},...ie,children:[A?e(s.Label,{className:d(v[de],"font-medium text-(--plass-fg)",X?"opacity-50":"",ne?.label),children:A}):null,e(t.Root,{id:ae,name:ee,className:"contents",value:I,defaultValue:z,onValueChange:e=>C?.(e),onValueCommitted:e=>D?.(e),min:O,max:B,step:L,largeStep:W,smallStep:q,snapOnStep:F,allowWheelScrub:K,format:R,locale:ce,disabled:X,readOnly:Y,required:Z,children:l(t.Group,{className:[S,o[de],c[de],y[de],b[de],Ne?xe[G]:be,X?p[f]:Y?m[f]:u[f],ne?.control].filter(Boolean).join(" "),children:[Ne&&"split"===G?ge:null,Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Q}):null,e(t.Input,{placeholder:le,onKeyDown:i(se,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===G&&Ne?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:T}):null,Ne&&"end"===G?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[ge,ve]}):null,Ne&&"split"===G?ve:null]})}),H?e(s.Description,{className:d(v[de],"text-(--plass-muted-fg)",ne?.description),children:H}):null,e(s.Error,ue?{match:!0,className:d(v[de],"text-(--p-accent)",ne?.error),children:J}:{className:d(v[de],"text-(--p-accent)",ne?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as f,focusRingClasses as h,focusWithinRingClasses as b,gapClasses as x,hasContent as g,iconClasses as v,metaTextClasses as N,paddingXClasses as y,radiusClasses as j,stackGapClasses as w,surfaceSlots as k,transitionClasses as S}from"../../internal/styles.js";const _=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",S,"focus-within:[transition-duration:0ms]",b,v].join(" "),V=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",h,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:h="glass",size:b,color:v,density:S,elevation:z=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:B,min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R=!1,format:E,locale:G,steppers:P="end",incrementLabel:$,decrementLabel:A,label:H,description:J,error:M,invalid:Q,startIcon:T,endIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:le,placeholder:ae,id:te,className:se,hotKeys:ne,classNames:re,style:ie,...oe}){const ce=a(),de=t(),me=$??de.increase,pe=A??de.decrease,ue=G??ce.locale,fe=b??ce.size??"md",he=v??ce.color??"primary",be=S??ce.density??"default",xe=g(M),ge=Q??xe,ve=ge?"danger":he,Ne=y[be][fe],ye={end:`${Ne} pe-1`,split:"px-1",none:Ne},je=e(s.Decrement,{"aria-label":pe,className:V,children:e(r,{})}),we=e(s.Increment,{"aria-label":me,className:V,children:e(i,{})}),ke="none"!==P&&!Z;return l(n.Root,{disabled:Y,invalid:ge,className:["flex-col align-top",w[fe],X?"flex w-full":"inline-flex",se??""].filter(Boolean).join(" "),style:{...k(ve,z),...ie},...oe,children:[H?e(n.Label,{className:m(N[fe],"font-medium text-(--plass-fg)",Y?"opacity-50":"",re?.label),children:H}):null,e(s.Root,{id:te,name:le,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>B?.(e),min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R,format:E,locale:ue,disabled:Y,readOnly:Z,required:ee,children:l(s.Group,{className:[_,c[fe],d[fe],j[fe],x[fe],ke?ye[P]:Ne,Y?p[h]:Z?u[h]:f[h],re?.control].filter(Boolean).join(" "),children:[ke&&"split"===P?je:null,T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:T}):null,e(s.Input,{placeholder:ae,onKeyDown:o(ne,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===P&&ke?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ke&&"end"===P?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[je,we]}):null,ke&&"split"===P?we:null]})}),J?e(n.Description,{className:m(N[fe],"text-(--plass-muted-fg)",re?.description),children:J}):null,e(n.Error,xe?{match:!0,className:m(N[fe],"text-(--p-accent)",re?.error),children:M}:{className:m(N[fe],"text-(--p-accent)",re?.error)})]})}

package/dist/components/overlay/PlOverlay.d.ts

@@ -95,4 +95,4 @@ export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div
  * held inside, the page behind going inert, and focus returning to wherever it
  * came from when the overlay closes.
  */
-export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, color: colorProp, label, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;
+export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, color: colorProp, label: labelProp, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{Dialog as l}from"@base-ui/react/dialog";import{cx as r,surfaceSlots as t}from"../../internal/styles.js";const i={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},o={start:"items-start",center:"items-center",end:"items-end"},n={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},p=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:c,defaultOpen:m,onOpenChange:d,tone:f="scrim",dismissible:u=!1,modal:b=!0,align:x="center",size:y,color:g,label:j="Overlay",className:k,classNames:h,style:v,children:z,...O}){const N=s(),w=y??N.size??"md",P=g??N.color??"primary";return e(l.Root,{open:c,defaultOpen:m,modal:b,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:r("plass-portal fixed inset-0 z-(--plass-z-portal)",p,i[f],h?.backdrop)}),e(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",o[x],n[w]].join(" "),children:e(l.Popup,{"aria-label":j,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",p,k??""].filter(Boolean).join(" "),style:{...t(P,0),...v},...O,children:z})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:b="scrim",dismissible:u=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[b],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}

package/dist/components/page-layout/PlPageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{PlPageLayoutContext as n,PlassSidebarSideContext as r}from"../../internal/page-layout.js";import{controlSlots as s,cx as a,hasContent as i,toLength as u}from"../../internal/styles.js";const c=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:f,sidebar:p,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:x="page",height:y="viewport",collapseBelow:b="md",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:P,endSidebarOpen:S,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:C,skipLink:O=!0,skipLabel:N="Skip to content",mainId:j="main",mainProps:$,color:R,className:z,style:L,children:E,...B},H){const M=t(),_=R??M.color??"primary",[I,q]=o.useState(w),[A,D]=o.useState(k),F=o.useMemo(()=>({start:g??I,end:S??A}),[g,I,S,A]),G=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&q(l),void P?.(l);void 0===S&&D(l),C?.(l)},[g,S,P,C]),J=o.useRef(null),K=o.useCallback(e=>{J.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),Q=o.useRef({header:null,footer:null}),T=o.useRef(null),U=o.useCallback(()=>{const e=J.current;if(e)for(const l of c){const o=Q.current[l],t="header"===l?h:v;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,v]),V=o.useCallback(()=>{const e=T.current;if(e){e.disconnect();for(const l of c){const o=Q.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(T.current=new ResizeObserver(()=>U()),V(),()=>{T.current?.disconnect(),T.current=null}),[U,V]);const W=o.useCallback((e,l)=>{Q.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:F,setOpen:G,scroll:x}),[W,b,F,G,x]),Y="content"===x,Z=u("viewport"===y||"auto"===y?void 0:y),ee=void 0!==Z?"":"auto"===y?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=i(d)?d:null,oe=i(f)?f:null;return e(n.Provider,{value:X,children:l("div",{ref:K,className:a("relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===v?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",z),style:void 0===Z?L:{...Y?{height:Z}:{minHeight:Z},...L},...B,children:[O?e("a",{href:`#${j}`,className:a("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:s(_,2,"solid"),children:N}):null,"full"===h?le:null,l("div",{className:a("flex w-full flex-1",Y?"min-h-0":""),children:[i(p)?e(r.Provider,{value:"start",children:p}):null,l("div",{className:a("flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===v?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===h?le:null,e("main",{...$,id:j,className:a("min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",$?.className),children:E}),"content"===v?oe:null]}),i(m)?e(r.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const f=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:R,color:z,className:L,style:E,children:B,...H},M){const _=t(),I=n(),T=N??I.skipToContent,q=z??_.color??"primary",[A,D]=o.useState(P),[F,G]=o.useState(C),J=o.useMemo(()=>({start:w??A,end:S??F}),[w,A,S,F]),K=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&D(l),void k?.(l);void 0===S&&G(l),O?.(l)},[w,S,k,O]),Q=o.useRef(null),U=o.useCallback(e=>{Q.current=e,"function"==typeof M?M(e):M&&(M.current=e)},[M]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of f){const o=V.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[v,x]),Y=o.useCallback(()=>{const e=W.current;if(e){e.disconnect();for(const l of f){const o=V.current[l];o&&e.observe(o)}}X()},[X]);o.useEffect(()=>(W.current=new ResizeObserver(()=>X()),Y(),()=>{W.current?.disconnect(),W.current=null}),[X,Y]);const Z=o.useCallback((e,l)=>{V.current[e]=l,Y()},[Y]),ee=o.useMemo(()=>({present:!0,register:Z,collapseBelow:g,open:J,setOpen:K,scroll:y}),[Z,g,J,K,y]),le="content"===y,oe=c("viewport"===b||"auto"===b?void 0:b),te=void 0!==oe?"":"auto"===b?le?"h-full":"min-h-full":le?"h-dvh":"min-h-dvh",ne=u(d)?d:null,re=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",le?"overflow-hidden":"",te,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===oe?E:{...le?{height:oe}:{minHeight:oe},...E},...H,children:[j?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(q,2,"solid"),children:T}):null,"full"===v?ne:null,l("div",{className:i("flex w-full flex-1",le?"min-h-0":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:i("flex min-w-0 flex-1 flex-col",le?"min-h-0":"","content"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===v?ne:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",le?"min-h-0 overflow-y-auto":"",R?.className),children:B}),"content"===x?re:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?re:null]})})});