plass-ui 1.1.0 → 1.3.0

package/dist/components/calendar/PlCalendar.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { type PlassPickerLabels } from '../../internal/calendar.js';
+import type { PlassColor, PlassElevation, PlassSize, PlassVariant, PlassWeekday } from '../../types.js';
+/** The smallest unit the calendar hands back. The same three a picker takes. */
+export type PlCalendarPrecision = 'day' | 'month' | 'year';
+export interface PlCalendarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onSelect'> {
+    /**
+     * What the surface is made of.
+     *
+     * `ghost` is the one to reach for when the calendar is already inside
+     * something that draws a sheet — a `PlCard`, a `PlPopover` — because a second
+     * bordered rectangle inside the first is a second rectangle.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 1 */
+    elevation?: PlassElevation;
+    /** The chosen day. Use with `onValueChange` for a controlled calendar. */
+    value?: Date | null;
+    /** The day it starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    /**
+     * The smallest unit this calendar hands back, and a **floor** rather than a
+     * starting view: at `month` the month grid is the last grid and pressing a
+     * cell in it answers, so there is no day grid under it at all. A card's
+     * expiry is a month, and a control that made somebody answer *which day of
+     * December 2027* is one that will be answered wrongly.
+     *
+     * The value is normalised to the start of what was chosen — the 1st of the
+     * month, the 1st of January — never whichever day the cursor was resting on.
+     * @default 'day'
+     */
+    precision?: PlCalendarPrecision;
+    /** The month on screen. Use with `onMonthChange` to control it. */
+    month?: Date;
+    /** The month it opens on, for an uncontrolled one. Defaults to the value's. */
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    /** Nothing before this day can be chosen. Read at the calendar's `precision`. */
+    minDate?: Date | null;
+    /** Nothing after it can be chosen. Read at the calendar's `precision`. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days — weekends, holidays, a booked date. Day-granular,
+     * so a `month` or `year` calendar never consults it.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * The BCP 47 tag the month names, the weekday initials and the first day of
+     * the week come from. The page's own locale by default.
+     */
+    locale?: string;
+    /**
+     * Which day the week starts on, as `Date` counts them — Sunday is `0`.
+     * Worked out from `locale` when it is not given.
+     */
+    weekStartsOn?: PlassWeekday;
+    /**
+     * Draws the leading and trailing days belonging to the neighbouring months.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /** Takes the focus on mount. Off, because a calendar in a page is not a popup. */
+    autoFocus?: boolean;
+    /**
+     * Greys the whole calendar out and takes it out of the tab order.
+     *
+     * There is no `readOnly` beside it, and that is not an omission: a read-only
+     * field still shows a value a reader can select and copy, and a calendar has
+     * nothing to copy — a grid whose every cell is inert *is* the disabled one.
+     * To block some days rather than all of them, use `shouldDisableDate`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Submits the value with a form, under this name. The spelling follows
+     * `precision`: `YYYY-MM-DD`, then `YYYY-MM` and `YYYY`, which is what the
+     * native inputs of the same shape submit.
+     */
+    name?: string;
+    /** The strings `Intl` has no opinion about — the buttons and the headings. */
+    labels?: Partial<PlassPickerLabels>;
+}
+/**
+ * A month, on the page rather than in a popup.
+ *
+ * It is the same grid a `PlDatePicker` opens — the three views, the roving tab
+ * stop, the arrow keys that step the month when they run off an edge — with the
+ * trigger and the popup taken away. That is the whole difference and it is the
+ * reason to have both: a picker is a field that happens to open a calendar, and
+ * this is a calendar that is not standing in for a field. A booking page, a
+ * dashboard's date rail and an availability view all want the grid *visible*,
+ * and none of them wants a text box above it.
+ *
+ * Because it is not a field it has no label, no description and no error line —
+ * put it in a `PlFieldset` if it needs one. What it does keep is `name`, so a
+ * plain form can submit what it holds.
+ */
+export declare const PlCalendar: React.ForwardRefExoticComponent<PlCalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/calendar/PlCalendar.js

@@ -0,0 +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{Calendar as l,usePickerLabels as n}from"../../internal/calendar.js";import{popupPaddingClasses as s}from"../../internal/picker.js";import{isValidDate as r,localeWeekStart as i,mergeDateAndTime as m,startOfDay as c,startOfMonth as d,today as u,toISODate as f,toISOMonth as h,toISOYear as p}from"../../internal/date.js";import{controlTextLeadingClasses as y,cx as D,disabledClasses as v,radiusClasses as j,sheetRestClasses as x,surfaceSlots as w}from"../../internal/styles.js";const S={day:f,month:h,year:p};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:f="glass",size:h,color:p,elevation:b=1,value:C,defaultValue:O,onValueChange:g,precision:k="day",month:z,defaultMonth:M,onMonthChange:F,minDate:N,maxDate:P,shouldDisableDate:V,locale:R,weekStartsOn:q,showOutsideDays:A=!0,autoFocus:B=!1,disabled:E=!1,name:G,labels:H,className:I,style:J,...K},L){const Q=o(),T=R??Q.locale,U=h??Q.size??"md",W=p??Q.color??"primary",X=n(H),Y=q??Q.weekStartsOn??i(T),[Z,$]=t.useState(O??null),_=void 0!==C?C:Z,[ee,ae]=t.useState(()=>d(r(_)?_:M??u())),te=z??ee,setMonth=e=>{void 0===z&&ae(e),F?.(e)};return a("div",{ref:L,inert:E||void 0,className:D("inline-flex flex-col",x[f],j[U],s[U],y[U],E?v[f]:"",I),style:{...w(W,b),...J},...K,children:[e(l,{size:U,color:W,locale:T,weekStartsOn:Y,month:te,onMonthChange:setMonth,precision:k,selected:[_],onSelect:e=>{const a=r(_)?m(e,_):c(e);void 0===C&&$(a),g?.(a),setMonth(d(a))},minDate:N,maxDate:P,shouldDisableDate:V,showOutsideDays:A,autoFocus:B,labels:X}),G?e("input",{type:"hidden",name:G,value:r(_)?S[k](_):""}):null]})});

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

@@ -0,0 +1,2 @@
+export { PlCalendar } from './PlCalendar.js';
+export type { PlCalendarPrecision, PlCalendarProps } from './PlCalendar.js';

package/dist/components/calendar/index.js

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

package/dist/components/card/PlCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as o,hasContent as t,metaTextClasses as n,radiusClasses as i,sheetBodyClasses as c,sheetHeaderGapClasses as d,sheetLineClasses as v,sheetPaddingXClasses as p,sheetPaddingYClasses as m,sheetRestClasses as f,sheetSectionGapClasses as h,sheetTitleClasses as u,surfaceSlots as g}from"../../internal/styles.js";const x=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:y="md",color:N="primary",density:$="default",elevation:j=1,title:w,subtitle:k,headerAction:B,footer:C,dividers:P=!1,padded:z=!0,interactive:A=!1,render:F,className:R,style:q,children:D,...E},G){const H=z?p[$][y]:"",I=z?m[$][y]:"",J=P?`${H} ${I}`:H,K=t(w)||t(k)||t(B),L=s(r,{children:[t(w)||t(k)?s("div",{className:`flex min-w-0 flex-1 flex-col ${d[y]}`,children:[t(w)?e("div",{className:`plass-title font-semibold ${u[y]}`,children:w}):null,t(k)?e("div",{className:`text-(--plass-muted-fg) ${n[y]}`,children:k}):null]}):null,t(B)?e("div",{className:"ml-auto shrink-0",children:B}):null]}),M=[K?{key:"header",className:"flex items-start gap-3",content:L}:null,t(D)?{key:"content",className:c[y],content:D}:null,t(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${c[y]}`,content:C}:null].filter(e=>null!==e),O=["flex flex-col",i[y],f[a],x,A?`${b[a]} ${o}`:"",P?"overflow-hidden":`${I} ${h[y]}`,R??""].filter(Boolean).join(" ");return l({render:F??e("div",{}),ref:G,props:{className:O,style:{...g(N,j),...q},...E,children:M.map((s,r)=>e("div",{className:[J,s.className,P&&r>0?v:""].filter(Boolean).join(" "),children:s.content},s.key))}})});
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:j,density:$,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=l(),J=N??I.size??"md",K=j??I.color??"primary",L=$??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title font-semibold ${g[J]}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${i[J]}`,children:z}):null]}):null,n(B)?e("div",{className:"ms-auto shrink-0",children:B}):null]}),U=[S?{key:"header",className:"flex items-start gap-3",content:T}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),V=["flex flex-col",c[J],h[a],y,F?`${b[a]} ${t}`:"",P?"overflow-hidden":`${O} ${u[J]}`,q??""].filter(Boolean).join(" ");return o({render:R??e("div",{}),ref:H,props:{className:V,style:{...x(K,w),...D},...G,children:U.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

package/dist/components/carousel/PlCarousel.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,radiusClasses as l,sheetRestClasses as i,srOnlyClasses as o,surfaceSlots as c,transitionClasses as u}from"../../internal/styles.js";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},f={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:m="glass",size:p="md",color:h="primary",density:v="default",elevation:b=0,value:w,defaultValue:g=0,onValueChange:x,loop:N=!0,autoPlay:y=!1,interval:k=5e3,arrows:C=!0,indicators:M=!0,label:j="Carousel",previousLabel:P="Previous slide",nextLabel:R="Next slide",slideLabel:I,className:L,style:S,children:$,..._},z){const E=I??((e,r)=>`Slide ${e} of ${r}`),V=t.Children.toArray($),B=V.length,[T,W]=t.useState(g),A=Math.min(Math.max(w??T,0),Math.max(B-1,0)),F=t.useRef(null),q=t.useRef([]),D=t.useRef(!1),G=t.useRef(!1),H=t.useRef(!1),[J,K]=t.useState(!1),O=t.useCallback((e,r=!1)=>{if(0===B)return;const t=N?(e%B+B)%B:Math.min(Math.max(e,0),B-1);D.current=r,void 0===w&&W(t),t!==A&&x?.(t)},[B,N,w,A,x]);t.useEffect(()=>{if(D.current)return void(D.current=!1);if(!G.current)return void(G.current=!0);q.current[A]?.scrollIntoView({block:"nearest",inline:"start"}),H.current=!0;const e=window.setTimeout(()=>{H.current=!1},700);return()=>window.clearTimeout(e)},[A]),t.useEffect(()=>{if(!y||J||B<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(A+1)},k);return()=>window.clearInterval(e)},[y,J,B,k,A,O]);const Q=A<=0,U=A>=B-1;return r("div",{ref:z,role:"region","aria-roledescription":"carousel","aria-label":j,className:s("flex flex-col",L),style:{...c(h,b),...S},onPointerEnter:()=>K(!0),onPointerLeave:()=>K(!1),onFocus:()=>K(!0),onBlur:()=>K(!1),..._,children:[r("div",{className:s("relative min-w-0 overflow-hidden",l[p],i[m],u),children:[e("div",{ref:F,tabIndex:0,role:"group","aria-label":j,className:s("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=F.current;if(H.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==A&&r>=0&&r<B&&O(r,!0)},children:V.map((r,t)=>e("div",{ref:e=>{q.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":E(t+1,B),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),C&&B>1?r("div",{className:s("pointer-events-none absolute inset-y-0 flex items-center",d[p]),children:[e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:P,disabled:!N&&Q,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(n,{})}),onClick:()=>O(A-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:R,disabled:!N&&U,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})}),onClick:()=>O(A+1)})]}):null]}),M&&B>1?e("div",{className:s("flex shrink-0 items-center justify-center pt-2",f[p].gap),children:V.map((r,t)=>e("button",{type:"button","aria-label":E(t+1,B),"aria-current":t===A?"true":void 0,className:s("cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",t===A?`${f[p].current} bg-(--p-accent)`:`${f[p].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>O(t)},t))}):null,e("span",{className:o,"aria-live":y?"off":"polite",children:B>0?E(A+1,B):""})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as a}from"../../internal/defaults.js";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{ChevronIcon as s}from"../../internal/icons.js";import{cx as l,radiusClasses as i,sheetRestClasses as o,srOnlyClasses as c,surfaceSlots as u,transitionClasses as d}from"../../internal/styles.js";const f={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},m={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:p="glass",size:h,color:v,density:b,elevation:w=0,value:g,defaultValue:x=0,onValueChange:y,loop:N=!0,autoPlay:k=!1,interval:C=5e3,arrows:j=!0,indicators:M=!0,label:P="Carousel",previousLabel:R="Previous slide",nextLabel:I="Next slide",slideLabel:L,className:z,style:S,children:$,..._},E){const V=a(),B=h??V.size??"md",T=v??V.color??"primary",W=b??V.density??"default",A=L??((e,r)=>`Slide ${e} of ${r}`),F=t.Children.toArray($),q=F.length,[D,G]=t.useState(x),H=Math.min(Math.max(g??D,0),Math.max(q-1,0)),J=t.useRef(null),K=t.useRef([]),O=t.useRef(!1),Q=t.useRef(!1),U=t.useRef(!1),[X,Y]=t.useState(!1),Z=t.useCallback((e,r=!1)=>{if(0===q)return;const t=N?(e%q+q)%q:Math.min(Math.max(e,0),q-1);O.current=r,void 0===g&&G(t),t!==H&&y?.(t)},[q,N,g,H,y]);t.useEffect(()=>{if(O.current)return void(O.current=!1);if(!Q.current)return void(Q.current=!0);K.current[H]?.scrollIntoView({block:"nearest",inline:"start"}),U.current=!0;const e=window.setTimeout(()=>{U.current=!1},700);return()=>window.clearTimeout(e)},[H]),t.useEffect(()=>{if(!k||X||q<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||Z(H+1)},C);return()=>window.clearInterval(e)},[k,X,q,C,H,Z]);const ee=H<=0,re=H>=q-1;return r("div",{ref:E,role:"region","aria-roledescription":"carousel","aria-label":P,className:l("flex flex-col",z),style:{...u(T,w),...S},onPointerEnter:()=>Y(!0),onPointerLeave:()=>Y(!1),onFocus:()=>Y(!0),onBlur:()=>Y(!1),..._,children:[r("div",{className:l("relative min-w-0 overflow-hidden",i[B],o[p],d),children:[e("div",{ref:J,tabIndex:0,role:"group","aria-label":P,className:l("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=J.current;if(U.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==H&&r>=0&&r<q&&Z(r,!0)},children:F.map((r,t)=>e("div",{ref:e=>{K.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":A(t+1,q),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),j&&q>1?r("div",{className:l("pointer-events-none absolute inset-y-0 flex items-center",f[B]),children:[e(n,{variant:"glass",size:B,color:T,density:W,elevation:1,label:R,disabled:!N&&ee,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(s,{})}),onClick:()=>Z(H-1)}),e("span",{className:"flex-1"}),e(n,{variant:"glass",size:B,color:T,density:W,elevation:1,label:I,disabled:!N&&re,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(s,{})}),onClick:()=>Z(H+1)})]}):null]}),M&&q>1?e("div",{className:l("flex shrink-0 items-center justify-center pt-2",m[B].gap),children:F.map((r,t)=>e("button",{type:"button","aria-label":A(t+1,q),"aria-current":t===H?"true":void 0,className:l("cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",t===H?`${m[B].current} bg-(--p-accent)`:`${m[B].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>Z(t)},t))}):null,e("span",{className:c,"aria-live":k?"off":"polite",children:q>0?A(H+1,q):""})]})});

package/dist/components/chat-bubble/PlChatBubble.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{CheckIcon as a,ClockIcon as r,LinkIcon as n,severityIcon as i}from"../../internal/icons.js";import{controlSlots as t,focusRingClasses as o,glassClasses as d,hasContent as c,metaTextClasses as p,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as v,srOnlyClasses as f,transitionClasses as g}from"../../internal/styles.js";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const y={sending:e(r,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */i("danger")},k={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},w={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},N=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",o].join(" "),j=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:r,avatar:n,status:i,statusLabel:o,typing:d=!1,typingLabel:N="Typing…",media:_,preview:C,actions:L,variant:D="glass",size:B="md",color:z="primary",density:P="default",elevation:T=0,className:I,style:R,children:S,...W},M){const $="end"===s,q=c(a)||c(r),A=d||c(S)||Boolean(C),E=["flex min-w-0 flex-col overflow-hidden",m[B],h[s],b[D],g].join(" ");return l("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",$?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...t(z,T,D),...R},...W,children:[c(n)?e("div",{className:"shrink-0",children:n}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[B],$?"items-end":"items-start"].join(" "),children:[q?l("div",{className:`flex items-baseline gap-2 ${p[B]}`,children:[c(a)?e("span",{className:"font-semibold",children:a}):null,c(r)?e("span",{className:"text-(--plass-muted-fg)",children:r}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+($?"flex-row-reverse":""),children:[l("div",{className:E,children:[c(_)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:_}):null,A?l("div",{className:[x[P][B],"flex min-w-0 flex-col gap-2",u[B]].join(" "),children:[d?e(TypingDots,{label:N}):c(S)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:S}):null,C?e(LinkPreview,{preview:C}):null]}):null]}),c(L)?e("div",{className:j,children:L}):null]}),i?l("div",{className:["flex items-center gap-1",p[B],w[i],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[y[i],e("span",{className:f,children:o??k[i]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:f,children:s})]})}function LinkPreview({preview:s}){const{url:a,title:r,description:i,image:t,site:o,newTab:d=!1}=s;return l("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:N,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[c(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(n,{}),e("span",{className:"truncate",children:o})]}):null,c(r)?e("span",{className:"font-semibold",children:r}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{CheckIcon as a,ClockIcon as n,LinkIcon as i,severityIcon as t}from"../../internal/icons.js";import{controlSlots as o,focusRingClasses as d,glassClasses as c,hasContent as p,metaTextClasses as m,radiusClasses as u,sheetBodyClasses as f,sheetHeaderGapClasses as v,srOnlyClasses as g,transitionClasses as x}from"../../internal/styles.js";const h={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},b={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const k={sending:e(n,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */t("danger")},w={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},N={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},j=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",d].join(" "),_=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:n,avatar:i,status:t,statusLabel:d,typing:c=!1,typingLabel:j="Typing…",media:C,preview:L,actions:D,variant:z="glass",size:B,color:P,density:T,elevation:I=0,className:R,style:S,children:W,...M},$){const q=r(),A=B??q.size??"md",E=P??q.color??"primary",F=T??q.density??"default",G="end"===s,H=p(a)||p(n),J=c||p(W)||Boolean(L),K=["flex min-w-0 flex-col overflow-hidden",u[A],b[s],y[z],x].join(" ");return l("div",{ref:$,className:["group/bubble flex w-full items-start gap-2",G?"flex-row-reverse":"",R??""].filter(Boolean).join(" "),style:{...o(E,I,z),...S},...M,children:[p(i)?e("div",{className:"shrink-0",children:i}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[A],G?"items-end":"items-start"].join(" "),children:[H?l("div",{className:`flex items-baseline gap-2 ${m[A]}`,children:[p(a)?e("span",{className:"font-semibold",children:a}):null,p(n)?e("span",{className:"text-(--plass-muted-fg)",children:n}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+(G?"flex-row-reverse":""),children:[l("div",{className:K,children:[p(C)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:C}):null,J?l("div",{className:[h[F][A],"flex min-w-0 flex-col gap-2",f[A]].join(" "),children:[c?e(TypingDots,{label:j}):p(W)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:W}):null,L?e(LinkPreview,{preview:L}):null]}):null]}),p(D)?e("div",{className:_,children:D}):null]}),t?l("div",{className:["flex items-center gap-1",m[A],N[t],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[k[t],e("span",{className:g,children:d??w[t]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:g,children:s})]})}function LinkPreview({preview:s}){const{url:r,title:a,description:n,image:t,site:o,newTab:d=!1}=s;return l("a",{href:r,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:j,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[p(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(i,{}),e("span",{className:"truncate",children:o})]}):null,p(a)?e("span",{className:"font-semibold",children:a}):null,p(n)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:n}):null]})]})}

package/dist/components/checkbox/PlCheckbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
-import type { PlassColor, PlassSize } from '../../types.js';
+import type { PlassColor, PlassFieldClassNames, PlassSize } from '../../types.js';
 /**
  * Base UI's own props, minus the ones this component owns: `className` and
  * `style` land on the field wrapper rather than on the tick, and `render` would
@@ -8,6 +8,8 @@ import type { PlassColor, PlassSize } from '../../types.js';
  */
 type BaseCheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUICheckbox.Root>, 'className' | 'style' | 'render' | 'children'>;
 export interface PlCheckboxProps extends BaseCheckboxProps {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/checkbox/PlCheckbox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as o}from"@base-ui/react/field";import{controlSlots as s,focusRingClasses as l,glassClasses as i,hasContent as n,metaTextClasses as c,tickRadiusClasses as d,tickRowTextClasses as p,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,l].join(" "),f=/* @__PURE__ */[i,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),k=/* @__PURE__ */[i,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),b=/* @__PURE__ */[i,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */r.forwardRef(function PlCheckbox({size:r="md",color:l="primary",label:i,description:m,error:g,invalid:x,disabled:v=!1,readOnly:j=!1,className:N,style:y,...C},w){const M=n(g),z=x??M,L=z?"danger":l,$=[u,h[r],d[r],v?b:j?k:f].join(" ");return a(o.Root,{disabled:v,invalid:z,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...s(L,0,"solid"),...y},children:[a("div",{className:`flex items-start gap-2 ${p[r]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:w,className:$,disabled:v,readOnly:j,...C,children:e(t.Indicator,{className:"flex size-[70%] items-center justify-center",children:C.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),i||m?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[i?e(o.Label,{className:v?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:i}):null,m?e(o.Description,{className:`${c[r]} text-(--plass-muted-fg)`,children:m}):null]}):null]}),e(o.Error,M?{match:!0,className:`${c[r]} text-(--p-accent)`,children:g}:{className:`${c[r]} text-(--p-accent)`})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Checkbox as o}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as l,cx as i,focusRingClasses as n,glassClasses as c,hasContent as d,metaTextClasses as p,tickRadiusClasses as h,tickRowTextClasses as m,tickSizeClasses as u,transitionClasses as f}from"../../internal/styles.js";const b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,n].join(" "),k=/* @__PURE__ */[c,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),g=/* @__PURE__ */[c,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),x=/* @__PURE__ */[c,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:n,label:c,description:f,error:v,invalid:N,disabled:j=!1,readOnly:y=!1,className:C,classNames:w,style:M,...z},L){const B=t(),D=a??B.size??"md",R=n??B.color??"primary",O=d(v),P=N??O,W=P?"danger":R,E=i(b,u[D],h[D],j?x:y?g:k,w?.control);return r(s.Root,{disabled:j,invalid:P,className:["inline-flex flex-col gap-1 align-top",C??""].filter(Boolean).join(" "),style:{...l(W,0,"solid"),...M},children:[r("div",{className:`flex items-start gap-2 ${m[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:L,className:E,disabled:j,readOnly:y,...z,children:e(o.Indicator,{className:"flex size-[70%] items-center justify-center",children:z.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||f?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:i(j?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",w?.label),children:c}):null,f?e(s.Description,{className:i(p[D],"text-(--plass-muted-fg)",w?.description),children:f}):null]}):null]}),e(s.Error,O?{match:!0,className:i(p[D],"text-(--p-accent)",w?.error),children:v}:{className:i(p[D],"text-(--p-accent)",w?.error)})]})});

package/dist/components/chip/PlChip.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as o}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as n,controlSlots as r,controlTextClasses as i,disabledClasses as c,focusRingClasses as p,gapClasses as d,glassClasses as m,hasContent as g,iconClasses as h,paddingXClasses as b,radiusClasses as f,transitionClasses as u}from"../../internal/styles.js";const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[m,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},j={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},w={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},y=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,h].join(" "),k=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",p].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:p="md",color:m="primary",density:h="default",elevation:u=0,startIcon:N,endIcon:C,count:$,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:z,style:D,children:F,onClick:L,...q},A){const E=Boolean(L)&&!R,G=v[p],H=b[h][G],J=[y,n[G],i[G],d[G],f[G],R?c[t]:x[t],!R&&P?j[t]:"",E?w[t]:"",E?"ps-0":H,B?"pe-1":E?"pe-0":"",z??""].filter(Boolean).join(" "),K=l(s,{children:[N,g(F)?e("span",{className:"min-w-0 truncate",children:F}):null,C,g($)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:$}):null]});return l("span",{ref:A,className:J,style:{...r(m,u,t),...D},"aria-disabled":!(!R||E)||void 0,...q,children:[E?e("button",{type:"button","aria-pressed":P,className:`${k} ${d[G]} ${H}`,onClick:L,children:K}):K,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(o,{})}):null]})});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as n}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as r,controlSlots as i,controlTextClasses as c,disabledClasses as p,focusRingClasses as d,gapClasses as m,glassClasses as g,hasContent as h,iconClasses as b,paddingXClasses as f,radiusClasses as u,transitionClasses as v}from"../../internal/styles.js";const x={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},j={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[g,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},w={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},y={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},k=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",v,b].join(" "),N=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",d].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:d,color:g,density:b,elevation:v=0,startIcon:C,endIcon:$,count:z,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:D,style:F,children:L,onClick:q,...A},E){const G=o(),H=d??G.size??"md",J=g??G.color??"primary",K=b??G.density??"default",M=Boolean(q)&&!R,O=x[H],Q=f[K][O],S=[k,r[O],c[O],m[O],u[O],R?p[t]:j[t],!R&&P?w[t]:"",M?y[t]:"",M?"ps-0":Q,B?"pe-1":M?"pe-0":"",D??""].filter(Boolean).join(" "),T=l(s,{children:[C,h(L)?e("span",{className:"min-w-0 truncate",children:L}):null,$,h(z)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:z}):null]});return l("span",{ref:E,className:S,style:{...i(J,v,t),...F},"aria-disabled":!(!R||M)||void 0,...A,children:[M?e("button",{type:"button","aria-pressed":P,className:`${N} ${m[O]} ${Q}`,onClick:q,children:T}):T,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(n,{})}):null]})});

package/dist/components/collapsible/PlCollapsible.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as n,focusRingInsetClasses as i,gapClasses as r,hasContent as p,iconClasses as d,metaTextClasses as o,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as u,sheetRestClasses as x,sheetTitleClasses as b,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";const v={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},w={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:y="md",color:j="primary",density:k="default",elevation:C=0,open:O,defaultOpen:_=!1,onOpenChange:P,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:z=!1,padded:I=!0,hiddenUntilFound:q=!1,keepMounted:A=!1,className:B,style:D,children:E,...G},H){const J=h[k][y],K=u[k][y];return l(s.Root,{ref:H,open:O,defaultOpen:_,onOpenChange:e=>P?.(e),disabled:z,className:n("flex flex-col overflow-hidden",c[y],x[t],N,B),style:{...g(j,C),...D},...G,children:[U?e(s.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(s.Trigger,{className:n("flex min-w-0 flex-1 cursor-pointer items-center text-start",J,K,r[y],N,d,i,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[p(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:n("flex min-w-0 flex-1 flex-col",f[y]),children:[p(F)?e("span",{className:n("plass-title truncate font-semibold",b[y]),children:F}):null,p(M)?e("span",{className:n("truncate text-(--plass-muted-fg)",o[y]),children:M}):null]}),$?e("span",{className:n("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(a,{})}):null]}),p(T)?e("span",{className:n("flex shrink-0 items-center",J),children:T}):null]}),e(s.Panel,{hiddenUntilFound:q,keepMounted:A,className:n("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:n("min-w-0 text-(--plass-muted-fg)",m[y],I?J:"",I?U?`${v[k][y]} ${w[k][y]}`:w[k][y]:""),children:E})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as p,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as h,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:z,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:I=!1,padded:q=!0,hiddenUntilFound:A=!1,keepMounted:B=!1,className:D,style:E,children:G,...H},J){const K=s(),L=j??K.size??"md",Q=k??K.color??"primary",S=C??K.density??"default",V=u[S][L],W=x[S][L];return l(a.Root,{ref:J,open:_,defaultOpen:P,onOpenChange:e=>z?.(e),disabled:I,className:i("flex flex-col overflow-hidden",m[L],b[t],v,D),style:{...N(Q,O),...E},...H,children:[U?e(a.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",V,W,p[L],v,d,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[o(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:i("flex min-w-0 flex-1 flex-col",h[L]),children:[o(F)?e("span",{className:i("plass-title truncate font-semibold",g[L]),children:F}):null,o(M)?e("span",{className:i("truncate text-(--plass-muted-fg)",c[L]),children:M}):null]}),$?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),o(T)?e("span",{className:i("flex shrink-0 items-center",V),children:T}):null]}),e(a.Panel,{hiddenUntilFound:A,keepMounted:B,className:i("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[L],q?V:"",q?U?`${w[S][L]} ${y[S][L]}`:y[S][L]:""),children:G})})]})});

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types a PlSelect submits, and
  * for the same reason: a form control's value is what a form sends, and every
@@ -25,6 +25,17 @@ export interface PlComboboxOption {
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
 export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * The options, as data — the same shape PlSelect takes, and for the same
      * reason: what a caller has is almost always an array already.
@@ -136,5 +147,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/PlCombobox.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassStyleProps } from '../../types.js';
+import type { PlassPortalClassNames, PlassStyleProps } from '../../types.js';
 /** One thing the palette can do. */
 export interface PlCommandItem {
     /** What identifies the command. */
@@ -63,6 +63,12 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
     emptyMessage?: React.ReactNode;
     /** The accessible name of the dialog, which has no visible title. @default 'Command palette' */
     label?: string;
+    /** Classes on the sheet, alongside the component's own. */
+    className?: string;
+    /** Inline styles on the sheet, applied over the tokens it sets. */
+    style?: React.CSSProperties;
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassPortalClassNames;
 }
 /**
  * Everything an application can do, behind one field.
@@ -80,4 +86,4 @@ export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'c
  * its Dialog owns the sheet, the scrim, the focus trap and returning the focus
  * to wherever the reader was.
  */
-export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size, color, density }: PlCommandPaletteProps): React.ReactElement;
+export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size: sizeProp, color: colorProp, density: densityProp, className, classNames, style }: PlCommandPaletteProps): React.ReactElement;

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

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