plass-ui 1.1.0 → 1.3.0

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

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

package/dist/components/confirm/PlConfirmProvider.js

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

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

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

package/dist/components/confirm/index.js

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

package/dist/components/container/PlContainer.js

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

package/dist/components/date-picker/PlDatePicker.d.ts

@@ -4,12 +4,36 @@ import { type PlassPickerShellProps } from '../../internal/picker.js';
 import type { PlassWeekday } from '../../types.js';
 /** The strings a picker says that `Intl` has no opinion about. */
 export type PlPickerLabels = PlassPickerLabels;
+/**
+ * The smallest unit the picker asks for.
+ *
+ * A birthday is a day, an expiry is a month and a model year is a year, and a
+ * control that makes someone answer a question it did not need the answer to —
+ * *which* day of December 2027 does this card expire? — is a control that will
+ * be answered wrongly.
+ */
+export type PlDatePickerPrecision = 'day' | 'month' | 'year';
 export interface PlDatePickerProps extends PlassPickerShellProps {
     /** The chosen day. Use with `onValueChange` for a controlled picker. */
     value?: Date | null;
     /** The day the picker starts on, for an uncontrolled one. */
     defaultValue?: Date | null;
     onValueChange?: (value: Date | null) => void;
+    /**
+     * How far down the picker goes: a day, a month or a year.
+     *
+     * The calendar opens on the grid for that unit and pressing a cell in it
+     * answers — a `month` picker never shows a day grid at all. The value is
+     * always a `Date`, normalised to the start of whatever was chosen: the 1st of
+     * the month, or the 1st of January.
+     *
+     * `minDate` and `maxDate` are then read at the same precision. A `minDate` of
+     * 15 July leaves July pickable on a `month` picker and hands back 1 July,
+     * because a bound on a control that returns a month is a bound on months.
+     * `shouldDisableDate` is day-granular and is not consulted at all.
+     * @default 'day'
+     */
+    precision?: PlDatePickerPrecision;
     /** Whether the calendar is open. Use with `onOpenChange` to control it. */
     open?: boolean;
     defaultOpen?: boolean;
@@ -35,6 +59,9 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
     /**
      * How the trigger writes the chosen date. Passed straight to `Intl`, so
      * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     *
+     * The default follows `precision`: a medium date, a long month and year, or a
+     * bare year.
      * @default { dateStyle: 'medium' }
      */
     format?: Intl.DateTimeFormatOptions;
@@ -42,13 +69,20 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
     placeholder?: React.ReactNode;
     /** Offers the × that empties the control. @default false */
     clearable?: boolean;
-    /** Offers the shortcut to today in the footer. @default true */
+    /**
+     * Offers the shortcut to today in the footer — to this month or this year on
+     * a picker whose `precision` says so. @default true
+     */
     showTodayButton?: boolean;
     /** Closes the popup as soon as a day is chosen. @default true */
     closeOnSelect?: boolean;
     /** The strings the picker says. Every one has an English default. */
     labels?: Partial<PlassPickerLabels>;
-    /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
+    /**
+     * Identifies the field when a form is submitted, as `YYYY-MM-DD` — or as
+     * `YYYY-MM` and `YYYY` at the two shorter precisions, which is what a native
+     * `<input type="month">` submits.
+     */
     name?: string;
 }
 /**
@@ -65,6 +99,11 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
  * its own — twelve months, then twelve years at a time. Any month of the year on
  * screen is two clicks; any year at all is three.
  *
+ * `precision` stops the drilling short. A card's expiry is a month and a model
+ * year is a year, and a control that makes someone answer a question it did not
+ * need the answer to is a control that will be answered wrongly — so a `month`
+ * picker's month grid is the last grid, and it has no day grid under it at all.
+ *
  * There is no typing into the trigger. Parsing a date out of free text is
  * locale-dependent in a way that cannot be done honestly without a date library,
  * and a field that understands `27/7/26` in one browser and not in the next is

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

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

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

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

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

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

package/dist/components/divider/PlDivider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{metaTextClasses as a,toLength as o}from"../../internal/styles.js";const i="[border-color:var(--p-rule-color)]",s={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},n={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:d,size:c="md",length:f,thickness:p,textAlign:h="center",className:m,style:u,children:x,...v},w){const b="vertical"===t,g=null!=x&&!1!==x&&""!==x,j={"--p-rule-color":d?`var(--plass-${d}-line)`:"var(--plass-border)","--p-rule":o(p)??"1px"},$=o(f),k={...j,...void 0===$?null:b?{height:$}:{width:$},...u};if(!g)return e(l,{ref:w,orientation:t,className:[b?"w-0 border-l [border-left-width:var(--p-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",i,m??""].filter(Boolean).join(" "),style:k,...v});const[N,y]=s[t][h],z=b?"w-0 border-l [border-left-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",b?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",n[c],m??""].filter(Boolean).join(" "),style:k,...v,children:[e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[c],b?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${y} ${i}`})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Separator as i}from"@base-ui/react/separator";import{metaTextClasses as a,toLength as s}from"../../internal/styles.js";const o="[border-color:var(--p-rule-color)]",n={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},d={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:c,size:f,length:p,thickness:h,textAlign:m="center",className:u,style:x,children:v,...w},b){const g=l(),j=f??g.size??"md",$="vertical"===t,k=null!=v&&!1!==v&&""!==v,N={"--p-rule-color":c?`var(--plass-${c}-line)`:"var(--plass-border)","--p-rule":s(h)??"1px"},y=s(p),z={...N,...void 0===y?null:$?{height:y}:{width:y},...x};if(!k)return e(i,{ref:b,orientation:t,className:[$?"w-0 border-s [border-inline-start-width:var(--p-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",o,u??""].filter(Boolean).join(" "),style:z,...w});const[B,D]=n[t][m],P=$?"w-0 border-s [border-inline-start-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(i,{ref:b,orientation:t,"aria-label":"string"==typeof v?v:void 0,className:["flex items-center",$?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",d[j],u??""].filter(Boolean).join(" "),style:z,...w,children:[e("span",{"aria-hidden":"true",className:`${P} ${B} ${o}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[j],$?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${P} ${D} ${o}`})]})});

package/dist/components/drawer/PlDrawer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import type { PlassSide, PlassStyleProps } from '../../types.js';
+import type { PlassPortalClassNames, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * How the panel relates to the page.
  *
@@ -26,6 +26,8 @@ export type PlDrawerMode = 'overlay' | 'inline';
  * is a decision worth offering.
  */
 export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassPortalClassNames;
     /**
      * Which edge the panel is attached to. Physical rather than logical, the way
      * `PlassSide` is everywhere: a drawer along the top of the window is along the
@@ -141,4 +143,4 @@ export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
  * focus to the trigger, and the inert page behind.
  */
-export declare function PlDrawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
+export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/PlDrawer.js

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

package/dist/components/empty/PlEmpty.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+export interface PlEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * The glyph or drawing above the words. Sized off `size`, so an icon set at
+     * `1em` fills it without being told a number.
+     */
+    icon?: React.ReactNode;
+    /** The one line that says what is not here. */
+    title?: React.ReactNode;
+    /** What to do about it. One or two sentences, never a paragraph. */
+    description?: React.ReactNode;
+    /** The way out — usually one `PlButton`. */
+    actions?: React.ReactNode;
+    /** @default 'md' */
+    size?: PlassSize;
+    /**
+     * The family the glyph takes.
+     *
+     * `secondary` by default, which is the whole difference between an empty
+     * state and an alert: nothing has gone wrong. Reach for `danger` when
+     * something has, and `success` for the end of a flow — which is what turns
+     * this into the "your order is confirmed" screen without a second component.
+     * @default 'secondary'
+     */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * The place where there is nothing.
+ *
+ * An empty list, a search that found nothing, a filter that excluded
+ * everything, a flow that has finished. All four are the same arrangement — a
+ * mark, a line, a sentence, a way out — which is why they are one component and
+ * not four, and why `color` is what tells them apart: `secondary` is "nothing
+ * here yet", `danger` is "something went wrong", `success` is "you are done".
+ *
+ * It **draws no surface**. An empty state is always inside something — a card,
+ * a table, a panel — and a sheet inside a sheet is two sheets. What it decides
+ * is the arrangement and the space around it.
+ *
+ * The one thing worth getting right is the **way out**. A screen that says
+ * "No projects" and stops is a dead end; the same screen with a "New project"
+ * button is the best moment in the whole flow to offer one.
+ */
+export declare const PlEmpty: React.ForwardRefExoticComponent<PlEmptyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty/PlEmpty.js

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

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

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

package/dist/components/empty/index.js

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

package/dist/components/file-picker/PlFilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{CloseIcon as l}from"../../internal/icons.js";import{controlTextLeadingClasses as t,disabledClasses as a,focusRingClasses as o,gapClasses as n,glassClasses as i,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,readOnlyFilterClasses as f,sheetTitleClasses as m,stackGapClasses as h,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";const b={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},y={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:i="glass",size:k="md",color:N="primary",density:j="default",elevation:$=0,accept:w,multiple:z=!1,maxSize:C,maxFiles:I,value:L,defaultValue:B,onFilesChange:D,onReject:F,label:M,description:_,error:W,invalid:S,title:P,hint:R,icon:T,showList:A=!0,removeLabel:V=e=>`Remove ${e}`,fullWidth:E=!0,disabled:O=!1,readOnly:q=!1,required:U=!1,name:G,id:H,className:Y,style:J,...K},Q){const X=s.useRef(null);s.useImperativeHandle(Q,()=>X.current);const[Z,ee]=s.useState(()=>[...B??[]]),re=s.useMemo(()=>L?[...L]:Z,[L,Z]),se=s.useRef(0),[le,te]=s.useState(!1),ae=c(W),oe=S??ae,ne=oe?"danger":N,ie=O||q,ce=s.useId(),de=s.useCallback(e=>{L||ee(e),D?.(e)},[D,L]),pe=s.useCallback(e=>{const r=[],s=[],l=z?I??Number.POSITIVE_INFINITY:1,t=z?re.length:0;for(const a of e)w&&!matchesAccept(a,w)?s.push({file:a,reason:"type"}):void 0!==C&&a.size>C?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[w,re.length,I,C,z]),ue=s.useCallback(e=>{const{kept:r,rejections:s}=pe(e);s.length>0&&F?.(s),r.length>0&&de(z?[...re,...r]:r)},[pe,de,re,z,F]),fe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",b[j][k],u[k],n[k],g,d,o,O?`${a[i]} border-2 border-dashed`:q?`${x[i]} ${f} cursor-default`:x[i],ie?"":y[i],le&&!ie?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",h[k],E?"flex w-full":"inline-flex",Y??""].filter(Boolean).join(" "),style:{...v(ne,$),...J},...K,children:[c(M)?e("span",{className:[p[k],"font-semibold",O?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{ie||(e.preventDefault(),se.current+=1,te(!0))},onDragOver:e=>{ie||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{ie||(se.current=Math.max(0,se.current-1),0===se.current&&te(!1))},onDrop:e=>{ie||(e.preventDefault(),se.current=0,te(!1),ue(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:H,disabled:O,"aria-describedby":c(_)||ae?ce:void 0,"aria-invalid":oe||void 0,className:fe,onClick:()=>{ie||X.current&&(X.current.value="",X.current.click())},children:[void 0===T?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):c(T)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:T}):null,e("span",{className:`font-semibold ${m[k]}`,children:P??"Drop files here, or click to browse"}),c(R)?e("span",{className:`text-(--plass-muted-fg) ${p[k]}`,children:R}):null]}),e("input",{ref:X,type:"file",name:G,accept:w,multiple:z,required:U&&0===re.length,disabled:ie,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ue(Array.from(e.target.files??[]))})]}),A&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${h[k]} m-0 list-none p-0`,children:re.map((s,a)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",u.xs,t[k],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${p[k]}`,children:formatFileSize(s.size)}),ie?null:e("button",{type:"button","aria-label":V(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",o].join(" "),onClick:()=>de(re.filter((e,r)=>r!==a)),children:e(l,{})})]},`${s.name}-${s.size}-${s.lastModified}-${a}`))}):null,c(_)&&!ae?e("span",{id:ce,className:`${p[k]} text-(--plass-muted-fg)`,children:_}):null,ae?e("span",{id:ce,className:`${p[k]} text-(--p-accent)`,children:W}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{CloseIcon as t}from"../../internal/icons.js";import{controlTextLeadingClasses as a,disabledClasses as o,focusRingClasses as n,gapClasses as i,glassClasses as c,hasContent as d,iconClasses as p,metaTextClasses as u,radiusClasses as f,readOnlyFilterClasses as m,sheetTitleClasses as h,stackGapClasses as v,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const x={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},y={solid:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},k={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:c="glass",size:N,color:j,density:$,elevation:w=0,accept:z,multiple:C=!1,maxSize:I,maxFiles:L,value:B,defaultValue:D,onFilesChange:F,onReject:M,label:_,description:W,error:S,invalid:P,title:R,hint:T,icon:A,showList:V=!0,removeLabel:E=e=>`Remove ${e}`,fullWidth:O=!0,disabled:q=!1,readOnly:U=!1,required:G=!1,name:H,id:Y,className:J,style:K,...Q},X){const Z=l(),ee=N??Z.size??"md",re=j??Z.color??"primary",se=$??Z.density??"default",le=s.useRef(null);s.useImperativeHandle(X,()=>le.current);const[te,ae]=s.useState(()=>[...D??[]]),oe=s.useMemo(()=>B?[...B]:te,[B,te]),ne=s.useRef(0),[ie,ce]=s.useState(!1),de=d(S),pe=P??de,ue=pe?"danger":re,fe=q||U,me=s.useId(),he=s.useCallback(e=>{B||ae(e),F?.(e)},[F,B]),ve=s.useCallback(e=>{const r=[],s=[],l=C?L??Number.POSITIVE_INFINITY:1,t=C?oe.length:0;for(const a of e)z&&!matchesAccept(a,z)?s.push({file:a,reason:"type"}):void 0!==I&&a.size>I?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[z,oe.length,L,I,C]),ge=s.useCallback(e=>{const{kept:r,rejections:s}=ve(e);s.length>0&&M?.(s),r.length>0&&he(C?[...oe,...r]:r)},[ve,he,oe,C,M]),be=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",x[se][ee],f[ee],i[ee],b,p,n,q?`${o[c]} border-2 border-dashed`:U?`${y[c]} ${m} cursor-default`:y[c],fe?"":k[c],ie&&!fe?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",v[ee],O?"flex w-full":"inline-flex",J??""].filter(Boolean).join(" "),style:{...g(ue,w),...K},...Q,children:[d(_)?e("span",{className:[u[ee],"font-semibold",q?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:_}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{fe||(e.preventDefault(),ne.current+=1,ce(!0))},onDragOver:e=>{fe||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{fe||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ce(!1))},onDrop:e=>{fe||(e.preventDefault(),ne.current=0,ce(!1),ge(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:Y,disabled:q,"aria-describedby":d(W)||de?me:void 0,"aria-invalid":pe||void 0,className:be,onClick:()=>{fe||le.current&&(le.current.value="",le.current.click())},children:[void 0===A?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):d(A)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:A}):null,e("span",{className:`font-semibold ${h[ee]}`,children:R??"Drop files here, or click to browse"}),d(T)?e("span",{className:`text-(--plass-muted-fg) ${u[ee]}`,children:T}):null]}),e("input",{ref:le,type:"file",name:H,accept:z,multiple:C,required:G&&0===oe.length,disabled:fe,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ge(Array.from(e.target.files??[]))})]}),V&&oe.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${v[ee]} m-0 list-none p-0`,children:oe.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",f.xs,a[ee],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${u[ee]}`,children:formatFileSize(s.size)}),fe?null:e("button",{type:"button","aria-label":E(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",n].join(" "),onClick:()=>he(oe.filter((e,r)=>r!==l)),children:e(t,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null,d(W)&&!de?e("span",{id:me,className:`${u[ee]} text-(--plass-muted-fg)`,children:W}):null,de?e("span",{id:me,className:`${u[ee]} text-(--p-accent)`,children:S}):null]})});

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useRender as r}from"@base-ui/react/use-render";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as o,cx as n,focusRingClasses as d,glassClasses as c,hasContent as p,iconSizeClasses as u,srOnlyClasses as f,transitionClasses as m}from"../../internal/styles.js";const g=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},b={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},h={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},x={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={solid:/* @__PURE__ */[c,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},N=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:i="md",color:o="primary",density:d="default",elevation:c=2,value:p,defaultValue:u=null,onValueChange:f,position:k="fixed",safeArea:z=!0,disabled:j=!1,label:P,render:C,className:A,style:R,children:F,...q},B){const[$,E]=s.useState(u),I=void 0!==p,L=I?p:$,O=s.useRef(null),S=s.useRef(null),V=s.useCallback(e=>{const t=O.current,a=S.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{V(!0)},[V,L,a,i,d,j,F]),s.useEffect(()=>{const e=O.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>V(!1));return t.observe(e),()=>t.disconnect()},[V]);const W=s.useCallback(e=>{I||E(e),f?.(e)},[I,f]),D=s.useMemo(()=>({value:L??null,change:W,size:i,disabled:j}),[L,W,i,j]),H=n("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",z?b[i]:v[i],y[k],A);return r({render:C??e("nav",{}),ref:B,props:{"aria-label":P,className:H,style:{...l(o,c,"solid"),...R},children:e(g.Provider,{value:D,children:t("div",{ref:O,className:n("pointer-events-auto relative inline-flex items-center rounded-full",w[a],h[d][i],x[d][i],m),children:[null!=L?e("span",{ref:S,"aria-hidden":"true",className:N}):null,F]})}),...q}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:l,href:c,disabled:v=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(g),k=v||N.disabled,z=null!==N.value&&N.value===r,j=n("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",i[N.size],o[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[p(l)?e("span",{className:n("flex shrink-0 items-center justify-center",u[N.size]),children:l}):null,p(h)?e("span",{className:f,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":k?"":void 0},press=e=>{k?e.preventDefault():(N.change(r),x?.(e))};return c?e("a",{ref:w,href:k?void 0:c,"aria-current":z?"page":void 0,"aria-disabled":k||void 0,...C,className:j,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:k,"aria-current":z?"page":void 0,...C,className:j,onClick:press,...y,children:P})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),b={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),I=l??E.size??"md",L=n??E.color??"primary",O=c??E.density??"default",[S,V]=s.useState(f),W=void 0!==u,D=W?u:S,H=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=H.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,D,a,I,O,P,q]),s.useEffect(()=>{const e=H.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{W||V(e),m?.(e)},[W,m]),J=s.useMemo(()=>({value:D??null,change:G,size:I,disabled:P}),[D,G,I,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[I]:b[I],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(L,p,"solid"),...F},children:e(v.Provider,{value:J,children:t("div",{ref:H,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[O][I],y[O][I],g),children:[null!=D?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(v),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});

package/dist/components/footer/PlFooter.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as o}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as s,sheetPaddingYClasses as i,sheetRestClasses as l,surfaceSlots as m,transitionClasses as n}from"../../internal/styles.js";const d=l,c={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},f={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:l="static",variant:x="glass",size:u="md",color:p="primary",density:w="default",elevation:y=0,divider:b=!0,maxWidth:v="none",padded:g=!0,label:h,render:j,className:k,style:z,children:N,...C},F){const{register:P}=r.useContext(o),R=r.useCallback(e=>{P("footer",e),"function"==typeof F?F(e):F&&(F.current=e)},[P,F]),W=a("w-full min-w-0",d[x],b?"border-t [border-color:var(--plass-divider)]":"",c[l],n,k);return t({render:j??e("footer",{}),ref:R,props:{"aria-label":h,className:W,style:{...m(p,y),...z},children:e("div",{className:a("w-full",g?a(s[w][u],i[w][u]):"","none"===v?"":a(f[v],"mx-auto")),children:N}),...C}})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as i,sheetPaddingYClasses as l,sheetRestClasses as m,surfaceSlots as n,transitionClasses as d}from"../../internal/styles.js";const c=m,f={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:m="static",variant:x="glass",size:p,color:y,density:w,elevation:b=0,divider:v=!0,maxWidth:j="none",padded:g=!0,label:h,render:z,className:k,style:N,children:C,...F},P){const R=t(),W=p??R.size??"md",q=y??R.color??"primary",A=w??R.density??"default",{register:B}=r.useContext(s),D=r.useCallback(e=>{B("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[B,P]),E=a("w-full min-w-0",c[x],v?"border-t [border-color:var(--plass-divider)]":"",f[m],d,k);return o({render:z??e("footer",{}),ref:D,props:{"aria-label":h,className:E,style:{...n(q,b),...N},children:e("div",{className:a("w-full",g?a(i[A][W],l[A][W]):"","none"===j?"":a(u[j],"mx-auto")),children:C}),...F}})});

package/dist/components/header/PlHeader.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{PlPageLayoutContext as t}from"../../internal/page-layout.js";import{cx as a,hasContent as n,sheetPaddingXClasses as l,sheetRestClasses as m,sheetSectionGapClasses as d,surfaceSlots as c,transitionClasses as o}from"../../internal/styles.js";const x={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},f={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},p={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},h=m,y={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},w={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},g={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */s.forwardRef(function PlHeader({brand:m,actions:v,align:b="start",position:j="sticky",variant:N="glass",size:k="md",color:z="primary",density:C="default",elevation:H=0,divider:P=!0,maxWidth:R="none",padded:W=!0,label:q,render:A,className:B,style:D,children:E,...F},G){const{register:I}=s.useContext(t),J=s.useCallback(e=>{I("header",e),"function"==typeof G?G(e):G&&(G.current=e)},[I,G]),K=a("w-full min-w-0",h[N],P?"border-b [border-color:var(--plass-divider)]":"",y[j],o,B);return i({render:A??e("header",{}),ref:J,props:{"aria-label":q,className:K,style:{...c(z,H),...D},children:r("div",{className:a("flex w-full items-center",x[k],f[k],p[k],W?l[C][k]:"","none"===R?"":a(u[R],"mx-auto")),children:[n(m)?e("div",{className:a("flex min-w-0 items-center",w[b],d[k]),children:m}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null,n(E)?e("div",{className:a(g[b],d[k]),children:E}):null,n(v)?e("div",{className:a("flex min-w-0 items-center justify-end",w[b],d[k]),children:v}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null]}),...F}})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as a}from"../../internal/page-layout.js";import{cx as n,hasContent as l,sheetPaddingXClasses as m,sheetRestClasses as d,sheetSectionGapClasses as c,surfaceSlots as o,transitionClasses as x}from"../../internal/styles.js";const f={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},p={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},u={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},y={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},h=d,w={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},g={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},v={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */s.forwardRef(function PlHeader({brand:d,actions:j,align:b="start",position:N="sticky",variant:k="glass",size:z,color:C,density:H,elevation:P=0,divider:R=!0,maxWidth:W="none",padded:q=!0,label:A,render:B,className:D,style:E,children:F,...G},I){const J=i(),K=z??J.size??"md",L=C??J.color??"primary",M=H??J.density??"default",{register:O}=s.useContext(a),Q=s.useCallback(e=>{O("header",e),"function"==typeof I?I(e):I&&(I.current=e)},[O,I]),S=n("w-full min-w-0",h[k],R?"border-b [border-color:var(--plass-divider)]":"",w[N],x,D);return t({render:B??e("header",{}),ref:Q,props:{"aria-label":A,className:S,style:{...o(L,P),...E},children:r("div",{className:n("flex w-full items-center",f[K],p[K],u[K],q?m[M][K]:"","none"===W?"":n(y[W],"mx-auto")),children:[l(d)?e("div",{className:n("flex min-w-0 items-center",g[b],c[K]),children:d}):"center"===b?e("div",{"aria-hidden":"true",className:g[b]}):null,l(F)?e("div",{className:n(v[b],c[K]),children:F}):null,l(j)?e("div",{className:n("flex min-w-0 items-center justify-end",g[b],c[K]),children:j}):"center"===b?e("div",{"aria-hidden":"true",className:g[b]}):null]}),...G}})});

package/dist/components/highlight/PlHighlight.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{transitionClasses as r}from"../../internal/styles.js";const t={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!l.test(t)&&!l.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:l,variant:i="solid",color:s="warning",caseSensitive:a=!1,wholeWord:c=!1,underline:p=!1,weight:u,className:d,style:f,children:g,...m},h){const x=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(l,a),[l,a]),b=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",t[i],p?"underline decoration-2 underline-offset-2":"",u?o[u]:"",r].filter(Boolean).join(" "),v=x?markNode(g,x,c,(n,r)=>e("mark",{className:b,children:n},r)):g;return e("span",{ref:h,className:d,style:{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-line":`var(--plass-${s}-line)`,...f},...m,children:v})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{transitionClasses as t}from"../../internal/styles.js";const o={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},l={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!i.test(t)&&!i.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:i,variant:s="solid",color:a,caseSensitive:c=!1,wholeWord:p=!1,underline:u=!1,weight:d,className:f,style:m,children:g,...h},x){const b=r(),v=a??b.color??"warning",y=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(i,c),[i,c]),k=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",o[s],u?"underline decoration-2 underline-offset-2":"",d?l[d]:"",t].filter(Boolean).join(" "),$=y?markNode(g,y,p,(n,r)=>e("mark",{className:k,children:n},r)):g;return e("span",{ref:x,className:f,style:{"--p-fill":`var(--plass-${v}-fill)`,"--p-on-solid":`var(--plass-${v}-on-solid)`,"--p-accent":`var(--plass-${v}-accent)`,"--p-soft":`var(--plass-${v}-soft)`,"--p-line":`var(--plass-${v}-line)`,...m},...h,children:$})});