plass-ui 1.3.0 → 1.5.0

package/dist/components/code-block/PlCodeBlock.d.ts

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize } from '../../types.js';
+export { registerLanguage } from '../../internal/highlight.js';
+export type { PlCodeLine, PlCodeToken } from '../../internal/highlight.js';
+/**
+ * Which palette the block wears.
+ *
+ * The four house themes come first. `dark` is the default and it is the one
+ * that is not a preference: code has been read on a dark ground since
+ * terminals, and a block that matched the page would be the one element on it
+ * whose colours were chosen by something other than the code. `auto` is the
+ * opt-out, and `mono` has no hue in it at all.
+ *
+ * The eight after them are ports, kept at their published values. They exist
+ * because a code block is the one component whose colours a reader already has
+ * an opinion about: someone who writes in One Dark all day reads a Dracula
+ * block as a different product's documentation.
+ *
+ * The type is open on purpose. A theme is a set of `--p-code-*` custom
+ * properties under a `[data-code-theme]` selector and nothing else, so a
+ * consumer who writes one in their own stylesheet has a theme — with nothing to
+ * register, nothing to import, and no cost to anybody who did not.
+ */
+export type PlCodeBlockTheme = 'dark' | 'light' | 'auto' | 'mono' | 'one-dark' | 'dracula' | 'monokai' | 'nord' | 'night-owl' | 'gruvbox' | 'github' | 'solarized-light';
+export interface PlCodeBlockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'prefix' | 'children' | 'onCopy'> {
+    /**
+     * The code. Trailing whitespace is trimmed off the end of the block — a
+     * template literal is almost always written with a newline before its closing
+     * backtick, and that newline is a blank line at the bottom of every block.
+     */
+    code: string;
+    /**
+     * What it is written in — `ts`, `dart`, `bash`, `yml`, `dockerfile`. The
+     * common spellings and file extensions are understood, so a value copied off
+     * a fenced code block works as-is.
+     *
+     * A language nothing here knows is drawn plain rather than refused; teach it
+     * one with `registerLanguage`.
+     */
+    language?: string;
+    /**
+     * The palette. Independent of the page's light and dark, except on `auto`.
+     *
+     * Any other string works too, and is how a project brings its own: write
+     * `[data-code-theme='ours'] { --p-code-bg: …; --p-code-keyword: … }` in your
+     * own CSS and pass the name. Sixteen slots, five of which are derived from
+     * the other two and need no declaration.
+     * @default 'dark'
+     */
+    theme?: PlCodeBlockTheme | (string & {});
+    /** The type scale and the air around the code. @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /** Drop shadow depth. `0` is flat, and is right for a block that is content. @default 0 */
+    elevation?: PlassElevation;
+    /**
+     * Colours the code.
+     *
+     * Off, nothing is fetched at all: the grammar engine is behind a dynamic
+     * import, so a block that does not highlight costs no more than the text in
+     * it. On, the block draws plain on the first frame and colours itself when
+     * the grammar lands — a few milliseconds, and never a blank space where the
+     * code should be.
+     * @default true
+     */
+    highlight?: boolean;
+    /**
+     * The bar over the code, and the master switch for it: with it off there is
+     * no bar and none of `showLanguage`, `copyable` or `rawToggle` draws
+     * anything, whatever they say.
+     * @default true
+     */
+    toolbar?: boolean;
+    /**
+     * A name at the start of the bar — a file path, usually. Takes the place the
+     * language would otherwise have; both can be shown at once.
+     */
+    title?: React.ReactNode;
+    /** Names the language at the start of the bar. @default true */
+    showLanguage?: boolean;
+    /** The button that puts the code on the clipboard. @default true */
+    copyable?: boolean;
+    /**
+     * The toggle that drops the colouring and shows the characters as they are.
+     * Off by default: it is a second control on a bar that usually wants one, and
+     * it means nothing at all when `highlight` is off.
+     * @default false
+     */
+    rawToggle?: boolean;
+    /**
+     * Lines to mark: a tinted row with a rule down its leading edge.
+     *
+     * A number is one line, a string is a list of lines and ranges — `'4'`,
+     * `'4-9'`, `'1,4-9,12'` — and an array is any mix of the two. They are
+     * counted the way the gutter counts, so `startLine={286}` means
+     * `highlightLines={288}` marks the line the gutter calls 288.
+     *
+     * The tint is mixed from the theme's own ink rather than from the page's
+     * colour family, so it is legible on all twelve palettes and never the one
+     * colour on a Dracula block that nobody chose.
+     */
+    highlightLines?: number | string | Array<number | string>;
+    /** Numbers down the side. @default false */
+    lineNumbers?: boolean;
+    /** What the first line is numbered. @default 1 */
+    startLine?: number;
+    /**
+     * A shell prompt in front of every line that has something on it — `$`, `#`,
+     * `C:\>`, `>>>`.
+     *
+     * It is drawn but never *present*: the symbol is generated content, so it
+     * cannot be selected, cannot be found by find-in-page and is not what the
+     * copy button puts on the clipboard. A transcript stays a transcript and
+     * still pastes into a shell.
+     */
+    prompt?: string;
+    /** Wraps long lines instead of scrolling them sideways. @default false */
+    wrap?: boolean;
+    /**
+     * How tall the block may get before the code scrolls inside it. A number is
+     * pixels; any CSS length works. Left out, the block is as tall as the code.
+     */
+    maxHeight?: number | string;
+    /** The typeface. Defaults to the page's own monospace stack. */
+    fontFamily?: string;
+    /** Overrides the size the `size` ladder chose. A number is pixels. */
+    fontSize?: number | string;
+    /** Overrides the leading. A bare number is a ratio, as in CSS. */
+    lineHeight?: number | string;
+    /** Tracking. A number is pixels; `-0.01em` and the like work too. */
+    letterSpacing?: number | string;
+    /** The copy button's label. @default 'Copy' */
+    copyLabel?: string;
+    /** And what it says once the code is on the clipboard. @default 'Copied' */
+    copiedLabel?: string;
+    /** And what it says when the clipboard refused. @default 'Could not copy' */
+    copyFailedLabel?: string;
+    /** The raw toggle's label. @default 'Raw' */
+    rawLabel?: string;
+    /**
+     * What the region is called when there is no language and no title to name
+     * it, which is also the case for a `title` that is an element while `toolbar`
+     * is off.
+     * @default 'Code'
+     */
+    codeLabel?: string;
+    /** Fires with the copied text once the clipboard has taken it. */
+    onCopy?: (code: string) => void;
+}
+/**
+ * `4`, `'4-9'`, `'1,4-9,12'` or any array of those, as the set of numbers they
+ * name.
+ *
+ * A set rather than a sorted list of ranges because the only question ever
+ * asked of it is "is this line in it", once per line. Anything unparseable is
+ * dropped rather than thrown: a marked line is an annotation, and a typo in one
+ * should cost the annotation, not the code.
+ *
+ * Exported for its test; the barrel leaves it out.
+ */
+export declare function markedLines(spec: number | string | Array<number | string> | undefined, first: number, last: number): Set<number>;
+/**
+ * A viewer for one line of code or a thousand.
+ *
+ * Everything it draws above the code is optional and off one prop each, because
+ * the same component has to be a snippet inside a sentence — no bar, no
+ * numbers, no chrome — and the full transcript at the top of a README, and
+ * those are the same block with different things turned on rather than two
+ * components.
+ *
+ * The colouring is highlight.js, and it is the one thing in the library reached
+ * through a dynamic import: the grammars are forty kilobytes and there are
+ * thirty-five of them, so they arrive as their own chunk, one language at a
+ * time, and only for a block that asked to be coloured. See
+ * `internal/highlight.ts` for why that is a `dependencies` entry rather than an
+ * optional peer.
+ *
+ * The block is rendered as lines rather than as one run of text — even with no
+ * numbers and no prompt — because a line is what carries a number, a prompt and
+ * a place in the scroll, and a component that switched between two renderings
+ * would have two sets of wrapping behaviour to keep in step.
+ *
+ * **It is the one surface in the library that is not made of glass.** Every
+ * other sheet here is translucent and takes the page's colour family; this one
+ * paints its own opaque ground and refuses the family entirely, because the
+ * palette is the subject rather than the setting. A Dracula block tinted
+ * `primary` would be a Dracula block nobody chose.
+ */
+export declare const PlCodeBlock: React.ForwardRefExoticComponent<PlCodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/code-block/PlCodeBlock.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{CheckIcon as r,CodeIcon as a,CopyIcon as i}from"../../internal/icons.js";import{canonicalLanguage as s,highlight as c,plainLines as d}from"../../internal/highlight.js";import{cx as p,hasContent as m,metaTextClasses as u,radiusClasses as x,srOnlyClasses as f,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";export{registerLanguage}from"../../internal/highlight.js";const v={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},b={default:{xs:"py-2",sm:"py-3",md:"py-3.5",lg:"py-4",xl:"py-5"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-3.5"}},w={default:{xs:"px-2",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"}},N={default:{xs:"px-2.5 py-1",sm:"px-3.5 py-1",md:"px-4 py-1.5",lg:"px-4.5 py-2",xl:"px-5.5 py-2"},compact:{xs:"px-2 py-0.5",sm:"px-2.5 py-0.5",md:"px-3 py-1",lg:"px-3.5 py-1",xl:"px-4 py-1.5"}};export function markedLines(e,t,n){const l=new Set;if(void 0===e)return l;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const r=Number(o[1]),a=void 0===o[2]?r:Number(o[2]),i=Math.max(Math.min(r,a),t),s=Math.min(Math.max(r,a),n);for(let e=i;e<=s;e+=1)l.add(e)}else Number.isFinite(o)&&l.add(Math.trunc(o));return l}export const PlCodeBlock=/* @__PURE__ */n.forwardRef(function PlCodeBlock({code:k,language:L,theme:S="dark",size:j,color:M,density:C,elevation:T=0,highlight:_=!0,toolbar:F=!0,title:R,showLanguage:z=!0,copyable:A=!0,rawToggle:E=!1,highlightLines:H,lineNumbers:K=!1,startLine:B=1,prompt:D,wrap:I=!1,maxHeight:P,fontFamily:$,fontSize:q,lineHeight:G,letterSpacing:J,copyLabel:O,copiedLabel:Q,copyFailedLabel:U,rawLabel:V,codeLabel:W,onCopy:X,className:Y,style:Z,...ee},te){const ne=l(),le=j??ne.size??"md",oe=M??ne.color??"primary",re=C??ne.density??"default",ae=o(),ie=O??ae.copy,se=Q??ae.copied,ce=U??ae.copyFailed,de=V??ae.raw,pe=n.useMemo(()=>k.replace(/\r\n?/g,"\n").trimEnd(),[k]),me=s(L),[ue,xe]=n.useState(!1),[fe,ge]=n.useState(null),[he,ye]=n.useState(null),ve=_&&!ue&&null!==me;n.useEffect(()=>{if(!ve||!me)return void ye(null);let e=!1;return c(pe,me).then(t=>{e||ye(t?{source:pe,name:me,lines:t}:null)},()=>{e||ye(null)}),()=>{e=!0}},[pe,me,ve]);const be=n.useMemo(()=>ve&&he&&he.source===pe&&he.name===me?he.lines:d(pe),[ve,he,pe,me]),we=`${String(B+Math.max(be.length-1,0)).length}ch`,Ne=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(Ne.current),[]);const ke=n.useMemo(()=>markedLines(H,B,B+be.length-1),[H,B,be.length]),Le=n.useRef(null),Se=p("inline-flex shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent","px-1.5 py-1 text-(--p-code-dim) hover:text-(--p-code-fg) hover:bg-(--p-code-hover)",x.xs,u[le],"[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",y,"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),je=n.useId(),Me=F&&m(R),Ce="string"==typeof R&&R?R:me??W??ae.code;return t("div",{ref:te,className:p("plass-code flex min-w-0 flex-col overflow-hidden",x[le],"border bg-(--p-code-bg) text-(--p-code-fg) [border-color:var(--p-code-rule)]","[box-shadow:var(--p-elev)]",y,Y),"data-code-theme":S,"data-code-wrap":I?"true":void 0,style:{...g(oe,T),"--p-code-gutter":we,...$?{fontFamily:$}:null,...void 0===q?null:{fontSize:h(q)},...void 0===G?null:{lineHeight:G},...void 0===J?null:{letterSpacing:h(J)},...Z},...ee,children:[F&&(z||A||E||m(R))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--p-code-rule)]",N[re][le]),children:[m(R)?e("span",{id:je,className:p("min-w-0 truncate font-mono",u[le]),children:R}):null,z&&me?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--p-code-dim) uppercase select-none",u[le]),children:me}):null,e("span",{className:"flex-1"}),E&&_?e("button",{type:"button","aria-pressed":ue,"aria-label":de,title:de,onClick:()=>xe(e=>!e),className:p(Se,ue?"bg-(--p-code-hover) text-(--p-code-fg)":""),children:e(a,{})}):null,A?t("button",{type:"button",onClick:async()=>{const e=await async function writeToClipboard(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const n=document.execCommand("copy");return t.remove(),n}catch{return!1}}(pe);clearTimeout(Ne.current),ge(e),Ne.current=setTimeout(()=>ge(null),2e3),e&&X?.(pe)},className:Se,children:[e(fe?r:i,{}),e("span",{children:null===fe?ie:fe?se:ce})]}):null]}):null,e("div",{className:p("flex min-h-0 flex-col",v[le]),children:e("div",{role:"region","aria-labelledby":Me?je:void 0,"aria-label":Me?void 0:Ce,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=Le.current,n="undefined"==typeof window?null:window.getSelection();if(!t||!n)return;e.preventDefault();const l=document.createRange();l.selectNodeContents(t),n.removeAllRanges(),n.addRange(l)},className:p("min-h-0 overflow-auto",b[re][le],"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:-outline-offset-2"),style:void 0===P?void 0:{maxHeight:h(P)},children:e("pre",{ref:Le,className:p("m-0 bg-transparent p-0 font-mono",I?"w-full":"w-max min-w-full"),children:be.map((t,l)=>{const o=B+l;return e("div",{className:p("plass-code-line",w[re][le]),"data-line":K?o:void 0,"data-mark":ke.has(o)?"":void 0,"data-prompt":D&&t.length>0?D:void 0,children:e("code",{children:t.map((t,l)=>t.token?e("span",{className:t.token,children:t.text},l):e(n.Fragment,{children:t.text},l))})},l)})})})}),e("span",{"aria-live":"polite",className:f,children:null===fe?"":fe?se:ce})]})});

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { PlCodeBlock, registerLanguage } from './PlCodeBlock.js';
+export type { PlCodeBlockProps, PlCodeBlockTheme, PlCodeLine, PlCodeToken } from './PlCodeBlock.js';

package/dist/components/code-block/index.js

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

package/dist/components/color-picker/PlColorPicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as t}from"../../internal/picker.js";import{CheckIcon as o}from"../../internal/icons.js";import{checkerBackground as n,clamp as i,cssColor as d,defaultSwatches as c,formatColor as h,parseColor as u,readableInk as f}from"../../internal/color.js";import{controlTextClasses as p,cx as m,focusRingClasses as g,metaTextClasses as v,radiusClasses as b,stackGapClasses as x,surfaceSlots as w}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const y={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},C={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},k={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},N={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},P={xs:10,sm:12,md:14,lg:16,xl:18},j=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),_=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:t,onTextChange:c,withAlpha:p,swatches:x,editable:w,size:O,inert:S,labels:z}){const I=P[O],T=-I/2,A=d({h:r.h,s:100,v:100}),D=d(r),track=e=>({onPointerDown:a=>{S||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!S&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l)=>({role:"slider",tabIndex:S?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":S||void 0,onKeyDown:e=>{const a=arrowStep(e);!S&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:m("flex flex-col",y[O],N[O]),children:[e("div",{...track(e=>{const{x:a,y:t}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:l})}),role:"slider",tabIndex:S?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":S||void 0,onKeyDown:e=>{const a=arrowStep(e);!S&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:m(j,C[O],b[O],g,S?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:A,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:_,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:D}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:m(j,k[O],"rounded-full",g,S?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:_,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:A}})}),p?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:i(l+e/100,0,1)})),className:m(j,k[O],"rounded-full",g,S?"cursor-default":"cursor-pointer touch-none"),style:n,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${D})`}}),e("span",{className:_,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:d(r,l)}})]}):null,w?a("div",{className:m("flex items-center",N[O]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...n},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:t,readOnly:S,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>c(e.target.value),className:m("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",b.xs,v[O],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const t=u(a),n=null!==t&&h(t.hsv,t.alpha,"hex")===h(r,l,"hex");return e("button",{type:"button",disabled:S,"aria-label":a,"aria-pressed":n,onClick:()=>{t&&s(t)},className:m("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",S?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:n&&t?e("span",{style:{color:f(t.hsv)},children:e(o,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const O={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:o,defaultValue:i="#1a58d1",onValueChange:f,format:g="hex",alpha:b=!1,swatches:y=c,inline:C=!1,editable:k=!0,label:N,description:P,error:j,invalid:_,required:S=!1,disabled:z=!1,readOnly:I=!1,fullWidth:T=!1,clearable:A=!1,name:D,open:L,defaultOpen:M=!1,onOpenChange:V,labels:$,variant:q="glass",size:K,color:R,density:B,elevation:W=0,className:E,style:H,...U},X){const Y=l(),F=K??Y.size??"md",G=R??Y.color??"primary",J=B??Y.density??"default",Q=r.useMemo(()=>({...defaultColorPickerLabels,...$}),[$]),[Z,ee]=r.useState(i),ae=o??Z,[re,le]=r.useState(M),se=L??re,[te,oe]=r.useState(()=>u(ae)??{hsv:O,alpha:1}),[ne,ie]=r.useState(()=>ae),de=h(te.hsv,b?te.alpha:1,g),ce=""===ae;r.useEffect(()=>{const e=u(ae);e?h(e.hsv,b?e.alpha:1,g)!==de&&(ie(ae),oe(e)):ie(ae)},[ae,de,b,g]);const commit=(e,a)=>{oe(e);const r=h(e.hsv,b?e.alpha:1,g);ie(a??r),void 0===o&&ee(r),f?.(r)},he=z||I,ue=e(ColorPanel,{hsv:te.hsv,alphaValue:te.alpha,onChange:commit,text:ne,onTextChange:e=>{ie(e);const a=u(e);a&&commit(a,e)},withAlpha:b,swatches:y,editable:k,size:F,inert:he,labels:Q}),fe=D?e("input",{type:"hidden",name:D,value:ce?"":de}):null;if(C){const r=_??Boolean(j)?"danger":G;return a("div",{ref:X,className:m("flex flex-col",x[F],E),style:{...w(r,W),...H},...U,children:[N?e("span",{className:m(v[F],"font-semibold",z?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:N}):null,ue,P?e("span",{className:m(v[F],"text-(--plass-muted-fg)"),children:P}):null,j?e("span",{className:m(v[F],"text-(--p-accent)"),children:j}):null,fe]})}return e("div",{ref:X,className:T?"w-full":"inline-block",...U,children:e(t,{variant:q,size:F,color:G,density:J,elevation:W,style:H,label:N,description:P,error:j,invalid:_,required:S,disabled:z,readOnly:I,fullWidth:T,className:E,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:n,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ce?"transparent":d(te.hsv,b?te.alpha:1)}})}),display:ce?Q.empty:de,samples:widthSamples(g,b),empty:ce,clearable:A,onClear:()=>{void 0===o&&ee(""),ie(""),f?.("")},open:se,onOpenChange:e=>{void 0===L&&le(e),V?.(e)},labels:{...s,clear:Q.clear},hiddenValues:D?[{name:D,value:ce?"":de}]:void 0,children:e("div",{className:p[F],children:ue})})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useFieldsetDisabled as t,useFormReport as n}from"../../internal/form.js";import{CheckIcon as i}from"../../internal/icons.js";import{checkerBackground as d,clamp as c,cssColor as h,defaultSwatches as u,formatColor as f,parseColor as p,readableInk as m}from"../../internal/color.js";import{controlTextClasses as v,cx as b,focusRingClasses as g,metaTextClasses as x,radiusClasses as y,stackGapClasses as w,surfaceSlots as C}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},j={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},S={xs:10,sm:12,md:14,lg:16,xl:18},_=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),O=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:c((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:c((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:t,withAlpha:n,swatches:u,editable:v,size:w,inert:C,invalid:$,labels:z}){const I=S[w],T=-I/2,D=h({h:r.h,s:100,v:100}),M=h(r),A=u?u.flatMap(e=>{const a=p(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{C||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!C&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:C?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{if(C)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:b("flex flex-col",k[w],P[w]),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:C?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{const a=arrowStep(e);!C&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:c(r.s+a.x,0,100),v:c(r.v+a.y,0,100)},alpha:l}))},className:b(_,N[w],y[w],g,C?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:D,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:O,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:M}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:O,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:D}})}),n?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:c(l+e/100,0,1)}),e=>s({hsv:r,alpha:e})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:d,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${M})`}}),e("span",{className:O,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",P[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...d},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:C,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>t(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",y.xs,x[w],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,A.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:A.map(({swatch:a,parsed:o})=>{const t=f(o.hsv,o.alpha,"hex")===f(r,l,"hex");return e("button",{type:"button",disabled:C,"aria-label":a,"aria-pressed":t,onClick:()=>s(o),className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",C?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:h(o.hsv,o.alpha)},children:t?e("span",{style:{color:m(o.hsv)},children:e(i,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const $={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:i,defaultValue:c="#1a58d1",onValueChange:m,format:g="hex",alpha:y=!1,swatches:k=u,inline:N=!1,editable:j=!0,label:P,description:S,error:_,invalid:O,required:z=!1,disabled:I=!1,readOnly:T=!1,fullWidth:D=!1,clearable:M=!1,name:A,open:L,defaultOpen:V=!1,onOpenChange:q,labels:B,variant:H="glass",size:K,color:R,density:E,elevation:W=0,className:U,style:X,...Y},F){const G=l(),J=K??G.size??"md",Q=R??G.color??"primary",Z=E??G.density??"default",ee=r.useMemo(()=>({...defaultColorPickerLabels,...B}),[B]),[ae,re]=r.useState(c),le=i??ae,[se,oe]=r.useState(V),te=L??se,[ne,ie]=r.useState(()=>p(le)??{hsv:$,alpha:1}),[de,ce]=r.useState(()=>le),he=f(ne.hsv,y?ne.alpha:1,g),ue=""===le;r.useEffect(()=>{const e=p(le);e?f(e.hsv,y?e.alpha:1,g)!==he&&(ce(le),ie(e)):ce(le)},[le,he,y,g]);const commit=(e,a)=>{ie(e);const r=f(e.hsv,y?e.alpha:1,g);ce(a??r),void 0===i&&re(r),m?.(r)},[fe,pe]=r.useState(null),me=r.useCallback(e=>{pe(e),"function"==typeof F?F(e):F&&(F.current=e)},[F]),ve=t(fe),be=I||ve,ge=be||T,xe=O??Boolean(_),ye=r.useId(),we=e(ColorPanel,{hsv:ne.hsv,alphaValue:ne.alpha,onChange:commit,text:de,onTextChange:e=>{ce(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:j,size:J,inert:ge,invalid:N&&xe,labels:ee});n(A,()=>ue?"":he,N&&!be);const Ce=A?e("input",{type:"hidden",name:A,value:ue?"":he,disabled:be}):null;if(N){const r=xe?"danger":Q,l=[S?`${ye}-description`:null,_?`${ye}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:me,role:"group","aria-labelledby":P?`${ye}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[J],U),style:{...C(r,W),...X},...Y,children:[P?e("span",{id:`${ye}-label`,className:b(x[J],"font-semibold",be?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,we,S?e("span",{id:`${ye}-description`,className:b(x[J],"text-(--plass-muted-fg)"),children:S}):null,_?e("span",{id:`${ye}-error`,className:b(x[J],"text-(--p-accent)"),children:_}):null,Ce]})}return e("div",{ref:F,className:D?"w-full":"inline-block",...Y,children:e(o,{variant:H,size:J,color:Q,density:Z,elevation:W,style:X,label:P,description:S,error:_,invalid:O,required:z,disabled:I,readOnly:T,fullWidth:D,className:U,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:d,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":h(ne.hsv,y?ne.alpha:1)}})}),display:ue?ee.empty:he,samples:widthSamples(g,y),empty:ue,clearable:M,onClear:()=>{void 0===i&&re(""),ce(""),m?.("")},open:te,onOpenChange:e=>{void 0===L&&oe(e),q?.(e)},labels:{...s,clear:ee.clear},name:A,formValue:ue?"":he,children:e("div",{className:v[J],children:we})})})});

package/dist/components/combobox/PlCombobox.d.ts

@@ -66,7 +66,7 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
     allowCustom?: boolean;
     /**
      * What that row says. Receives the trimmed query.
-     * @default (query) => `Add “${query}”`
+     * @default `Add “{query}”`, from the label pack
      */
     customLabel?: (query: string) => React.ReactNode;
     /**
@@ -76,8 +76,9 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
      */
     clearable?: boolean;
     /**
-     * Shown in the popup when nothing matched and no value may be added.
-     * @default 'No matches'
+     * Shown in the popup when nothing matched and no value may be added. Falls
+     * back to the label pack's `empty`.
+     * @default 'Nothing here'
      */
     emptyMessage?: React.ReactNode;
     /** The most rows the list will show at once. `-1` is all of them. @default -1 */
@@ -122,7 +123,7 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
     clearLabel?: string;
     /**
      * Accessible name of a chip's remove button. Receives the chip's label.
-     * @default (label) => `Remove ${label}`
+     * @default `Remove {label}`, from the label pack
      */
     removeLabel?: (label: string) => string;
     /** A ref to the text input the user types into. */
@@ -147,5 +148,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/PlCombobox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Combobox as s}from"@base-ui/react/combobox";import{Field as r}from"@base-ui/react/field";import{PlChip as n}from"../chip/PlChip.js";import{CheckIcon as i,ChevronIcon as o,CloseIcon as c,PlusIcon as d}from"../../internal/icons.js";import{hotKeyHandler as m}from"../../internal/keys.js";import{chipRemoveClasses as p,controlHeightClasses as u,controlTextLeadingClasses as h,cx as b,disabledClasses as f,fieldReadOnlyClasses as g,fieldRestClasses as v,focusWithinRingClasses as x,gapClasses as y,glassClasses as N,hasContent as w,iconClasses as C,metaTextClasses as j,paddingXClasses as L,radiusClasses as I,stackGapClasses as S,surfaceSlots as z,transitionClasses as A}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",A,x,C].join(" "),V={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},_=/* @__PURE__ */[N,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]"].join(" "),k=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",A,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)","data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),M=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:x="glass",size:N,color:C,density:A,elevation:P=0,items:R,multiple:$,value:T,defaultValue:q,onValueChange:E,onInputValueChange:F,allowCustom:D=!0,customLabel:K,clearable:G=!1,emptyMessage:H="No matches",limit:W,placeholder:B,label:J,description:Q,error:U,invalid:X,startIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ae=!1,required:le=!1,name:te,open:se,defaultOpen:re,onOpenChange:ne,openLabel:ie="Open",clearLabel:oe="Clear",removeLabel:ce=e=>`Remove ${e}`,inputRef:de,id:me,className:pe,hotKeys:ue,classNames:he,style:be,...fe}){const ge=t(),ve=N??ge.size??"md",xe=C??ge.color??"primary",ye=A??ge.density??"default",Ne=w(U),we=X??Ne,Ce=we?"danger":xe,je=!0===$,Le=l.useMemo(()=>R.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[R]),[Ie,Se]=l.useState(()=>toArray(q)),ze=void 0===T?Ie:toArray(T),[Ae,Oe]=l.useState(""),Ve=l.useMemo(()=>new Map(Le.map(e=>[e.value,e])),[Le]),_e=l.useCallback(e=>Ve.get(e)??{value:e,label:String(e),custom:!0},[Ve]),ke=Ae.trim(),Me=ke.toLocaleLowerCase(),Pe=""===ke||Le.some(e=>e.label.toLocaleLowerCase()===Me||String(e.value).toLocaleLowerCase()===Me)||ze.some(e=>String(e).toLocaleLowerCase()===Me),Re=!D||ae||ee||Pe?null:ke,$e=l.useMemo(()=>null===Re?Le:[...Le,{value:Re,label:Re,custom:!0}],[Le,Re]),Te=je?ze.map(_e):ze.length>0?_e(ze[0]):null,qe=b(O,h[ve],I[ve],y[ve],je?V[ve]:u[ve],`${L[ye][ve]} pe-1.5`,ee?f[x]:ae?g[x]:v[x]),Ee=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(s.Input,{ref:de,placeholder:B,onKeyDown:m(ue,void 0),className:b(Ee,je&&"min-w-16",je&&a&&"ms-1.5")});return a(r.Root,{disabled:ee,invalid:we,className:b("flex-col align-top",S[ve],Z?"flex w-full":"inline-flex",pe),style:{...z(Ce,P),...be},...fe,children:[J?e(r.Label,{className:b(j[ve],"font-semibold",ee?"text-(--plass-muted-fg)":"text-(--plass-fg)",he?.label),children:J}):null,a(s.Root,{id:me,name:te,items:$e,multiple:je,value:Te,onValueChange:e=>{!function commit(e){void 0===T&&Se(e),E?.(je?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Oe(e),F?.(e)},open:se,defaultOpen:re,onOpenChange:e=>ne?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:W,disabled:ee,readOnly:ae,required:le,children:[a(s.InputGroup,{className:b(qe,he?.control),children:[Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Y}):null,je?e(s.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(s.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(s.Chip,{render:e(n,{variant:"glass",size:ve,color:Ce,density:"compact",disabled:ee,endIcon:ae||ee?null:e(s.ChipRemove,{"aria-label":ce(a.label),className:p,children:e(c,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),G&&!ae?e(s.Clear,{"aria-label":oe,className:M,children:e(c,{})}):null,e(s.Trigger,{"aria-label":ie,className:M,children:e(s.Icon,{className:b("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(o,{})})})]}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(s.Popup,{className:b(_,I[ve],h[ve]),style:z(Ce,3),children:[e(s.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:H}),e(s.List,{children:t=>e(s.Item,{value:t,disabled:t.disabled,className:k,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(d,{})}),e("span",{className:"truncate",children:K?K(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(s.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),Q?e(r.Description,{className:b(j[ve],"text-(--plass-muted-fg)",he?.description),children:Q}):null,e(r.Error,Ne?{match:!0,className:b(j[ve],"text-(--p-accent)",he?.error),children:U}:{className:b(j[ve],"text-(--p-accent)",he?.error)})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as r}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{PlChip as i}from"../chip/PlChip.js";import{CheckIcon as o,ChevronIcon as c,CloseIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{chipRemoveClasses as u,controlHeightClasses as h,controlTextLeadingClasses as b,cx as f,disabledClasses as g,fieldReadOnlyClasses as v,fieldRestClasses as x,focusWithinRingClasses as y,forcedHighlightedClasses as N,gapClasses as w,glassClasses as C,hasContent as j,iconClasses as L,metaTextClasses as I,paddingXClasses as S,radiusClasses as _,stackGapClasses as z,surfaceSlots as V,transitionClasses as A}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",A,y,L].join(" "),k={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},M=/* @__PURE__ */[C,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[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(" "),P=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",A,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",N,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),R=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:y="glass",size:N,color:C,density:L,elevation:A=0,items:T,multiple:q,value:E,defaultValue:F,onValueChange:$,onInputValueChange:D,allowCustom:K=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:B,placeholder:J,label:Q,description:U,error:X,invalid:Y,startIcon:Z,fullWidth:ee=!1,disabled:ae=!1,readOnly:le=!1,required:te=!1,name:se,open:re,defaultOpen:ne,onOpenChange:ie,openLabel:oe,clearLabel:ce,removeLabel:de,inputRef:me,id:pe,className:ue,hotKeys:he,classNames:be,style:fe,...ge}){const ve=t(),xe=s(),ye=oe??xe.open,Ne=ce??xe.clear,we=W??xe.empty,Ce=de??xe.removeItem,je=N??ve.size??"md",Le=C??ve.color??"primary",Ie=L??ve.density??"default",Se=j(X),_e=Y??Se,ze=_e?"danger":Le,Ve=!0===q,Ae=l.useMemo(()=>T.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[T]),[Oe,ke]=l.useState(()=>toArray(F)),Me=void 0===E?Oe:toArray(E),[Pe,Re]=l.useState(""),Te=l.useMemo(()=>new Map(Ae.map(e=>[e.value,e])),[Ae]),qe=l.useCallback(e=>Te.get(e)??{value:e,label:String(e),custom:!0},[Te]),Ee=Pe.trim(),Fe=Ee.toLocaleLowerCase(),$e=""===Ee||Ae.some(e=>e.label.toLocaleLowerCase()===Fe||String(e.value).toLocaleLowerCase()===Fe)||Me.some(e=>String(e).toLocaleLowerCase()===Fe),De=!K||le||ae||$e?null:Ee,Ke=l.useMemo(()=>null===De?Ae:[...Ae,{value:De,label:De,custom:!0}],[Ae,De]),Ge=Ve?Me.map(qe):Me.length>0?qe(Me[0]):null,He=f(O,b[je],_[je],w[je],Ve?k[je]:h[je],`${S[Ie][je]} pe-1.5`,ae?g[y]:le?v[y]:x[y]),We=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(r.Input,{ref:me,placeholder:J,onKeyDown:p(he,void 0),className:f(We,Ve&&"min-w-16",Ve&&a&&"ms-1.5")});return a(n.Root,{disabled:ae,invalid:_e,className:f("flex-col align-top",z[je],ee?"flex w-full":"inline-flex",ue),style:{...V(ze,A),...fe},...ge,children:[Q?e(n.Label,{className:f(I[je],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:Q}):null,a(r.Root,{id:pe,name:se,items:Ke,multiple:Ve,value:Ge,onValueChange:e=>{!function commit(e){void 0===E&&ke(e),$?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Re(e),D?.(e)},open:re,defaultOpen:ne,onOpenChange:e=>ie?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:B,disabled:ae,readOnly:le,required:te,children:[a(r.InputGroup,{className:f(He,be?.control),children:[Z?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Z}):null,Ve?e(r.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(r.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(r.Chip,{render:e(i,{variant:"glass",size:je,color:ze,density:"compact",disabled:ae,endIcon:le||ae?null:e(r.ChipRemove,{"aria-label":Ce(a.label),className:u,children:e(d,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),H&&!le?e(r.Clear,{"aria-label":Ne,className:R,children:e(d,{})}):null,e(r.Trigger,{"aria-label":ye,className:R,children:e(r.Icon,{className:f("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(c,{})})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(r.Popup,{className:f(M,_[je],b[je]),style:V(ze,3),children:[e(r.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:we}),e(r.List,{children:t=>e(r.Item,{value:t,disabled:t.disabled,className:P,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(m,{})}),e("span",{className:"truncate",children:G?G(t.label):xe.addCustom(t.label)})]}):a(l.Fragment,{children:[e(r.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),U?e(n.Description,{className:f(I[je],"text-(--plass-muted-fg)",be?.description),children:U}):null,e(n.Error,Se?{match:!0,className:f(I[je],"text-(--p-accent)",be?.error),children:X}:{className:f(I[je],"text-(--p-accent)",be?.error)})]})}

package/dist/components/command-palette/PlCommandPalette.d.ts

@@ -59,7 +59,11 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
     maxHeight?: number | string;
     /** The placeholder in the field. @default 'Search commands' */
     placeholder?: string;
-    /** The line where the rows would be, when nothing matched. @default 'No commands found' */
+    /**
+     * The line where the rows would be, when nothing matched. Falls back to the
+     * label pack's `empty`.
+     * @default 'Nothing here'
+     */
     emptyMessage?: React.ReactNode;
     /** The accessible name of the dialog, which has no visible title. @default 'Command palette' */
     label?: string;
@@ -86,4 +90,4 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
  * its Dialog owns the sheet, the scrim, the focus trap and returning the focus
  * to wherever the reader was.
  */
-export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
+export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder: placeholderProp, emptyMessage: emptyMessageProp, label: labelProp, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;

package/dist/components/command-palette/PlCommandPalette.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Autocomplete as l}from"@base-ui/react/autocomplete";import{Dialog as o}from"@base-ui/react/dialog";import{PlHotKeys as r}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as i}from"../../hooks/usePlHotKeys.js";import{searchHaystack as n,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as c,cx as d,glassClasses as m,hasContent as u,metaTextClasses as h,radiusClasses as x,surfaceSlots as f,toLength as g}from"../../internal/styles.js";const y=/* @__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(" "),b=/* @__PURE__ */[m,"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-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(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},k={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},N={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},j=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--plass-duration)_var(--plass-ease)]","data-[highlighted]:bg-(--p-soft) data-[highlighted]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return n([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:n,open:m,defaultOpen:z=!1,onOpenChange:C,onSelect:_,shortcut:P="Mod+K",width:S,maxHeight:O=320,placeholder:H="Search commands",emptyMessage:M="No commands found",label:K="Command palette",size:V,color:F,density:I,className:R,classNames:T,style:B}){const D=t(),E=V??D.size??"md",L=F??D.color??"primary",W=I??D.density??"default",[q,A]=a.useState(z),[G,J]=a.useState(""),Q=m??q,U=a.useCallback(e=>{void 0===m&&A(e),C?.(e)},[m,C]);i(!1===P?void 0:{[P]:()=>U(!0)},{whileTyping:!0});const X=a.useMemo(()=>n.map(haystackOf),[n]),Y=a.useMemo(()=>{const e=p(G);return""===e?n:n.filter((s,a)=>X[a].includes(e))},[n,X,G]),Z=g(S),$=g(O);return e(o.Root,{open:Q,onOpenChange:e=>{e||J(""),U(e)},children:s(o.Portal,{children:[e(o.Backdrop,{className:d("plass-portal",y,T?.backdrop)}),e(o.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(o.Popup,{"aria-label":K,className:d(b,x[E],c[E],void 0===Z?v[E]:"","self-start",R),style:{...f(L,3),...void 0===Z?null:{maxWidth:Z},...B},children:s(l.Root,{open:!0,mode:"list",items:Y,filter:null,value:G,onValueChange:e=>J(e),itemToStringValue:e=>e.label,children:[e("div",{className:d("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",N[E]),children:e(l.Input,{autoFocus:!0,placeholder:H,className:d("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",w[E])})}),e(l.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:$},children:(t,o)=>s(a.Fragment,{children:[t.group&&t.group!==Y[o-1]?.group?e("div",{role:"presentation",className:d(N[E],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",h[E]),children:t.group}):null,s(l.Item,{index:o,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),_?.(e),U(!1))})(t),className:d(j,x[E],N[E],k["compact"===W?"xs":E]),children:[u(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),u(t.description)?e("span",{className:d("truncate text-(--plass-muted-fg)",h[E]),children:t.description}):null]}),t.shortcut?e(r,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),e(l.Empty,{className:d(N[E],"py-6 text-center text-(--plass-muted-fg)",h[E]),children:M})]})})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Autocomplete as o}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,toLength as b}from"../../internal/styles.js";const v=/* @__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(" "),w=/* @__PURE__ */[h,"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-3),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(" "),k={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},N={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},j={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},P={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},z=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--plass-duration)_var(--plass-ease)]","data-[highlighted]:bg-(--p-soft) data-[highlighted]:text-(--p-accent)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:_,onSelect:C,shortcut:O="Mod+K",width:S,maxHeight:H=320,placeholder:M,emptyMessage:K,label:R,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=R??L.commandPalette,q=M??L.commandPalettePlaceholder,A=K??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=u??U,ee=a.useRef($);a.useEffect(()=>{ee.current&&!$&&Z(""),ee.current=$},[$]);const se=a.useCallback(e=>{void 0===u&&X(e),_?.(e)},[u,_]);n(!1===O?void 0:{[O]:()=>se(!0)},{whileTyping:!0});const ae=a.useMemo(()=>c.map(haystackOf),[c]),te=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>ae[a].includes(e))},[c,ae,Y]),le=b(S),oe=b(H);return e(r.Root,{open:$,onOpenChange:se,children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",v,T?.backdrop)}),e(r.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(r.Popup,{"aria-label":W,className:m(w,g[G],d[G],void 0===le?k[G]:"","self-start",I),style:{...y(J,3),...void 0===le?null:{maxWidth:le},...B},children:s(o.Root,{open:!0,mode:"list",items:te,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",P[G]),children:e(o.Input,{autoFocus:!0,placeholder:q,className:m("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",N[G])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:oe},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==te[l-1]?.group?e("div",{role:"presentation",className:m(P[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",f[G]),children:t.group}):null,s(o.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),se(!1))})(t),className:m(z,g[G],P[G],j["compact"===Q?"xs":G]),children:[x(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),x(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",f[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),e(o.Empty,{className:m(P[G],"py-6 text-center text-(--plass-muted-fg)",f[G]),children:A})]})})})]})})}

package/dist/components/confirm/PlConfirmProvider.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{PlButton as t}from"../button/PlButton.js";import{PlModal as i}from"../modal/PlModal.js";const l=/* @__PURE__ */o.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const[h,p]=o.useState(!1),[C,b]=o.useState(null),v=o.useRef(null),P=o.useRef([]),w=o.useCallback(e=>{const r=v.current;if(!r)return;r.resolve(e);const n=P.current.shift();if(n)return v.current=n,void b(n);v.current=null,p(!1)},[]),k=o.useCallback((e,r)=>new Promise(n=>{const o={kind:e,options:r,resolve:n};v.current?P.current.push(o):(v.current=o,b(o),p(!0))}),[]),x=o.useMemo(()=>({confirm:e=>k("confirm",e),alert:e=>k("alert",e).then(()=>{})}),[k]);o.useEffect(()=>()=>{v.current?.resolve(!1),P.current.forEach(e=>e.resolve(!1)),v.current=null,P.current=[]},[]);const z=C?.options,j="alert"===C?.kind,L="confirm"===(z?.initialFocus??"cancel")||j;return n(l.Provider,{value:x,children:[m,e(i,{open:h,onOpenChange:e=>{e||w(!1)},size:z?.size??c,color:z?.color??s,width:z?.width??f,dismissible:z?.dismissible??!0,title:z?.title,description:z?.description,actions:n(r,{children:[j?null:e(t,{variant:"ghost",color:"secondary",size:z?.size??c,autoFocus:!L,onClick:()=>w(!1),children:z?.cancelLabel??a??"Cancel"}),e(t,{color:z?.color??s,size:z?.size??c,autoFocus:L,onClick:()=>w(!0),children:z?.confirmLabel??(j?d??"OK":u??"Confirm")})]}),children:z?.children})]})}export function usePlConfirm(){const e=o.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{PlModal as t}from"../modal/PlModal.js";import{useLabels as i}from"../../internal/labels.js";const l=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const h=i(),[p,b]=n.useState(!1),[C,v]=n.useState(null),P=n.useRef(null),w=n.useRef([]),k=n.useRef(0),x=n.useCallback(e=>{const r=P.current;if(!r)return;r.resolve(e);const n=w.current.shift();if(n)return P.current=n,void v(n);P.current=null,b(!1)},[]),z=n.useCallback((e,r)=>new Promise(n=>{k.current+=1;const o={id:k.current,kind:e,options:r,resolve:n};P.current?w.current.push(o):(P.current=o,v(o),b(!0))}),[]),j=n.useMemo(()=>({confirm:e=>z("confirm",e),alert:e=>z("alert",e).then(()=>{})}),[z]);n.useEffect(()=>()=>{P.current?.resolve(!1),w.current.forEach(e=>e.resolve(!1)),P.current=null,w.current=[]},[]);const g=C?.options,L="alert"===C?.kind,F="confirm"===(g?.initialFocus??"cancel")||L;return r(l.Provider,{value:j,children:[m,e(t,{open:p,onOpenChange:e=>{e||x(!1)},size:g?.size??c,color:g?.color??s,width:g?.width??f,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[L?null:e(o,{variant:"ghost",color:"secondary",size:g?.size??c,autoFocus:!F,onClick:()=>x(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{color:g?.color??s,size:g?.size??c,autoFocus:F,onClick:()=>x(!0),children:g?.confirmLabel??(L?d??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})]})}export function usePlConfirm(){const e=n.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}

package/dist/components/container/PlContainer.d.ts

@@ -1,21 +1,37 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassDensity, PlassSize } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassDensity, PlassResponsive, PlassSize } from '../../types.js';
 /**
- * How wide the content is allowed to get.
+ * How wide the content is allowed to get: a rung of the measure ladder, any CSS
+ * length, a number of pixels, or `none`.
  *
  * `none` is the extra step and the default, because a `PlContainer`'s job is
  * the gutter — a measure is a second decision, and a page should have to ask
  * for one.
+ *
+ * The same type a `PlHeader` and a `PlFooter` take, and the same ladder behind
+ * all three: a header whose measure did not line up with the container under it
+ * is what one implementation prevents.
  */
-export type PlContainerWidth = PlassSize | 'none';
+export type PlContainerWidth = PlassMeasure;
 export interface PlContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
-     * How wide the content is allowed to get, on the same ladder the breakpoints
-     * use — `xs` 30rem, `sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem.
+     * How wide the content is allowed to get.
+     *
+     * The five rungs are the same widths the breakpoints are — `xs` 30rem, `sm`
+     * 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem — so a container capped at `lg`
+     * ends where an `lg:` utility begins. Anything else is taken as a length: a
+     * number is pixels, and a string is any CSS length, which is how a measure in
+     * **characters** gets written. `maxWidth="72ch"` is the one a paragraph
+     * actually wants, and no ladder of `rem` can spell it.
+     *
+     * Responsive, and resolved in CSS rather than in JavaScript — so it is right
+     * in the first paint a server sends, and a window being dragged costs no
+     * re-render.
      * @default 'none'
      */
-    maxWidth?: PlContainerWidth;
+    maxWidth?: PlassResponsive<PlContainerWidth>;
     /**
      * The gutter, on the `size`/`density` scale. Turn it off to keep the centring
      * and the measure without the padding.

package/dist/components/container/PlContainer.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as n}from"@base-ui/react/use-render";import{cx as m,sheetPaddingXClasses as t}from"../../internal/styles.js";const a={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e="none",padded:s=!0,size:o,density:i,centered:d=!0,render:l,className:c,children:f,...x},u){const p=r(),w=o??p.size??"md",h=i??p.density??"default",y=m("block w-full","none"===e?"":a[e],d?"mx-auto":"",s?t[h][w]:"",c);return n({render:l,ref:u,props:{className:y,children:f,...x}})});
+"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{measureSlots as s}from"../../internal/responsive.js";import{cx as n,sheetPaddingXClasses as i}from"../../internal/styles.js";export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e,padded:o=!0,size:a,density:l,centered:d=!0,render:m,className:c,style:f,children:p,...u},y){const h=r(),j=a??h.size??"md",x=l??h.density??"default",N=s(e),b=n("block w-full",N.className,d?"mx-auto":"",o?i[x][j]:"",c);return t({render:m,ref:y,props:{className:b,style:f||N.style?{...N.style,...f}:void 0,children:p,...u}})});

package/dist/components/data-list/PlDataList.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+export interface PlDataListProps extends React.ComponentPropsWithoutRef<'dl'> {
+    /**
+     * Where the label sits.
+     *
+     * - `horizontal` — beside the value, in a column of its own. The default, and
+     *   the shape a details panel takes.
+     * - `vertical` — above it. For a narrow column, or for values long enough
+     *   that a label beside them leaves the value nowhere to go.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * How wide the label column is, while the labels are beside the values.
+     *
+     * A number is pixels; a string is any CSS length, and `'12ch'` is usually
+     * the right one — a label column is measured in characters, not in pixels,
+     * and no ladder of `rem` can spell that.
+     * @default '10rem'
+     */
+    labelWidth?: number | string;
+    /** Draws a hairline between the rows. @default false */
+    divider?: boolean;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /** The `PlDataListItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlDataListItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** What the value is of. */
+    label?: React.ReactNode;
+    /** The value. `children` says the same thing and is there for a value with markup in it. */
+    value?: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /** The value, when it is more than a string. */
+    children?: React.ReactNode;
+}
+/**
+ * A list of labels and the values that go with them.
+ *
+ * The panel every detail screen ends with — a plan, an owner, a created date, a
+ * status — and the whole reason it is a component is the **markup**. It is a
+ * real `<dl>` with real `<dt>`s and `<dd>`s, which is what says that "Owner"
+ * names "Ada Lovelace" rather than being a line of text that happens to sit
+ * beside it. A screen reader reads the pair; a grid of `<div>`s reads as eight
+ * loose strings, and the reader has to guess which belongs to which.
+ *
+ * It is not a [PlTable](./table). A table is many things with the same fields;
+ * this is **one** thing and its fields. A details panel built as a two-column
+ * table claims a row and column relationship that is not there, and a reader
+ * navigating it by cell is told there are two columns of data when there is a
+ * column of names and a column of values.
+ *
+ * Nor is it a [PlList](./list), which is a run of items of the same kind.
+ *
+ * The rows are children rather than data, unlike a `PlTable`'s columns. A
+ * details panel is written out once and read in source order, and every value
+ * in it is a different shape — a chip, a date, an avatar, a link — so a data
+ * array would be an array of `render` functions.
+ */
+export declare const PlDataList: React.ForwardRefExoticComponent<PlDataListProps & React.RefAttributes<HTMLDListElement>>;
+/**
+ * One label and its value.
+ *
+ * Wrapped in a `<div>` inside the `<dl>`, which is what the HTML specification
+ * allows and what lets a row be laid out at all: a `<dt>` and a `<dd>` that are
+ * direct children of the list cannot be put side by side without giving up the
+ * grouping that makes them a pair.
+ */
+export declare const PlDataListItem: React.ForwardRefExoticComponent<PlDataListItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-list/PlDataList.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as i}from"../../internal/defaults.js";import{controlTextLeadingClasses as s,cx as l,hasContent as r,sheetLineClasses as d,toLength as n}from"../../internal/styles.js";const o=/* @__PURE__ */a.createContext({orientation:"horizontal",size:"md",density:"default",labelWidth:void 0,divider:!1}),m={default:{xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},compact:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"}},p={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},c={default:{xs:"pt-2",sm:"pt-2.5",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2",xl:"pt-2.5"}};export const PlDataList=/* @__PURE__ */a.forwardRef(function PlDataList({orientation:t="horizontal",labelWidth:r,divider:d=!1,size:p,density:c,className:f,children:x,...g},h){const u=i(),v=p??u.size??"md",z=c??u.density??"default",y=a.useMemo(()=>({orientation:t,size:v,density:z,labelWidth:n(r)??"10rem",divider:d}),[t,v,z,r,d]);return e(o.Provider,{value:y,children:e("dl",{ref:h,className:l("m-0 flex flex-col",d?"":m[z][v],s[v],f),...g,children:x})})});export const PlDataListItem=/* @__PURE__ */a.forwardRef(function PlDataListItem({label:i,value:s,icon:n,className:m,children:f,...x},g){const{orientation:h,size:u,density:v,labelWidth:z,divider:y}=a.useContext(o),N="horizontal"===h;return t("div",{ref:g,className:l("flex min-w-0",N?"flex-row gap-4":"flex-col",N?"":p[u],y?`${c[v][u]} first:pt-0`:"",y?`${d} first:border-t-0`:"",m),...x,children:[t("dt",{className:"flex shrink-0 items-center gap-1.5 text-(--plass-muted-fg)",style:N?{width:z}:void 0,children:[r(n)?e("span",{"aria-hidden":"true",className:"flex items-center [&_svg]:size-[1.15em]",children:n}):null,i]}),e("dd",{className:"m-0 min-w-0 flex-1 text-(--plass-fg)",children:s??f})]})});

package/dist/components/data-list/index.d.ts

@@ -0,0 +1,2 @@
+export { PlDataList, PlDataListItem } from './PlDataList.js';
+export type { PlDataListItemProps, PlDataListProps } from './PlDataList.js';

package/dist/components/data-list/index.js

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