plass-ui 1.3.0 → 1.5.0

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -27,6 +27,9 @@ export interface PlFloatingBottomNavigationProps extends Omit<PlassStyleProps, '
     /**
      * Keeps the bar clear of the home indicator on a phone, by adding
      * `env(safe-area-inset-bottom)` to the gap under it.
+     *
+     * A browser gives a page that inset only when its viewport meta tag has
+     * `viewport-fit=cover`. Without it, this adds nothing.
      * @default true
      */
     safeArea?: boolean;

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

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

package/dist/components/footer/PlFooter.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassResponsive, PlassSize, PlassVariant } from '../../types.js';
 /** How wide the content inside the sheet is allowed to get. */
-export type PlFooterWidth = PlassSize | 'none';
+export type PlFooterWidth = PlassMeasure;
 export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'color' | 'title'> {
     /**
      * How the bar sits in the page's scroll.
@@ -45,7 +46,7 @@ export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * spans the window. The same ladder `PlContainer`'s `maxWidth` uses.
      * @default 'none'
      */
-    maxWidth?: PlFooterWidth;
+    maxWidth?: PlassResponsive<PlFooterWidth>;
     /** The gutter and the air above and below. @default true */
     padded?: boolean;
     /**

package/dist/components/footer/PlFooter.js

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

package/dist/components/form/PlForm.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as m,sheetSectionGapClasses as t}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:o="onSubmit",errors:i,onSubmit:s,size:a="md",className:n,children:l,...c},f){return r(e,{ref:f,validationMode:o,errors:i,onFormSubmit:r=>s?.(r),className:m("flex flex-col",t[a],n),...c,children:l})});
+"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{FormReportContext as t}from"../../internal/form.js";import{cx as i,sheetSectionGapClasses as m}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:n="onSubmit",errors:s,onSubmit:a,size:l="md",className:f,children:c,...u},d){const[p]=o.useState(()=>new Map);return r(t.Provider,{value:p,children:r(e,{ref:d,validationMode:n,errors:s,onFormSubmit:r=>{if(!a)return;const o={...r};for(const[r,e]of p)o[r]=e();a(o)},className:i("flex flex-col",m[l],f),...u,children:c})})});

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

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import type { PlImageFit, PlImageFlip, PlImageLetterbox, PlImagePlaceholder, PlImagePosition, PlImageRotation } from '../image/PlImage.js';
+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;
+    /**
+     * Turns the picture clockwise, a quarter at a time, as `PlImage`'s `rotate`
+     * does.
+     *
+     * `ratio` stays the file's own proportion. A picture on its side is laid out
+     * on its side in `masonry` and `justified`, and in the viewer; a `grid` tile
+     * keeps the gallery's shape, because that is the shape of the layout.
+     * @default 0
+     */
+    rotate?: PlImageRotation;
+    /** Mirrors the picture, as `PlImage`'s `flip` does. @default 'none' */
+    flip?: PlImageFlip;
+    /** Where the picture sits in its tile, as `PlImage`'s `position`. @default 'center' */
+    position?: PlImagePosition | (string & {});
+    /**
+     * A small copy of the picture to stand in while the file arrives, as
+     * `PlImage`'s `placeholder` takes one.
+     */
+    placeholder?: PlImagePlaceholder;
+    /** 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;
+    /**
+     * How every picture fills its tile, as `PlImage`'s `fit`.
+     * @default 'cover'
+     */
+    fit?: PlImageFit;
+    /**
+     * What fills a tile where `fit` leaves it empty, as `PlImage`'s `letterbox`:
+     * `blur`, or a CSS `background`.
+     * @default 'none'
+     */
+    letterbox?: PlImageLetterbox | (string & {});
+    /**
+     * When the pictures are fetched. `eager` for a gallery at the top of the
+     * page, where lazy tiles would arrive late.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
+    /**
+     * 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. `none` draws no caption, and then
+     * neither is read out.
+     * @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} of {total}`, from the label pack
+     */
+    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 i from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{isTurned as o,masonryRows as s,ratioOf as n,shownRatio as d}from"../../internal/gallery.js";import{responsiveSlots as m,withBaseline as p}from"../../internal/responsive.js";import{usePlBreakpointValue as u}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as g,hasContent as f,metaTextClasses as h,radiusClasses as v,surfaceSlots as x,toLength as y,transitionClasses as b}from"../../internal/styles.js";import{PlImage as w}from"../image/PlImage.js";const j=/* @__PURE__ */i.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),_={xs:2,sm:3,lg:4},$={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},z={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]:[transform:scale(1.06)] group-focus-visible/tile:[&_img]:[transform:scale(1.06)]"};export const PlGallery=/* @__PURE__ */i.forwardRef(function PlGallery({items:R,layout:k="grid",columns:M,gap:q="md",ratio:P=1,rowHeight:S=220,rounded:C=!0,fit:G="cover",letterbox:I,loading:T="lazy",caption:B="none",hover:F="lift",preview:A=!1,onItemSelect:L,label:V,itemLabel:H,empty:W,size:D,color:E,className:J,classNames:K,style:O,...Q},U){const X=r(),Y=D??X.size??"md",Z=E??X.color??"primary",ee=a(),le=V??ee.gallery,te=H??ee.galleryItem,ie=i.useId(),[re,ae]=i.useState(null),oe=p(M??_,2),se=Math.max(1,u(oe)??2),ne="string"==typeof q&&q in $?$[q]:y(q)??$.md,de=C?v[Y]:"",me=n(P,1),tile=(i,r,a,s)=>{const m=f(i.title)||f(i.description),p="none"!==B&&m,u="overlay"===B||"hover"===B,v=`${ie}-${r}-title`,x=`${ie}-${r}-description`,y=p?[f(i.title)?v:null,f(i.description)?x:null].filter(Boolean).join(" "):void 0,j=e(w,{src:i.src,alt:i.alt,ratio:"grid"===k?P:"quilted"===k?"auto":o(i.rotate)?d(n(i.ratio,me),i.rotate):i.ratio??P,fit:G,letterbox:I,loading:T,rotate:i.rotate,flip:i.flip,position:i.position,placeholder:i.placeholder,rounded:!1,size:Y,color:Z,className:c("size-full",K?.image)}),_=p?l("div",{style:void 0===s||u?void 0:{gridRow:String(s)},className:c("min-w-0",u?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"===B?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",K?.caption),children:[f(i.title)?e("span",{id:v,className:c("truncate font-medium",h[Y],u?"":"text-(--plass-fg)",K?.title),children:i.title}):null,f(i.description)?e("span",{id:x,className:c("truncate",h[Y],u?"text-white/80":"text-(--plass-muted-fg)",K?.description),children:i.description}):null]}):null,$=l("span",{style:void 0===s?void 0:{gridRow:`1 / span ${"below"===B?s-1:s}`},className:c("relative block overflow-hidden",de,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",z[F],N[F],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]"),children:[j,u?_:null]}),M=u||!p?$:l(t,{children:[$,_]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":void 0===s?"":"grid",K?.item),style:a,children:A||L?e("button",{type:"button","aria-label":`${i.alt} — ${te(r+1,R.length)}`,"aria-describedby":y,className:c(void 0===s?"block":"grid","w-full bg-transparent p-0 text-start",A?"cursor-zoom-in":"cursor-pointer",g,b,de,"justified"===k?"flex-1":""),style:void 0===s?void 0:{gridRow:`1 / span ${s}`,gridTemplateRows:"subgrid"},onClick:()=>(e=>{L?.(R[e],e),A&&ae(e)})(r),children:M}):M},i.id??i.src)};let pe,ue;if("masonry"===k){const e=R.map(e=>d(n(e.ratio,me),e.rotate)),{tracks:l,tiles:t}=s(e,se,"below"===B);ue=l.map(e=>"caption"===e?"auto":"gap"===e?ne:`${Number((100*e).toFixed(2))}fr`).join(" "),pe=R.map((e,l)=>{const{column:i,start:r,end:a}=t[l];return tile(e,l,{gridColumn:String(i),gridRow:`${r} / ${a}`,gridTemplateRows:"subgrid"},a-r)})}else pe="justified"===k?R.map((e,l)=>{const t=d(n(e.ratio,me),e.rotate);return tile(e,l,{flexGrow:t,flexBasis:t*S+"px",maxWidth:"100%"})}):R.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===R.length&&f(W)?e(t,{children:W}):l(t,{children:[e("ul",{ref:U,role:"list","aria-label":le,className:c("plass-gallery m-0 list-none p-0","justified"===k?"plass-gallery-justified flex flex-wrap":"","masonry"===k?"grid":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",J),style:{gap:"masonry"===k?`0 ${ne}`:ne,...x(Z,0),...m("cols",oe,e=>String(Math.max(1,Math.round(e)))),..."masonry"===k?{gridTemplateColumns:`repeat(${se}, minmax(0, 1fr))`,gridTemplateRows:ue}:null,..."quilted"===k?{gridAutoRows:`${S}px`,gridAutoFlow:"dense"}:null,...O},...Q,children:pe}),A?e(i.Suspense,{fallback:null,children:e(j,{items:R,index:re,onIndexChange:ae,size:Y,color:Z,label:le,itemLabel:te})}):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 t}from"react/jsx-runtime";import*as l from"react";import{useLabels as n}from"../../internal/labels.js";import{isTurned as r,ratioOf as i,shownRatio as a}from"../../internal/gallery.js";import{ChevronIcon as s}from"../../internal/icons.js";import{poseStyle as o,quartersOf as c}from"../../internal/image.js";import{cx as m,metaTextClasses as u}from"../../internal/styles.js";import{PlIconButton as d}from"../icon-button/PlIconButton.js";import{PlOverlay as f}from"../overlay/PlOverlay.js";function turnedFrame(e){if(void 0===e.ratio)return{aspectRatio:"1",width:"min(90vw, 80vh)",containerType:"size"};const t=a(i(e.ratio,1),e.rotate);return{aspectRatio:String(t),width:`min(90vw, calc(80vh * ${t}))`,containerType:"size"}}export function PlGalleryViewer({items:i,index:a,onIndexChange:p,size:v,color:h,label:x,itemLabel:g}){const y=n(),b=null!==a,w=null===a?void 0:i[a],j=null===a||a<=0,N=null===a||a>=i.length-1,k=l.useRef(null),z=l.useRef(null),R=l.useRef(null),go=e=>{if(e<0||e>=i.length)return;const t=document.activeElement;e===i.length-1&&t===z.current?R.current=k.current:0===e&&t===k.current&&(R.current=z.current),p(e)};return l.useLayoutEffect(()=>{R.current?.focus(),R.current=null},[a]),e(f,{open:b,onOpenChange:e=>{e||p(null)},tone:"glass",dismissible:!0,size:v,color:h,label:x,onKeyDown:e=>{null===a||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(a+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(a-1)))},children:t("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[w?e("span",{className:"relative block",style:r(w.rotate)?turnedFrame(w):void 0,children:e("img",{src:w.full??w.src,alt:w.alt,className:m("block object-contain",r(w.rotate)?"":"max-h-[80vh] max-w-[90vw]"),style:o(c(w.rotate??0),w.flip??"none")??void 0})},w.id??w.src):null,i.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(d,{variant:"solid",elevation:1,size:v,color:h,ref:k,label:y.previous,disabled:j,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(s,{})}),onClick:()=>go((a??0)-1)}),e(d,{variant:"solid",elevation:1,size:v,color:h,ref:z,label:y.next,disabled:N,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(s,{})}),onClick:()=>go((a??0)+1)})]}):null]}),w&&(w.title||w.description)?t("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[w.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:w.title}):null,w.description?e("span",{className:m("truncate text-(--plass-muted-fg)",u[v]),children:w.description}):null]}):null,i.length>1?e("p",{className:m("m-0 text-center text-(--plass-muted-fg)",u[v]),"aria-live":"polite",children:g((a??0)+1,i.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=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&&kt>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 r,ChartTooltipPanel as a,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 p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as k}from"../../internal/chart.js";import{numberFormatter as A}from"../../internal/format.js";import{cx as $,metaTextClasses as j,srOnlyClasses as N}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:S,categories:C,shape:D="grid",scale:B="sequential",midpoint:I=0,min:L,max:P,valueLabels:R="none",height:U,format:_,locale:q,label:H,legend:K,tooltip:W,empty:F,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),[ne,ie]=t.useState(null),re=t.useCallback(e=>_?A(Y,_).format(e):c(e,Y),[_,Y]),ae=t.useMemo(()=>M(S),[S]),oe=ae.reduce((e,l)=>Math.max(e,l.length),0),de=t.useMemo(()=>Array.from({length:oe},(e,l)=>h(l,C,ae)),[oe,C,ae]),he=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),se=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]),ce=L??se?.min??0,me=P??se?.max??1,ue=t.useCallback(e=>g(e,ce,me,B,I),[ce,me,B,I]),xe="number"==typeof U?U:x[X]??220,fe=s[X],pe=!0===K||void 0===K||!1===K?{}:K,ge=!1!==K,we=pe.side??"bottom",ve=!1===W?{mode:"none"}:!0===W||void 0===W?{}:W,ye="none"===ve.mode,be=null===se||0===oe||0===S.length,Me=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=he.map(l=>k(l,e,fe));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,fe)),0)+10}},[D,he,ee,fe]),ke="treemap"===D?0:fe+8,Ae={left:Me.band,width:Math.max(0,ee-Me.band),height:Math.max(0,xe-ke)},$e=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=de.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,fe)),0)}},[D,de,Y,fe]),je=b(oe,Ae.width,$e.widest+8),Ne=t.useMemo(()=>{if(Ae.width<=0||Ae.height<=0)return[];if("treemap"===D){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)),Ae.width,Ae.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ae.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ae.height/Math.max(1,S.length),l=Ae.width/Math.max(1,oe),t=[];return ae.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ae.left+r*l,y:i*e,width:l,height:e})})),t},[D,ae,S.length,oe,Ae.left,Ae.width,Ae.height]),ze=t.useCallback((e,l)=>m(e.x??C?.[l]??de[l]??l,Y),[C,de,Y]),Ee=t.useCallback(e=>ze(e.cell,e.index),[ze]),Se=null===ne?null:Ne.find(e=>e.row===ne.row&&e.index===ne.index)??null,Ce=null===Se?[]:[{seriesIndex:Se.row,color:Se.cell.color??f(ue(Se.cell.value??0),B),value:Se.cell.value,formatted:re(Se.cell.value??0),label:Se.cell.label}],De=Array.from({length:w},(e,l)=>f(l,B));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:we,legend:ge&&!be?e(n,{steps:De,from:re("diverging"===B?-reach(ce,me,I)+I:ce),to:re("diverging"===B?reach(ce,me,I)+I:me),middle:"diverging"===B?re(I):void 0,align:pe.align??"center",vertical:"left"===we||"right"===we,size:X}):null,table:be?null:l("table","treemap"===D?{id:te,className:N,children:[H?e("caption",{children:H}):null,ae.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:he[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:ze(t,n)}),e("td",{children:void 0!==t.label?t.label:re(t.value)})]},n))]},n))]}:{id:te,className:N,children:[H?e("caption",{children:H}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),de.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:ae.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:he[n]}),de.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":re(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:be?void 0:0,"aria-label":H??le.chart,"aria-describedby":be?void 0:te,onPointerLeave:()=>ie(null),onBlur:()=>ie(null),onKeyDown:e=>{if(ye||0===Ne.length)return;const l=null===ne?-1:Ne.findIndex(e=>e.row===ne.row&&e.index===ne.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ne[Math.min(Ne.length-1,l+1)];ie({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ne[Math.max(0,(-1===l?Ne.length:l)-1)];ie({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ie(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ne.length&&Ne[n].index!==Ne[l].index;)n+=t;n>=0&&n<Ne.length&&ie({row:Ne[n].row,index:Ne[n].index})}e.preventDefault()},className:$("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:xe},children:[be?e("div",{className:$("flex h-full items-center justify-center text-(--plass-muted-fg)",j[X]),children:F??le.empty}):ee>0?l("svg",{width:ee,height:xe,viewBox:`0 0 ${ee} ${xe}`,"aria-hidden":"true",className:"block",children:[Ne.map(t=>{const n=ue(t.cell.value??0),i=ne?.row===t.row&&ne?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=re(t.cell.value??0),h="treemap"===D?"all"===R?[Ee(t),d]:[Ee(t)]:"all"===R?[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,r,a/h.length,fe)),c=t.cell.color?"var(--plass-surface)":p(n,B);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,B),opacity:i?1:.94,onPointerEnter:ye?void 0:()=>ie({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)*(fe+2),textAnchor:"middle",dominantBaseline:"central",fontSize:fe,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===D?void 0:"tabular-nums",children:k(l,t.width-8,fe)},n))]},`${t.row}-${t.index}`)}),"grid"===D?Me.texts.map((l,t)=>e("text",{x:Ae.left-8,y:(t+.5)*Ae.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:fe,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?$e.texts.map((l,t)=>{const n=Ae.width/Math.max(1,oe);return t%je!==0?null:e("text",{x:Ae.left+(t+.5)*n,y:Ae.height+fe,textAnchor:"middle",fontSize:fe,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,Se&&!ye?ve.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:Se.x+Se.width/2,top:Se.y},children:ve.render({index:Se.index,category:Se.cell.x??de[Se.index]??Se.index,items:Ce})}):e(a,{heading:`${he[Se.row]} · ${Ee(Se)}`,items:Ce,x:Se.x+Se.width/2,y:Se.y,flip:Se.x+Se.width/2>.6*ee,size:X}):null]}),ye?null:e(i,{heading:Se?`${he[Se.row]} · ${Ee(Se)}`:void 0,items:Ce})]})}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{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:$})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{transitionClasses as o}from"../../internal/styles.js";const t="forced-colors:[background-color:Mark] forced-colors:[color:MarkText]",l={solid:`[background-image:var(--p-fill)] text-(--p-on-solid) ${t}`,glass:`border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)] ${t}`,ghost:`bg-transparent text-(--p-accent) ${t}`},i={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,r,n){const o=r>0?e[r-1]:"",t=n<e.length?e[n]:"";return!s.test(o)&&!s.test(t)}function markString(e,r,n,o){r.lastIndex=0;const t=[];let l,i=0;for(;null!==(l=r.exec(e));){if(""===l[0]){r.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;n&&!isWholeWord(e,s,a)||(s>i&&t.push(e.slice(i,s)),t.push(o(l[0],`${s}`)),i=a)}return 0===t.length?e:(i<e.length&&t.push(e.slice(i)),t)}function markNode(e,n,o,t){if("string"==typeof e)return markString(e,n,o,t);if("number"==typeof e)return markString(String(e),n,o,t);if(Array.isArray(e))return r.Children.map(e,e=>markNode(e,n,o,t));if(r.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:r.cloneElement(e,void 0,markNode(l,n,o,t))}return e}export const PlHighlight=/* @__PURE__ */r.forwardRef(function PlHighlight({query:t,variant:s="solid",color:a,caseSensitive:c=!1,wholeWord:d=!1,underline:p=!1,weight:f,className:u,style:g,children:m,...h},x){const b=n(),k=a??b.color??"warning",$=r.useMemo(()=>function buildPattern(e,r){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const n=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,r)=>r.length-e.length);return 0===n.length?null:new RegExp(n.map(escapeRegExp).join("|"),r?"gu":"giu")}(t,c),[t,c]),v=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",l[s],p?"underline decoration-2 underline-offset-2":"",f?i[f]:"",o].filter(Boolean).join(" "),y=$?markNode(m,$,d,(r,n)=>e("mark",{className:v,children:r},n)):m;return e("span",{ref:x,className:u,style:{"--p-fill":`var(--plass-${k}-fill)`,"--p-on-solid":`var(--plass-${k}-on-solid)`,"--p-accent":`var(--plass-${k}-accent)`,"--p-soft":`var(--plass-${k}-soft)`,"--p-line":`var(--plass-${k}-line)`,...g},...h,children:y})});