plass-ui 1.2.0 → 1.4.0

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{defaultPickerLabels as l}from"../../internal/calendar.js";import{PickerShell as s}from"../../internal/picker.js";import{CheckIcon as t}from"../../internal/icons.js";import{checkerBackground as o,clamp as n,cssColor as i,defaultSwatches as d,formatColor as c,parseColor as h,readableInk as u}from"../../internal/color.js";import{controlTextClasses as f,cx as p,focusRingClasses as m,metaTextClasses as g,radiusClasses as v,stackGapClasses as b,surfaceSlots as x}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 w={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},y={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},C={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},k={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},N={xs:10,sm:12,md:14,lg:16,xl:18},P=/* @__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:n((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:n((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:d,onTextChange:f,withAlpha:b,swatches:x,editable:j,size:O,inert:S,labels:z}){const I=N[O],T=-I/2,A=i({h:r.h,s:100,v:100}),D=i(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:p("flex flex-col",w[O],k[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:n(r.s+a.x,0,100),v:n(r.v+a.y,0,100)},alpha:l}))},className:p(P,y[O],v[O],m,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:p(P,C[O],"rounded-full",m,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}})}),b?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:n(l+e/100,0,1)})),className:p(P,C[O],"rounded-full",m,S?"cursor-default":"cursor-pointer touch-none"),style:o,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${i(r,0)}, ${D})`}}),e("span",{className:_,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:i(r,l)}})]}):null,j?a("div",{className:p("flex items-center",k[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,...o},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:i(r,l)}})}),e("input",{type:"text",value:d,readOnly:S,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>f(e.target.value),className:p("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",v.xs,g[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 o=h(a),n=null!==o&&c(o.hsv,o.alpha,"hex")===c(r,l,"hex");return e("button",{type:"button",disabled:S,"aria-label":a,"aria-pressed":n,onClick:()=>{o&&s(o)},className:p("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",m,"[outline:none]",S?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:n&&o?e("span",{style:{color:u(o.hsv)},children:e(t,{})}):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 j={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:t,defaultValue:n="#1a58d1",onValueChange:u,format:m="hex",alpha:v=!1,swatches:w=d,inline:y=!1,editable:C=!0,label:k,description:N,error:P,invalid:_,required:O=!1,disabled:S=!1,readOnly:z=!1,fullWidth:I=!1,clearable:T=!1,name:A,open:D,defaultOpen:L=!1,onOpenChange:M,labels:V,variant:$="glass",size:q="md",color:K="primary",density:R="default",elevation:B=0,className:W,style:E,...H},U){const X=r.useMemo(()=>({...defaultColorPickerLabels,...V}),[V]),[Y,F]=r.useState(n),G=t??Y,[J,Q]=r.useState(L),Z=D??J,[ee,ae]=r.useState(()=>h(G)??{hsv:j,alpha:1}),[re,le]=r.useState(()=>G),se=c(ee.hsv,v?ee.alpha:1,m),te=""===G;r.useEffect(()=>{const e=h(G);e?c(e.hsv,v?e.alpha:1,m)!==se&&(le(G),ae(e)):le(G)},[G,se,v,m]);const commit=(e,a)=>{ae(e);const r=c(e.hsv,v?e.alpha:1,m);le(a??r),void 0===t&&F(r),u?.(r)},oe=S||z,ne=e(ColorPanel,{hsv:ee.hsv,alphaValue:ee.alpha,onChange:commit,text:re,onTextChange:e=>{le(e);const a=h(e);a&&commit(a,e)},withAlpha:v,swatches:w,editable:C,size:q,inert:oe,labels:X}),ie=A?e("input",{type:"hidden",name:A,value:te?"":se}):null;if(y){const r=_??Boolean(P)?"danger":K;return a("div",{ref:U,className:p("flex flex-col",b[q],W),style:{...x(r,B),...E},...H,children:[k?e("span",{className:p(g[q],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:k}):null,ne,N?e("span",{className:p(g[q],"text-(--plass-muted-fg)"),children:N}):null,P?e("span",{className:p(g[q],"text-(--p-accent)"),children:P}):null,ie]})}return e("div",{ref:U,className:I?"w-full":"inline-block",...H,children:e(s,{variant:$,size:q,color:K,density:R,elevation:B,style:E,label:k,description:N,error:P,invalid:_,required:O,disabled:S,readOnly:z,fullWidth:I,className:W,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:o,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:te?"transparent":i(ee.hsv,v?ee.alpha:1)}})}),display:te?X.empty:se,samples:widthSamples(m,v),empty:te,clearable:T,onClear:()=>{void 0===t&&F(""),le(""),u?.("")},open:Z,onOpenChange:e=>{void 0===D&&Q(e),M?.(e)},labels:{...l,clear:X.clear},hiddenValues:A?[{name:A,value:te?"":se}]:void 0,children:e("div",{className:f[q],children:ne})})})});
+"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})})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types a PlSelect submits, and
  * for the same reason: a form control's value is what a form sends, and every
@@ -27,6 +27,15 @@ type Selection<Multiple extends boolean | undefined> = Multiple extends true ? P
 export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * The options, as data — the same shape PlSelect takes, and for the same
      * reason: what a caller has is almost always an array already.
@@ -138,5 +147,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, color, density, 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, 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, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel, 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{Combobox as t}from"@base-ui/react/combobox";import{Field as s}from"@base-ui/react/field";import{PlChip as r}from"../chip/PlChip.js";import{CheckIcon as n,ChevronIcon as i,CloseIcon as o,PlusIcon as c}from"../../internal/icons.js";import{chipRemoveClasses as d,controlHeightClasses as m,controlTextLeadingClasses as p,cx as u,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusWithinRingClasses as f,gapClasses as v,glassClasses as x,hasContent as y,iconClasses as N,metaTextClasses as w,paddingXClasses as C,radiusClasses as L,stackGapClasses as j,surfaceSlots as I,transitionClasses as S}from"../../internal/styles.js";const A=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",S,f,N].join(" "),O={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"},V=/* @__PURE__ */[x,"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(" "),z=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",S,"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(" "),_=/* @__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:f="glass",size:x="md",color:N="primary",density:S="default",elevation:M=0,items:P,multiple:R,value:$,defaultValue:k,onValueChange:T,onInputValueChange:q,allowCustom:E=!0,customLabel:F,clearable:D=!1,emptyMessage:G="No matches",limit:H,placeholder:W,label:B,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:te,onOpenChange:se,openLabel:re="Open",clearLabel:ne="Clear",removeLabel:ie=e=>`Remove ${e}`,inputRef:oe,id:ce,className:de,classNames:me,style:pe,...ue}){const he=y(K),be=Q??he,ge=be?"danger":N,fe=!0===R,ve=l.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[P]),[xe,ye]=l.useState(()=>toArray(k)),Ne=void 0===$?xe:toArray($),[we,Ce]=l.useState(""),Le=l.useMemo(()=>new Map(ve.map(e=>[e.value,e])),[ve]),je=l.useCallback(e=>Le.get(e)??{value:e,label:String(e),custom:!0},[Le]),Ie=we.trim(),Se=Ie.toLocaleLowerCase(),Ae=""===Ie||ve.some(e=>e.label.toLocaleLowerCase()===Se||String(e.value).toLocaleLowerCase()===Se)||Ne.some(e=>String(e).toLocaleLowerCase()===Se),Oe=!E||Z||Y||Ae?null:Ie,Ve=l.useMemo(()=>null===Oe?ve:[...ve,{value:Oe,label:Oe,custom:!0}],[ve,Oe]),ze=fe?Ne.map(je):Ne.length>0?je(Ne[0]):null,_e=u(A,p[x],L[x],v[x],fe?O[x]:m[x],`${C[S][x]} pe-1.5`,Y?h[f]:Z?b[f]:g[f]),Me=/* @__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(t.Input,{ref:oe,placeholder:W,className:u(Me,fe&&"min-w-16",fe&&a&&"ms-1.5")});return a(s.Root,{disabled:Y,invalid:be,className:u("flex-col align-top",j[x],X?"flex w-full":"inline-flex",de),style:{...I(ge,M),...pe},...ue,children:[B?e(s.Label,{className:u(w[x],"font-semibold",Y?"text-(--plass-muted-fg)":"text-(--plass-fg)",me?.label),children:B}):null,a(t.Root,{id:ce,name:ae,items:Ve,multiple:fe,value:ze,onValueChange:e=>{!function commit(e){void 0===$&&ye(e),T?.(fe?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Ce(e),q?.(e)},open:le,defaultOpen:te,onOpenChange:e=>se?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:H,disabled:Y,readOnly:Z,required:ee,children:[a(t.InputGroup,{className:u(_e,me?.control),children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,fe?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:s=>a(l.Fragment,{children:[s.map(a=>e(t.Chip,{render:e(r,{variant:"glass",size:x,color:ge,density:"compact",disabled:Y,endIcon:Z||Y?null:e(t.ChipRemove,{"aria-label":ie(a.label),className:d,children:e(o,{})})}),children:a.label},String(a.value))),renderInput(s.length>0)]})})}):renderInput(!1),D&&!Z?e(t.Clear,{"aria-label":ne,className:_,children:e(o,{})}):null,e(t.Trigger,{"aria-label":re,className:_,children:e(t.Icon,{className:u("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(i,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(t.Popup,{className:u(V,L[x],p[x]),style:I(ge,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:G}),e(t.List,{children:s=>e(t.Item,{value:s,disabled:s.disabled,className:z,children:s.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(c,{})}),e("span",{className:"truncate",children:F?F(s.label):`Add “${s.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(n,{})}),e("span",{className:"truncate",children:s.label})]})},`${s.custom?"custom:":""}${String(s.value)}`)})]})})})]}),J?e(s.Description,{className:u(w[x],"text-(--plass-muted-fg)",me?.description),children:J}):null,e(s.Error,he?{match:!0,className:u(w[x],"text-(--p-accent)",me?.error),children:K}:{className:u(w[x],"text-(--p-accent)",me?.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,gapClasses as N,glassClasses as w,hasContent as C,iconClasses as j,metaTextClasses as L,paddingXClasses as I,radiusClasses as S,stackGapClasses as _,surfaceSlots as z,transitionClasses as A}from"../../internal/styles.js";const V=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",A,y,j].join(" "),O={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"},k=/* @__PURE__ */[w,"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(" "),M=/* @__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(" "),P=/* @__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:w,color:j,density:A,elevation:R=0,items:$,multiple:T,value:q,defaultValue:E,onValueChange:F,onInputValueChange:D,allowCustom:K=!0,customLabel:G,clearable:H=!1,emptyMessage:W="No matches",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=e=>`Remove ${e}`,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??ve.size??"md",Ce=j??ve.color??"primary",je=A??ve.density??"default",Le=C(X),Ie=Y??Le,Se=Ie?"danger":Ce,_e=!0===T,ze=l.useMemo(()=>$.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[$]),[Ae,Ve]=l.useState(()=>toArray(E)),Oe=void 0===q?Ae:toArray(q),[ke,Me]=l.useState(""),Pe=l.useMemo(()=>new Map(ze.map(e=>[e.value,e])),[ze]),Re=l.useCallback(e=>Pe.get(e)??{value:e,label:String(e),custom:!0},[Pe]),$e=ke.trim(),Te=$e.toLocaleLowerCase(),qe=""===$e||ze.some(e=>e.label.toLocaleLowerCase()===Te||String(e.value).toLocaleLowerCase()===Te)||Oe.some(e=>String(e).toLocaleLowerCase()===Te),Ee=!K||le||ae||qe?null:$e,Fe=l.useMemo(()=>null===Ee?ze:[...ze,{value:Ee,label:Ee,custom:!0}],[ze,Ee]),De=_e?Oe.map(Re):Oe.length>0?Re(Oe[0]):null,Ke=f(V,b[we],S[we],N[we],_e?O[we]:h[we],`${I[je][we]} pe-1.5`,ae?g[y]:le?v[y]:x[y]),Ge=/* @__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(Ge,_e&&"min-w-16",_e&&a&&"ms-1.5")});return a(n.Root,{disabled:ae,invalid:Ie,className:f("flex-col align-top",_[we],ee?"flex w-full":"inline-flex",ue),style:{...z(Se,R),...fe},...ge,children:[Q?e(n.Label,{className:f(L[we],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:Q}):null,a(r.Root,{id:pe,name:se,items:Fe,multiple:_e,value:De,onValueChange:e=>{!function commit(e){void 0===q&&Ve(e),F?.(_e?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Me(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(Ke,be?.control),children:[Z?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Z}):null,_e?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:we,color:Se,density:"compact",disabled:ae,endIcon:le||ae?null:e(r.ChipRemove,{"aria-label":de(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:P,children:e(d,{})}):null,e(r.Trigger,{"aria-label":ye,className:P,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(k,S[we],b[we]),style:z(Se,3),children:[e(r.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:W}),e(r.List,{children:t=>e(r.Item,{value:t,disabled:t.disabled,className:M,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):`Add “${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(L[we],"text-(--plass-muted-fg)",be?.description),children:U}):null,e(n.Error,Le?{match:!0,className:f(L[we],"text-(--p-accent)",be?.error),children:X}:{className:f(L[we],"text-(--p-accent)",be?.error)})]})}

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

@@ -86,4 +86,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, color, density, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;
+export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder: placeholderProp, emptyMessage, 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 a}from"react/jsx-runtime";import*as s from"react";import{Autocomplete as t}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{PlHotKeys as o}from"../hot-keys/PlHotKeys.js";import{searchHaystack as r,searchText as n}from"../../internal/search.js";import{controlTextLeadingClasses as i,cx as c,glassClasses as p,hasContent as d,metaTextClasses as m,radiusClasses as u,surfaceSlots as h,toLength as f}from"../../internal/styles.js";const x=/* @__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(" "),g=/* @__PURE__ */[p,"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(" "),y={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},b={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},w={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},k=/* @__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 r([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:r,open:p,defaultOpen:N=!1,onOpenChange:j,onSelect:C,shortcut:K="Mod+K",width:z,maxHeight:S=320,placeholder:_="Search commands",emptyMessage:L="No commands found",label:O="Command palette",size:P="md",color:E="primary",density:M="default",className:H,classNames:V,style:D}){const[F,I]=s.useState(N),[R,A]=s.useState(""),B=p??F,T=s.useCallback(e=>{void 0===p&&I(e),j?.(e)},[p,j]);s.useEffect(()=>{if(!1===K)return;const onKeyDown=e=>{(function pressed(e,a){const s=a.toLowerCase().split("+"),t=s[s.length-1],l=new Set(s.slice(0,-1)),o=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==o||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==t)})(e,K)&&(e.preventDefault(),T(!0))};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[K,T]);const W=s.useMemo(()=>r.map(haystackOf),[r]),q=s.useMemo(()=>{const e=n(R);return""===e?r:r.filter((a,s)=>W[s].includes(e))},[r,W,R]),G=f(z),J=f(S);return e(l.Root,{open:B,onOpenChange:e=>{e||A(""),T(e)},children:a(l.Portal,{children:[e(l.Backdrop,{className:c("plass-portal",x,V?.backdrop)}),e(l.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(l.Popup,{"aria-label":O,className:c(g,u[P],i[P],void 0===G?y[P]:"","self-start",H),style:{...h(E,3),...void 0===G?null:{maxWidth:G},...D},children:a(t.Root,{open:!0,mode:"list",items:q,filter:null,value:R,onValueChange:e=>A(e),itemToStringValue:e=>e.label,children:[e("div",{className:c("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",w[P]),children:e(t.Input,{autoFocus:!0,placeholder:_,className:c("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)",b[P])})}),e(t.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:J},children:(l,r)=>a(s.Fragment,{children:[l.group&&l.group!==q[r-1]?.group?e("div",{role:"presentation",className:c(w[P],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",m[P]),children:l.group}):null,a(t.Item,{index:r,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),T(!1))})(l),className:c(k,u[P],w[P],v["compact"===M?"xs":P]),children:[d(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),d(l.description)?e("span",{className:c("truncate text-(--plass-muted-fg)",m[P]),children:l.description}):null]}),l.shortcut?e(o,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(t.Empty,{className:c(w[P],"py-6 text-center text-(--plass-muted-fg)",m[P]),children:L})]})})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as t}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,glassClasses as u,hasContent as h,metaTextClasses as x,radiusClasses as f,surfaceSlots as g,toLength as y}from"../../internal/styles.js";const b=/* @__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(" "),v=/* @__PURE__ */[u,"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(" "),w={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},k={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},N={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},j={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},P=/* @__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 c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:z=!1,onOpenChange:_,onSelect:C,shortcut:O="Mod+K",width:S,maxHeight:H=320,placeholder:M,emptyMessage:K="No commands found",label:V,size:F,color:I,density:R,className:T,classNames:B,style:D}){const E=l(),L=t(),W=V??L.commandPalette,q=M??L.commandPalettePlaceholder,A=F??E.size??"md",G=I??E.color??"primary",J=R??E.density??"default",[Q,U]=a.useState(z),[X,Y]=a.useState(""),Z=u??Q,$=a.useCallback(e=>{void 0===u&&U(e),_?.(e)},[u,_]);n(!1===O?void 0:{[O]:()=>$(!0)},{whileTyping:!0});const ee=a.useMemo(()=>c.map(haystackOf),[c]),se=a.useMemo(()=>{const e=p(X);return""===e?c:c.filter((s,a)=>ee[a].includes(e))},[c,ee,X]),ae=y(S),le=y(H);return e(r.Root,{open:Z,onOpenChange:e=>{e||Y(""),$(e)},children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",b,B?.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(v,f[A],d[A],void 0===ae?w[A]:"","self-start",T),style:{...g(G,3),...void 0===ae?null:{maxWidth:ae},...D},children:s(o.Root,{open:!0,mode:"list",items:se,filter:null,value:X,onValueChange:e=>Y(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",j[A]),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)",k[A])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:le},children:(l,t)=>s(a.Fragment,{children:[l.group&&l.group!==se[t-1]?.group?e("div",{role:"presentation",className:m(j[A],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",x[A]),children:l.group}):null,s(o.Item,{index:t,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),$(!1))})(l),className:m(P,f[A],j[A],N["compact"===J?"xs":A]),children:[h(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),h(l.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",x[A]),children:l.description}):null]}),l.shortcut?e(i,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(o.Empty,{className:m(j[A],"py-6 text-center text-(--plass-muted-fg)",x[A]),children:K})]})})})]})})}

package/dist/components/confirm/PlConfirmProvider.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+/** What one question looks like. Every field is optional but `title`. */
+export interface PlConfirmOptions {
+    /** The question, as the `<h2>` that names the dialog. */
+    title?: React.ReactNode;
+    /** A line under it, and the dialog's accessible description. Say what happens. */
+    description?: React.ReactNode;
+    /** Anything more that belongs in the body — a list of what is about to go. */
+    children?: React.ReactNode;
+    /** The word on the button that answers yes. @default 'Confirm' (`'OK'` on an alert) */
+    confirmLabel?: React.ReactNode;
+    /** The word on the button that answers no. Not drawn by `alert`. @default 'Cancel' */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The family the confirming button takes. `danger` for anything that removes
+     * something.
+     * @default 'primary'
+     */
+    color?: PlassColor;
+    /** @default 'md' */
+    size?: PlassSize;
+    /**
+     * Which button holds the focus when the dialog opens.
+     *
+     * **`cancel` by default**, and that is the decision worth stating: a confirm
+     * dialog exists to make somebody stop, and an Enter key that lands on the
+     * destructive action defeats the whole thing. Move it for a question whose
+     * yes is the harmless answer — "Save before closing?" — where making somebody
+     * reach for the mouse to agree is its own kind of rude.
+     * @default 'cancel'
+     */
+    initialFocus?: 'confirm' | 'cancel';
+    /**
+     * Whether Escape and a click outside answer **no**.
+     *
+     * On, because Escape is the universal "no" and a question that cannot be
+     * escaped is a trap. Turn it off for the one that has to be answered.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** How wide the sheet may get. A number of pixels or any CSS length. */
+    width?: number | string;
+}
+export interface PlConfirmValue {
+    /**
+     * Asks the question and resolves with the answer.
+     *
+     * ```tsx
+     * if (await confirm({ title: 'Delete this project?', color: 'danger' })) {
+     *   await remove(project);
+     * }
+     * ```
+     */
+    confirm: (options: PlConfirmOptions) => Promise<boolean>;
+    /** Says something and resolves when it has been acknowledged. One button. */
+    alert: (options: PlConfirmOptions) => Promise<void>;
+}
+export interface PlConfirmProviderProps extends Pick<PlConfirmOptions, 'size' | 'color' | 'confirmLabel' | 'cancelLabel' | 'width'> {
+    /** The word an `alert`'s single button says. @default 'OK' */
+    acknowledgeLabel?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * One dialog, asked for from anywhere under it.
+ *
+ * The thing a caller has at the moment a question is warranted is a click
+ * handler, not a place in the tree — `onClick={async () => { if (await
+ * confirm(…)) remove() }}` is the shape this exists to make possible. The
+ * alternative, and what every application writes without it, is a piece of
+ * state per question plus a `<PlModal>` kept mounted beside every button that
+ * might need one, and the branch after the answer torn in half across a
+ * callback.
+ *
+ * It is `PlToastProvider`'s arrangement for the same reason and with the same
+ * trade: one component near the root, and a hook everywhere else.
+ *
+ * **Questions asked while one is open are queued**, in the order they were
+ * asked. The alternative is a promise nobody ever resolves, which is a hung
+ * button rather than a visible bug.
+ */
+export declare function PlConfirmProvider({ size, color, confirmLabel, cancelLabel, acknowledgeLabel, width, children }: PlConfirmProviderProps): React.JSX.Element;
+/**
+ * Asks a question from a click handler, and waits for the answer.
+ *
+ * ```tsx
+ * const { confirm } = usePlConfirm();
+ *
+ * <PlButton color="danger" onClick={async () => {
+ *   if (await confirm({ title: 'Delete this project?', color: 'danger', confirmLabel: 'Delete' })) {
+ *     await remove(project);
+ *   }
+ * }}>Delete</PlButton>
+ * ```
+ *
+ * Throws outside a `PlConfirmProvider`, rather than resolving `false`. A silent
+ * `false` is a delete button that quietly does nothing, which is worse than a
+ * missing provider that says so on the first press.
+ */
+export declare function usePlConfirm(): PlConfirmValue;

package/dist/components/confirm/PlConfirmProvider.js

@@ -0,0 +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}

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

@@ -0,0 +1,2 @@
+export { PlConfirmProvider, usePlConfirm } from './PlConfirmProvider.js';
+export type { PlConfirmOptions, PlConfirmProviderProps, PlConfirmValue } from './PlConfirmProvider.js';

package/dist/components/confirm/index.js

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

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{useRender as r}from"@base-ui/react/use-render";import{cx as n,sheetPaddingXClasses as m}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:t=!0,size:o="md",density:s="default",centered:d=!0,render:l,className:i,children:c,...x},f){const u=n("block w-full","none"===e?"":a[e],d?"mx-auto":"",t?m[s][o]:"",i);return r({render:l,ref:f,props:{className:u,children:c,...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 a}from"../../internal/styles.js";export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e,padded:i=!0,size:o,density:l,centered:d=!0,render:m,className:c,children:f,...p},u){const y=r(),h=o??y.size??"md",j=l??y.density??"default",x=s(e),N=n("block w-full",x.className,d?"mx-auto":"",i?a[j][h]:"",c);return t({render:m,ref:u,props:{className:N,style:x.style,children:f,...p}})});

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";