plass-ui 1.3.0 → 1.5.0

package/dist/components/window-pane/PlWindowPane.d.ts

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlWindowControl, PlWindowOffset, PlWindowOs } from '../../internal/window.js';
+import type { PlassColor, PlassElevation, PlassSize } from '../../types.js';
+export type { PlWindowControl, PlWindowOffset, PlWindowOs } from '../../internal/window.js';
+/** The three CSS positions a window can be laid out with. */
+export type PlWindowPanePosition = 'static' | 'absolute' | 'fixed';
+/** What a resize reports: the window's size in pixels. */
+export interface PlWindowPaneSize {
+    width: number;
+    height: number;
+}
+export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onResize'> {
+    /**
+     * Whose window this is a picture of. Decides where the controls sit, how they
+     * are drawn, how tall the title bar is and how its corners are cut.
+     * @default 'macos'
+     */
+    os?: PlWindowOs;
+    /** The window's name, in the title bar. Also what names the window itself. */
+    title?: React.ReactNode;
+    /** A glyph beside the title — the app's mark. */
+    icon?: React.ReactNode;
+    /** Anything else the title bar carries, set beside the controls. */
+    actions?: React.ReactNode;
+    /**
+     * Which of the three buttons the title bar has. `true` is all of them,
+     * `false` is none, and an array is exactly the ones named — a window that can
+     * be closed but not minimized is `['close']`.
+     *
+     * The order is the system's rather than the array's: macOS puts close first
+     * and Windows puts it last, and that is not something a caller should have to
+     * remember.
+     * @default true
+     */
+    controls?: boolean | readonly PlWindowControl[];
+    /**
+     * The scale of the chrome — the title bar's height, its buttons and its type.
+     * It does not touch the content, which is the caller's and is laid out at its
+     * own scale, exactly as it would be on a desktop where the title bar does not
+     * grow with the document.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** The colour family the focus rings and an `accent` title bar take. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Dyes the title bar with the colour family, the way Windows offers to. Off,
+     * the bar is the neutral shade the system draws by default.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * How much of what is behind the window shows through its chrome, from `0` to
+     * `1`. It applies to the title bar, the body's own fill and the border —
+     * never to the content on it, which stays exactly as legible as it was.
+     *
+     * Anything above `0` also turns the acrylic on, so the page underneath is
+     * blurred rather than merely visible. `1` is a window that is nothing but its
+     * edge and its chrome.
+     * @default 0
+     */
+    transparency?: number;
+    /**
+     * Whether this is the window in front.
+     *
+     * Left out, the window works it out for itself: it is in front until another
+     * `PlWindowPane` on the page is pressed or takes the focus, exactly as windows on
+     * a desktop behave. A click on the page *around* the windows changes nothing
+     * — a paragraph is not a desktop.
+     *
+     * Pass it to drive that yourself, which is what a caller keeping its own
+     * z-order wants.
+     *
+     * What being in front looks like is the system's: coloured traffic lights on
+     * macOS against grey ones, an accent title bar and an accent border on
+     * Windows 10, a tinted header bar on GNOME — and, on all four, a window one
+     * step further off the page than the ones behind it.
+     */
+    active?: boolean;
+    /**
+     * The shadow around the window. `2` here, against the `0` everything else
+     * defaults to, for the reason `PlPill`'s is `2`: a window is by definition not
+     * part of the page it is on.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /**
+     * How the window is laid out. `static` leaves it in the flow (as a
+     * relatively positioned box, so `offset` can move it without disturbing
+     * anything around it); `absolute` pins it inside the nearest positioned
+     * ancestor, which is what a desktop full of windows wants; `fixed` pins it to
+     * the viewport.
+     * @default 'static'
+     */
+    position?: PlWindowPanePosition;
+    /** Lets the title bar be dragged. @default false */
+    draggable?: boolean;
+    /** Lets the edges and corners be dragged. @default false */
+    resizable?: boolean;
+    /** The window's width — a number in pixels or any CSS length. */
+    width?: number | string;
+    /** And its height. Left out, the window is as tall as what is in it. */
+    height?: number | string;
+    /** How small it may be dragged, in pixels. @default 180 */
+    minWidth?: number;
+    /** The same downward. Defaults to the title bar's own height. */
+    minHeight?: number;
+    /** How far it has been dragged from where the layout put it. */
+    offset?: PlWindowOffset;
+    /** Where an uncontrolled window starts. @default { x: 0, y: 0 } */
+    defaultOffset?: PlWindowOffset;
+    onOffsetChange?: (offset: PlWindowOffset) => void;
+    /** Fires with the window's size, in pixels, while an edge is dragged. */
+    onResize?: (size: PlWindowPaneSize) => void;
+    /** Whether the window is on screen at all. Closing it renders nothing. */
+    open?: boolean;
+    /** @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the window is rolled up to its title bar. This is what minimizing
+     * means for a window that is part of a page rather than of a desktop: there
+     * is no dock for it to go to, so it stays where it is with nothing under the
+     * bar.
+     */
+    minimized?: boolean;
+    /** @default false */
+    defaultMinimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /**
+     * Whether the window fills whatever is holding it. Its corners go square
+     * while it does, as they do on every system.
+     */
+    maximized?: boolean;
+    /** @default false */
+    defaultMaximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Whether content taller than the window scrolls. @default true */
+    scroll?: boolean;
+    /**
+     * Overrides the buttons' own names.
+     *
+     * There is no `locale` here: the words come from `PlassProvider`'s `labels`,
+     * which is where every other component in the library gets its own, and these
+     * four are the narrower override for one window.
+     */
+    minimizeLabel?: string;
+    maximizeLabel?: string;
+    restoreLabel?: string;
+    closeLabel?: string;
+    resizeLabel?: string;
+    /** Renders something other than a `<div>`: `render={<section />}`. */
+    render?: useRender.RenderProp;
+    /** What is in the window. */
+    children?: React.ReactNode;
+}
+/**
+ * A window, drawn the way one of four systems draws it, with anything at all
+ * inside it.
+ *
+ * It is not a real window and does not pretend to be one: there is no desktop,
+ * no z-order and no dock. What it is is a *frame that behaves* — the title bar
+ * drags, the corners resize, the three buttons are real buttons with real names
+ * — so a screenshot of an app, a demo of a feature or a piece of a landing page
+ * can be shown as the thing it will be rather than as a picture of it.
+ *
+ * Nothing here is transformed. A dragged window moves on `left` and `top` and a
+ * resized one changes `width` and `height`, which is what keeps the text inside
+ * it at whole pixels through both gestures — a `translate()` would resample
+ * every glyph in the window for the length of the drag, which is exactly what
+ * the house rule against transforming a surface exists to prevent.
+ *
+ * `minimize` rolls the window up to its title bar rather than sending it
+ * anywhere, because a page has nowhere to send it to. `maximize` fills whatever
+ * is holding the window, which is the container for `position="absolute"` and
+ * the viewport for `fixed`.
+ */
+export declare const PlWindowPane: React.ForwardRefExoticComponent<PlWindowPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/window-pane/PlWindowPane.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as g}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";import{inertProps as p}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(x,z){const{os:y="macos",title:N,icon:E,actions:L,controls:M=!0,size:S,color:C,accent:k=!1,transparency:T=0,active:I,elevation:j=2,position:R="static",draggable:D=!1,resizable:P=!1,width:O,height:W,minWidth:B=180,minHeight:H,offset:A,defaultOffset:G,onOffsetChange:X,onResize:$,open:_,defaultOpen:F=!0,onOpenChange:U,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:K,maximized:J,defaultMaximized:Q=!1,onMaximizedChange:V,scroll:Z=!0,minimizeLabel:ee,maximizeLabel:te,restoreLabel:ne,closeLabel:ie,resizeLabel:oe,render:re,className:se,style:ae,children:le,...ce}=x,de=w(),ue=S??de.size??"md",me=C??de.color??"primary",he=s(),fe=h(y),ge=f(y,ue),we=i.useId(),[pe,be]=useLatched(_,F,U),[ve,xe]=useLatched(Y,q,K),[ze,ye]=useLatched(J,Q,V),[Ne,Ee]=useLatched(A,G??{x:0,y:0},X),[Le,Me]=i.useState(null),[Se,Ce]=i.useState(!0),ke=I??Se,[Te,Ie]=i.useState(null),[je,Re]=i.useState(null),[De,Pe]=i.useState(!1),[Oe,We]=i.useState(!1),[Be,He]=i.useState(pe);Be!==pe&&(He(pe),We(!pe)),i.useEffect(()=>{if(!Oe)return;const e=window.setTimeout(()=>We(!1),260);return()=>window.clearTimeout(e)},[Oe]);const Ae=i.useRef(null),Ge=i.useCallback(e=>{Ae.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),Xe=i.useRef(null),$e=pe||Oe;i.useEffect(()=>{const e=Ae.current;if(!$e||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Xe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[$e]),i.useLayoutEffect(()=>{const e=Ae.current,t=document.activeElement;if(pe||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Xe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[pe]),i.useEffect(()=>{if(void 0!==I)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ce(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ce(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const _e=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;_e.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Pe(!0);const finish=()=>{_e.current=null,Pe(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});_e.current=()=>{s(),finish()}}i.useEffect(()=>()=>_e.current?.(),[]);const Fe={width:Math.max(0,B),height:Math.max(ge.bar,H??ge.bar)};function resizeTo(e){Me(e),$?.(e)}const Ue=m(y,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ye=Ue.includes("maximize");i.useEffect(()=>{if(ve||null===je)return;const e=window.setTimeout(()=>Re(null),400);return()=>window.clearTimeout(e)},[ve,je]);const qe={minimize:ee??he.minimize,maximize:te??he.maximize,restore:ne??he.restore,close:ie??he.close},Ke=e(u,{os:y,metrics:ge,controls:Ue,maximized:ze,active:ke,labels:qe,onCommand:function command(e){"close"===e?be(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Ie(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Le?.height??W)&&t)return Re(t.getBoundingClientRect().height),void requestAnimationFrame(()=>xe(!0));xe(e)}(!ve):ye(!ze)}}),Je=c(N)?e("span",{id:we,className:"min-w-0 truncate",children:N}):null,Qe=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,Ve=t("div",{className:a("relative flex shrink-0 items-center select-none",d,D&&!ze?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:ge.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:ge.weight,paddingInlineStart:ge.padX,paddingInlineEnd:ge.padEnd,gap:Math.round(.7*ge.title),fontSize:ge.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:fe.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!D||ze)return;const t={...Ne};beginGesture(e,(e,n)=>Ee({x:t.x+e,y:t.y+n}))},onDoubleClick:Ye?()=>ye(!ze):void 0,children:["start"===fe.controlsSide?Ke:null,"center"===fe.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:ge.controlsWidth(Ue.length)+2*ge.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*ge.title)},children:[Qe,Je]})}):t(n,{children:[Qe,Je]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*ge.title)},onPointerDown:e=>e.stopPropagation(),children:L}):null,"end"===fe.controlsSide?Ke:null]}),Ze=ze?{left:0,top:0,width:"100%",height:"100%"}:{left:Ne.x,top:Ne.y,width:Le?.width??O,height:ve?Te??ge.bar:Le?.height??W??je??void 0},et=o({render:re,ref:Ge,props:{role:"group","aria-labelledby":Je?we:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",T>0?l:"",fe.glass&&0===T?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",se),"data-gesture":De?"":void 0,...p(!pe),style:{opacity:pe?void 0:0,...g({os:y,color:me,accent:k,transparency:T,active:ke,elevation:j}),position:"static"===R?"relative":R,...Ze,borderRadius:ze?0:`${ge.radius}px ${ge.radius}px ${ge.radiusBottom}px ${ge.radiusBottom}px`,borderStyle:"solid",borderWidth:ge.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ae},children:t(n,{children:[Ve,e("div",{className:a("min-h-0 flex-1",Z?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:ge.band.side,marginBottom:ge.band.bottom,boxShadow:ge.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...p(ve),children:le}),!P||ze||ve?null:v.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?oe??he.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ze)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ne.x,y:Ne.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Fe.width,o.width+e)),l&&(i=Math.max(Fe.height,o.height+t)),s&&(n=Math.max(Fe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Fe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Ee({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Fe.width,i.width+e),height:Math.max(Fe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ce}});return pe||Oe?et:null});

package/dist/components/window-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { PlWindowPane } from './PlWindowPane.js';
+export type { PlWindowControl, PlWindowOffset, PlWindowOs, PlWindowPanePosition, PlWindowPaneProps, PlWindowPaneSize } from './PlWindowPane.js';

package/dist/components/window-pane/index.js

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

package/dist/css/anchor.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <anchor>. Needs `plass-ui/css/base.css` first. */
+@source '../components/anchor';

package/dist/css/animate-counter.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-counter>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-counter';

package/dist/css/animate-float.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-float>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-float';

package/dist/css/animate-reveal.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-reveal>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-reveal';

package/dist/css/animate-scramble.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-scramble>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-scramble';

package/dist/css/animate-shake.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-shake>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-shake';

package/dist/css/animate-split.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-split>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-split';

package/dist/css/app-logo.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <app-logo>. Needs `plass-ui/css/base.css` first. */
+@source '../components/app-logo';

package/dist/css/area-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <area-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/area-chart';
+@source '../components/box';

package/dist/css/back-top.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <back-top>. Needs `plass-ui/css/base.css` first. */
 @source '../components/back-top';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/bar-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <bar-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/bar-chart';
+@source '../components/box';

package/dist/css/calendar.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <calendar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/calendar';
+@source '../components/button';

package/dist/css/carousel.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <carousel>. Needs `plass-ui/css/base.css` first. */
 @source '../components/carousel';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/code-block.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <code-block>. Needs `plass-ui/css/base.css` first. */
+@source '../components/code-block';

package/dist/css/color-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <color-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/color-picker';
+@source '../components/button';

package/dist/css/combobox.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <combobox>. Needs `plass-ui/css/base.css` first. */
 @source '../components/combobox';
+@source '../components/chip';

package/dist/css/command-palette.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <command-palette>. Needs `plass-ui/css/base.css` first. */
 @source '../components/command-palette';
+@source '../components/hot-keys';

package/dist/css/confirm.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <confirm>. Needs `plass-ui/css/base.css` first. */
 @source '../components/confirm';
+@source '../components/button';
+@source '../components/modal';

package/dist/css/data-list.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <data-list>. Needs `plass-ui/css/base.css` first. */
+@source '../components/data-list';

package/dist/css/data-table.css

@@ -0,0 +1,7 @@
+/* Scan manifest for <data-table>. Needs `plass-ui/css/base.css` first. */
+@source '../components/data-table';
+@source '../components/button';
+@source '../components/checkbox';
+@source '../components/pagination';
+@source '../components/skeleton';
+@source '../components/text-field';

package/dist/css/date-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-picker';
+@source '../components/button';

package/dist/css/date-range-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-range-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-range-picker';
+@source '../components/button';

package/dist/css/date-time-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-time-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-time-picker';
+@source '../components/button';

package/dist/css/flex.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <flex>. Needs `plass-ui/css/base.css` first. */
+@source '../components/flex';

package/dist/css/floating-action-button.css

@@ -0,0 +1,4 @@
+/* Scan manifest for <floating-action-button>. Needs `plass-ui/css/base.css` first. */
+@source '../components/floating-action-button';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/gallery.css

@@ -0,0 +1,7 @@
+/* Scan manifest for <gallery>. Needs `plass-ui/css/base.css` first. */
+@source '../components/gallery';
+@source '../components/button';
+@source '../components/icon-button';
+@source '../components/image';
+@source '../components/overlay';
+@source '../components/skeleton';

package/dist/css/gauge-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <gauge-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/gauge-chart';
+@source '../components/box';

package/dist/css/heatmap-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <heatmap-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/heatmap-chart';
+@source '../components/box';

package/dist/css/hover-card.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <hover-card>. Needs `plass-ui/css/base.css` first. */
+@source '../components/hover-card';

package/dist/css/how-to-steps.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <how-to-steps>. Needs `plass-ui/css/base.css` first. */
+@source '../components/how-to-steps';

package/dist/css/icon-button.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <icon-button>. Needs `plass-ui/css/base.css` first. */
 @source '../components/icon-button';
+@source '../components/button';

package/dist/css/image.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <image>. Needs `plass-ui/css/base.css` first. */
 @source '../components/image';
+@source '../components/overlay';
+@source '../components/skeleton';

package/dist/css/line-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <line-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/line-chart';
+@source '../components/box';

package/dist/css/menubar.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <menubar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/menubar';
+@source '../components/menu';

package/dist/css/meter.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <meter>. Needs `plass-ui/css/base.css` first. */
+@source '../components/meter';

package/dist/css/mockup.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <mockup>. Needs `plass-ui/css/base.css` first. */
+@source '../components/mockup';

package/dist/css/pagination.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <pagination>. Needs `plass-ui/css/base.css` first. */
 @source '../components/pagination';
+@source '../components/button';

package/dist/css/pie-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <pie-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/pie-chart';
+@source '../components/box';

package/dist/css/popconfirm.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <popconfirm>. Needs `plass-ui/css/base.css` first. */
 @source '../components/popconfirm';
+@source '../components/button';
+@source '../components/popover';

package/dist/css/portal.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <portal>. Needs `plass-ui/css/base.css` first. */
+@source '../components/portal';

package/dist/css/scatter-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <scatter-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scatter-chart';
+@source '../components/box';

package/dist/css/scroll-area.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <scroll-area>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scroll-area';

package/dist/css/scroll-zone.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <scroll-zone>. Needs `plass-ui/css/base.css` first. */
 @source '../components/scroll-zone';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/show.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <show>. Needs `plass-ui/css/base.css` first. */
+@source '../components/show';

package/dist/css/sidebar.css

@@ -1,2 +1,5 @@
 /* Scan manifest for <sidebar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/sidebar';
+@source '../components/button';
+@source '../components/drawer';
+@source '../components/icon-button';

package/dist/css/sparkline.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <sparkline>. Needs `plass-ui/css/base.css` first. */
+@source '../components/sparkline';
+@source '../components/box';

package/dist/css/spoiler.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <spoiler>. Needs `plass-ui/css/base.css` first. */
 @source '../components/spoiler';
+@source '../components/button';

package/dist/css/stack.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <stack>. Needs `plass-ui/css/base.css` first. */
+@source '../components/stack';

package/dist/css/stat.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <stat>. Needs `plass-ui/css/base.css` first. */
 @source '../components/stat';
+@source '../components/skeleton';

package/dist/css/time-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <time-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/time-picker';
+@source '../components/button';

package/dist/css/timeline-chart.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <timeline-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/timeline-chart';
+@source '../components/box';

package/dist/css/tour.css

@@ -0,0 +1,3 @@
+/* Scan manifest for <tour>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tour';
+@source '../components/button';

package/dist/css/transfer.css

@@ -1,2 +1,6 @@
 /* Scan manifest for <transfer>. Needs `plass-ui/css/base.css` first. */
 @source '../components/transfer';
+@source '../components/button';
+@source '../components/checkbox';
+@source '../components/icon-button';
+@source '../components/text-field';

package/dist/css/tree-select.css

@@ -0,0 +1,4 @@
+/* Scan manifest for <tree-select>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tree-select';
+@source '../components/text-field';
+@source '../components/tree';

package/dist/css/window-pane.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <window-pane>. Needs `plass-ui/css/base.css` first. */
+@source '../components/window-pane';

package/dist/hooks/index.d.ts

@@ -1,7 +1,13 @@
 export { usePlBreakpoint, usePlBreakpointValue } from './usePlBreakpoint.js';
 export { usePlColorScheme } from './usePlColorScheme.js';
 export type { PlColorScheme, PlColorSchemeOptions, PlColorSchemeResult, PlResolvedColorScheme } from './usePlColorScheme.js';
+export { usePlDisclosure } from './usePlDisclosure.js';
+export type { PlDisclosureResult } from './usePlDisclosure.js';
+export { usePlElementSize } from './usePlElementSize.js';
+export type { PlElementSize } from './usePlElementSize.js';
 export { usePlHotKeys } from './usePlHotKeys.js';
 export type { PlHotKeysOptions, PlHotKeysTarget } from './usePlHotKeys.js';
 export { usePlMediaQuery } from './usePlMediaQuery.js';
+export { usePlOnScreen } from './usePlOnScreen.js';
+export type { PlOnScreenOptions } from './usePlOnScreen.js';
 export { usePlReducedMotion } from './usePlReducedMotion.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{usePlBreakpoint,usePlBreakpointValue}from"./usePlBreakpoint.js";export{usePlColorScheme}from"./usePlColorScheme.js";export{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";
+export{usePlBreakpoint,usePlBreakpointValue}from"./usePlBreakpoint.js";export{usePlColorScheme}from"./usePlColorScheme.js";export{usePlDisclosure}from"./usePlDisclosure.js";export{usePlElementSize}from"./usePlElementSize.js";export{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlOnScreen}from"./usePlOnScreen.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";

package/dist/hooks/usePlBreakpoint.d.ts

@@ -9,6 +9,9 @@ import type { PlassBreakpoint, PlassResponsive } from '../types.js';
  * `md` here switches with the `md:` utilities beside it rather than a few
  * pixels away from them.
  *
+ * The widths come off the document — see `internal/breakpoints.ts` — so a
+ * project that moves a breakpoint in its Tailwind theme moves this too.
+ *
  * **`xs` is the server's answer**, and the first one a browser renders. See
  * `usePlMediaQuery` for what follows from that.
  */

package/dist/hooks/usePlBreakpoint.js

@@ -1 +1 @@
-"use client";import{breakpointMap as e,breakpoints as t}from"../internal/grid.js";import{useMediaQuery as r}from"../internal/media.js";export function usePlBreakpoint(){const e=r("(width >= 40rem)"),t=r("(width >= 48rem)"),i=r("(width >= 64rem)");return r("(width >= 80rem)")?"xl":i?"lg":t?"md":e?"sm":"xs"}export function usePlBreakpointValue(r){const i=usePlBreakpoint(),n=e(r);for(let e=t.indexOf(i);e>=0;e-=1){const r=n[t[e]];if(void 0!==r)return r}}
+"use client";import{fromQuery as e}from"../internal/breakpoints.js";import{resolveAt as r}from"../internal/responsive.js";import{useMediaQuery as n}from"../internal/media.js";export function usePlBreakpoint(){const r=n(e("sm")),t=n(e("md")),o=n(e("lg"));return n(e("xl"))?"xl":o?"lg":t?"md":r?"sm":"xs"}export function usePlBreakpointValue(e){return r(e,usePlBreakpoint())}

package/dist/hooks/usePlDisclosure.d.ts

@@ -0,0 +1,44 @@
+/** What a caller gets back: the answer, and the four ways to change it. */
+export interface PlDisclosureResult {
+    /** Whether the thing is open. */
+    open: boolean;
+    /** Opens it. */
+    onOpen: () => void;
+    /** Closes it. */
+    onClose: () => void;
+    /** Turns it round. */
+    onToggle: () => void;
+    /** Sets it to a value, for the caller who already has one. */
+    setOpen: (open: boolean) => void;
+}
+/**
+ * One boolean and the four callbacks that change it.
+ *
+ * The smallest hook in the library and the one that saves the most typing: a
+ * dialog, a drawer, a popover and a menu each need exactly this, and written by
+ * hand it is a `useState` plus three arrow functions **that are new on every
+ * render**. That last part is the reason it is worth a hook rather than a
+ * snippet — an inline `() => setOpen(false)` handed to a memoised trigger
+ * defeats the memo, and every one of the callbacks here is stable for the life
+ * of the component.
+ *
+ * The names are the props they are handed to. `onOpenChange` is the one shape
+ * every openable component in this library takes, and `setOpen` fits it
+ * exactly, so the ordinary use is a spread:
+ *
+ * ```tsx
+ * const dialog = usePlDisclosure();
+ *
+ * <PlButton onClick={dialog.onOpen}>Delete</PlButton>
+ * <PlModal open={dialog.open} onOpenChange={dialog.setOpen} title="Delete this?">
+ *   <PlButton onClick={dialog.onClose}>Cancel</PlButton>
+ * </PlModal>
+ * ```
+ *
+ * It holds no DOM, watches nothing and has no effect in it, so it costs the
+ * same on a server as it does in a browser.
+ *
+ * @example
+ * const drawer = usePlDisclosure(true);
+ */
+export declare function usePlDisclosure(initial?: boolean): PlDisclosureResult;

package/dist/hooks/usePlDisclosure.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function usePlDisclosure(o=!1){const[s,l]=e.useState(o),n=e.useCallback(()=>l(!0),[]),t=e.useCallback(()=>l(!1),[]),u=e.useCallback(()=>l(e=>!e),[]);return e.useMemo(()=>({open:s,onOpen:n,onClose:t,onToggle:u,setOpen:l}),[s,n,t,u])}