plass-ui 1.2.0 → 1.4.0

package/dist/components/menu/PlMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{Menu as n}from"@base-ui/react/menu";import{ContextMenu as t}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{controlTextLeadingClasses as d,cx as p,gapClasses as u,glassClasses as m,hasContent as h,iconClasses as x,metaTextClasses as f,radiusClasses as y,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const C=/* @__PURE__ */[m,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},v={xs:y.xs,sm:y.xs,md:y.sm,lg:y.sm,xl:y.md};function rowClasses(e,s,l,a){return p("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",N[s][e],v[e],u[e],d[e],b,x,"data-[highlighted]:bg-(--p-soft-hover)","data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",a)}const k="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return p("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",f[e])}function RowBody({children:l,description:a,size:n}){return h(a)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:p("truncate text-(--plass-muted-fg)",f[n]),children:a})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:r,target:i,startIcon:c,endIcon:d,shortcut:u,description:m,color:x,closeOnClick:f=!0,disabled:y=!1,label:b,children:C,className:N,style:v}){const{size:w,density:O}=a.useContext(o),P=s(l,{children:[h(c)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:c}):null,e(RowBody,{description:m,size:w,children:C}),h(d)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:d}):null,h(u)?e("span",{className:shortcutClasses(w),children:u}):null]}),z=x?g(x,0):void 0,I=z||v?{...z,...v}:void 0;return void 0!==r?e(n.LinkItem,{href:r,target:i,label:b,closeOnClick:f,onClick:t,className:rowClasses(w,O,Boolean(x),N),style:I,children:P}):e(n.Item,{disabled:y,label:b,closeOnClick:f,onClick:t,className:rowClasses(w,O,Boolean(x),N),style:I,children:P})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:x=!1,disabled:f=!1,label:y,children:b,className:C,style:N}){const{size:v,density:w}=a.useContext(o),O=m?g(m,0):void 0;return s(n.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>i?.(e),disabled:f,label:y,closeOnClick:x,className:rowClasses(v,w,Boolean(m),C),style:O||N?{...O,...N}:void 0,children:[e("span",{className:p(k,"text-(--p-accent)"),children:e(n.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(RowBody,{description:u,size:v,children:b}),h(c)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:c}):null,h(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:a,disabled:t=!1,children:o,className:r,style:i}){return e(n.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>a?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:x,children:f,className:y,style:b}){const{size:C,density:N}=a.useContext(o),v=d?g(d,0):void 0;return s(n.RadioItem,{value:l,disabled:m,label:x,closeOnClick:u,className:rowClasses(C,N,Boolean(d),y),style:v||b?{...v,...b}:void 0,children:[e("span",{className:p(k,"text-(--p-accent)"),children:e(n.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:i,size:C,children:f}),h(t)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:t}):null,h(r)?e("span",{className:shortcutClasses(C),children:r}):null]})}export function PlMenuGroup({label:l,children:t,className:r,style:i}){const{size:c,density:d}=a.useContext(o);return s(n.Group,{className:r,style:i,children:[h(l)?e(n.GroupLabel,{className:p(N[d][c],f[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(n.Separator,{className:p("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:r=!1,side:c="right",sideOffset:u=4,children:m,className:x,style:f}){const{size:b,density:N,color:v}=a.useContext(o);return s(n.SubmenuRoot,{children:[s(n.SubmenuTrigger,{disabled:r,className:rowClasses(b,N,!1),children:[h(t)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:p(k,"text-(--plass-muted-fg) -rotate-90"),children:e(i,{})})]}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:c,sideOffset:u,align:"start",children:e(n.Popup,{className:p(C,y[b],d[b],x),style:{...g(v,3),...f},children:m})})})]})}export function PlMenu({size:l="md",color:t="primary",density:r="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:h="bottom",align:x="start",sideOffset:f=6,modal:b=!0,openOnHover:N=!1,loopFocus:v=!0,disabled:k=!1,className:w,style:O,children:P}){const z=a.useMemo(()=>({size:l,color:t,density:r}),[l,t,r]);return e(o.Provider,{value:z,children:s(n.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:b,loopFocus:v,disabled:k,children:[i?e(n.Trigger,{render:i,openOnHover:N,disabled:k}):null,e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:h,align:x,sideOffset:f,children:e(n.Popup,{className:p(C,y[l],d[l],w),style:{...g(t,3),...O},children:P})})})]})})}export function PlContextMenu({size:l="md",color:n="primary",density:r="default",content:i,children:c,open:u,defaultOpen:m,onOpenChange:h,loopFocus:x=!0,disabled:f=!1,className:b,style:N}){const v=a.useMemo(()=>({size:l,color:n,density:r}),[l,n,r]);return e(o.Provider,{value:v,children:s(t.Root,{open:u,defaultOpen:m,onOpenChange:e=>h?.(e),loopFocus:x,disabled:f,children:[e(t.Trigger,{children:c}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(t.Popup,{className:p(C,y[l],d[l],b),style:{...g(n,3),...N},children:i})})})]})})}
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Menu as t}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{MenuContext as r}from"../../internal/menu.js";import{CheckIcon as i,ChevronIcon as c,DotIcon as d}from"../../internal/icons.js";import{controlTextLeadingClasses as p,cx as u,gapClasses as m,glassClasses as h,hasContent as x,iconClasses as f,metaTextClasses as y,radiusClasses as g,surfaceSlots as b,transitionClasses as C}from"../../internal/styles.js";const N=/* @__PURE__ */[h,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},k={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function rowClasses(e,s,l,n){return u("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",v[s][e],k[e],m[e],p[e],C,f,"data-[highlighted]:bg-(--p-soft-hover)","data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const w="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return u("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",y[e])}function RowBody({children:l,description:n,size:a}){return x(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:u("truncate text-(--plass-muted-fg)",y[a]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:a,href:o,target:i,startIcon:c,endIcon:d,shortcut:p,description:m,color:h,closeOnClick:f=!0,disabled:y=!1,label:g,children:C,className:N,style:v}){const{size:k,density:z}=n.useContext(r),O=s(l,{children:[x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,e(RowBody,{description:m,size:k,children:C}),x(d)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:d}):null,x(p)?e("span",{className:shortcutClasses(k),children:p}):null]}),P=h?b(h,0):void 0,I=P||v?{...P,...v}:void 0;return void 0!==o?e(t.LinkItem,{href:o,target:i,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O}):e(t.Item,{disabled:y,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O})}export function PlMenuCheckboxItem({checked:l,defaultChecked:a,onCheckedChange:o,endIcon:c,shortcut:d,description:p,color:m,closeOnClick:h=!1,disabled:f=!1,label:y,children:g,className:C,style:N}){const{size:v,density:k}=n.useContext(r),z=m?b(m,0):void 0;return s(t.CheckboxItem,{checked:l,defaultChecked:a,onCheckedChange:e=>o?.(e),disabled:f,label:y,closeOnClick:h,className:rowClasses(v,k,Boolean(m),C),style:z||N?{...z,...N}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(i,{})})}),e(RowBody,{description:p,size:v,children:g}),x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,x(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:a=!1,children:o,className:r,style:i}){return e(t.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:a,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:a,shortcut:o,description:i,color:c,closeOnClick:p=!1,disabled:m=!1,label:h,children:f,className:y,style:g}){const{size:C,density:N}=n.useContext(r),v=c?b(c,0):void 0;return s(t.RadioItem,{value:l,disabled:m,label:h,closeOnClick:p,className:rowClasses(C,N,Boolean(c),y),style:v||g?{...v,...g}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.RadioItemIndicator,{className:"flex items-center justify-center",children:e(d,{})})}),e(RowBody,{description:i,size:C,children:f}),x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,x(o)?e("span",{className:shortcutClasses(C),children:o}):null]})}export function PlMenuGroup({label:l,children:a,className:o,style:i}){const{size:c,density:d}=n.useContext(r);return s(t.Group,{className:o,style:i,children:[x(l)?e(t.GroupLabel,{className:u(v[d][c],y[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,a]})}export function PlMenuSeparator({className:s,...l}){return e(t.Separator,{className:u("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:a,disabled:o=!1,side:i="right",sideOffset:d=4,children:m,className:h,style:f}){const{size:y,density:C,color:v}=n.useContext(r);return s(t.SubmenuRoot,{children:[s(t.SubmenuTrigger,{disabled:o,className:rowClasses(y,C,!1),children:[x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:u(w,"text-(--plass-muted-fg) -rotate-90"),children:e(c,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:i,sideOffset:d,align:"start",children:e(t.Popup,{className:u(N,g[y],p[y],h),style:{...b(v,3),...f},children:m})})})]})}export function PlMenu({size:l,color:o,density:i,trigger:c,open:d,defaultOpen:m,onOpenChange:h,side:x="bottom",align:f="start",sideOffset:y=6,modal:C=!0,openOnHover:v=!1,loopFocus:k=!0,disabled:w=!1,className:z,style:O,children:P}){const I=a(),M=l??I.size??"md",R=o??I.color??"primary",j=i??I.density??"default",B=n.useMemo(()=>({size:M,color:R,density:j}),[M,R,j]);return e(r.Provider,{value:B,children:s(t.Root,{open:d,defaultOpen:m,onOpenChange:e=>h?.(e),modal:C,loopFocus:k,disabled:w,children:[c?e(t.Trigger,{render:c,openOnHover:v,disabled:w}):null,e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:x,align:f,sideOffset:y,children:e(t.Popup,{className:u(N,g[M],p[M],z),style:{...b(R,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:t,density:i,content:c,children:d,open:m,defaultOpen:h,onOpenChange:x,loopFocus:f=!0,disabled:y=!1,className:C,style:v}){const k=a(),w=l??k.size??"md",z=t??k.color??"primary",O=i??k.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(r.Provider,{value:P,children:s(o.Root,{open:m,defaultOpen:h,onOpenChange:e=>x?.(e),loopFocus:f,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:u(N,g[w],p[w],C),style:{...b(z,3),...v},children:c})})})]})})}

package/dist/components/menubar/PlMenubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{Menubar as o}from"@base-ui/react/menubar";import{PlMenu as r}from"../menu/PlMenu.js";import{MenuContext as n}from"../../internal/menu.js";import{controlTextClasses as a,cx as i,gapClasses as l,hasContent as c,iconClasses as p,paddingXClasses as d,radiusClasses as u,transitionClasses as m}from"../../internal/styles.js";const f={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},b=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,p,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:p,disabled:m=!1,children:h,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(n);return t(r,{size:g,color:y,density:j,disabled:m,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:m,className:i(b,f[g],a[g],l[g],d["default"===j?"compact":j][g],u[g],v),style:x,children:[c(p)?p:null,o]}),children:h})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e="md",color:r="primary",density:a="default",orientation:c="horizontal",modal:p=!0,loopFocus:d=!0,disabled:u=!1,className:m,style:f,children:b,...h},v){const x=s.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return t(n.Provider,{value:x,children:t(o,{ref:v,orientation:c,modal:p,loopFocus:d,disabled:u,className:i("flex items-center","vertical"===c?"flex-col items-stretch":"flex-row",l[e],m),style:{"--p-soft":`var(--plass-${r}-soft)`,"--p-soft-hover":`var(--plass-${r}-soft-hover)`,"--p-accent":`var(--plass-${r}-accent)`,"--p-ring":`var(--plass-${r}-ring)`,...f},...h,children:b})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});

package/dist/components/meter/PlMeter.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize, PlassThreshold } from '../../types.js';
+/**
+ * Where a band starts, and what the bar is made of from there up.
+ *
+ * The library's own `PlassThreshold` under the name this component shipped it
+ * as. A gauge reads the same bands, so the shape moved to `src/types.ts` and
+ * this stayed as the name a caller already imports.
+ */
+export type PlMeterThreshold = PlassThreshold;
+export interface PlMeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How much there is.
+     *
+     * **Required, and that is the whole difference from a `PlProgressLinear`.** A
+     * meter reports a quantity that is already known — disk used, seats taken,
+     * how full a battery is — so there is no indeterminate case for it to have a
+     * default for. A bar with nothing to report is not a meter; it is a bar that
+     * should not have been drawn yet.
+     */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is being measured. Read out with the value. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the bar. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How the value is written when it is shown — `Intl.NumberFormat` options, so
+     * bytes, currencies and plain counts all work. Without it the value is a
+     * percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Bands that change the bar's family as the value climbs.
+     *
+     * The band with the highest `from` at or below the value wins, and `color` is
+     * what the bar is made of below all of them. Order does not matter; the list
+     * is read, not walked.
+     *
+     * This is the prop a meter exists for: a quota bar that is `primary` at a
+     * third full, `warning` at three quarters and `danger` at ninety percent
+     * says something a fixed colour cannot. The number is still written out by
+     * `showValue`, because a band is a second way of saying it and never the
+     * only one.
+     */
+    thresholds?: readonly PlMeterThreshold[];
+    /** Thickness of the groove. Nothing else on a meter has a size. */
+    size?: PlassSize;
+    /** The family the bar takes where no threshold applies. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * A quantity inside a range, drawn as a bar.
+ *
+ * It looks like a [PlProgressLinear](./progress-linear) and it is not one, and
+ * the difference is worth stating because it decides which to reach for.
+ * **Progress is something advancing; a meter is something already known.** Disk
+ * used, seats taken, a password's strength, how full a battery is — none of
+ * them is going anywhere on its own, and none of them has an indeterminate
+ * state. So `value` is required here, there is no sweep, and the role a screen
+ * reader is given is `meter` rather than `progressbar`.
+ *
+ * `thresholds` is the prop it exists for. A quota bar that turns amber at three
+ * quarters and red at ninety percent says something a fixed colour cannot, and
+ * the colour is derived from the value rather than chosen by the caller at the
+ * moment they happened to be looking.
+ *
+ * Base UI owns the semantics — the role, the range attributes, `aria-valuetext`
+ * and the formatting — and it computes the fill width too, so what is left here
+ * is the material: the groove is `--plass-track` and the fill is the family's
+ * gradient, both the same as a progress bar's. One material, two meanings. The
+ * fill travels on `width` because a gradient cannot be transitioned and a
+ * length can.
+ */
+export declare const PlMeter: React.ForwardRefExoticComponent<PlMeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/meter/PlMeter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as a}from"@base-ui/react/meter";import{useDefaults as s}from"../../internal/defaults.js";import{barThicknessClasses as t,fillTransitionClasses as o,progressSlots as i,trackClasses as m}from"../../internal/progress.js";import{cx as n,metaTextClasses as c,stackGapClasses as f}from"../../internal/styles.js";import{bandColor as u}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:d=0,max:p=100,label:h,showValue:x=!1,format:j,thresholds:b,size:w,color:N,className:g,style:v,...y},k){const z=s(),M=w??z.size??"md",P=N??z.color??"primary";return l(a.Root,{ref:k,value:r,min:d,max:p,format:j,locale:z.locale,className:n("flex w-full flex-col",f[M],g),style:{...i(u(r,P,b)),...v},...y,children:[h||x?l("div",{className:n("flex items-baseline gap-2",h?"justify-between":"justify-end",c[M]),children:[h?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:h}):null,x?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(a.Track,{className:n("relative w-full overflow-hidden rounded-full",m,t[M]),children:e(a.Indicator,{className:n("rounded-full [background-image:var(--p-fill)]",o)})})]})});

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

@@ -0,0 +1,2 @@
+export { PlMeter } from './PlMeter.js';
+export type { PlMeterProps, PlMeterThreshold } from './PlMeter.js';

package/dist/components/meter/index.js

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

package/dist/components/mockup/PlMockup.d.ts

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+import type { PlassColor, PlassElevation, PlassSize } from '../../types.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: PlMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs `ios`
+     * or `android`. Anything else falls back to the device's own default —
+     * `macos`, `ipados` and `ios` respectively.
+     */
+    os?: PlMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: PlMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — from a 320-wide phone to a 430-wide one, from a 1024-wide desktop to a
+     * 1920-wide one.
+     *
+     * As on Box, `size` here does not set a height or a type scale. What it sets
+     * is the resolution of the screen, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean. This is the viewport the content is laid out
+     * against, not the panel's physical pixel count.
+     */
+    resolution?: PlMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: PlMockupOrientation;
+    /**
+     * How much hardware there is around the screen. `none` is not a thinner
+     * bezel — it is no hardware at all, leaving the screen on its own with its
+     * corners cut, which is what a mockup that only wants the viewport asks for.
+     * `thick` is an older device: narrow sides, a forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: PlMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: PlMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: PlMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar. Each one takes its own space rather than covering the
+     * content, so turning it off gives the screen back to `children` rather than
+     * uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * Whether content taller than the screen scrolls. Off, it is clipped, which is
+     * what a still picture of a device wants.
+     * @default false
+     */
+    scroll?: boolean;
+    /**
+     * What is behind the content: any CSS `background` value — a colour, a
+     * gradient, a `url()`.
+     * @default the page's own surface colour
+     */
+    wallpaper?: string;
+    /**
+     * The clock in the status bar or the taskbar, and the only text the chrome
+     * draws. A string rather than a `Date`, because a mockup's clock is a prop of
+     * the picture and reading the real one would differ between the server that
+     * renders the page and the browser that hydrates it.
+     * @default '9:41'
+     */
+    time?: string;
+    /**
+     * The rendered width of the whole device on the page — a number in pixels or
+     * any CSS length. The device is laid out at its own resolution and then scaled
+     * to whatever this comes to, so the content inside is genuinely a screen's
+     * worth rather than a page's worth shrunk.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The rendered height. Given on its own it decides the size and the width
+     * follows the device's proportion, which is what a mockup in a row of fixed
+     * height wants.
+     */
+    height?: number | string;
+    /** Reaches the accent in the chrome — a dock's first icon, a taskbar's. */
+    color?: PlassColor;
+    /**
+     * How far off the page the device sits. Drawn as a silhouette rather than a
+     * box, so the shadow follows a lid on a neck on a foot, and it does not shrink
+     * with the device.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Renders something other than a `<div>`: `render={<figure />}`. */
+    render?: useRender.RenderProp;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A device with a screen you can put anything on: a phone, a tablet, a monitor
+ * or a laptop, with the system's own bars drawn on it.
+ *
+ * The screen is a viewport at the device's own resolution — a `md` phone is 390
+ * by 844 CSS pixels — and the whole device is then scaled once to whatever room
+ * it has been given. So the content inside is laid out against a screen rather
+ * than against the page: a 390-pixel column wraps where it would wrap on a
+ * phone, and the mockup can be 200 pixels wide on the page without the content
+ * knowing.
+ *
+ * That scale is a `transform`, and it is the one place in the library where one
+ * is used. The rule it is an exception to is about controls, where a scale
+ * resamples a label under the pointer that is pressing it. Nothing here is
+ * pressed and the scale never changes on an interaction: it is set once from the
+ * space available, which is the only way to draw a 1440-pixel desktop in a
+ * paragraph's width at all.
+ *
+ * The screen is also a container (`plass-screen`), so content inside can answer
+ * to the device's width with a container query rather than to the window's.
+ */
+export declare const PlMockup: React.ForwardRefExoticComponent<PlMockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/PlMockup.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as l,elevationFilters as o,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:j,systemUi:M=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,x),K=j??l(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),re=M?d({os:J,notch:K,landscape:L,time:W}):{},ae="none"===R,se=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:ae?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),re.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),le=p("plass-mockup relative block",I??"");return a({render:F,ref:ie,props:{className:le,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:o[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===te?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${te??1})`},children:[e("div",{className:ae?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:se}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});

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

@@ -0,0 +1,2 @@
+export { PlMockup } from './PlMockup.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupProps, PlMockupResolution } from './PlMockup.js';

package/dist/components/mockup/index.js

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

package/dist/components/modal/PlModal.d.ts

@@ -111,4 +111,4 @@ export declare const PlModalClose: React.ForwardRefExoticComponent<Omit<import("
  * the header and the actions stay put while only the body scrolls, which is why
  * `dividers` matters more here than on a PlCard.
  */
-export declare function PlModal({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;
+export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;

package/dist/components/modal/PlModal.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{CloseIcon as a}from"../../internal/icons.js";import{cx as i,focusRingClasses as o,glassClasses as r,hasContent as t,metaTextClasses as n,radiusClasses as d,sheetBodyClasses as c,sheetHeaderGapClasses as p,sheetLineClasses as m,sheetPaddingXClasses as f,sheetPaddingYClasses as u,sheetSectionGapClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},y=/* @__PURE__ */[r,"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-4),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(" "),b=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=l.Close;export function PlModal({size:r="md",color:w="primary",density:j="default",open:N,defaultOpen:k,onOpenChange:$,trigger:_,title:z,description:C,actions:P,dividers:B=!1,showClose:O=!0,closeLabel:D="Close",width:M,fullWidth:T=!0,fullScreen:W=!1,modal:L=!0,dismissible:R=!0,className:S,classNames:V,style:q,children:A,...E}){const F=f[j][r],G=u[j][r],H=B?`${F} ${G}`:F,I=t(z)||t(C),J=t(P);return s(l.Root,{open:N,defaultOpen:k,modal:L,disablePointerDismissal:!R,onOpenChange:(e,s)=>{R||e||"escape-key"!==s.reason?$?.(e):s.cancel()},children:[_?e(l.Trigger,{render:_}):null,s(l.Portal,{children:[e(l.Backdrop,{className:i("plass-portal",b,V?.backdrop)}),e(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",W?"items-stretch":"items-center p-4"].join(" "),children:s(l.Popup,{className:[y,c[r],W?"h-full max-w-none rounded-none":`max-h-full ${d[r]} ${void 0===M?v[r]:""}`,W||T?"":"w-auto",B?"":`${G} ${x[r]}`,S??""].filter(Boolean).join(" "),style:{...g(w,3),...void 0===M?null:{maxWidth:"number"==typeof M?`${M}px`:M},...q},...E,children:[I||O?s("div",{className:`flex shrink-0 items-start gap-3 ${H}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${p[r]}`,children:[t(z)?e(l.Title,{className:`m-0 font-semibold ${h[r]}`,children:z}):null,t(C)?e(l.Description,{className:`m-0 text-(--plass-muted-fg) ${n[r]}`,children:C}):null]}),O?e(l.Close,{"aria-label":D,className:["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)",o].join(" "),children:e(a,{})}):null]}):null,t(A)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",H,B&&(I||O)?m:"",B?"":"-my-1 py-1"].filter(Boolean).join(" "),children:A}):null,J?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",H,B?m:""].filter(Boolean).join(" "),children:P}):null]})})]})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Dialog as o}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as r,focusRingClasses as t,glassClasses as n,hasContent as d,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetLineClasses as u,sheetPaddingXClasses as x,sheetPaddingYClasses as h,sheetSectionGapClasses as g,sheetTitleClasses as v,surfaceSlots as y}from"../../internal/styles.js";const b={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},w=/* @__PURE__ */[n,"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-4),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=o.Close;export function PlModal({size:n,color:N,density:k,open:$,defaultOpen:_,onOpenChange:z,trigger:C,title:P,description:B,actions:O,dividers:D=!1,showClose:M=!0,closeLabel:T,width:W,fullWidth:L=!0,fullScreen:R=!1,modal:S=!0,dismissible:V=!0,className:q,classNames:A,style:E,children:F,...G}){const H=l(),I=a(),J=T??I.close,K=n??H.size??"md",Q=N??H.color??"primary",U=k??H.density??"default",X=x[U][K],Y=h[U][K],Z=D?`${X} ${Y}`:X,ee=d(P)||d(B),se=d(O);return s(o.Root,{open:$,defaultOpen:_,modal:S,disablePointerDismissal:!V,onOpenChange:(e,s)=>{V||e||"escape-key"!==s.reason?z?.(e):s.cancel()},children:[C?e(o.Trigger,{render:C}):null,s(o.Portal,{children:[e(o.Backdrop,{className:r("plass-portal",j,A?.backdrop)}),e(o.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",R?"items-stretch":"items-center p-4"].join(" "),children:s(o.Popup,{className:[w,m[K],R?"h-full max-w-none rounded-none":`max-h-full ${p[K]} ${void 0===W?b[K]:""}`,R||L?"":"w-auto",D?"":`${Y} ${g[K]}`,q??""].filter(Boolean).join(" "),style:{...y(Q,3),...void 0===W?null:{maxWidth:"number"==typeof W?`${W}px`:W},...E},...G,children:[ee||M?s("div",{className:`flex shrink-0 items-start gap-3 ${Z}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${f[K]}`,children:[d(P)?e(o.Title,{className:`m-0 font-semibold ${v[K]}`,children:P}):null,d(B)?e(o.Description,{className:`m-0 text-(--plass-muted-fg) ${c[K]}`,children:B}):null]}),M?e(o.Close,{"aria-label":J,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" "),children:e(i,{})}):null]}):null,d(F)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",Z,D&&(ee||M)?u:"",D?"":"-my-1 py-1"].filter(Boolean).join(" "),children:F}):null,se?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",Z,D?u:""].filter(Boolean).join(" "),children:O}):null]})})]})]})}

package/dist/components/navigation-menu/PlNavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as s}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as n}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as r}from"../../internal/link.js";import{controlHeightClasses as i,controlTextClasses as o,controlTextLeadingClasses as d,cx as c,focusRingClasses as p,focusRingInsetClasses as u,gapClasses as m,glassClasses as f,hasContent as h,iconClasses as g,metaTextClasses as v,paddingXClasses as x,radiusClasses as y,surfaceSlots as N,transitionClasses as b}from"../../internal/styles.js";const w=/* @__PURE__ */t.createContext({size:"md",density:"default"}),j=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,g,p,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),P=/* @__PURE__ */[f,"relative 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] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",b,g,"hover:bg-(--p-soft)",u].join(" "),z={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */t.forwardRef(function PlNavigationMenuLink({href:s,title:l,description:r,startIcon:i,className:o,children:p,...u},f){const{size:g,density:N}=t.useContext(w);return a(n.Link,{ref:f,href:s,className:c(k,y[g],m[g],x[N][g],"py-2",o),...u,children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",d[g]),children:l}),h(r)?e("span",{className:c("text-(--plass-muted-fg)",v[g]),children:r}):null,p]})]})});export function PlNavigationMenuItem({label:d,href:p,target:u,rel:f,startIcon:g,value:v,disabled:N=!1,columns:b=1,children:P,className:k,style:_}){const{size:C,density:M}=t.useContext(w),I=void 0!==p&&!h(P),L=c(j,i[C],o[C],m[C],x[M][C],y[C],k);return e(n.Item,{value:v,children:I?a(n.Link,{href:p,target:u,rel:r(u,f),className:L,style:_,children:[h(g)?g:null,d]}):a(s,{children:[a(n.Trigger,{disabled:N,className:L,style:_,children:[h(g)?g:null,d,e(n.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(n.Content,{className:c("grid gap-1",z[C]),style:b>1?{gridTemplateColumns:`repeat(${b}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const PlNavigationMenu=/* @__PURE__ */t.forwardRef(function PlNavigationMenu({size:s="md",color:l="primary",density:r="default",orientation:i="horizontal",value:o,defaultValue:d,onValueChange:p,delay:u,closeDelay:f,sideOffset:h=8,className:g,style:v,children:x,...b},j){const k=t.useMemo(()=>({size:s,density:r}),[s,r]);return e(w.Provider,{value:k,children:a(n.Root,{ref:j,orientation:i,value:o,defaultValue:d,onValueChange:e=>p?.(e),delay:u,closeDelay:f,className:g,style:{...N(l,3),...v},...b,children:[e(n.List,{className:c("flex items-center","vertical"===i?"flex-col items-stretch":"flex-row",m[s]),children:x}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:h,collisionPadding:12,children:e(n.Popup,{className:c(P,y[s]),children:e(n.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as a,Fragment as s}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as l}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as d,controlTextLeadingClasses as c,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */t.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative 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] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */t.forwardRef(function PlNavigationMenuLink({href:s,title:n,description:r,startIcon:i,className:o,children:d,...u},m){const{size:h,density:v}=t.useContext(j);return a(l.Link,{ref:m,href:s,className:p(k,N[h],f[h],y[v][h],"py-2",o),...u,children:[g(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",c[h]),children:n}),g(r)?e("span",{className:p("text-(--plass-muted-fg)",x[h]),children:r}):null,d]})]})});export function PlNavigationMenuItem({label:n,href:c,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,columns:b=1,children:w,className:z,style:k}){const{size:C,density:M}=t.useContext(j),I=void 0!==c&&!g(w),L=p(P,o[C],d[C],f[C],y[M][C],N[C],z);return e(l.Item,{value:v,children:I?a(l.Link,{href:c,target:u,rel:i(u,m),className:L,style:k,children:[g(h)?h:null,n]}):a(s,{children:[a(l.Trigger,{disabled:x,className:L,style:k,children:[g(h)?h:null,n,e(l.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(l.Content,{className:p("grid gap-1",_[C]),style:b>1?{gridTemplateColumns:`repeat(${b}, minmax(0, 1fr))`}:void 0,children:w})]})})}export const PlNavigationMenu=/* @__PURE__ */t.forwardRef(function PlNavigationMenu({size:s,color:r,density:i,orientation:o="horizontal",value:d,defaultValue:c,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=s??k.size??"md",C=r??k.color??"primary",M=i??k.density??"default",I=t.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(l.Root,{ref:P,orientation:o,value:d,defaultValue:c,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(l.List,{className:p("flex items-center","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(l.Popup,{className:p(z,N[_]),children:e(l.Viewport,{})})})})]})})});

package/dist/components/number-field/PlNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -17,6 +17,15 @@ export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
 export interface PlNumberFieldProps 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;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it.
@@ -132,4 +141,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/PlNumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{NumberField as l}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MinusIcon as s,PlusIcon as n}from"../../internal/icons.js";import{controlHeightClasses as r,controlTextLeadingClasses as i,cx as o,disabledClasses as c,fieldReadOnlyClasses as d,fieldRestClasses as p,focusRingClasses as m,focusWithinRingClasses as u,gapClasses as f,hasContent as h,iconClasses as b,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as N,surfaceSlots as j,transitionClasses as y}from"../../internal/styles.js";const w=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",u,b].join(" "),k=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",m,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:m="glass",size:u="md",color:b="primary",density:y="default",elevation:S=0,value:_,defaultValue:V,onValueChange:I,onValueCommitted:C,min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q=!1,format:F,locale:R,steppers:E="end",incrementLabel:G="Increase",decrementLabel:P="Decrease",label:$,description:A,error:H,invalid:J,startIcon:K,endIcon:M,fullWidth:Q=!1,disabled:T=!1,readOnly:U=!1,required:X=!1,name:Y,placeholder:Z,id:ee,className:ae,classNames:le,style:te,...se}){const ne=h(H),re=J??ne,ie=re?"danger":b,oe=g[y][u],ce={end:`${oe} pe-1`,split:"px-1",none:oe},de=e(l.Decrement,{"aria-label":P,className:k,children:e(s,{})}),pe=e(l.Increment,{"aria-label":G,className:k,children:e(n,{})}),me="none"!==E&&!U;return a(t.Root,{disabled:T,invalid:re,className:["flex-col align-top",N[u],Q?"flex w-full":"inline-flex",ae??""].filter(Boolean).join(" "),style:{...j(ie,S),...te},...se,children:[$?e(t.Label,{className:o(x[u],"font-medium text-(--plass-fg)",T?"opacity-50":"",le?.label),children:$}):null,e(l.Root,{id:ee,name:Y,className:"contents",value:_,defaultValue:V,onValueChange:e=>I?.(e),onValueCommitted:e=>C?.(e),min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q,format:F,locale:R,disabled:T,readOnly:U,required:X,children:a(l.Group,{className:[w,r[u],i[u],v[u],f[u],me?ce[E]:oe,T?c[m]:U?d[m]:p[m],le?.control].filter(Boolean).join(" "),children:[me&&"split"===E?de:null,K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,e(l.Input,{placeholder:Z,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===E&&me?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,me&&"end"===E?a("span",{className:"flex shrink-0 items-center gap-0.5",children:[de,pe]}):null,me&&"split"===E?pe:null]})}),A?e(t.Description,{className:o(x[u],"text-(--plass-muted-fg)",le?.description),children:A}):null,e(t.Error,ne?{match:!0,className:o(x[u],"text-(--p-accent)",le?.error),children:H}:{className:o(x[u],"text-(--p-accent)",le?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as f,focusRingClasses as h,focusWithinRingClasses as b,gapClasses as x,hasContent as g,iconClasses as v,metaTextClasses as N,paddingXClasses as y,radiusClasses as j,stackGapClasses as w,surfaceSlots as k,transitionClasses as S}from"../../internal/styles.js";const _=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",S,"focus-within:[transition-duration:0ms]",b,v].join(" "),V=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",h,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:h="glass",size:b,color:v,density:S,elevation:z=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:B,min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R=!1,format:E,locale:G,steppers:P="end",incrementLabel:$,decrementLabel:A,label:H,description:J,error:M,invalid:Q,startIcon:T,endIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:le,placeholder:ae,id:te,className:se,hotKeys:ne,classNames:re,style:ie,...oe}){const ce=a(),de=t(),me=$??de.increase,pe=A??de.decrease,ue=G??ce.locale,fe=b??ce.size??"md",he=v??ce.color??"primary",be=S??ce.density??"default",xe=g(M),ge=Q??xe,ve=ge?"danger":he,Ne=y[be][fe],ye={end:`${Ne} pe-1`,split:"px-1",none:Ne},je=e(s.Decrement,{"aria-label":pe,className:V,children:e(r,{})}),we=e(s.Increment,{"aria-label":me,className:V,children:e(i,{})}),ke="none"!==P&&!Z;return l(n.Root,{disabled:Y,invalid:ge,className:["flex-col align-top",w[fe],X?"flex w-full":"inline-flex",se??""].filter(Boolean).join(" "),style:{...k(ve,z),...ie},...oe,children:[H?e(n.Label,{className:m(N[fe],"font-medium text-(--plass-fg)",Y?"opacity-50":"",re?.label),children:H}):null,e(s.Root,{id:te,name:le,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>B?.(e),min:D,max:L,step:W,largeStep:q,smallStep:F,snapOnStep:K,allowWheelScrub:R,format:E,locale:ue,disabled:Y,readOnly:Z,required:ee,children:l(s.Group,{className:[_,c[fe],d[fe],j[fe],x[fe],ke?ye[P]:Ne,Y?p[h]:Z?u[h]:f[h],re?.control].filter(Boolean).join(" "),children:[ke&&"split"===P?je:null,T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:T}):null,e(s.Input,{placeholder:ae,onKeyDown:o(ne,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===P&&ke?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ke&&"end"===P?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[je,we]}):null,ke&&"split"===P?we:null]})}),J?e(n.Description,{className:m(N[fe],"text-(--plass-muted-fg)",re?.description),children:J}):null,e(n.Error,xe?{match:!0,className:m(N[fe],"text-(--p-accent)",re?.error),children:M}:{className:m(N[fe],"text-(--p-accent)",re?.error)})]})}

package/dist/components/otp-field/PlOtpField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What may be typed into a slot.
  *
@@ -11,6 +11,15 @@ export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
 export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | '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;
     /** Drop shadow depth. `0` is the default — a field is cut into the sheet. */
     elevation?: PlassElevation;
     /**

package/dist/components/otp-field/PlOtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as o,fieldRestClasses as i,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={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"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:y="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,classNames:J,style:K,...Q},U){const W=Math.min(12,Math.max(2,Math.round(F))),X=m(A),Y=D??X,Z=Y?"danger":N,$=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[y]:B?o[y]:i[y]),ee=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:Y,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Z,w),...K},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)",J?.label),children:P}):null,e(r.Root,{ref:U,length:W,validationType:b[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v],J?.control),...Q,children:Array.from({length:W},(l,s)=>a(t.Fragment,{children:[ee>0&&s>0&&s%ee===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:$,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)",J?.description),children:_}):null,e(l.Error,X?{match:!0,className:n(d[v],"text-(--p-accent)",J?.error),children:A}:{className:n(d[v],"text-(--p-accent)",J?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{OTPField as n}from"@base-ui/react/otp-field";import{hotKeyHandler as s}from"../../internal/keys.js";import{cx as o,disabledClasses as i,fieldReadOnlyClasses as m,fieldRestClasses as d,hasContent as u,metaTextClasses as c,stackGapClasses as p,surfaceSlots as f,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},h={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},b={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"}},v={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:N="glass",size:w,color:V,density:j,elevation:F=0,length:C=6,charset:M="numeric",mask:O=!1,groupSize:k,separator:z="–",value:I,defaultValue:R,onValueChange:S,onComplete:q,onValueInvalid:D,autoSubmit:K=!1,label:P,description:_,error:A,invalid:E,name:L,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,className:J,hotKeys:Q,classNames:U,style:W,...X},Y){const Z=l(),$=w??Z.size??"md",ee=V??Z.color??"primary",ae=j??Z.density??"default",te=Math.min(12,Math.max(2,Math.round(C))),le=u(A),re=E??le,ne=re?"danger":ee,se=o("text-center font-medium [font-family:inherit]",g[$],y[$],h[$],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?i[N]:G?m[N]:d[N]),oe=k&&k>0?Math.round(k):0;return a(r.Root,{disabled:B,invalid:re,className:o("inline-flex flex-col align-top",p[$],J),style:{...f(ne,F),...W},children:[u(P)?e(r.Label,{className:o(c[$],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",U?.label),children:P}):null,e(n.Root,{ref:Y,onKeyDown:s(Q,void 0),length:te,validationType:v[M],mask:O,name:L,required:T,disabled:B,readOnly:G,autoSubmit:K,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>D?.(e),className:o("flex items-center",b[ae][$],U?.control),...X,children:Array.from({length:te},(l,r)=>a(t.Fragment,{children:[oe>0&&r>0&&r%oe===0?e("span",{"aria-hidden":"true",className:o("select-none px-0.5 text-(--plass-muted-fg)",y[$]),children:z}):null,e(n.Input,{className:se,autoFocus:H&&0===r})]},r))}),u(_)?e(r.Description,{className:o(c[$],"text-(--plass-muted-fg)",U?.description),children:_}):null,e(r.Error,le?{match:!0,className:o(c[$],"text-(--p-accent)",U?.error),children:A}:{className:o(c[$],"text-(--p-accent)",U?.error)})]})});

package/dist/components/overlay/PlOverlay.d.ts

@@ -95,4 +95,4 @@ export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div
  * held inside, the page behind going inert, and focus returning to wherever it
  * came from when the overlay closes.
  */
-export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;
+export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, color: colorProp, label: labelProp, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{cx as l,surfaceSlots as r}from"../../internal/styles.js";const t={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},i={start:"items-start",center:"items-center",end:"items-end"},o={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},n=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:p,defaultOpen:c,onOpenChange:m,tone:d="scrim",dismissible:f=!1,modal:b=!0,align:u="center",size:x="md",color:y="primary",label:g="Overlay",className:k,classNames:j,style:h,children:v,...O}){return e(s.Root,{open:p,defaultOpen:c,modal:b,disablePointerDismissal:!f,onOpenChange:(e,a)=>{f||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:l("plass-portal fixed inset-0 z-(--plass-z-portal)",n,t[d],j?.backdrop)}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",i[u],o[x]].join(" "),children:e(s.Popup,{"aria-label":g,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",n,k??""].filter(Boolean).join(" "),style:{...r(y,0),...h},...O,children:v})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:b="scrim",dismissible:u=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[b],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}

package/dist/components/page-layout/PlPageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{PlPageLayoutContext as o,PlassSidebarSideContext as n}from"../../internal/page-layout.js";import{controlSlots as r,cx as s,hasContent as a,toLength as i}from"../../internal/styles.js";const u=["header","footer"];export const PlPageLayout=/* @__PURE__ */t.forwardRef(function PlPageLayout({header:c,footer:d,sidebar:f,endSidebar:p,headerSpan:h="full",footerSpan:m="full",scroll:v="page",height:x="viewport",collapseBelow:y="md",sidebarOpen:b,defaultSidebarOpen:g=!1,onSidebarOpenChange:w,endSidebarOpen:P,defaultEndSidebarOpen:S=!1,onEndSidebarOpenChange:k,skipLink:C=!0,skipLabel:O="Skip to content",mainId:N="main",mainProps:$,color:j="primary",className:R,style:z,children:L,...E},B){const[H,M]=t.useState(g),[_,I]=t.useState(S),q=t.useMemo(()=>({start:b??H,end:P??_}),[b,H,P,_]),A=t.useCallback((e,l)=>{if("start"===e)return void 0===b&&M(l),void w?.(l);void 0===P&&I(l),k?.(l)},[b,P,w,k]),D=t.useRef(null),F=t.useCallback(e=>{D.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]),G=t.useRef({header:null,footer:null}),J=t.useRef(null),K=t.useCallback(()=>{const e=D.current;if(e)for(const l of u){const t=G.current[l],o="header"===l?h:m;if(!t){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(t).position,r=`${t.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===o?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,m]),Q=t.useCallback(()=>{const e=J.current;if(e){e.disconnect();for(const l of u){const t=G.current[l];t&&e.observe(t)}}K()},[K]);t.useEffect(()=>(J.current=new ResizeObserver(()=>K()),Q(),()=>{J.current?.disconnect(),J.current=null}),[K,Q]);const T=t.useCallback((e,l)=>{G.current[e]=l,Q()},[Q]),U=t.useMemo(()=>({present:!0,register:T,collapseBelow:y,open:q,setOpen:A,scroll:v}),[T,y,q,A,v]),V="content"===v,W=i("viewport"===x||"auto"===x?void 0:x),X=void 0!==W?"":"auto"===x?V?"h-full":"min-h-full":V?"h-dvh":"min-h-dvh",Y=a(c)?c:null,Z=a(d)?d:null;return e(o.Provider,{value:U,children:l("div",{ref:F,className:s("relative flex w-full flex-col",V?"overflow-hidden":"",X,"full"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",R),style:void 0===W?z:{...V?{height:W}:{minHeight:W},...z},...E,children:[C?e("a",{href:`#${N}`,className:s("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:r(j,2,"solid"),children:O}):null,"full"===h?Y:null,l("div",{className:s("flex w-full flex-1",V?"min-h-0":""),children:[a(f)?e(n.Provider,{value:"start",children:f}):null,l("div",{className:s("flex min-w-0 flex-1 flex-col",V?"min-h-0":"","content"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===h?Y:null,e("main",{...$,id:N,className:s("min-w-0 flex-1",V?"min-h-0 overflow-y-auto":"",$?.className),children:L}),"content"===m?Z:null]}),a(p)?e(n.Provider,{value:"end",children:p}):null]}),"full"===m?Z:null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const f=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:R,color:z,className:L,style:E,children:B,...H},M){const _=t(),I=n(),T=N??I.skipToContent,q=z??_.color??"primary",[A,D]=o.useState(P),[F,G]=o.useState(C),J=o.useMemo(()=>({start:w??A,end:S??F}),[w,A,S,F]),K=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&D(l),void k?.(l);void 0===S&&G(l),O?.(l)},[w,S,k,O]),Q=o.useRef(null),U=o.useCallback(e=>{Q.current=e,"function"==typeof M?M(e):M&&(M.current=e)},[M]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of f){const o=V.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[v,x]),Y=o.useCallback(()=>{const e=W.current;if(e){e.disconnect();for(const l of f){const o=V.current[l];o&&e.observe(o)}}X()},[X]);o.useEffect(()=>(W.current=new ResizeObserver(()=>X()),Y(),()=>{W.current?.disconnect(),W.current=null}),[X,Y]);const Z=o.useCallback((e,l)=>{V.current[e]=l,Y()},[Y]),ee=o.useMemo(()=>({present:!0,register:Z,collapseBelow:g,open:J,setOpen:K,scroll:y}),[Z,g,J,K,y]),le="content"===y,oe=c("viewport"===b||"auto"===b?void 0:b),te=void 0!==oe?"":"auto"===b?le?"h-full":"min-h-full":le?"h-dvh":"min-h-dvh",ne=u(d)?d:null,re=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",le?"overflow-hidden":"",te,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===oe?E:{...le?{height:oe}:{minHeight:oe},...E},...H,children:[j?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(q,2,"solid"),children:T}):null,"full"===v?ne:null,l("div",{className:i("flex w-full flex-1",le?"min-h-0":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:i("flex min-w-0 flex-1 flex-col",le?"min-h-0":"","content"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===v?ne:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",le?"min-h-0 overflow-y-auto":"",R?.className),children:B}),"content"===x?re:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?re:null]})})});

package/dist/components/pagination/PlPagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{PlButton as n}from"../button/PlButton.js";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextClasses as l,gapClasses as i,srOnlyClasses as o}from"../../internal/styles.js";function range(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const s={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */a.forwardRef(function PlPagination({variant:c="ghost",size:m="md",color:u="primary",density:h="compact",elevation:d=0,count:f,page:g,defaultPage:p=1,onPageChange:x,siblingCount:b=1,boundaryCount:v=1,showEdges:y=!1,showArrows:M=!0,disabled:P=!1,getPageHref:j,renderLink:w,label:L="Pagination",pageLabel:N=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:k="Next page",firstLabel:$="First page",lastLabel:D="Last page",statusLabel:I=(e,t)=>`Page ${e} of ${t}`,className:K,children:z,...B},A){const[R,E]=a.useState(p),F=Math.min(Math.max(g??R,1),Math.max(f,1));if(f<2)return null;const H=function paginationRange(e,t,a,n){const r=range(1,Math.min(n,e)),l=range(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(f,F,b,v),S=F<=1,W=F>=f,linkProps=(t,a,n)=>{if(!j||a)return null;const r=j(t);return{render:w?w(t,r):e("a",{href:r}),rel:n}},press=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||j&&!x||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),f);t!==F&&(void 0===g&&E(t),x?.(t))})(t))},stepper=(t,a,r,l,i,o,s)=>e("li",{className:"flex",children:e(n,{variant:c,size:m,color:u,density:h,elevation:d,disabled:P||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,r),...linkProps(r,P||l,s)})},t);return t("nav",{ref:A,"aria-label":L,className:["flex items-center",K??""].filter(Boolean).join(" "),...B,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${i[m]}`,children:[y?stepper("first",$,1,S,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,M?stepper("previous",C,F-1,S,"rotate-90 rtl:-rotate-90",e(r,{}),"prev"):null,H.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===F?"solid":c,size:m,color:u,density:h,elevation:d,disabled:P,"aria-label":N(t),"aria-current":t===F?"page":void 0,className:"tabular-nums",onClick:e=>press(e,t),...linkProps(t,P||t===F),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",l[m],s[m]].join(" "),children:"…"},`slot-${a}`)),M?stepper("next",k,F+1,W,"-rotate-90 rtl:rotate-90",e(r,{}),"next"):null,y?stepper("last",D,f,W,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:o,"aria-live":"polite",children:I(F,f)}),z]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlButton as i}from"../button/PlButton.js";import{ChevronIcon as l}from"../../internal/icons.js";import{controlTextClasses as o,gapClasses as s,srOnlyClasses as m}from"../../internal/styles.js";function range(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const c={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */a.forwardRef(function PlPagination({variant:u="ghost",size:d,color:h,density:f,elevation:p=0,count:g,page:x,defaultPage:b=1,onPageChange:v,siblingCount:y=1,boundaryCount:M=1,showEdges:j=!1,showArrows:P=!0,disabled:w=!1,getPageHref:L,renderLink:N,label:C,pageLabel:k=e=>`Page ${e}`,previousLabel:$,nextLabel:z,firstLabel:D,lastLabel:I,statusLabel:K=(e,t)=>`Page ${e} of ${t}`,className:B,children:A,...R},E){const F=n(),H=r(),S=C??H.pagination,W=$??H.paginationPrevious,q=z??H.paginationNext,G=D??H.paginationFirst,J=I??H.paginationLast,O=d??F.size??"md",Q=h??F.color??"primary",T=f??F.density??"compact",[U,V]=a.useState(b),X=Math.min(Math.max(x??U,1),Math.max(g,1));if(g<2)return null;const Y=function paginationRange(e,t,a,n){const r=range(1,Math.min(n,e)),i=range(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(g,X,y,M),Z=X<=1,_=X>=g,linkProps=(t,a,n)=>{if(!L||a)return null;const r=L(t);return{render:N?N(t,r):e("a",{href:r}),rel:n}},press=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||L&&!v||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),g);t!==X&&(void 0===x&&V(t),v?.(t))})(t))},stepper=(t,a,n,r,l,o,s)=>e("li",{className:"flex",children:e(i,{variant:u,size:O,color:Q,density:T,elevation:p,disabled:w||r,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>press(e,n),...linkProps(n,w||r,s)})},t);return t("nav",{ref:E,"aria-label":S,className:["flex items-center",B??""].filter(Boolean).join(" "),...R,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[O]}`,children:[j?stepper("first",G,1,Z,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,P?stepper("previous",W,X-1,Z,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,Y.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(i,{variant:t===X?"solid":u,size:O,color:Q,density:T,elevation:p,disabled:w,"aria-label":k(t),"aria-current":t===X?"page":void 0,className:"tabular-nums",onClick:e=>press(e,t),...linkProps(t,w||t===X),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",o[O],c[O]].join(" "),children:"…"},`slot-${a}`)),P?stepper("next",q,X+1,_,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?stepper("last",J,g,_,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:m,"aria-live":"polite",children:K(X,g)}),A]})});