plass-ui 1.2.0 → 1.4.0

package/dist/components/heatmap-chart/PlHeatmapChart.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { type ChartScaleKind } from '../../internal/chart.js';
+import type { PlassChartCategory, PlassChartLegend, PlassChartSeries } from '../../types.js';
+import type { ChartBaseProps } from '../../internal/chart-frame.js';
+export interface PlHeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
+    /**
+     * The rows. Each series is a row of the grid or a group of the treemap, and
+     * each datum a cell or a tile.
+     *
+     * `y` is the magnitude and `x` names the column. A `null` is a gap: the cell
+     * is left as surface rather than drawn as the bottom of the scale, because
+     * "nothing happened" and "the least of anything" are not the same reading.
+     */
+    series: readonly PlassChartSeries[];
+    /** The column names. Points may carry their own `x` instead. */
+    categories?: readonly PlassChartCategory[];
+    /**
+     * - `grid` — a cell per row and column, which is the shape for two
+     *   categorical axes and one magnitude: hours against weekdays, a cohort
+     *   against a week.
+     * - `treemap` — a tile per datum, sized by its share and packed to fill the
+     *   box. For parts of a whole where the parts are grouped and there are more
+     *   of them than a [`PlPieChart`](./pie-chart) can hold.
+     * @default 'grid'
+     */
+    shape?: 'grid' | 'treemap';
+    /**
+     * How the magnitude is coloured.
+     *
+     * - `sequential` — one hue, pale to deep. The default, and right whenever
+     *   more is simply more.
+     * - `diverging` — two hues either side of a neutral, for a value with a
+     *   *middle* that means something: over and under target, gained and lost.
+     *   Reached for on a plain magnitude it invents a boundary the data has none
+     *   of.
+     * @default 'sequential'
+     */
+    scale?: ChartScaleKind;
+    /** Where a `diverging` scale turns over. @default 0 */
+    midpoint?: number;
+    /** Where the scale starts and ends. Taken from the data otherwise. */
+    min?: number;
+    max?: number;
+    /**
+     * Writes each cell's value on it, where the cell is big enough for the text
+     * to fit with room either side. A label that does not fit is dropped rather
+     * than clipped — the tooltip and the table still have it.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+    /** Where the scale legend sits. `false` leaves it off. */
+    legend?: boolean | Pick<PlassChartLegend, 'side' | 'align'>;
+}
+/**
+ * A magnitude per cell, coloured rather than measured.
+ *
+ * Two shapes of the same idea. A `grid` is the one to reach for when both axes
+ * are categorical and the question is *where* — which hour of which day, which
+ * cohort in which week; a bar chart of the same data would be forty bars nobody
+ * can scan. A `treemap` is for parts of a whole with more parts than a
+ * [`PlPieChart`](./pie-chart) can hold, and it is the same component because the
+ * data is the same shape: a row of a heatmap and a group of a treemap are both
+ * a named series of named magnitudes.
+ *
+ * Colour here encodes *size* and not identity, so it comes off a one-hue ramp
+ * rather than off the categorical palette — a heatmap in eight hues says its
+ * cells are eight unrelated things.
+ */
+export declare function PlHeatmapChart({ series, categories, shape, scale, midpoint, min, max, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlHeatmapChartProps): React.JSX.Element;

package/dist/components/heatmap-chart/PlHeatmapChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as a,ChartTooltipPanel as r,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as g,rampStep as p,rampSteps as w,squarify as v,textWidth as y,toValues as b,truncate as M}from"../../internal/chart.js";import{numberFormatter as $}from"../../internal/format.js";import{cx as j,metaTextClasses as k,srOnlyClasses as z}from"../../internal/styles.js";import{useLabels as A}from"../../internal/labels.js";import{useDefaults as N}from"../../internal/defaults.js";export function PlHeatmapChart({series:E,categories:S,shape:B="grid",scale:C="sequential",midpoint:I=0,min:D,max:L,valueLabels:P="none",height:R,format:_,locale:q,label:H,legend:K,tooltip:U,empty:W,size:F,variant:G="ghost",padded:J=!1,className:O,...Q}){const T=N(),V=F??T.size??"md",X=q??T.locale,Y=t.useRef(null),Z=d(Y),ee=A(),le=t.useId(),[te,ne]=t.useState(null),ie=t.useCallback(e=>_?$(X,_).format(e):c(e,X),[_,X]),ae=t.useMemo(()=>b(E),[E]),re=ae.reduce((e,l)=>Math.max(e,l.length),0),oe=t.useMemo(()=>Array.from({length:re},(e,l)=>h(l,S,ae)),[re,S,ae]),de=t.useMemo(()=>E.map((e,l)=>e.name??`${l+1}`),[E]),he=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ae)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[ae]),se=D??he?.min??0,ce=L??he?.max??1,me=t.useCallback(e=>p(e,se,ce,C,I),[se,ce,C,I]),ue="number"==typeof R?R:x[V]??220,xe=s[V],fe=!0===K||void 0===K||!1===K?{}:K,ge=!1!==K,pe=fe.side??"bottom",we=!1===U?{mode:"none"}:!0===U||void 0===U?{}:U,ve="none"===we.mode,ye=null===he||0===re||0===E.length,be=t.useMemo(()=>{if("treemap"===B||Z<=0)return{texts:[],band:0};const e=Math.min(150,.25*Z),l=de.map(l=>M(l,e,xe));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,xe)),0)+10}},[B,de,Z,xe]),Me="treemap"===B?0:xe+8,$e={left:be.band,width:Math.max(0,Z-be.band),height:Math.max(0,ue-Me)},je=t.useMemo(()=>{if($e.width<=0||$e.height<=0)return[];if("treemap"===B){const e=[];return ae.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),$e.width,$e.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:$e.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=$e.height/Math.max(1,E.length),l=$e.width/Math.max(1,re),t=[];return ae.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&t.push({row:i,index:a,cell:n,x:$e.left+a*l,y:i*e,width:l,height:e})})),t},[B,ae,E.length,re,$e.left,$e.width,$e.height]),ke=t.useCallback(e=>m(e.cell.x??S?.[e.index]??oe[e.index]??e.index,X),[S,oe,X]),ze=null===te?null:je.find(e=>e.row===te.row&&e.index===te.index)??null,Ae=null===ze?[]:[{seriesIndex:ze.row,color:ze.cell.color??f(me(ze.cell.value??0),C),value:ze.cell.value,formatted:ie(ze.cell.value??0),label:ze.cell.label}],Ne=Array.from({length:w},(e,l)=>f(l,C));return l(a,{...Q,size:V,variant:G,padded:J,className:O,legendSide:pe,legend:ge&&!ye?e(n,{steps:Ne,from:ie("diverging"===C?-reach(se,ce,I)+I:se),to:ie("diverging"===C?reach(se,ce,I)+I:ce),middle:"diverging"===C?ie(I):void 0,align:fe.align??"center",vertical:"left"===pe||"right"===pe,size:V}):null,table:ye?null:l("table",{id:le,className:z,children:[H?e("caption",{children:H}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),oe.map((l,t)=>e("th",{scope:"col",children:m(l,X)},t))]})}),e("tbody",{children:ae.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:de[n]}),oe.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ie(i.value)},n)})]},n))})]}),children:[l("div",{ref:Y,role:"img",tabIndex:ye?void 0:0,"aria-label":H??ee.chart,"aria-describedby":ye?void 0:le,onPointerLeave:()=>ne(null),onBlur:()=>ne(null),onKeyDown:e=>{if(ve||0===je.length)return;const l=null===te?-1:je.findIndex(e=>e.row===te.row&&e.index===te.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=je[Math.min(je.length-1,l+1)];ne({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=je[Math.max(0,(-1===l?je.length:l)-1)];ne({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ne(null)}e.preventDefault()},className:j("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:ue},children:[ye?e("div",{className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",k[V]),children:W??ee.empty}):Z>0?l("svg",{width:Z,height:ue,viewBox:`0 0 ${Z} ${ue}`,"aria-hidden":"true",className:"block",children:[je.map(t=>{const n=me(t.cell.value??0),i=te?.row===t.row&&te?.index===t.index,a=Math.max(0,t.width-u),r=Math.max(0,t.height-u);if(a<=0||r<=0)return null;const d=ie(t.cell.value??0),h="treemap"===B?"all"===P?[ke(t),d]:[ke(t)]:"all"===P?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,a,r/h.length,xe)),c=t.cell.color?"var(--plass-surface)":g(n,C);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:t.cell.color??f(n,C),opacity:i?1:.94,onPointerEnter:ve?void 0:()=>ne({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(xe+2),textAnchor:"middle",dominantBaseline:"central",fontSize:xe,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===B?void 0:"tabular-nums",children:M(l,t.width-8,xe)},n))]},`${t.row}-${t.index}`)}),"grid"===B?be.texts.map((l,t)=>e("text",{x:$e.left-8,y:(t+.5)*$e.height/Math.max(1,E.length),textAnchor:"end",dominantBaseline:"central",fontSize:xe,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===B?oe.map((l,t)=>{const n=$e.width/Math.max(1,re),i=m(l,X);return t%Math.max(1,Math.ceil((y(i,xe)+8)/Math.max(1,n)))!==0?null:e("text",{x:$e.left+(t+.5)*n,y:$e.height+xe,textAnchor:"middle",fontSize:xe,fill:"var(--plass-muted-fg)",children:i},`col-${t}`)}):null]}):null,ze&&!ve?we.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:ze.x+ze.width/2,top:ze.y},children:we.render({index:ze.index,category:ze.cell.x??oe[ze.index]??ze.index,items:Ae})}):e(r,{heading:`${de[ze.row]} · ${ke(ze)}`,items:Ae,x:ze.x+ze.width/2,y:ze.y,flip:ze.x+ze.width/2>.6*Z,size:V}):null]}),ve?null:e(i,{heading:ze?`${de[ze.row]} · ${ke(ze)}`:void 0,items:Ae})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}

package/dist/components/heatmap-chart/index.d.ts

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

package/dist/components/heatmap-chart/index.js

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

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:$})});

package/dist/components/hot-keys/PlHotKeys.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as r,controlSlots as s,controlTextClasses as t,glassClasses as l,paddingXClasses as i,radiusClasses as m,srOnlyClasses as c,transitionClasses as d}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},u={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},w={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function subscribe(){return()=>{}}function serverOS(){return"windows"}const b={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},f={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[l,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},x={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */o.forwardRef(function PlKbd({variant:n="glass",size:a="md",density:o="compact",className:s,children:l,...c},p){const u=b[a];return e("kbd",{ref:p,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",r[u],t[u],x[u],i[o][u],m[u],f[n],d,s??""].filter(Boolean).join(" "),...c,children:l})});export const PlHotKeys=/* @__PURE__ */o.forwardRef(function PlHotKeys({variant:r="glass",size:t="md",color:l="secondary",density:i="compact",elevation:m=0,keys:d,cluster:b,os:f="auto",separator:x,className:y,style:g,...h},v){const k=function useDetectedOS(){return o.useSyncExternalStore(subscribe,detectOS,serverOS)}(),A="auto"===f?k:f,C={...s(l,m,r),...g},S={variant:r,size:t,density:i},j="xs"===t||"sm"===t?"gap-1":"gap-1.5";if(b)return n("span",{ref:v,className:["inline-flex flex-col items-center align-middle",j,y??""].filter(Boolean).join(" "),style:C,...h,children:[e(PlKbd,{...S,children:b.up}),n("span",{className:`inline-flex ${j}`,children:[e(PlKbd,{...S,children:b.left}),e(PlKbd,{...S,children:b.down}),e(PlKbd,{...S,children:b.right})]})]});const K=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(d??[]).map(e=>function labelFor(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),o=u[a]??a,r=w[o];if(r)return r;const s=p[o];return s?s[n]:word(1===e.length?e.toUpperCase():e)}(e,A)),P=void 0===x?"mac"===A?null:"+":x;return e("span",{ref:v,className:["inline-flex max-w-full items-center gap-1 align-middle",y??""].filter(Boolean).join(" "),style:C,...h,children:K.map((r,s)=>n(o.Fragment,{children:[s>0&&null!==P?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:P}):null,e(PlKbd,{...S,children:r.symbol===r.name?r.symbol:n(a,{children:[e("span",{"aria-hidden":"true",children:r.symbol}),e("span",{className:c,children:r.name})]})})]},s))})});
+"use client";import{jsx as e,jsxs as n,Fragment as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{canonicalKey as r,detectOS as o}from"../../internal/keys.js";import{controlHeightClasses as t,controlSlots as i,controlTextClasses as m,glassClasses as c,paddingXClasses as d,radiusClasses as p,srOnlyClasses as u,transitionClasses as w}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),b={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},f={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function subscribe(){return()=>{}}function serverOS(){return"windows"}const y={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},h={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */a.forwardRef(function PlKbd({variant:n="glass",size:s="md",density:a="compact",className:l,children:r,...o},i){const c=y[s];return e("kbd",{ref:i,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",t[c],m[c],h[c],d[a][c],p[c],x[n],w,l??""].filter(Boolean).join(" "),...o,children:r})});export const PlHotKeys=/* @__PURE__ */a.forwardRef(function PlHotKeys({variant:t="glass",size:m,color:c,density:d,elevation:p=0,keys:w,cluster:y,os:x="auto",separator:h,className:g,style:v,...k},j){const A=l(),C=m??A.size??"md",K=c??A.color??"secondary",P=d??A.density??"compact",S=function useDetectedOS(){return a.useSyncExternalStore(subscribe,o,serverOS)}(),B="auto"===x?S:x,N={...i(K,p,t),...v},_={variant:t,size:C,density:P},E="xs"===C||"sm"===C?"gap-1":"gap-1.5";if(y)return n("span",{ref:j,className:["inline-flex flex-col items-center align-middle",E,g??""].filter(Boolean).join(" "),style:N,...k,children:[e(PlKbd,{..._,children:y.up}),n("span",{className:`inline-flex ${E}`,children:[e(PlKbd,{..._,children:y.left}),e(PlKbd,{..._,children:y.down}),e(PlKbd,{..._,children:y.right})]})]});const z=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(w??[]).map(e=>function labelFor(e,n){const s=r(e),a=f[s];if(a)return a;const l=b[s];return l?l[n]:word(1===e.length?e.toUpperCase():e)}(e,B)),D=void 0===h?"mac"===B?null:"+":h;return e("span",{ref:j,className:["inline-flex max-w-full items-center gap-1 align-middle",g??""].filter(Boolean).join(" "),style:N,...k,children:z.map((l,r)=>n(a.Fragment,{children:[r>0&&null!==D?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:D}):null,e(PlKbd,{..._,children:l.symbol===l.name?l.symbol:n(s,{children:[e("span",{"aria-hidden":"true",children:l.symbol}),e("span",{className:u,children:l.name})]})})]},r))})});

package/dist/components/hover-card/PlHoverCard.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { PlassAlign, PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * A hover card takes `size`, `color` and `density` and stops there, for
+ * `PlPopover`'s reasons: a popup that was asked for has already answered what
+ * `variant` asks, and a surface that genuinely floats is fixed at the top of the
+ * elevation ladder.
+ */
+export interface PlHoverCardProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * What the card previews. Exactly one element, which must accept a ref and
+     * spread props — every Plass component does, and so does a bare `<a>`.
+     *
+     * Usually a link. A hover card is a look ahead at what is behind something,
+     * and the thing it is ahead of is nearly always somewhere you can go.
+     */
+    trigger: React.ReactElement;
+    /** The heading, rendered as the element that names the card. */
+    title?: React.ReactNode;
+    /** A line under the title. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room.
+     * @default 'bottom'
+     */
+    side?: PlassSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: PlassAlign;
+    /** Distance from the trigger, in pixels. @default 8 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * How long the pointer has to rest on the trigger before it opens, in
+     * milliseconds.
+     *
+     * Long by default, and that is the whole difference between a helpful preview
+     * and a page that flinches. A card that opens the moment a pointer crosses a
+     * link opens on every link a reader passes on the way to somewhere else.
+     * @default 600
+     */
+    delay?: number;
+    /**
+     * How long it waits after the pointer leaves, in milliseconds.
+     *
+     * Not zero, and it cannot be: the gap between the trigger and the card is
+     * pointer-free, so a card that closed instantly could never be reached.
+     * @default 300
+     */
+    closeDelay?: number;
+    /** Draws the little wedge pointing at the trigger. @default false */
+    arrow?: boolean;
+    /** Whether the card is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * A hard cap on the card's width, overriding the one `size` implies. Numbers
+     * are pixels.
+     */
+    width?: number | string;
+}
+/**
+ * A preview of what is behind a link, shown when the pointer rests on it.
+ *
+ * The three floating surfaces are told apart by **what opens them and what you
+ * can do once they are open**, not by how they look:
+ *
+ * - A [PlTooltip](./tooltip) names the thing under the pointer. One phrase, and
+ *   nothing inside it can be reached.
+ * - A **hover card** previews what is behind it. It opens on its own, it can be
+ *   entered with the pointer, and it holds a title, a picture, a figure.
+ * - A [PlPopover](./popover) was asked for. It stays until it is dismissed, and
+ *   it can be typed into.
+ *
+ * **Nothing may live only in here.** A card that opens on hover does not open
+ * for a finger, so a link, a button or a fact that exists nowhere else on the
+ * page is a link, a button or a fact that half the readers never get. Everything
+ * in it is a preview of something already reachable — which is what makes it
+ * safe to have at all.
+ *
+ * The delays are the component. `delay` is long so the card does not fire at
+ * every link a pointer crosses on the way somewhere else, and `closeDelay` is
+ * not zero because the gap between the trigger and the card has no pointer in
+ * it — a card that closed the moment the pointer left could never be reached.
+ *
+ * Base UI owns the anchoring, the flip at the window edge, the two delays, the
+ * dismissal and the `aria-describedby` wiring. What is left here is the surface.
+ */
+export declare function PlHoverCard({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, width, className, style, ...props }: PlHoverCardProps): React.JSX.Element;

package/dist/components/hover-card/PlHoverCard.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as a}from"@base-ui/react/preview-card";import{useDefaults as l}from"../../internal/defaults.js";import{cx as t,glassClasses as i,hasContent as r,metaTextClasses as o,radiusClasses as n,sheetBodyClasses as d,sheetHeaderGapClasses as p,sheetPaddingXClasses as c,sheetPaddingYClasses as m,sheetSectionGapClasses as f,sheetTitleClasses as g,surfaceSlots as h}from"../../internal/styles.js";const x={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},u=/* @__PURE__ */[i,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:i,color:y,density:w,trigger:b,title:N,description:O,children:j,side:z="bottom",align:k="center",sideOffset:P=8,alignOffset:C=0,delay:D=600,closeDelay:M=300,arrow:W=!1,open:_,defaultOpen:A,onOpenChange:B,width:E,className:H,style:L,...R}){const T=l(),$=i??T.size??"md",q=y??T.color??"primary",F=w??T.density??"default",G=v[$],I=r(N)||r(O);return s(a.Root,{open:_,defaultOpen:A,onOpenChange:e=>B?.(e),children:[e(a.Trigger,{delay:D,closeDelay:M,render:b}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:z,align:k,sideOffset:P,alignOffset:C,children:s(a.Popup,{className:t(u,n[$],d[$],f[$],c[F][$],m[F][$],void 0===E?x[$]:"",H),style:{...h(q,3),...void 0===E?null:{maxWidth:"number"==typeof E?`${E}px`:E},...L},...R,children:[W?e(a.Arrow,{className:t("data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"),children:s("svg",{width:G,height:G/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,I?s("div",{className:t("flex min-w-0 flex-col",p[$]),children:[r(N)?e("div",{className:t("m-0 font-semibold",g[$]),children:N}):null,r(O)?e("div",{className:t("m-0 text-(--plass-muted-fg)",o[$]),children:O}):null]}):null,r(j)?e("div",{className:"min-w-0",children:j}):null]})})})]})}

package/dist/components/hover-card/index.d.ts

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

package/dist/components/hover-card/index.js

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

package/dist/components/how-to-steps/PlHowToSteps.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** How far along one step is. The same three a `PlStepper` and a `PlTimeline` draw. */
+export type PlHowToStepStatus = PlassStepStatus;
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlHowToStepsConnector = PlassStepConnector;
+export interface PlHowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * Which step is being worked on now, as an index.
+     *
+     * Optional, and left out for the ordinary case: a set of instructions is
+     * something a reader works through at their own pace, and a guide that
+     * claimed to know where they had got to would be guessing. Pass it for a
+     * guide that genuinely knows — a setup wizard reporting what it has already
+     * done for them.
+     */
+    active?: number;
+    /**
+     * Numbers the steps.
+     *
+     * On by default, because that is what instructions are: "do this, then this"
+     * is an order and the number is how a reader finds their place again after
+     * looking away. Turn it off for a set of things to do in any order, which is
+     * a checklist rather than a how-to.
+     * @default true
+     */
+    numbered?: boolean;
+    /**
+     * The line between one step and the next.
+     * @default 'solid'
+     */
+    connector?: PlHowToStepsConnector;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The space between steps. Never the type scale, never the bullet. */
+    density?: PlassDensity;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The `PlHowToStep`s. */
+    children?: React.ReactNode;
+}
+export interface PlHowToStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'title'> {
+    /** What the step is. The line the reader scans for. */
+    title?: React.ReactNode;
+    /**
+     * A glyph in place of the number. The step keeps its place in the order
+     * either way — what changes is only what is drawn in the disc.
+     */
+    icon?: React.ReactNode;
+    /** Overrides what the guide worked out from `active`. */
+    status?: PlHowToStepStatus;
+    /** What to do. */
+    children?: React.ReactNode;
+}
+/**
+ * Instructions, numbered, with what to do under each one.
+ *
+ * Three components put things in order and they answer different questions.
+ * A [PlStepper](../navigation/stepper) and a [PlTimeline](../display/timeline)
+ * both say **where you are** — one in a process the reader is moving through
+ * now, the other in a sequence that has already happened. This one says **what
+ * to do**, and that is the difference the shape follows from: every step's body
+ * is open at once, because somebody following instructions reads ahead, goes
+ * back a step, and works at their own pace.
+ *
+ * Which is also why `active` is optional here and not on the other two. A guide
+ * that claimed to know how far a reader had got would be guessing. Pass it only
+ * for the guide that genuinely knows.
+ *
+ * It is a real `<ol>` of `<li>`s, and the numbers a reader sees are the same
+ * ones the list carries. A screen reader announces "list, five items, item
+ * two" on its own — the position a heading per step would only approximate —
+ * which is what a reader who has looked away and come back is asking for.
+ */
+export declare const PlHowToSteps: React.ForwardRefExoticComponent<PlHowToStepsProps & React.RefAttributes<HTMLOListElement>>;
+/**
+ * One instruction.
+ *
+ * The number is the guide's, not the step's: a step never takes an index, and
+ * the list numbers its children as it walks them — so inserting one in the
+ * middle renumbers the rest without anything being edited.
+ */
+export declare const PlHowToStep: React.ForwardRefExoticComponent<PlHowToStepProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/how-to-steps/PlHowToSteps.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext(null),w=/* @__PURE__ */r.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */r.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:a,color:i,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=a??b.size??"md",j=i??b.color??"primary",H=c??b.density??"default",S=r.Children.toArray(f).filter(r.isValidElement),T=r.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:l({render:d??e("ol",{}),ref:N,props:{className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,r)=>e(w.Provider,{value:{index:r,last:r===S.length-1},children:t},t.key??r)),...h}})})});export const PlHowToStep=/* @__PURE__ */r.forwardRef(function PlHowToStep({title:l,icon:s,status:x,className:y,children:N,...b},P){const j=r.useContext(v),{index:H,last:S}=r.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,a[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],i[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(l)?e("div",{className:p("font-semibold",h[T],m[R]),children:l}):null,u(N)?e("div",{className:p(u(l)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});

package/dist/components/how-to-steps/index.d.ts

@@ -0,0 +1,2 @@
+export { PlHowToStep, PlHowToSteps } from './PlHowToSteps.js';
+export type { PlHowToStepProps, PlHowToStepsConnector, PlHowToStepsProps, PlHowToStepStatus } from './PlHowToSteps.js';

package/dist/components/how-to-steps/index.js

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

package/dist/components/image/PlImage.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+/** How the picture is fitted to the box. `object-fit`'s own words. */
+export type PlImageFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'color' | 'onError' | 'onLoad'> {
+    /**
+     * The description a screen reader reads. **Required**, and `""` is a real
+     * answer: it marks the picture decorative and takes it off the accessibility
+     * tree, which is the right call for a background or a texture and the wrong
+     * one for anything a reader would miss.
+     */
+    alt: string;
+    /**
+     * The proportion the box holds while the picture is on its way, written the
+     * way CSS writes it — a number or `'16 / 9'`.
+     *
+     * This is what the component is really for. Without it the page has nothing
+     * to reserve, and every image that arrives late pushes the paragraph under it
+     * down the screen.
+     */
+    ratio?: number | string;
+    /** @default 'cover' */
+    fit?: PlImageFit;
+    /** Rounds the corners to the `size` step of the house ladder. @default false */
+    rounded?: boolean;
+    /** Which step of the radius ladder `rounded` uses. @default 'md' */
+    size?: PlassSize;
+    /** The family the skeleton and the focus ring take. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * What is drawn while the picture is loading. A `PlSkeleton` by default;
+     * `null` draws nothing and leaves the reserved box empty.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * What is drawn when the picture does not arrive — a wrong URL, a dead host,
+     * a file that is not an image.
+     *
+     * A muted panel with the `alt` text in it by default, which is the one thing
+     * that is certainly available and certainly describes what is missing.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Opens the picture over the page when it is pressed.
+     *
+     * Off by default. A picture that grows when you click it is a promise that
+     * there is more of it to see, and most pictures on a page are not making it.
+     * @default false
+     */
+    preview?: boolean;
+    /** The accessible name of the preview overlay. @default 'Preview' */
+    previewLabel?: string;
+    /** Called when the picture has loaded, and when it has failed. */
+    onStatusChange?: (status: PlImageStatus) => void;
+}
+/** Where the picture has got to. */
+export type PlImageStatus = 'loading' | 'loaded' | 'error';
+/**
+ * A picture, and the two states a picture spends most of its life in.
+ *
+ * An `<img>` is one tag and it works, which is the reason to say what this adds
+ * rather than to assume it. Three things: the space is **reserved** before the
+ * picture arrives, so the paragraph under it does not move when it does; a
+ * failure is *drawn* rather than left as the browser's broken-image glyph and
+ * the alt text in a serif nobody chose; and the two are one state machine, so
+ * the placeholder is not still there behind a picture that has already loaded.
+ *
+ * `ratio` is what makes the first one work and is the prop worth reaching for
+ * every time. Without it there is nothing to reserve — the box is however tall
+ * the picture turns out to be, which is not known until it arrives.
+ */
+export declare const PlImage: React.ForwardRefExoticComponent<PlImageProps & React.RefAttributes<HTMLImageElement>>;

package/dist/components/image/PlImage.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";import{PlSkeleton as n}from"../skeleton/PlSkeleton.js";import{cx as i,focusRingClasses as c,radiusClasses as m,transitionClasses as d}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:f,src:u,ratio:b,fit:h="cover",rounded:g=!1,size:j,color:v,placeholder:y,fallback:x,preview:w=!1,previewLabel:N,onStatusChange:k,className:z,style:C,loading:P="lazy",...S},L){const E=s(),I=t(),O=N??I.preview,R=j??E.size??"md",$=v??E.color??"primary",[F,q]=l.useState("loading"),[A,B]=l.useState(!1);l.useEffect(()=>{q("loading")},[u]);const settle=e=>{q(e),k?.(e)},D=g?m[R]:"",G=e("img",{ref:L,src:u,alt:f,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:i("block size-full",p[h],d,"loaded"===F?"opacity-100":"opacity-0","error"===F?"hidden":""),...S}),H=a(o,{children:[G,"loading"===F?e("span",{className:"absolute inset-0",children:void 0===y?e(n,{shape:"rect",color:$,size:R,width:"100%",height:"100%",className:D}):y}):null,"error"===F?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:x??f}):null]}),J=i("relative block overflow-hidden",D,z),K={aspectRatio:b,...C};return w?a(o,{children:[e("button",{type:"button","aria-label":f?`${f} — ${O.toLowerCase()}`:O,onClick:()=>B(!0),disabled:"loaded"!==F,className:i(J,"cursor-zoom-in p-0",c),style:K,children:H}),e(r,{open:A,onOpenChange:B,tone:"glass",dismissible:!0,color:$,label:O,children:e("img",{src:u,alt:f,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:J,style:K,children:H})});

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

@@ -0,0 +1,2 @@
+export { PlImage } from './PlImage.js';
+export type { PlImageFit, PlImageProps, PlImageStatus } from './PlImage.js';

package/dist/components/image/index.js

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

package/dist/components/line-chart/PlLineChart.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+export interface PlLineChartProps extends CartesianChartProps {
+    /**
+     * How the line gets from one point to the next.
+     *
+     * - `linear` — straight segments. The default, and the only one that claims
+     *   nothing the data did not say.
+     * - `smooth` — a monotone cubic. Curved, but it will not dip below a value
+     *   that both of its neighbours are above; a plain spline would.
+     * - `step` — held at each value until the next one. What a rate, a tier or a
+     *   setting actually did between two readings, rather than a diagonal
+     *   pretending it drifted.
+     * @default 'linear'
+     */
+    curve?: PlassChartCurve;
+    /**
+     * Dots on the points.
+     *
+     * `auto` — the default — draws them while there are few enough points for a
+     * dot to mean something, and stops at fourteen. Whatever this says, the point
+     * under the pointer always gets one: that is what tells the reader which
+     * column the tooltip is about.
+     * @default 'auto'
+     */
+    markers?: ChartMarkers;
+    /**
+     * Fades the line from a paler step of its own hue at the start to the full
+     * colour at the end, so the recent end of a long series is the loud one.
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * Draws the line straight through a `null` instead of breaking at it.
+     *
+     * Off, and it should stay off unless the gap is an artefact of how the data
+     * was collected. A bridged gap is a number the chart made up.
+     * @default false
+     */
+    connectNulls?: boolean;
+    /**
+     * Which values are written on the line. `last` is the one to reach for — it
+     * names where each series ended up, which is the question a line chart is
+     * usually being asked.
+     * @default 'none'
+     */
+    valueLabels?: PlassChartValueLabels;
+    /**
+     * Stacks the series, each line riding on the total of the ones below it.
+     *
+     * Rare on a line chart and worth thinking twice about: the reader can follow
+     * the bottom series and the top total, and nothing in between. An
+     * [`PlAreaChart`](./area-chart) is the shape that makes stacking legible.
+     * @default false
+     */
+    stacked?: boolean;
+}
+/**
+ * A value against time, or against anything else with an order to it.
+ *
+ * The line is the mark that says *change*: it claims the space between two
+ * points is a journey rather than two separate facts, which is true of a
+ * temperature and false of four product categories. Reach for a
+ * [`PlBarChart`](./bar-chart) when the categories could be shuffled without losing
+ * anything.
+ *
+ * Everything around the line — the axes, the grid, the crosshair, the legend,
+ * the tooltip and the table a screen reader gets instead of the picture — comes
+ * from the shared frame, which is what makes a PlLineChart and a PlBarChart on one
+ * dashboard read as one drawing rather than two.
+ */
+export declare function PlLineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: PlLineChartProps): React.JSX.Element;

package/dist/components/line-chart/PlLineChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function PlLineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:l="none",stacked:s=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:s,inset:!0,includeZero:!1,headroom:"none"===l?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:s,markers:c,valueLabels:l,connectNulls:o,gradient:i,idPrefix:u})})}

package/dist/components/line-chart/index.d.ts

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

package/dist/components/line-chart/index.js

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

package/dist/components/list/PlList.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{focusRingClasses as a,gapClasses as i,glassClasses as n,hasContent as o,iconClasses as d,metaTextClasses as c,paddingXClasses as p,radiusClasses as m,sheetBodyClasses as f,surfaceSlots as x,transitionClasses as u}from"../../internal/styles.js";const h=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[n,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[n,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},v={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},y=p,b={xs:m.xs,sm:m.xs,md:m.sm,lg:m.sm,xl:m.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l="md",color:a="primary",density:i="default",elevation:n=0,dividers:o=!1,render:d,className:c,style:p,children:f,...v},y){const b=r.useMemo(()=>({size:l,density:i,dividers:o}),[l,i,o]),N=["flex flex-col",m[l],g[s],u,o?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",c??""].filter(Boolean).join(" "),j=t({render:d,ref:y,props:{role:"list",className:N,style:{...x(a,n),...p},children:f,...v}});return e(h.Provider,{value:b,children:j})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:n,description:p,action:m,href:x,selected:g=!1,disabled:N=!1,className:j,children:w,onClick:k,...C},P){const{size:z,density:B,dividers:I}=r.useContext(h),L=Boolean(k||x)&&!N,$=y[B][z],R=["flex min-w-0 flex-1 items-center text-start",$,v[B][z],i[z],f[z],u,d,I?"":b[z],N?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${a}`:"",L&&!g?"hover:bg-(--p-soft)":"",L&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[o(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(w)?e("span",{className:"truncate",children:w}):null,o(p)?e("span",{className:`truncate text-(--plass-muted-fg) ${c[z]}`,children:p}):null]}),o(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:n}):null]});return s("li",{ref:P,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...C,children:[L&&x?e("a",{href:x,className:R,"aria-current":g?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!g||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":N||void 0,children:F}),o(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["flex flex-col",f[j],v[s],h,d?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});

package/dist/components/menu/PlMenu.d.ts

@@ -197,7 +197,7 @@ export declare function PlMenuSubmenu({ label, startIcon, disabled, side, sideOf
  * variant for every shape a row can take, which is a component tree spelled as a
  * discriminated union.
  */
-export declare function PlMenu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
+export declare function PlMenu({ size: sizeProp, color: colorProp, density: densityProp, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
@@ -208,5 +208,5 @@ export declare function PlMenu({ size, color, density, trigger, open, defaultOpe
  * against an anchor, and the long press is what makes it reachable on a touch
  * screen at all.
  */
-export declare function PlContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
+export declare function PlContextMenu({ size: sizeProp, color: colorProp, density: densityProp, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
 export {};