plass-ui 1.2.0 → 1.4.0

package/dist/components/visually-hidden/PlVisuallyHidden.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export interface PlVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Brings the content back into the page while anything inside it has the
+     * focus, and clips it again as soon as the focus leaves.
+     *
+     * Off by default, because the ordinary use of this component is a name that
+     * is never meant to be seen. The exception is the one element that *must*
+     * appear when it is reached — a skip link — and there is no way for a caller
+     * to add it from the outside: the clip is `position: absolute`, so revealing
+     * it means putting the element back in the flow, which a `className` cannot
+     * do without also fighting the class it is trying to override.
+     *
+     * `:focus-within` rather than `:focus`, because the thing being tabbed to is
+     * almost always a link *inside* the box rather than the box itself — and
+     * `:focus-within` matches the element when it holds the focus too, so the
+     * narrower case is covered by the wider one.
+     * @default false
+     */
+    focusable?: boolean;
+    /**
+     * Renders something other than a `<span>`: `render={<div />}`,
+     * `render={<h2 />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content for a screen reader and for nobody else.
+ *
+ * It is not a styling escape hatch and it is not `display: none`. The two
+ * obvious ways to hide something — `hidden` and `opacity: 0` — are both wrong
+ * in the same place: the first takes the text off the accessibility tree along
+ * with the screen, which is the one thing this component exists to avoid, and
+ * the second leaves a clickable ghost the size of the words. A one-pixel
+ * clipped box is the only form that is absent to a sighted reader and present
+ * to every other kind.
+ *
+ * What it is for is the sentence a control cannot say out loud — the word
+ * "Close" on a button that draws an ✕, the unit after a number, the change of
+ * context on a link that says "read more". The library already reaches for this
+ * inside a dozen components; this is the same rule, spelled once, for the
+ * caller's own markup.
+ */
+export declare const PlVisuallyHidden: React.ForwardRefExoticComponent<PlVisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/visually-hidden/PlVisuallyHidden.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as i from"react";import{useRender as r}from"@base-ui/react/use-render";import{cx as s,srOnlyClasses as n}from"../../internal/styles.js";const o=/* @__PURE__ */["focus-within:static focus-within:size-auto","focus-within:overflow-visible focus-within:whitespace-normal","focus-within:[clip-path:none]"].join(" ");export const PlVisuallyHidden=/* @__PURE__ */i.forwardRef(function PlVisuallyHidden({focusable:i=!1,render:t,className:a,children:c,...l},f){return r({render:t??e("span",{}),ref:f,props:{className:s(n,i?o:"",a),children:c,...l}})});

package/dist/components/visually-hidden/index.d.ts

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

package/dist/components/visually-hidden/index.js

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

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 d,iconClasses as c}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as g,windowSlots as f}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.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 p=[{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(b,v){const{os:x="macos",title:z,icon:y,actions:N,controls:M=!0,size:C,color:E,accent:L=!1,transparency:S=0,active:k,elevation:R=2,position:j="static",draggable:I=!1,resizable:T=!1,width:D,height:P,minWidth:B=180,minHeight:W,offset:A,defaultOffset:H,onOffsetChange:O,onResize:X,open:$,defaultOpen:G=!0,onOpenChange:F,minimized:U,defaultMinimized:Y=!1,onMinimizedChange:_,maximized:q,defaultMaximized:K=!1,onMaximizedChange:J,scroll:Q=!0,minimizeLabel:V,maximizeLabel:Z,restoreLabel:ee,closeLabel:te,resizeLabel:ne,render:ie,className:oe,style:re,children:se,...ae}=b,le=w(),de=C??le.size??"md",ce=E??le.color??"primary",ue=s(),me=h(x),he=g(x,de),ge=i.useId(),[fe,we]=useLatched($,G,F),[pe,be]=useLatched(U,Y,_),[ve,xe]=useLatched(q,K,J),[ze,ye]=useLatched(A,H??{x:0,y:0},O),[Ne,Me]=i.useState(null),[Ce,Ee]=i.useState(!0),Le=k??Ce,[Se,ke]=i.useState(null),[Re,je]=i.useState(null),[Ie,Te]=i.useState(!1),[De,Pe]=i.useState(!1),[Be,We]=i.useState(fe);Be!==fe&&(We(fe),Pe(!fe)),i.useEffect(()=>{if(!De)return;const e=window.setTimeout(()=>Pe(!1),260);return()=>window.clearTimeout(e)},[De]);const Ae=i.useRef(null),He=i.useCallback(e=>{Ae.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]);i.useEffect(()=>{if(void 0!==k)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 Ee(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ee(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[k]);const Oe=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;Oe.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Te(!0);const finish=()=>{Oe.current=null,Te(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});Oe.current=()=>{s(),finish()}}i.useEffect(()=>()=>Oe.current?.(),[]);const Xe={width:Math.max(0,B),height:Math.max(he.bar,W??he.bar)};function resizeTo(e){Me(e),X?.(e)}const $e=m(x,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ge=$e.includes("maximize");i.useEffect(()=>{if(pe||null===Re)return;const e=window.setTimeout(()=>je(null),400);return()=>window.clearTimeout(e)},[pe,Re]);const Fe={minimize:V??ue.minimize,maximize:Z??ue.maximize,restore:ee??ue.restore,close:te??ue.close},Ue=e(u,{os:x,metrics:he,controls:$e,maximized:ve,active:Le,labels:Fe,onCommand:function command(e){"close"===e?we(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&ke(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Ne?.height??P)&&t)return je(t.getBoundingClientRect().height),void requestAnimationFrame(()=>be(!0));be(e)}(!pe):xe(!ve)}}),Ye=d(z)?e("span",{id:ge,className:"min-w-0 truncate",children:z}):null,_e=d(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,qe=t("div",{className:a("relative flex shrink-0 items-center select-none",c,I&&!ve?"cursor-grab active:cursor-grabbing":""),style:{height:he.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:he.weight,paddingInlineStart:he.padX,paddingInlineEnd:he.padEnd,gap:Math.round(.7*he.title),fontSize:he.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:me.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!I||ve)return;const t={...ze};beginGesture(e,(e,n)=>ye({x:t.x+e,y:t.y+n}))},onDoubleClick:Ge?()=>xe(!ve):void 0,children:["start"===me.controlsSide?Ue:null,"center"===me.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:he.controlsWidth($e.length)+2*he.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*he.title)},children:[_e,Ye]})}):t(n,{children:[_e,Ye]}),e("span",{className:"flex-1"}),d(N)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*he.title)},onPointerDown:e=>e.stopPropagation(),children:N}):null,"end"===me.controlsSide?Ue:null]}),Ke=ve?{left:0,top:0,width:"100%",height:"100%"}:{left:ze.x,top:ze.y,width:Ne?.width??D,height:pe?Se??he.bar:Ne?.height??P??Re??void 0},Je=o({render:ie,ref:He,props:{role:"group","aria-labelledby":Ye?ge:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",S>0?l:"",me.glass&&0===S?"[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]",oe),"data-gesture":Ie?"":void 0,inert:!fe||void 0,style:{opacity:fe?void 0:0,...f({os:x,color:ce,accent:L,transparency:S,active:Le,elevation:R}),position:"static"===j?"relative":j,...Ke,borderRadius:ve?0:`${he.radius}px ${he.radius}px ${he.radiusBottom}px ${he.radiusBottom}px`,borderStyle:"solid",borderWidth:he.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...re},children:t(n,{children:[qe,e("div",{className:a("min-h-0 flex-1",Q?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:he.band.side,marginBottom:he.band.bottom,boxShadow:he.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:pe,children:se}),!T||ve||pe?null:p.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ne??ue.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||ve)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:ze.x,y:ze.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:d,y:c}=o;r&&(n=Math.max(Xe.width,o.width+e)),l&&(i=Math.max(Xe.height,o.height+t)),s&&(n=Math.max(Xe.width,o.width-e),d=o.x+(o.width-n)),a&&(i=Math.max(Xe.height,o.height-t),c=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&ye({x:d,y:c})})}(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(Xe.width,i.width+e),height:Math.max(Xe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ae}});return fe||De?Je: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,2 @@
+/* Scan manifest for <area-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/area-chart';

package/dist/css/back-top.css

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

package/dist/css/bar-chart.css

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

package/dist/css/calendar.css

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

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/confirm.css

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

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,2 @@
+/* Scan manifest for <data-table>. Needs `plass-ui/css/base.css` first. */
+@source '../components/data-table';

package/dist/css/empty.css

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

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,2 @@
+/* Scan manifest for <floating-action-button>. Needs `plass-ui/css/base.css` first. */
+@source '../components/floating-action-button';

package/dist/css/gallery.css

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

package/dist/css/gauge-chart.css

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

package/dist/css/heatmap-chart.css

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

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/image.css

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

package/dist/css/line-chart.css

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

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/pie-chart.css

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

package/dist/css/popconfirm.css

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

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,2 @@
+/* Scan manifest for <scatter-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scatter-chart';

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/show.css

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

package/dist/css/sparkline.css

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

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

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

package/dist/css/stepper.css

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

package/dist/css/timeline-chart.css

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

package/dist/css/tour.css

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

package/dist/css/tree-select.css

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

package/dist/css/tree.css

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

package/dist/css/visually-hidden.css

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

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

@@ -0,0 +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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,41 @@
+import type { PlassBreakpoint, PlassResponsive } from '../types.js';
+/**
+ * Which rung of the breakpoint ladder the window is on.
+ *
+ * Four queries rather than one `innerWidth` read, and deliberately: a width
+ * measured in JavaScript is a number that has to be compared against a `rem`,
+ * and a `rem` is whatever the reader has set their font size to. `matchMedia`
+ * asks the same engine the stylesheet asks, so a component that switches at
+ * `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.
+ */
+export declare function usePlBreakpoint(): PlassBreakpoint;
+/**
+ * A `PlassResponsive` value, resolved for the width the window is at.
+ *
+ * The same shape and the same rule as `PlGrid`'s own props: a bare value
+ * applies everywhere, and a map applies each entry **from its own breakpoint
+ * up**, so `{ xs: 1, md: 3 }` is `1` on a phone and `3` from 48rem. An entry
+ * cascades to the rungs above it, which is what keeps a responsive value to the
+ * breakpoints it actually names.
+ *
+ * It exists because there is a class of decision CSS cannot make — how many
+ * items to fetch, which of two components to mount, how many characters to
+ * truncate at — and writing it out by hand means repeating the ladder in
+ * numbers a stylesheet will later disagree with.
+ *
+ * `undefined` when the map named no rung at or below the current one:
+ * `{ lg: 3 }` on a phone is not `3`, and guessing a value the caller did not
+ * write would be worse than saying so.
+ *
+ * An object is read as a **map**, exactly as it is in a responsive prop — so a
+ * value that is itself an object has to be wrapped in a map to be passed
+ * through: `{ xs: { … } }`.
+ */
+export declare function usePlBreakpointValue<T>(value: PlassResponsive<T>): T | undefined;

package/dist/hooks/usePlBreakpoint.js

@@ -0,0 +1 @@
+"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/usePlColorScheme.d.ts

@@ -0,0 +1,66 @@
+import { type PlColorScheme, type PlResolvedColorScheme } from '../internal/color-scheme.js';
+export type { PlColorScheme, PlResolvedColorScheme };
+export interface PlColorSchemeOptions {
+    /**
+     * What to use when nothing has been stored.
+     *
+     * `system` — follow the platform — and it should stay `system`: a library
+     * that pinned a page to light on first visit would be overruling a preference
+     * the reader has already expressed to their operating system.
+     * @default 'system'
+     */
+    defaultScheme?: PlColorScheme;
+    /**
+     * Where the choice is kept, in `localStorage`.
+     *
+     * Change it to scope the choice to one app on a shared origin. There is no
+     * way to turn storage off, because a toggle whose answer does not survive a
+     * reload is a toggle that looks broken.
+     * @default 'plass-color-scheme'
+     */
+    storageKey?: string;
+}
+export interface PlColorSchemeResult {
+    /** What the reader chose. `system` is the absence of a choice. */
+    scheme: PlColorScheme;
+    /** What the page is painted in, once `system` has been resolved. */
+    resolved: PlResolvedColorScheme;
+    /** Chooses one. Written to `<html>` and to storage, and every other caller of this hook hears about it. */
+    setScheme: (next: PlColorScheme) => void;
+    /**
+     * Light ⇄ dark, from whatever is currently *painted*.
+     *
+     * So the first press on a system-dark page gives light, which is what a
+     * reader pressing a toggle means. It leaves `system` behind, deliberately:
+     * they have now expressed a preference of their own.
+     */
+    toggle: () => void;
+}
+/**
+ * The dark mode toggle, and what it takes to make one that does not flash.
+ *
+ * The library's tokens already answer to `.dark` / `[data-theme]` on any
+ * ancestor and to `prefers-color-scheme` when neither is there, so a page that
+ * only ever follows the platform needs nothing at all — this is for the app that
+ * offers a **choice**, which needs three things the CSS cannot do on its own:
+ * somewhere to keep it, something to write it onto `<html>`, and a way to paint
+ * it before the first frame.
+ *
+ * The third one is not this hook. React runs after the document has been
+ * parsed, so a scheme applied from an effect is applied one paint too late and
+ * the reader sees a white flash. [`PlColorSchemeScript`](./PlColorSchemeScript)
+ * is the answer to that and belongs in `<head>`.
+ *
+ * ```tsx
+ * const { resolved, toggle } = usePlColorScheme();
+ *
+ * <PlIconButton label="Switch theme" icon={resolved === 'dark' ? <Sun /> : <Moon />} onClick={toggle} />
+ * ```
+ *
+ * **`storageKey` and `defaultScheme` are read once**, when the first component
+ * using that key mounts, and are ignored on every call after it. That is what
+ * makes two toggles on one page agree with each other — they share one store —
+ * and it means these two are decisions to make where the app is set up rather
+ * than props to compute. Changing them at runtime does nothing.
+ */
+export declare function usePlColorScheme(options?: PlColorSchemeOptions): PlColorSchemeResult;

package/dist/hooks/usePlColorScheme.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{DEFAULT_STORAGE_KEY as t,applyColorScheme as r,darkQuery as s,useColorSchemeStore as o}from"../internal/color-scheme.js";import{useMediaQuery as m}from"../internal/media.js";export function usePlColorScheme(c={}){const{defaultScheme:l="system",storageKey:a=t}=c,[i,n]=o(a,l),f=m(s),h="system"===i?f?"dark":"light":i;e.useEffect(()=>{r(i)},[i]);const u=e.useCallback(()=>{n("dark"===h?"light":"dark")},[h,n]);return{scheme:i,resolved:h,setScheme:n,toggle:u}}