plass-ui 1.3.0 → 1.4.0

package/dist/components/gallery/PlGallery.d.ts

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import type { PlassColor, PlassResponsive, PlassSize } from '../../types.js';
+/**
+ * How the tiles are arranged.
+ *
+ * Four, and they answer four different questions rather than being four looks.
+ * `grid` is a contact sheet: every tile the same shape, whatever shape the
+ * files are. `masonry` keeps each picture's own proportion and stacks the
+ * columns. `justified` keeps the proportions *and* fills every row to the edge,
+ * scaling each row to a common height — the arrangement a photograph library
+ * uses, and the only one where no tile is cropped and no space is left over.
+ * `quilted` is a grid whose tiles may take more than one cell, for a set where
+ * some pictures matter more than others.
+ */
+export type PlGalleryLayout = 'grid' | 'masonry' | 'justified' | 'quilted';
+/** What a tile does when the pointer is on it. */
+export type PlGalleryHover = 'none' | 'lift' | 'dim' | 'zoom';
+/** Where a tile's words go. */
+export type PlGalleryCaption = 'none' | 'below' | 'overlay' | 'hover';
+/** One picture in the set. */
+export interface PlGalleryItem {
+    /** Where the picture is. */
+    src: string;
+    /** What the picture says. Required, for the reason `PlImage` requires it. */
+    alt: string;
+    /** A stable identity. Defaults to `src`. */
+    id?: string;
+    /** The first line of the caption. */
+    title?: React.ReactNode;
+    /** The second, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A larger file for the viewer, when the tile is a thumbnail. Falls back to
+     * `src`, so a set that has only one size of each picture needs nothing here.
+     */
+    full?: string;
+    /**
+     * The picture's own proportion, as a number or a CSS ratio.
+     *
+     * `masonry` and `justified` are laid out from this, and both are laid out
+     * *before* anything has loaded — which is the whole reason it is data rather
+     * than a measurement. A set without it falls back to the gallery's own
+     * `ratio`, and comes out as a grid of squares in a masonry's clothing.
+     */
+    ratio?: number | string;
+    /** How many columns the tile takes in `quilted`. @default 1 */
+    cols?: number;
+    /** How many rows the tile takes in `quilted`. @default 1 */
+    rows?: number;
+}
+/** The parts of a gallery a `className` does not reach. */
+export interface PlGalleryClassNames {
+    /** One tile's `<li>`. */
+    item?: string;
+    /** The picture inside it. */
+    image?: string;
+    /** The box the two lines of words sit in. */
+    caption?: string;
+    /** The first of them. */
+    title?: string;
+    /** The second. */
+    description?: string;
+}
+export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'children' | 'onSelect'> {
+    /** The pictures, in the order they are drawn. */
+    items: readonly PlGalleryItem[];
+    /** How the tiles are arranged. @default 'grid' */
+    layout?: PlGalleryLayout;
+    /**
+     * How many tiles across, per breakpoint. Read by `grid`, `masonry` and
+     * `quilted`; `justified` decides for itself, row by row.
+     * @default { xs: 2, sm: 3, lg: 4 }
+     */
+    columns?: PlassResponsive<number>;
+    /**
+     * The space between tiles — a step of the size ladder, a number in pixels, or
+     * a CSS length.
+     * @default 'md'
+     */
+    gap?: PlassSize | number | string;
+    /**
+     * The shape of a tile in `grid`, and what an item with no `ratio` of its own
+     * falls back to everywhere else.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How tall a row aims to be in `justified`, and how tall one cell is in
+     * `quilted`. Rows come out near it rather than on it, because the last thing
+     * a justified row does is scale to the width it actually has.
+     * @default 220
+     */
+    rowHeight?: number;
+    /** Rounds the tiles. @default true */
+    rounded?: boolean;
+    /**
+     * Where a tile's `title` and `description` go. `below` puts them under the
+     * picture, `overlay` writes them across the foot of it, and `hover` is
+     * `overlay` that arrives with the pointer.
+     * @default 'none'
+     */
+    caption?: PlGalleryCaption;
+    /**
+     * What a tile does under the pointer.
+     *
+     * `lift` and `dim` are depth and colour, which is how everything else in the
+     * library answers a pointer. `zoom` is the one that scales, and it is the
+     * exception the design language names: what moves is a photograph inside a
+     * frame that stays exactly where it was, with no text on it to resample.
+     * @default 'lift'
+     */
+    hover?: PlGalleryHover;
+    /**
+     * Opens the picture full size when a tile is chosen, with the rest of the set
+     * an arrow key away.
+     *
+     * The viewer is fetched on demand, so a gallery that does not offer one does
+     * not carry it.
+     * @default false
+     */
+    preview?: boolean;
+    /** Called when a tile is chosen, whether or not there is a viewer. */
+    onItemSelect?: (item: PlGalleryItem, index: number) => void;
+    /** The list's accessible name. @default 'Gallery' */
+    label?: string;
+    /**
+     * How a tile and the viewer's counter say where in the set they are.
+     * @default (index, total) => `${index} of ${total}`
+     */
+    itemLabel?: (index: number, total: number) => string;
+    /** What is drawn when `items` is empty. Nothing at all by default. */
+    empty?: React.ReactNode;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** Class names for the parts behind the root. */
+    classNames?: PlGalleryClassNames;
+}
+/**
+ * A set of pictures, arranged.
+ *
+ * The four layouts are the component: everything else — the captions, the
+ * pointer treatment, the viewer — is the same in all of them, and choosing
+ * between a contact sheet, a masonry, a justified library and a quilt is one
+ * prop rather than four components.
+ *
+ * **None of them measures anything.** A tile's shape comes from the item's own
+ * `ratio`, which means the whole arrangement is right in the first frame the
+ * browser paints and does not move again as the files arrive — the same bargain
+ * `PlImage`'s `ratio` makes one level up, and the reason a gallery of forty
+ * photographs does not reflow forty times.
+ */
+export declare const PlGallery: React.ForwardRefExoticComponent<PlGalleryProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/gallery/PlGallery.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{dealColumns as r,ratioOf as o}from"../../internal/gallery.js";import{responsiveSlots as n,withBaseline as m}from"../../internal/responsive.js";import{usePlBreakpointValue as p}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as d,hasContent as u,metaTextClasses as f,radiusClasses as g,surfaceSlots as h,toLength as x,transitionClasses as v}from"../../internal/styles.js";import{PlImage as y}from"../image/PlImage.js";const b=/* @__PURE__ */a.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),w={xs:2,sm:3,lg:4},_={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},j={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:scale-106 group-focus-visible/tile:[&_img]:scale-106"};export const PlGallery=/* @__PURE__ */a.forwardRef(function PlGallery({items:z,layout:k="grid",columns:M,gap:$="md",ratio:q=1,rowHeight:P=220,rounded:G=!0,caption:S="none",hover:C="lift",preview:I=!1,onItemSelect:R,label:A,itemLabel:B,empty:F,size:L,color:V,className:H,classNames:W,style:D,...E},J){const K=s(),O=L??K.size??"md",Q=V??K.color??"primary",T=i(),U=A??T.gallery,X=B??((e,l)=>`${e} of ${l}`),[Y,Z]=a.useState(null),ee=m(M??w,2),le=Math.max(1,p(ee)??2),te="string"==typeof $&&$ in _?_[$]:x($)??_.md,ae=G?g[O]:"",se=o(q,1),tile=(a,s,i)=>{const r=u(a.title)||u(a.description),o="none"!==S&&r,n="overlay"===S||"hover"===S,m=e(y,{src:a.src,alt:a.alt,ratio:"grid"===k?q:"quilted"===k?"auto":a.ratio??q,fit:"cover",rounded:!1,size:O,color:Q,className:c("size-full",W?.image)}),p=o?l("div",{className:c("min-w-0",n?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===S?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",W?.caption),children:[u(a.title)?e("span",{className:c("truncate font-medium",f[O],n?"":"text-(--plass-fg)",W?.title),children:a.title}):null,u(a.description)?e("span",{className:c("truncate",f[O],n?"text-white/80":"text-(--plass-muted-fg)",W?.description),children:a.description}):null]}):null,g=l("span",{className:c("relative block overflow-hidden",ae,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",j[C],N[C],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]"),children:[m,n?p:null]}),h=n||!o?g:l(t,{children:[g,p]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":"",W?.item),style:i,children:I||R?e("button",{type:"button","aria-label":`${a.alt} — ${X(s+1,z.length)}`,className:c("block w-full bg-transparent p-0 text-start",I?"cursor-zoom-in":"cursor-pointer",d,v,ae,"justified"===k?"flex-1":""),onClick:()=>(e=>{R?.(z[e],e),I&&Z(e)})(s),children:h}):h},a.id??a.src)};let ie;if("masonry"===k){const l=z.map(e=>o(e.ratio,se));ie=r(l,le).map((l,t)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:te},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:te},children:l.map(e=>tile(z[e],e,{}))})},t))}else ie="justified"===k?z.map((e,l)=>{const t=o(e.ratio,se);return tile(e,l,{flexGrow:t,flexBasis:t*P+"px",maxWidth:"100%"})}):z.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===z.length&&u(F)?e(t,{children:F}):l(t,{children:[e("ul",{ref:J,role:"list","aria-label":U,className:c("plass-gallery m-0 list-none p-0","justified"===k?"flex flex-wrap":"","masonry"===k?"flex items-start":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",H),style:{gap:te,...h(Q,0),...n("cols",ee,e=>String(Math.max(1,Math.round(e)))),..."quilted"===k?{gridAutoRows:`${P}px`,gridAutoFlow:"dense"}:null,...D},...E,children:ie}),I?e(a.Suspense,{fallback:null,children:e(b,{items:z,index:Y,onIndexChange:Z,size:O,color:Q,label:U,itemLabel:X})}):null]})});

package/dist/components/gallery/PlGalleryViewer.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { PlGalleryItem } from './PlGallery.js';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlGalleryViewerProps {
+    items: readonly PlGalleryItem[];
+    /** Which picture is open, or `null` for none. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+    size: PlassSize;
+    color: PlassColor;
+    /** The overlay's own name — the gallery's. */
+    label: string;
+    /** Resolved by the gallery, so the viewer resolves nothing a second time. */
+    itemLabel: (index: number, total: number) => string;
+}
+/**
+ * One picture from a `PlGallery`, full size, with the rest of the set an arrow
+ * key away.
+ *
+ * A file of its own rather than a branch inside `PlGallery`, and that is the
+ * whole point of it: this is the only thing in the component that needs an
+ * overlay, and an overlay is more than the gallery that opens it. Reached
+ * through `React.lazy`, a wall of thumbnails costs nothing for a viewer nobody
+ * opened.
+ *
+ * It is not a `PlCarousel`. A carousel is a set somebody is being shown in
+ * order; this is one picture with a way to the next — so there is no autoplay,
+ * no wrap, and the arrows stop at the ends rather than looping back to a
+ * photograph the reader has already seen.
+ */
+export declare function PlGalleryViewer({ items, index, onIndexChange, size, color, label, itemLabel }: PlGalleryViewerProps): React.JSX.Element;

package/dist/components/gallery/PlGalleryViewer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useLabels as t}from"../../internal/labels.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,metaTextClasses as i}from"../../internal/styles.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";export function PlGalleryViewer({items:o,index:c,onIndexChange:m,size:u,color:d,label:p,itemLabel:f}){const x=t(),v=null!==c,h=null===c?void 0:o[c],g=null===c||c<=0,b=null===c||c>=o.length-1,go=e=>{e>=0&&e<o.length&&m(e)};return e(r,{open:v,onOpenChange:e=>{e||m(null)},tone:"glass",dismissible:!0,size:u,color:d,label:p,onKeyDown:e=>{null===c||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(c+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(c-1)))},children:l("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[l("div",{className:"relative flex items-center justify-center",children:[h?e("img",{src:h.full??h.src,alt:h.alt,className:"max-h-[80vh] max-w-[90vw] object-contain"},h.id??h.src):null,o.length>1?l("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.previous,disabled:g,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(n,{})}),onClick:()=>go((c??0)-1)}),e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.next,disabled:b,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(n,{})}),onClick:()=>go((c??0)+1)})]}):null]}),h&&(h.title||h.description)?l("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[h.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:h.title}):null,h.description?e("span",{className:s("truncate text-(--plass-muted-fg)",i[u]),children:h.description}):null]}):null,o.length>1?e("p",{className:s("m-0 text-center text-(--plass-muted-fg)",i[u]),"aria-live":"polite",children:f((c??0)+1,o.length)}):null]})})}

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

@@ -0,0 +1,2 @@
+export { PlGallery } from './PlGallery.js';
+export type { PlGalleryCaption, PlGalleryClassNames, PlGalleryHover, PlGalleryItem, PlGalleryLayout, PlGalleryProps } from './PlGallery.js';

package/dist/components/gallery/index.js

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

package/dist/components/gauge-chart/PlGaugeChart.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
+import type { PlassColor, PlassThreshold } from '../../types.js';
+export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip'> {
+    /**
+     * The reading. `null` draws the dial with nothing on it, which is the honest
+     * picture of an instrument that has not been told anything.
+     */
+    value: number | null;
+    /** The bottom of the scale. @default 0 */
+    min?: number;
+    /** And the top of it. @default 100 */
+    max?: number;
+    /**
+     * How far round the dial goes, in degrees, opened symmetrically about twelve
+     * o'clock. `180` is the half-dial a dashboard tile wants; `270` is the
+     * instrument shape; `360` is a ring.
+     * @default 180
+     */
+    sweep?: number;
+    /** How thick the arc is, as a fraction of its radius. @default 0.22 */
+    thickness?: number;
+    /**
+     * Where the arc changes colour — the same `{ from, color }` bands a
+     * [`PlMeter`](../feedback/meter) takes, read the same way: the highest band
+     * at or below the value wins, and below all of them `color` stands.
+     */
+    thresholds?: readonly PlassThreshold[];
+    /**
+     * How many marks are drawn around the dial, ends included. `false` — the
+     * default — draws none: a gauge on a dashboard is read as a proportion, and
+     * ticks are for an instrument somebody takes a *number* off.
+     * @default false
+     */
+    ticks?: number | false;
+    /** Writes `min` and `max` at the two ends of the arc. @default true */
+    showRange?: boolean;
+    /**
+     * What goes in the middle. Left out, it is the value written through
+     * `format` — which is what the dial is for, so replacing it is for adding to
+     * it rather than for taking it away.
+     */
+    center?: React.ReactNode;
+    /** A line under the value: the unit, or what is being measured. */
+    caption?: React.ReactNode;
+    /** The family the arc takes where no threshold applies. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * One number on a scale that is known in advance, drawn as a dial.
+ *
+ * It is a [`PlMeter`](../feedback/meter) bent into an arc, and the two are
+ * deliberately the same idea in two shapes: `value`, `min`, `max` and
+ * `thresholds` mean exactly what they mean there, so a page can move a reading
+ * from a bar to a dial without changing what it says. Reach for the bar in a
+ * row of fields and for this one in a tile of its own, where a dial reads at a
+ * glance from across a room and a four-pixel bar does not.
+ *
+ * It is not a [`PlPieChart`](./pie-chart) with `shape="semi"`. A pie is *parts
+ * of a whole* and every slice is a category; this is one value against a scale,
+ * and the unfilled part of the arc is not a second category — it is the rest of
+ * the dial.
+ */
+export declare function PlGaugeChart({ value, min, max, sweep, thickness, thresholds, ticks, showRange, center, caption, height, format, locale: localeProp, label, empty, size: sizeProp, variant, color: colorProp, padded, className, ...box }: PlGaugeChartProps): React.JSX.Element;

package/dist/components/gauge-chart/PlGaugeChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=kt<=0||0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}

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

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

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

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

package/dist/components/grid/PlGrid.js

@@ -1 +1 @@
-"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as a,alignItemsClasses as n,columnCount as s,justifyClasses as p,responsiveSlots as i,spacingValue as l,withBaseline as t}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:g,columnSpacing:m,justify:f,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=o("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",f?p[f]:"",d?n[d]:"",u?a[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...i("cols",t(r,12),s),...i("gap-x",t(m??c,2),l),...i("gap-y",t(g??c,2),l),...j},children:h,...G}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as s,justifyClasses as i,spacingValue as p}from"../../internal/grid.js";import{responsiveSlots as o,withBaseline as t}from"../../internal/responsive.js";import{cx as l}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:m,columnSpacing:f,justify:g,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=l("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",g?i[g]:"",d?a[d]:"",u?n[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...o("cols",t(r,12),s),...o("gap-x",t(f??c,2),p),...o("gap-y",t(m??c,2),p),...j},children:h,...G}})});

package/dist/components/grid/PlGridItem.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,responsiveSlots as n,spanValue as i}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */e.forwardRef(function PlGridItem({span:e,offset:a,alignSelf:l,render:f,className:m,style:c,children:d,...p},u){const g=o("plass-grid-item",l?s[l]:"",m);return r({render:f,ref:u,props:{className:g,style:{...n("span",e,i),...n("offset",a,t),...c},children:d,...p}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,spanValue as n}from"../../internal/grid.js";import{responsiveSlots as i}from"../../internal/responsive.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */r.forwardRef(function PlGridItem({span:r,offset:a,alignSelf:l,render:m,className:f,style:p,children:c,...d},u){const g=o("plass-grid-item",l?s[l]:"",f);return e({render:m,ref:u,props:{className:g,style:{...i("span",r,n),...i("offset",a,t),...p},children:c,...d}})});

package/dist/components/header/PlHeader.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAlign, PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassAlign, PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassResponsive, PlassSize, PlassVariant } from '../../types.js';
 /** How wide the row inside the bar is allowed to get. */
-export type PlHeaderWidth = PlassSize | 'none';
+export type PlHeaderWidth = PlassMeasure;
 export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'color' | 'title'> {
     /**
      * The leading slot: the logo, the product's name, the thing that is the same
@@ -79,7 +80,7 @@ export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'head
      * a header and the container under it line up on the same edge.
      * @default 'none'
      */
-    maxWidth?: PlHeaderWidth;
+    maxWidth?: PlassResponsive<PlHeaderWidth>;
     /** The gutter down each side of the row. @default true */
     padded?: boolean;
     /**

package/dist/components/header/PlHeader.js

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

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/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";