plass-ui 1.4.0 → 1.6.0

package/dist/components/color-picker/PlColorPicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlColorFormat } from '../../internal/color.js';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 export type { PlColorFormat } from '../../internal/color.js';
 /** The names for the parts of the picker that have no text on them. */
 export interface PlColorPickerLabels {
@@ -22,6 +22,17 @@ export interface PlColorPickerLabels {
 /** The English the picker uses for the parts nobody can read a name off. */
 export declare const defaultColorPickerLabels: PlColorPickerLabels;
 export interface PlColorPickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * The four parts of a labelled field, as every other one names them: the
+     * `label`, the `control`, the `description` and the `error`. `className`
+     * itself goes on the stack that holds all four, which is what a caller
+     * positions and sizes.
+     *
+     * `control` is the trigger the panel hangs off, or — with `inline` — the panel
+     * itself, because inline there is no trigger and the panel is what a reader
+     * acts on.
+     */
+    classNames?: PlassFieldClassNames;
     /** The colour, as a CSS string. Pass it to drive the picker yourself. */
     value?: string;
     /** Where an uncontrolled picker starts. @default '#1a58d1' */
@@ -41,8 +52,14 @@ export interface PlColorPickerProps extends PlassStyleProps, Omit<React.Componen
     inline?: boolean;
     /** The field under the panel that the value can be typed into. @default true */
     editable?: boolean;
-    /** Label above the control. */
+    /** The name of what the control holds. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the trigger, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */

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"},P={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},j={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,className:I}){const T=S[w],D=-T/2,M=h({h:r.h,s:100,v:100}),A=h(r),L=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],j[w],I),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:M,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:T,height:T,left:`${r.s}%`,top:100-r.v+"%",marginLeft:D,marginTop:D,backgroundColor:A}})}),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(_,P[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:T,height:T,left:r.h/360*100+"%",top:"50%",marginLeft:D,marginTop:D,backgroundColor:M}})}),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(_,P[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)}, ${A})`}}),e("span",{className:O,style:{width:T,height:T,left:100*l+"%",top:"50%",marginLeft:D,marginTop:D,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",j[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:T+6,height:T+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,L.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:L.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:P=!0,label:j,labelPlacement:S,description:_,error:O,invalid:z,required:I=!1,disabled:T=!1,readOnly:D=!1,fullWidth:M=!1,clearable:A=!1,name:L,open:V,defaultOpen:q=!1,onOpenChange:B,labels:H,variant:K="glass",size:R,color:E,density:W,elevation:U=0,className:X,classNames:Y,style:F,...G},J){const Q=l(),Z=R??Q.size??"md",ee=E??Q.color??"primary",ae=W??Q.density??"default",re=r.useMemo(()=>({...defaultColorPickerLabels,...H}),[H]),[le,se]=r.useState(c),oe=i??le,[te,ne]=r.useState(q),ie=V??te,[de,ce]=r.useState(()=>p(oe)??{hsv:$,alpha:1}),[he,ue]=r.useState(()=>oe),fe=f(de.hsv,y?de.alpha:1,g),pe=""===oe;r.useEffect(()=>{const e=p(oe);e?f(e.hsv,y?e.alpha:1,g)!==fe&&(ue(oe),ce(e)):ue(oe)},[oe,fe,y,g]);const commit=(e,a)=>{ce(e);const r=f(e.hsv,y?e.alpha:1,g);ue(a??r),void 0===i&&se(r),m?.(r)},[me,ve]=r.useState(null),be=r.useCallback(e=>{ve(e),"function"==typeof J?J(e):J&&(J.current=e)},[J]),ge=t(me),xe=T||ge,ye=xe||D,we=z??Boolean(O),Ce=r.useId(),ke=e(ColorPanel,{hsv:de.hsv,alphaValue:de.alpha,onChange:commit,text:he,onTextChange:e=>{ue(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:P,size:Z,inert:ye,invalid:N&&we,labels:re,className:N?Y?.control:void 0});n(L,()=>pe?"":fe,N&&!xe);const Ne=L?e("input",{type:"hidden",name:L,value:pe?"":fe,disabled:xe}):null;if(N){const r=we?"danger":ee,l=[_?`${Ce}-description`:null,O?`${Ce}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:be,role:"group","aria-labelledby":j?`${Ce}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[Z],X),style:{...C(r,U),...F},...G,children:[j?e("span",{id:`${Ce}-label`,className:b(x[Z],"font-semibold",xe?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:j}):null,ke,_?e("span",{id:`${Ce}-description`,className:b(x[Z],"text-(--plass-muted-fg)",Y?.description),children:_}):null,O?e("span",{id:`${Ce}-error`,className:b(x[Z],"text-(--p-accent)",Y?.error),children:O}):null,Ne]})}return e("div",{ref:J,className:M?"w-full":"inline-block",...G,children:e(o,{variant:K,size:Z,color:ee,density:ae,elevation:U,style:F,label:j,labelPlacement:S,description:_,error:O,invalid:z,required:I,disabled:T,readOnly:D,fullWidth:M,className:X,classNames:Y,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:pe?"transparent":h(de.hsv,y?de.alpha:1)}})}),display:pe?re.empty:fe,samples:widthSamples(g,y),empty:pe,clearable:A,onClear:()=>{void 0===i&&se(""),ue(""),m?.("")},open:ie,onOpenChange:e=>{void 0===V&&ne(e),B?.(e)},labels:{...s,clear:re.clear},name:L,formValue:pe?"":fe,children:e("div",{className:v[Z],children:ke})})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, 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
@@ -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 */
@@ -91,8 +92,14 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
      * @default 0
      */
     elevation?: PlassElevation;
-    /** Label above the field, wired to it by Base UI's Field. */
+    /** The name of what the field holds, wired to it by Base UI's Field. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the field, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below the field. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the combobox invalid. */
@@ -122,7 +129,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 +154,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: openLabelProp, clearLabel: clearLabelProp, 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, labelPlacement: labelPlacementProp, 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{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)})]})}
+"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 n}from"@base-ui/react/combobox";import{Field as r}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{glowPointerMove as u}from"../../internal/glow.js";import{FieldNotch as h,notchShellStyle as b}from"../../internal/notch.js";import{chipRemoveClasses as f,controlHeightClasses as g,controlTextLeadingClasses as v,cx as x,disabledClasses as y,fieldReadOnlyClasses as w,fieldRestClasses as N,focusWithinRingClasses as C,forcedHighlightedClasses as j,gapClasses as L,glassClasses as I,hasContent as S,iconClasses as z,metaTextClasses as _,paddingXClasses as O,radiusClasses as P,stackGapClasses as V,surfaceSlots as A,transitionClasses as M}from"../../internal/styles.js";const k=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",M,z].join(" "),R=C,T={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"},q=/* @__PURE__ */[I,"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(" "),E=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",M,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",j,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),F=/* @__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:C="glass",size:j,color:I,density:z,elevation:M=0,items:$,multiple:D,value:K,defaultValue:G,onValueChange:H,onInputValueChange:W,allowCustom:B=!0,customLabel:J,clearable:Q=!1,emptyMessage:U,limit:X,placeholder:Y,label:Z,labelPlacement:ee,description:ae,error:le,invalid:te,startIcon:se,fullWidth:ne=!1,disabled:re=!1,readOnly:ie=!1,required:oe=!1,name:ce,open:de,defaultOpen:me,onOpenChange:pe,openLabel:ue,clearLabel:he,removeLabel:be,inputRef:fe,id:ge,className:ve,hotKeys:xe,classNames:ye,style:we,...Ne}){const Ce=t(),je=s(),Le=ue??je.open,Ie=he??je.clear,Se=U??je.empty,ze=be??je.removeItem,_e=j??Ce.size??"md",Oe=I??Ce.color??"primary",Pe=z??Ce.density??"default",Ve="notch"===(ee??Ce.labelPlacement??"top")&&S(Z),Ae=S(le),Me=te??Ae,ke=Me?"danger":Oe,Re=!0===D,Te=l.useMemo(()=>$.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[$]),[qe,Ee]=l.useState(()=>toArray(G)),Fe=void 0===K?qe:toArray(K),[$e,De]=l.useState(""),Ke=l.useMemo(()=>new Map(Te.map(e=>[e.value,e])),[Te]),Ge=l.useCallback(e=>Ke.get(e)??{value:e,label:String(e),custom:!0},[Ke]),He=$e.trim(),We=He.toLocaleLowerCase(),Be=""===He||Te.some(e=>e.label.toLocaleLowerCase()===We||String(e.value).toLocaleLowerCase()===We)||Fe.some(e=>String(e).toLocaleLowerCase()===We),Je=!B||ie||re||Be?null:He,Qe=l.useMemo(()=>null===Je?Te:[...Te,{value:Je,label:Je,custom:!0}],[Te,Je]),Ue=Re?Fe.map(Ge):Fe.length>0?Ge(Fe[0]):null,Xe=!re&&!ie,Ye=x(k,Ve?"":R,v[_e],P[_e],L[_e],Re?T[_e]:g[_e],`${O[Pe][_e]} pe-1.5`,re?y[C]:ie?w[C]:N[C],Xe?"plass-glow":""),Ze=/* @__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(n.Input,{ref:fe,placeholder:Y,onKeyDown:p(xe,void 0),className:x(Ze,Re&&"min-w-16",Re&&a&&"ms-1.5")}),ea=e(r.Label,{className:x(_[_e],"font-semibold",re?"text-(--plass-muted-fg)":"text-(--plass-fg)",ye?.label),children:Z});return a(r.Root,{disabled:re,invalid:Me,className:x("flex-col align-top",V[_e],ne?"flex w-full":"inline-flex",ve),style:{...A(ke,M),...we},...Ne,children:[S(Z)&&!Ve?ea:null,a(n.Root,{id:ge,name:ce,items:Qe,multiple:Re,value:Ue,onValueChange:e=>{!function commit(e){void 0===K&&Ee(e),H?.(Re?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{De(e),W?.(e)},open:de,defaultOpen:me,onOpenChange:e=>pe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:X,disabled:re,readOnly:ie,required:oe,children:[e(h,{notched:Ve,size:_e,density:Pe,variant:C,disabled:re,readOnly:ie,label:ea,children:a(n.InputGroup,{style:Ve?b:void 0,onPointerMove:u(Xe),className:x(Ye,ye?.control),children:[se?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:se}):null,Re?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"glass",size:_e,color:ke,density:"compact",disabled:re,endIcon:ie||re?null:e(n.ChipRemove,{"aria-label":ze(a.label),className:f,children:e(d,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),Q&&!ie?e(n.Clear,{"aria-label":Ie,className:F,children:e(d,{})}):null,e(n.Trigger,{"aria-label":Le,className:F,children:e(n.Icon,{className:x("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(c,{})})})]})}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(n.Popup,{className:x(q,P[_e],v[_e]),style:A(ke,3),children:[e(n.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:Se}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:E,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:J?J(t.label):je.addCustom(t.label)})]}):a(l.Fragment,{children:[e(n.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)}`)})]})})})]}),ae?e(r.Description,{className:x("m-0",_[_e],"text-(--plass-muted-fg)",ye?.description),children:ae}):null,e(r.Error,Ae?{match:!0,className:x(_[_e],"text-(--p-accent)",ye?.error),children:le}:{className:x(_[_e],"text-(--p-accent)",ye?.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: placeholderProp, emptyMessage, label: labelProp, 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 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})]})})})]})})}
+"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.js

@@ -1 +1 @@
-"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}})});
+"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-table/PlDataTable.d.ts

@@ -61,7 +61,11 @@ export interface PlDataTableColumn<Row> {
      * @default 'start'
      */
     align?: PlTableAlign;
-    /** Renders the cell. Without it the cell is `row[key]` rendered as-is. */
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is.
+     *
+     * `index` is the row's position in `rows`, not its place on the screen.
+     */
     render?: (row: Row, index: number) => React.ReactNode;
     /**
      * What this column *is*, for the sort and the search.
@@ -100,9 +104,13 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     /**
      * A stable key per row, and the one prop worth setting before any other.
      *
-     * It defaults to the row's index, which is wrong for every table this
-     * component is for: sorting moves a row and its index stays behind, so a
-     * selection made before the sort belongs to different rows after it.
+     * It defaults to the row's position in `rows`, which survives a sort, a
+     * search and a page, and does not survive `rows` changing: a row added at the
+     * top moves every other row's key, so a selection made before it belongs to
+     * different rows after it.
+     *
+     * `index` here, and in every other callback, is that position in `rows`, not
+     * the row's place on the screen.
      */
     getRowKey?: (row: Row, index: number) => React.Key;
     /** Shown above the grid, and read out as the table's accessible name. */
@@ -117,7 +125,10 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     stickyHeader?: boolean;
     /** A hard cap on the grid's height. A number is pixels; a string is a CSS length. */
     maxHeight?: number | string;
-    /** Makes rows activatable. Also turns on the hover treatment. */
+    /**
+     * Makes rows activatable. Also turns on the hover treatment. `index` is the
+     * row's position in `rows`.
+     */
     onRowClick?: (row: Row, index: number) => void;
     /** The sorted column and its direction. Pass it to control the sort. */
     sort?: PlDataTableSort | null;
@@ -143,7 +154,10 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     defaultSelected?: readonly React.Key[];
     /** Called with the keys of every ticked row. */
     onSelectedChange?: (selected: React.Key[], rows: Row[]) => void;
-    /** Keeps a row out of the selection — a total line, a row already spent. */
+    /**
+     * Keeps a row out of the selection — a total line, a row already spent.
+     * `index` is the row's position in `rows`.
+     */
     isRowSelectable?: (row: Row, index: number) => boolean;
     /** How the rows are handed out. @default 'scroll' */
     paging?: PlDataTablePaging;

package/dist/components/data-table/PlDataTable.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{PlCheckbox as a}from"../checkbox/index.js";import{PlPagination as l}from"../pagination/index.js";import{PlSkeleton as n}from"../skeleton/index.js";import{PlTextField as s}from"../text-field/index.js";import{compareValues as o,keysBetween as i,nextSort as c,pageBounds as d}from"../../internal/data-table.js";import{useDefaults as u}from"../../internal/defaults.js";import{ChevronIcon as p}from"../../internal/icons.js";import{useLabels as m}from"../../internal/labels.js";import{searchHaystack as h,searchText as g}from"../../internal/search.js";import{controlTextLeadingClasses as f,cx as v,focusRingInsetClasses as y,gapClasses as b,hasContent as x,metaTextClasses as k,paddingXValues as w,radiusClasses as C,sheetRestClasses as N,srOnlyClasses as S,surfaceSlots as j}from"../../internal/styles.js";import{cellPaddingYValues as z,clickableRowClasses as M,headRule as P,rowClasses as $,rowRule as _,tableStyle as A}from"../../internal/table.js";const R={xs:"2rem",sm:"2.25rem",md:"2.75rem",lg:"3rem",xl:"3.5rem"},B=/* @__PURE__ */v("inline-flex items-center gap-1 [outline:none]","font-semibold whitespace-nowrap text-inherit","[background:none] [border:0] [padding:0] [margin:0] cursor-pointer","hover:text-(--plass-fg) [transition:color_var(--plass-duration)_var(--plass-ease)]",y);function SortMark({direction:t}){return e("span",{"aria-hidden":"true",className:v("[&_svg]:size-[1em] [&_svg]:shrink-0","[transition:opacity_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]",null===t?"opacity-30":"opacity-100","asc"===t?"rotate-180":""),children:e(p,{})})}export function PlDataTable({variant:p="glass",size:y,color:T,density:D,elevation:H=0,columns:K,rows:I,getRowKey:E,caption:q,empty:F,striped:G=!1,hoverable:J=!1,stickyHeader:L=!0,maxHeight:O,onRowClick:Q,sort:U,defaultSort:V=null,onSortChange:W,searchable:X=!1,search:Y,defaultSearch:Z="",onSearchChange:ee,searchPlaceholder:te,selection:re="none",selected:ae,defaultSelected:le,onSelectedChange:ne,isRowSelectable:se,paging:oe="scroll",pageSize:ie=10,page:ce,defaultPage:de=1,onPageChange:ue,rowCount:pe,manual:me,loading:he=!1,toolbar:ge,footer:fe,className:ve,style:ye,...be}){const xe=u(),ke=m(),we=y??xe.size??"md",Ce=T??xe.color??"primary",Ne=D??xe.density??"default",Se=F??ke.empty,[je,ze]=r.useState(V),[Me,Pe]=r.useState(Z),[$e,_e]=r.useState(le??[]),[Ae,Re]=r.useState(de),Be=void 0===U?je:U,Te=Y??Me,De=ae??$e,He=!me?.includes("sort"),Ke=!me?.includes("search"),Ie=!me?.includes("pages"),Ee=r.useCallback((e,t)=>E?E(e,t):t,[E]),qe=r.useCallback((e,t)=>e.value?e.value(t):t[e.key],[]),Fe=g(Te),Ge=r.useMemo(()=>{if(!Ke||""===Fe)return I;const e=K.filter(e=>!e.unsearchable);return I.filter(t=>h(e.map(e=>qe(e,t))).includes(Fe))},[I,K,Fe,Ke,qe]),Je=r.useMemo(()=>{if(!He||null===Be)return Ge;const e=K.find(e=>e.key===Be.key);if(!e)return Ge;const t="asc"===Be.direction?1:-1;return[...Ge].sort((r,a)=>(e.compare?e.compare(r,a):o(qe(e,r),qe(e,a)))*t)},[Ge,K,Be,He,qe]),Le=Ie?Je.length:pe??Je.length,Oe=Math.max(1,Math.ceil(Le/ie)),Qe=Math.min(Math.max(ce??Ae,1),Oe),Ue=r.useMemo(()=>{if("pages"!==oe||!Ie)return Je;const[e,t]=d(Je.length,Qe,ie);return Je.slice(e,t)},[Je,oe,Ie,Qe,ie]),Ve=r.useMemo(()=>Ue.map(Ee),[Ue,Ee]),We=r.useRef(null);function goPage(e){void 0===ce&&Re(e),e!==Qe&&ue?.(e)}const selectable=(e,t)=>"none"!==re&&(!se||se(e,t)),goSelected=e=>{void 0===ae&&_e(e);const t=new Set(e);ne?.(e,I.filter((e,r)=>t.has(Ee(e,r))))},Xe=Ve.filter(e=>De.includes(e)),Ye=Ue.filter(selectable).map(Ee),Ze=Ye.length>0&&Xe.length===Ye.length,et=w[Ne][we],tt=z[Ne][we],rt=Boolean(Q),at=J||rt,lt=void 0!==O,nt="none"!==re,st=K.length+(nt?1:0),ot={padding:`${tt} ${et}`,border:0,background:"none"},it={...ot,...L?{boxShadow:"inset 0 -1px 0 var(--plass-border)",background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:{borderBottom:P}},bodyCellStyle=e=>({...ot,borderTop:0===e?0:_}),ct={padding:`${tt} ${et}`,display:"flex",alignItems:"center",justifyContent:"space-between",gap:"0.75rem"},dt=X||x(ge),ut="pages"===oe&&Oe>1||x(fe);return t("div",{className:v("overflow-hidden",C[we],N[p],ve),style:{...j(Ce,H),...ye},...be,children:[x(q)?e("div",{"aria-hidden":"true",className:v(k[we],"font-semibold text-(--plass-muted-fg)"),style:{...ot,borderBottom:_,textAlign:"start"},children:q}):null,dt?t("div",{style:{...ct,borderBottom:_},children:[X?e(s,{size:we,color:Ce,density:Ne,value:Te,onChange:e=>{return t=e.target.value,void 0===Y&&Pe(t),goPage(1),void ee?.(t);var t},placeholder:te??ke.search,"aria-label":ke.search,className:"min-w-0 flex-1"}):e("span",{}),x(ge)?e("div",{className:v("flex items-center",b[we]),children:ge}):null]}):null,e("div",{className:v("overflow-x-auto",lt&&"overflow-y-auto overscroll-contain"),style:lt?{maxHeight:O}:void 0,children:t("table",{className:v("text-start",f[we],"text-(--plass-fg)"),style:A,"aria-busy":he||void 0,children:[x(q)?e("caption",{className:S,children:q}):null,t("colgroup",{children:[nt?e("col",{style:{width:R[we]}}):null,K.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))]}),e("thead",{children:t("tr",{children:[nt?e("th",{scope:"col",className:v(L&&"sticky top-0 z-10"),style:it,children:"multiple"===re?e(a,{size:we,color:Ce,checked:Ze,indeterminate:Xe.length>0&&!Ze,onCheckedChange:()=>{const e=De.filter(e=>!Ye.includes(e));goSelected(Ze?e:[...e,...Ye])},disabled:0===Ye.length,"aria-label":ke.selectAll}):e("span",{className:S,children:ke.selectRow})}):null,K.map(r=>{const a=Be?.key===r.key?Be.direction:null;return e("th",{scope:"col",className:v("font-semibold whitespace-nowrap text-(--plass-muted-fg)",L&&"sticky top-0 z-10"),style:{...it,textAlign:r.align??"start"},"aria-sort":r.sortable?"asc"===a?"ascending":"desc"===a?"descending":"none":void 0,children:r.sortable?t("button",{type:"button",className:B,onClick:()=>(e=>{const t=c(Be,e);void 0===U&&ze(t),goPage(1),W?.(t)})(r.key),children:[r.header??r.key,e(SortMark,{direction:a})]}):r.header??r.key},r.key)})]})}),e("tbody",{children:he?Array.from({length:"pages"===oe?ie:5},(t,r)=>e("tr",{className:$,children:Array.from({length:st},(t,a)=>e("td",{style:bodyCellStyle(r),children:e(n,{size:we,color:Ce})},a))},r)):0===Ue.length?e("tr",{className:$,children:e("td",{colSpan:st,className:"text-(--plass-muted-fg)",style:{...ot,padding:`2rem ${et}`,textAlign:"center"},children:Se})}):Ue.map((r,l)=>{const n=Ee(r,l),s=De.includes(n),o=selectable(r,l);return t("tr",{"aria-selected":nt?s:void 0,className:v($,G&&l%2==1&&"[--p-row:var(--plass-stripe)]",s&&"[--p-row:var(--p-soft)]",at&&"hover:[--p-row:var(--p-soft)]",rt&&M),style:{backgroundColor:"var(--p-row)"},tabIndex:rt?0:void 0,onClick:Q?()=>Q(r,l):void 0,onKeyDown:Q?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Q(r,l)))}:void 0,children:[nt?e("td",{style:bodyCellStyle(l),children:e(a,{size:we,color:Ce,checked:s,disabled:!o,onCheckedChange:(e,t)=>((e,t)=>{if("single"===re)return goSelected(De.includes(e)?[]:[e]),void(We.current=e);if(t&&null!==We.current&&We.current!==e){const t=i(Ve,We.current,e).filter(e=>Ye.includes(e));return void goSelected([...De.filter(e=>!t.includes(e)),...t])}We.current=e,goSelected(De.includes(e)?De.filter(t=>t!==e):[...De,e])})(n,Boolean(t.event.shiftKey)),onClick:e=>e.stopPropagation(),"aria-label":ke.selectRow})}):null,K.map(t=>e("td",{style:{...bodyCellStyle(l),textAlign:t.align??"start"},children:t.render?t.render(r,l):r[t.key]},t.key))]},n)})})]})}),ut?t("div",{style:{...ct,borderTop:_},children:[e("span",{className:v(k[we],"text-(--plass-muted-fg)"),children:x(fe)?fe:`${Ue.length} / ${Le}`}),"pages"===oe?e(l,{size:we,color:Ce,density:Ne,count:Oe,page:Qe,onPageChange:goPage}):null]}):null]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{PlCheckbox as a}from"../checkbox/index.js";import{PlPagination as n}from"../pagination/index.js";import{PlSkeleton as l}from"../skeleton/index.js";import{PlTextField as s}from"../text-field/index.js";import{compareValues as o,keysBetween as i,nextSort as c,pageBounds as d}from"../../internal/data-table.js";import{useDefaults as u}from"../../internal/defaults.js";import{ChevronIcon as p}from"../../internal/icons.js";import{useLabels as m}from"../../internal/labels.js";import{searchHaystack as h,searchText as g}from"../../internal/search.js";import{controlTextLeadingClasses as f,cx as v,focusRingInsetClasses as y,gapClasses as b,hasContent as x,metaTextClasses as w,paddingXValues as k,radiusClasses as C,sheetRestClasses as N,srOnlyClasses as S,surfaceSlots as j}from"../../internal/styles.js";import{cellPaddingYValues as z,clickableRowClasses as M,headRule as P,rowClasses as $,rowRule as _,tableStyle as A}from"../../internal/table.js";const R={xs:"2rem",sm:"2.25rem",md:"2.75rem",lg:"3rem",xl:"3.5rem"},B=/* @__PURE__ */v("inline-flex items-center gap-1 [outline:none]","font-semibold whitespace-nowrap text-inherit","[background:none] [border:0] [padding:0] [margin:0] cursor-pointer","hover:text-(--plass-fg) [transition:color_var(--plass-duration)_var(--plass-ease)]",y);function SortMark({direction:t}){return e("span",{"aria-hidden":"true",className:v("[&_svg]:size-[1em] [&_svg]:shrink-0","[transition:opacity_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]",null===t?"opacity-30":"opacity-100","asc"===t?"rotate-180":""),children:e(p,{})})}export function PlDataTable({variant:p="glass",size:y,color:T,density:D,elevation:H=0,columns:K,rows:I,getRowKey:E,caption:q,empty:F,striped:G=!1,hoverable:J=!1,stickyHeader:L=!0,maxHeight:O,onRowClick:Q,sort:U,defaultSort:V=null,onSortChange:W,searchable:X=!1,search:Y,defaultSearch:Z="",onSearchChange:ee,searchPlaceholder:te,selection:re="none",selected:ae,defaultSelected:ne,onSelectedChange:le,isRowSelectable:se,paging:oe="scroll",pageSize:ie=10,page:ce,defaultPage:de=1,onPageChange:ue,rowCount:pe,manual:me,loading:he=!1,toolbar:ge,footer:fe,className:ve,style:ye,...be}){const xe=u(),we=m(),ke=y??xe.size??"md",Ce=T??xe.color??"primary",Ne=D??xe.density??"default",Se=F??we.empty,[je,ze]=r.useState(V),[Me,Pe]=r.useState(Z),[$e,_e]=r.useState(ne??[]),[Ae,Re]=r.useState(de),Be=void 0===U?je:U,Te=Y??Me,De=ae??$e,He=!me?.includes("sort"),Ke=!me?.includes("search"),Ie=!me?.includes("pages"),Ee=r.useCallback((e,t)=>E?E(e,t):t,[E]),qe=r.useCallback((e,t)=>e.value?e.value(t):t[e.key],[]),Fe=r.useMemo(()=>I.map((e,t)=>({row:e,index:t})),[I]),Ge=g(Te),Je=r.useMemo(()=>{if(!Ke||""===Ge)return Fe;const e=K.filter(e=>!e.unsearchable);return Fe.filter(({row:t})=>h(e.map(e=>qe(e,t))).includes(Ge))},[Fe,K,Ge,Ke,qe]),Le=r.useMemo(()=>{if(!He||null===Be)return Je;const e=K.find(e=>e.key===Be.key);if(!e)return Je;const t="asc"===Be.direction?1:-1;return[...Je].sort((r,a)=>e.compare?e.compare(r.row,a.row)*t:o(qe(e,r.row),qe(e,a.row),t))},[Je,K,Be,He,qe]),Oe=Ie?Le.length:pe??Le.length,Qe=Math.max(1,Math.ceil(Oe/ie)),Ue=Math.min(Math.max(ce??Ae,1),Qe),Ve=r.useMemo(()=>{if("pages"!==oe||!Ie)return Le;const[e,t]=d(Le.length,Ue,ie);return Le.slice(e,t)},[Le,oe,Ie,Ue,ie]),We=r.useMemo(()=>Ve.map(({row:e,index:t})=>Ee(e,t)),[Ve,Ee]),Xe=r.useRef(null);function goPage(e){void 0===ce&&Re(e),e!==Ue&&ue?.(e)}const selectable=(e,t)=>"none"!==re&&(!se||se(e,t)),goSelected=e=>{void 0===ae&&_e(e);const t=new Set(e);le?.(e,I.filter((e,r)=>t.has(Ee(e,r))))},Ye=We.filter(e=>De.includes(e)),Ze=Ve.filter(({row:e,index:t})=>selectable(e,t)).map(({row:e,index:t})=>Ee(e,t)),et=Ze.length>0&&Ye.length===Ze.length,tt=k[Ne][ke],rt=z[Ne][ke],at=Boolean(Q),nt=J||at,lt=void 0!==O,st="none"!==re,ot=K.length+(st?1:0),it={padding:`${rt} ${tt}`,border:0,background:"none"},ct={...it,...L?{boxShadow:"inset 0 -1px 0 var(--plass-border)",background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:{borderBottom:P}},bodyCellStyle=e=>({...it,borderTop:0===e?0:_}),dt={padding:`${rt} ${tt}`,display:"flex",alignItems:"center",justifyContent:"space-between",gap:"0.75rem"},ut=X||x(ge),pt="pages"===oe&&Qe>1||x(fe);return t("div",{className:v("overflow-hidden",C[ke],N[p],ve),style:{...j(Ce,H),...ye},...be,children:[x(q)?e("div",{"aria-hidden":"true",className:v(w[ke],"font-semibold text-(--plass-muted-fg)"),style:{...it,borderBottom:_,textAlign:"start"},children:q}):null,ut?t("div",{style:{...dt,borderBottom:_},children:[X?e(s,{size:ke,color:Ce,density:Ne,value:Te,onChange:e=>{return t=e.target.value,void 0===Y&&Pe(t),goPage(1),void ee?.(t);var t},placeholder:te??we.search,"aria-label":we.search,className:"min-w-0 flex-1"}):e("span",{}),x(ge)?e("div",{className:v("flex items-center",b[ke]),children:ge}):null]}):null,e("div",{className:v("overflow-x-auto",lt&&"overflow-y-auto overscroll-contain"),style:lt?{maxHeight:O}:void 0,children:t("table",{className:v("text-start",f[ke],"text-(--plass-fg)"),style:A,"aria-busy":he||void 0,children:[x(q)?e("caption",{className:S,children:q}):null,t("colgroup",{children:[st?e("col",{style:{width:R[ke]}}):null,K.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))]}),e("thead",{children:t("tr",{children:[st?e("th",{scope:"col",className:v(L&&"sticky top-0 z-10"),style:ct,children:"multiple"===re?e(a,{size:ke,color:Ce,checked:et,indeterminate:Ye.length>0&&!et,onCheckedChange:()=>{const e=De.filter(e=>!Ze.includes(e));goSelected(et?e:[...e,...Ze])},disabled:0===Ze.length,"aria-label":we.selectAll}):e("span",{className:S,children:we.selectRow})}):null,K.map(r=>{const a=Be?.key===r.key?Be.direction:null;return e("th",{scope:"col",className:v("font-semibold whitespace-nowrap text-(--plass-muted-fg)",L&&"sticky top-0 z-10"),style:{...ct,textAlign:r.align??"start"},"aria-sort":r.sortable?"asc"===a?"ascending":"desc"===a?"descending":"none":void 0,children:r.sortable?t("button",{type:"button",className:B,onClick:()=>(e=>{const t=c(Be,e);void 0===U&&ze(t),goPage(1),W?.(t)})(r.key),children:[r.header??r.key,e(SortMark,{direction:a})]}):r.header??r.key},r.key)})]})}),e("tbody",{children:he?Array.from({length:"pages"===oe?ie:5},(t,r)=>e("tr",{className:$,children:Array.from({length:ot},(t,a)=>e("td",{style:bodyCellStyle(r),children:e(l,{size:ke,color:Ce})},a))},r)):0===Ve.length?e("tr",{className:$,children:e("td",{colSpan:ot,className:"text-(--plass-muted-fg)",style:{...it,padding:`2rem ${tt}`,textAlign:"center"},children:Se})}):Ve.map(({row:r,index:n},l)=>{const s=Ee(r,n),o=De.includes(s),c=selectable(r,n);return t("tr",{"aria-selected":st?o:void 0,className:v($,G&&l%2==1&&"[--p-row:var(--plass-stripe)]",o&&"[--p-row:var(--p-soft)]",nt&&"hover:[--p-row:var(--p-soft)]",at&&M),style:{backgroundColor:"var(--p-row)"},tabIndex:at?0:void 0,onClick:Q?()=>Q(r,n):void 0,onKeyDown:Q?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Q(r,n)))}:void 0,children:[st?e("td",{style:bodyCellStyle(l),children:e(a,{size:ke,color:Ce,checked:o,disabled:!c,onCheckedChange:(e,t)=>((e,t)=>{if("single"===re)return goSelected(De.includes(e)?[]:[e]),void(Xe.current=e);if(t&&null!==Xe.current&&Xe.current!==e){const t=i(We,Xe.current,e).filter(e=>Ze.includes(e));return void goSelected([...De.filter(e=>!t.includes(e)),...t])}Xe.current=e,goSelected(De.includes(e)?De.filter(t=>t!==e):[...De,e])})(s,Boolean(t.event.shiftKey)),onClick:e=>e.stopPropagation(),"aria-label":we.selectRow})}):null,K.map(t=>e("td",{style:{...bodyCellStyle(l),textAlign:t.align??"start"},children:t.render?t.render(r,n):r[t.key]},t.key))]},s)})})]})}),pt?t("div",{style:{...dt,borderTop:_},children:[e("span",{className:v(w[ke],"text-(--plass-muted-fg)"),children:x(fe)?fe:`${Ve.length} / ${Oe}`}),"pages"===oe?e(n,{size:ke,color:Ce,density:Ne,count:Qe,page:Ue,onPageChange:goPage}):null]}):null]})}

package/dist/components/date-picker/PlDatePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as l}from"../button/PlButton.js";import{Calendar as n,usePickerLabels as r}from"../../internal/calendar.js";import{CalendarIcon as s}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as m,isDayOutside as u,isMonthOutside as h,isValidDate as p,isYearOutside as f,localeWeekStart as y,mergeDateAndTime as b,startOfDay as g,startOfMonth as j,startOfYear as D,toISODate as v,toISOMonth as O,toISOYear as S,today as k,withPlaceholder as x}from"../../internal/date.js";import{cx as z}from"../../internal/styles.js";const C={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},w={day:v,month:O,year:S};export const PlDatePicker=/* @__PURE__ */t.forwardRef(function PlDatePicker({value:v,defaultValue:O,onValueChange:S,precision:P="day",open:M,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:N,weekStartsOn:T,format:Y,placeholder:q,clearable:A=!1,showTodayButton:G=!0,closeOnSelect:H=!0,labels:J,name:K,size:L,color:Q,readOnly:U=!1,disabled:W=!1,startIcon:X,...Z},$){const _=o(),ee=N??_.locale,ae=L??_.size??"md",te=Q??_.color??"primary",oe=r(J),le=T??_.weekStartsOn??y(ee),ne=Y??C[P],[re,se]=t.useState(O??null),ie=void 0!==v?v:re,[ce,de]=t.useState(V??!1),me=M??ce,[ue,he]=t.useState(()=>j(p(ie)?ie:I??k()));t.useEffect(()=>{me&&he(j(p(ie)?ie:I??k()))},[me]);const setOpen=e=>{e&&(U||W)||(void 0===M&&de(e),B?.(e))},commit=e=>{void 0===v&&se(e),S?.(e)},select=e=>{const a=p(ie)?b(e,ie):g(e);commit(a),he(j(a)),H&&setOpen(!1)},pe=k(),fe="day"===P?pe:"month"===P?j(pe):D(pe),ye="day"===P?oe.today:"month"===P?oe.thisMonth:oe.thisYear,be="day"===P?u(pe,R,E)||(F?.(pe)??!1):"month"===P?h(pe,R,E):f(pe,R,E),ge=G||A,je=t.useMemo(()=>x(d(ee,ne),q),[ee,ne,q]);return e(c,{...Z,size:ae,color:te,readOnly:U,disabled:W,triggerRef:$,startIcon:X??e(s,{}),display:p(ie)?m(ie,ee,ne):q??"",samples:je,empty:!p(ie),clearable:A,onClear:()=>commit(null),open:me,onOpenChange:setOpen,labels:oe,hiddenValues:K?[{name:K,value:p(ie)?w[P](ie):""}]:void 0,children:a("div",{className:z("flex flex-col",ge&&"gap-1.5"),children:[e(n,{size:ae,color:te,locale:ee,weekStartsOn:le,month:ue,onMonthChange:he,precision:P,selected:[ie],onSelect:select,minDate:R,maxDate:E,shouldDisableDate:F,labels:oe,autoFocus:!0}),ge?a(i,{size:ae,children:[A?e(l,{variant:"ghost",size:ae,color:te,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:oe.clear}):null,G?e(l,{variant:"ghost",size:ae,color:te,density:"compact",disabled:be,onClick:()=>select(fe),children:ye}):null]}):null]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as l,usePickerLabels as r}from"../../internal/calendar.js";import{CalendarIcon as s}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as m,isDayOutside as u,isMonthOutside as h,isValidDate as p,isYearOutside as f,localeWeekStart as y,mergeDateAndTime as b,startOfDay as g,startOfMonth as j,startOfYear as D,toISODate as O,toISOMonth as S,toISOYear as k,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as z}from"../../internal/styles.js";const C={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},w={day:O,month:S,year:k};export const PlDatePicker=/* @__PURE__ */a.forwardRef(function PlDatePicker({value:O,defaultValue:S,onValueChange:k,precision:P="day",open:M,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:N,weekStartsOn:T,format:Y,placeholder:q,clearable:A=!1,showTodayButton:G=!0,closeOnSelect:H=!0,labels:J,name:K,size:L,color:Q,density:U,readOnly:W=!1,disabled:X=!1,startIcon:Z,...$},_){const ee=o(),te=N??ee.locale,ae=L??ee.size??"md",oe=Q??ee.color??"primary",ne=U??ee.density??"default",le=r(J),re=T??ee.weekStartsOn??y(te),se=Y??C[P],[ie,ce]=a.useState(S??null),de=void 0!==O?O:ie,[me,ue]=a.useState(V??!1),he=M??me,[pe,fe]=a.useState(()=>j(p(de)?de:I??x()));a.useEffect(()=>{he&&fe(j(p(de)?de:I??x()))},[he]);const setOpen=e=>{e&&(W||X)||(void 0===M&&ue(e),B?.(e))},commit=e=>{void 0===O&&ce(e),k?.(e)},select=e=>{const t=p(de)?b(e,de):g(e);commit(t),fe(j(t)),H&&setOpen(!1)},ye=x(),be="day"===P?ye:"month"===P?j(ye):D(ye),ge="day"===P?le.today:"month"===P?le.thisMonth:le.thisYear,je="day"===P?u(ye,R,E)||(F?.(ye)??!1):"month"===P?h(ye,R,E):f(ye,R,E),De=G||A,Oe=a.useMemo(()=>v(d(te,se),q),[te,se,q]);return e(c,{...$,size:ae,color:oe,density:ne,readOnly:W,disabled:X,triggerRef:_,startIcon:Z??e(s,{}),display:p(de)?m(de,te,se):q??"",samples:Oe,empty:!p(de),clearable:A,onClear:()=>commit(null),open:he,onOpenChange:setOpen,labels:le,name:K,formValue:p(de)?w[P](de):"",children:t("div",{className:z("flex flex-col",De&&"gap-1.5"),children:[e(l,{size:ae,color:oe,locale:te,weekStartsOn:re,month:pe,onMonthChange:fe,precision:P,selected:[de],onSelect:select,minDate:R,maxDate:E,shouldDisableDate:F,labels:le,autoFocus:!0}),De?t(i,{size:ae,children:[A?e(n,{variant:"ghost",size:ae,color:oe,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:le.clear}):null,G?e(n,{variant:"ghost",size:ae,color:oe,density:"compact",disabled:je,onClick:()=>select(be),children:ge}):null]}):null]})})});

package/dist/components/date-range-picker/PlDateRangePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{Calendar as s,usePickerLabels as r}from"../../internal/calendar.js";import{ArrowRightIcon as o,CalendarIcon as i}from"../../internal/icons.js";import{PickerFooter as c,PickerShell as u}from"../../internal/picker.js";import{WidthSizer as d}from"../../internal/sizer.js";import{addMonths as m,compareDay as p,displaySamples as h,formatDate as f,isValidDate as v,localeWeekStart as x,startOfDay as g,startOfMonth as w,toISODate as b,today as y,withPlaceholder as N}from"../../internal/date.js";import{cx as j,gapClasses as S,metaTextClasses as D}from"../../internal/styles.js";const C={start:null,end:null};export const PlDateRangePicker=/* @__PURE__ */a.forwardRef(function PlDateRangePicker({value:O,defaultValue:k,onValueChange:P,open:z,defaultOpen:M,onOpenChange:R,defaultMonth:B,minDate:V,maxDate:E,shouldDisableDate:I,locale:F,weekStartsOn:q,format:A={dateStyle:"medium"},monthCount:G=2,startPlaceholder:H,endPlaceholder:J,presets:K,clearable:L=!1,closeOnSelect:Q=!0,labels:T,name:U,size:W,color:X,readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._},ee){const le=n(),ae=F??le.locale,ne=W??le.size??"md",te=X??le.color??"primary",se=r(T),re=q??le.weekStartsOn??x(ae),[oe,ie]=a.useState(k??C),ce=void 0!==O?O??C:oe,ue=v(ce.start)?ce.start:null,de=v(ce.end)?ce.end:null,[me,pe]=a.useState(M??!1),he=z??me,[fe,ve]=a.useState(null),[xe,ge]=a.useState(null),[we,be]=a.useState(()=>w(ue??B??y()));a.useEffect(()=>{he?be(w(ue??B??y())):(ve(null),ge(null))},[he]);const setOpen=e=>{e&&(Y||Z)||(void 0===z&&pe(e),R?.(e))},commit=e=>{void 0===O&&ie(e),P?.(e)},ye=fe??ue,Ne=null!==fe?xe:de,write=(l,a)=>v(l)?f(l,ae,A):e("span",{className:"text-(--plass-muted-fg)",children:a??""}),je=m(we,1),Se=2===G,De=a.useMemo(()=>h(ae,A),[ae,A]),Ce=null!==fe?se.end:null===ue?se.start:null,Oe={size:ne,color:te,locale:ae,weekStartsOn:re,selected:[ue,de,fe],rangeStart:ye,rangeEnd:Ne,onSelect:e=>{const l=g(e);if(null===fe)return ve(l),ge(l),void commit({start:l,end:null});const[a,n]=p(l,fe)<0?[l,fe]:[fe,l];ve(null),ge(null),commit({start:a,end:n}),Q&&setOpen(!1)},onPreviewChange:e=>{null!==fe&&ge(e??fe)},minDate:V,maxDate:E,shouldDisableDate:I,showOutsideDays:!1,labels:se};return e(u,{..._,size:ne,color:te,readOnly:Y,disabled:Z,triggerRef:ee,startIcon:$??e(i,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(ue,H)}),e(d,{samples:N(De,H)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) rtl:rotate-180",children:e(o,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(de,J)}),e(d,{samples:N(De,J)})]})]}),empty:null===ue&&null===de,clearable:L,onClear:()=>commit(C),open:he,onOpenChange:setOpen,labels:se,hiddenValues:U?[{name:U,value:ue?b(ue):""},{name:U,value:de?b(de):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:j("flex items-stretch",S[ne]),children:[K&&K.length>0?e("div",{className:j("flex max-h-[calc(var(--p-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--plass-divider)]"),children:K.map((l,a)=>e(t,{variant:"ghost",size:ne,color:te,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;ve(null),ge(null),commit(l),v(l.start)&&be(w(l.start)),Q&&setOpen(!1)})(l),children:l.label},a))}):null,e(s,{...Oe,month:we,onMonthChange:be,showNextButton:!Se,autoFocus:!0}),Se?e(s,{...Oe,month:je,onMonthChange:e=>be(m(e,-1)),showPreviousButton:!1}):null]}),L||null!==Ce?l(c,{size:ne,children:[null!==Ce?e("span",{className:j("me-auto text-(--plass-muted-fg)",D[ne]),children:Ce}):null,L?e(t,{variant:"ghost",size:ne,color:te,density:"compact",onClick:()=>{ve(null),ge(null),commit(C),setOpen(!1)},children:se.clear}):null]}):null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{PlButton as a}from"../button/PlButton.js";import{Calendar as s,usePickerLabels as r}from"../../internal/calendar.js";import{ArrowRightIcon as o,CalendarIcon as i}from"../../internal/icons.js";import{PickerFooter as c,PickerShell as u}from"../../internal/picker.js";import{WidthSizer as d}from"../../internal/sizer.js";import{addMonths as m,compareDay as p,displaySamples as f,formatDate as h,isValidDate as x,localeWeekStart as g,startOfDay as v,startOfMonth as y,toISODate as w,today as b,withPlaceholder as N}from"../../internal/date.js";import{cx as j,gapClasses as S,metaTextClasses as D}from"../../internal/styles.js";const C={start:null,end:null};export const PlDateRangePicker=/* @__PURE__ */n.forwardRef(function PlDateRangePicker({value:O,defaultValue:k,onValueChange:P,open:z,defaultOpen:M,onOpenChange:R,defaultMonth:B,minDate:V,maxDate:E,shouldDisableDate:I,locale:F,weekStartsOn:W,format:q={dateStyle:"medium"},monthCount:A=2,startPlaceholder:G,endPlaceholder:H,presets:J,clearable:K=!1,closeOnSelect:L=!0,labels:Q,name:T,size:U,color:X,density:Y,readOnly:Z=!1,disabled:$=!1,startIcon:_,...ee},le){const ne=t(),te=F??ne.locale,ae=U??ne.size??"md",se=X??ne.color??"primary",re=Y??ne.density??"default",oe=r(Q),ie=W??ne.weekStartsOn??g(te),[ce,ue]=n.useState(k??C),de=void 0!==O?O??C:ce,me=x(de.start)?de.start:null,pe=x(de.end)?de.end:null,[fe,he]=n.useState(M??!1),xe=z??fe,[ge,ve]=n.useState(null),[ye,we]=n.useState(null),[be,Ne]=n.useState(()=>y(me??B??b()));n.useEffect(()=>{xe?Ne(y(me??B??b())):(ve(null),we(null))},[xe]);const setOpen=e=>{e&&(Z||$)||(void 0===z&&he(e),R?.(e))},commit=e=>{void 0===O&&ue(e),P?.(e)},je=ge??me,Se=null!==ge?ye:pe,write=(l,n)=>x(l)?h(l,te,q):e("span",{className:"text-(--plass-muted-fg)",children:n??""}),De=m(be,1),Ce=2===A,Oe=ee.fullWidth??!1,ke=n.useMemo(()=>Oe?[]:f(te,q),[Oe,te,q]),Pe=null!==ge?oe.end:null===me?oe.start:null,ze={size:ae,color:se,locale:te,weekStartsOn:ie,selected:[me,pe,ge],rangeStart:je,rangeEnd:Se,onSelect:e=>{const l=v(e);if(null===ge)return ve(l),we(l),void commit({start:l,end:null});const[n,t]=p(l,ge)<0?[l,ge]:[ge,l];ve(null),we(null),commit({start:n,end:t}),L&&setOpen(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:V,maxDate:E,shouldDisableDate:I,showOutsideDays:!1,labels:oe};return e(u,{...ee,size:ae,color:se,density:re,readOnly:Z,disabled:$,triggerRef:le,startIcon:_??e(i,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(me,G)}),Oe?null:e(d,{samples:N(ke,G)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) rtl:rotate-180",children:e(o,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(pe,H)}),Oe?null:e(d,{samples:N(ke,H)})]})]}),empty:null===me&&null===pe,clearable:K,onClear:()=>commit(C),open:xe,onOpenChange:setOpen,labels:oe,name:T,formValue:[me?w(me):"",pe?w(pe):""],children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:j("flex items-stretch",S[ae]),children:[J&&J.length>0?e("div",{className:j("flex max-h-[calc(var(--p-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--plass-divider)]"),children:J.map((l,n)=>e(a,{variant:"ghost",size:ae,color:se,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;ve(null),we(null),commit(l),x(l.start)&&Ne(y(l.start)),L&&setOpen(!1)})(l),children:l.label},n))}):null,e(s,{...ze,month:be,onMonthChange:Ne,showNextButton:!Ce,autoFocus:!0}),Ce?e(s,{...ze,month:De,onMonthChange:e=>Ne(m(e,-1)),showPreviousButton:!1}):null]}),K||null!==Pe?l(c,{size:ae,children:[null!==Pe?e("span",{className:j("me-auto text-(--plass-muted-fg)",D[ae]),children:Pe}):null,K?e(a,{variant:"ghost",size:ae,color:se,density:"compact",onClick:()=>{ve(null),we(null),commit(C),setOpen(!1)},children:oe.clear}):null]}):null]})})});

package/dist/components/date-time-picker/PlDateTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as a,TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerDivider as c,PickerFooter as d,PickerShell as m}from"../../internal/picker.js";import{displaySamples as u,formatDate as h,isDayOutside as p,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as g,startOfMonth as D,timeUnitSpan as v,toISODateTime as j,today as k,withPlaceholder as w,withTime as C}from"../../internal/date.js";import{cx as x,gapClasses as z}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */l.forwardRef(function PlDateTimePicker({value:O,defaultValue:T,onValueChange:P,open:M,defaultOpen:N,onOpenChange:V,defaultMonth:B,minDate:I,maxDate:R,shouldDisableDate:E,shouldDisableTime:F,locale:q,weekStartsOn:A,format:G={dateStyle:"medium",timeStyle:"short"},hour12:H,showSeconds:J=!1,hourStep:K=1,minuteStep:L=1,secondStep:Q=1,placeholder:U,clearable:W=!1,showNowButton:X=!0,closeOnSelect:Y=!1,labels:Z,name:$,size:_,color:ee,density:te,readOnly:le=!1,disabled:oe=!1,startIcon:ne,...ae},se){const ie=o(),re=q??ie.locale,ce=_??ie.size??"md",de=ee??ie.color??"primary",me=te??ie.density??"default",ue=i(Z),he=A??ie.weekStartsOn??b(re),pe=H??f(re),[fe,Se]=l.useState(T??null),be=void 0!==O?O:fe,[ye,ge]=l.useState(N??!1),De=M??ye,[ve,je]=l.useState(()=>D(S(be)?be:B??k()));l.useEffect(()=>{De&&je(D(S(be)?be:B??k()))},[De]);const setOpen=e=>{e&&(le||oe)||(void 0===M&&ge(e),V?.(e))},commit=e=>{void 0===O&&Se(e),P?.(e)},ke=l.useCallback((e,t)=>{const[l,o]=v(t,e),n=g(e).getTime();return!!(S(I)&&n+1e3*o<I.getTime())||!!(S(R)&&n+1e3*l>R.getTime())||(F?.(e,t)??!1)},[I,R,F]),we=new Date,Ce=C(we,{seconds:J?we.getSeconds():0}),xe=p(Ce,I,R)||(E?.(Ce)??!1)||ke(Ce,"second"),ze=l.useMemo(()=>w(u(re,G),U),[re,G,U]);return e(m,{...ae,size:ce,color:de,density:me,readOnly:le,disabled:oe,triggerRef:se,startIcon:ne??e(r,{}),display:S(be)?h(be,re,G):U??"",samples:ze,empty:!S(be),clearable:W,onClear:()=>commit(null),open:De,onOpenChange:setOpen,labels:ue,hiddenValues:$?[{name:$,value:S(be)?j(be,J):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:x("flex items-stretch",z[ce]),children:[e(a,{size:ce,color:de,locale:re,weekStartsOn:he,month:ve,onMonthChange:je,selected:[be],onSelect:e=>{const t=S(be)?y(e,be):g(e);commit(t),je(D(t)),Y&&setOpen(!1)},minDate:I,maxDate:R,shouldDisableDate:E,labels:ue,autoFocus:!0}),e(c,{}),e(s,{size:ce,density:me,locale:re,value:S(be)?be:null,referenceDate:S(be)?be:k(),onChange:commit,hour12:pe,showSeconds:J,hourStep:K,minuteStep:L,secondStep:Q,shouldDisableTime:ke,labels:ue})]}),t(d,{size:ce,children:[W?e(n,{variant:"ghost",size:ce,color:de,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ue.clear}):null,X?e(n,{variant:"ghost",size:ce,color:de,density:"compact",disabled:xe,onClick:()=>{commit(Ce),je(D(Ce))},children:ue.now}):null,e(n,{variant:"solid",size:ce,color:de,density:"compact",onClick:()=>setOpen(!1),children:ue.done})]})]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as o}from"../../internal/defaults.js";import{PlButton as n}from"../button/PlButton.js";import{Calendar as a,TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerDivider as c,PickerFooter as d,PickerShell as m}from"../../internal/picker.js";import{clampMoment as u,displaySamples as h,formatDate as p,isDayOutside as f,isHour12 as S,isValidDate as b,localeWeekStart as y,mergeDateAndTime as g,startOfDay as D,startOfMonth as j,timeUnitSpan as k,toISODateTime as v,today as w,withPlaceholder as C,withTime as x}from"../../internal/date.js";import{cx as z,gapClasses as O}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */l.forwardRef(function PlDateTimePicker({value:T,defaultValue:P,onValueChange:M,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,shouldDisableTime:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium",timeStyle:"short"},hour12:J,showSeconds:K=!1,hourStep:L=1,minuteStep:Q=1,secondStep:U=1,placeholder:W,clearable:X=!1,showNowButton:Y=!0,closeOnSelect:Z=!1,labels:$,name:_,size:ee,color:te,density:le,readOnly:oe=!1,disabled:ne=!1,startIcon:ae,...se},ie){const re=o(),ce=A??re.locale,de=ee??re.size??"md",me=te??re.color??"primary",ue=le??re.density??"default",he=i($),pe=G??re.weekStartsOn??y(ce),fe=J??S(ce),[Se,be]=l.useState(P??null),ye=void 0!==T?T:Se,[ge,De]=l.useState(V??!1),je=N??ge,[ke,ve]=l.useState(()=>j(b(ye)?ye:I??w()));l.useEffect(()=>{je&&ve(j(b(ye)?ye:I??w()))},[je]);const setOpen=e=>{e&&(oe||ne)||(void 0===N&&De(e),B?.(e))},commit=e=>{void 0===T&&be(e),M?.(e)},we=l.useCallback((e,t)=>{const[l,o]=k(t,e),n=D(e).getTime();return!!(b(R)&&n+1e3*o<R.getTime())||!!(b(E)&&n+1e3*l>E.getTime())||(q?.(e,t)??!1)},[R,E,q]),Ce=new Date,xe=x(Ce,{seconds:K?Ce.getSeconds():0}),ze=f(xe,R,E)||(F?.(xe)??!1)||we(xe,"second"),Oe=l.useMemo(()=>C(h(ce,H),W),[ce,H,W]);return e(m,{...se,size:de,color:me,density:ue,readOnly:oe,disabled:ne,triggerRef:ie,startIcon:ae??e(r,{}),display:b(ye)?p(ye,ce,H):W??"",samples:Oe,empty:!b(ye),clearable:X,onClear:()=>commit(null),open:je,onOpenChange:setOpen,labels:he,name:_,formValue:b(ye)?v(ye,K):"",children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:z("flex items-stretch",O[de]),children:[e(a,{size:de,color:me,locale:ce,weekStartsOn:pe,month:ke,onMonthChange:ve,selected:[ye],onSelect:e=>{const t=u(b(ye)?g(e,ye):D(e),R,E,K);commit(t),ve(j(t)),Z&&setOpen(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:he,autoFocus:!0}),e(c,{}),e(s,{size:de,density:ue,locale:ce,value:b(ye)?ye:null,referenceDate:b(ye)?ye:w(),onChange:commit,hour12:fe,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:we,labels:he})]}),t(d,{size:de,children:[X?e(n,{variant:"ghost",size:de,color:me,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:he.clear}):null,Y?e(n,{variant:"ghost",size:de,color:me,density:"compact",disabled:ze,onClick:()=>{commit(xe),ve(j(xe))},children:he.now}):null,e(n,{variant:"solid",size:de,color:me,density:"compact",onClick:()=>setOpen(!1),children:he.done})]})]})})});

package/dist/components/drawer/PlDrawer.js

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

package/dist/components/empty/PlEmpty.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("m-0 font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("m-0 max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});