plass-ui 1.1.0 → 1.3.0

package/dist/components/tree/PlTree.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** One node. A branch is a node with `children`; a leaf is one without. */
+export interface PlTreeNode {
+    /** What identifies it. Unique across the whole tree. */
+    id: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /** Its own children. An **empty array is a branch with nothing in it**, which
+     * is not the same as a leaf: the first opens and shows nothing, the second
+     * has no twisty at all. `undefined` is the leaf. */
+    children?: readonly PlTreeNode[];
+    /** In the tree but not selectable, and not a stop for the arrow keys. */
+    disabled?: boolean;
+}
+/** How many rows a click can leave selected. */
+export type PlTreeSelection = 'none' | 'single' | 'multiple';
+export interface PlTreeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** The whole tree, as data. */
+    items: readonly PlTreeNode[];
+    /** The ids of the branches that are open. Use with `onExpandedChange` to control them. */
+    expanded?: readonly string[];
+    /** The branches that start open, for an uncontrolled tree. */
+    defaultExpanded?: readonly string[];
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The ids of the selected rows. Use with `onSelectedChange` to control them. */
+    selected?: readonly string[];
+    /** What starts selected, for an uncontrolled tree. */
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (selected: string[]) => void;
+    /**
+     * How many rows a click can leave selected.
+     *
+     * `single` by default. `none` makes the tree a browser rather than a
+     * chooser — every row still expands, and a click reports through
+     * `onItemClick` without anything staying lit.
+     * @default 'single'
+     */
+    selection?: PlTreeSelection;
+    /** Called when a row is clicked, selectable or not. */
+    onItemClick?: (node: PlTreeNode) => void;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * A hierarchy, opened one branch at a time.
+ *
+ * It takes its nodes as **data** rather than as children, which is the opposite
+ * of what most of this library does and is the right way round here for one
+ * reason: a tree is recursive, and recursion written in JSX is a component
+ * every caller has to write for themselves. `PlTable` takes its columns the
+ * same way and for the same reason.
+ *
+ * The keyboard is the ARIA tree pattern and it is most of what makes this a
+ * tree rather than a nested list: **one tab stop** for the whole thing, the up
+ * and down arrows walking the rows that are actually visible, and the left and
+ * right arrows opening a branch, stepping into it, and going back out to the
+ * parent. A tree where Tab walked four hundred rows would be one nobody reaches
+ * the end of.
+ */
+export declare const PlTree: React.ForwardRefExoticComponent<PlTreeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tree/PlTree.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{ChevronIcon as n}from"../../internal/icons.js";import{controlTextLeadingClasses as d,cx as s,focusRingClasses as r,gapClasses as a,iconClasses as o,radiusClasses as c,surfaceSlots as m,transitionClasses as p}from"../../internal/styles.js";const f={xs:14,sm:16,md:20,lg:24,xl:28},u={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,i,t=1,l=[]){for(const n of e)l.push({node:n,level:t}),n.children&&i.has(n.id)&&visibleRows(n.children,i,t+1,l);return l}export const PlTree=/* @__PURE__ */t.forwardRef(function PlTree({items:h,expanded:v,defaultExpanded:x,onExpandedChange:b,selected:y,defaultSelected:g,onSelectedChange:w,selection:k="single",onItemClick:D,size:S,color:j,density:I,className:N,style:E,...R},A){const C=l(),M=S??C.size??"md",z=j??C.color??"primary",F=I??C.density??"default",[P,T]=t.useState(x??[]),$=v??P,B=t.useMemo(()=>new Set($),[$]),[H,K]=t.useState(g??[]),L=y??H,U=t.useMemo(()=>new Set(L),[L]),q=t.useMemo(()=>visibleRows(h,B),[h,B]),[G,J]=t.useState(null),O=q.filter(e=>!e.node.disabled),Q=G&&O.some(e=>e.node.id===G)?G:O[0]?.node.id??null,toggle=(e,i)=>{var t;t=i??!B.has(e)?[...$.filter(i=>i!==e),e]:$.filter(i=>i!==e),void 0===v&&T(t),b?.(t)},select=e=>{if("none"===k)return;const i="multiple"===k?U.has(e.id)?L.filter(i=>i!==e.id):[...L,e.id]:[e.id];void 0===y&&K(i),w?.(i)},V=t.useId(),rowId=e=>`${V}-${e}`,focusRow=e=>{J(e),document.getElementById(rowId(e))?.focus()},renderRow=({node:l,level:m})=>{const h=void 0!==l.children,v=B.has(l.id),x=U.has(l.id);return i(t.Fragment,{children:[i("div",{id:rowId(l.id),role:"treeitem","aria-level":m,"aria-expanded":h?v:void 0,"aria-selected":"none"===k?void 0:x,"aria-disabled":l.disabled||void 0,tabIndex:l.disabled?void 0:Q===l.id?0:-1,onFocus:()=>J(l.id),onKeyDown:e=>{l.disabled||((e,i,t)=>{const l=O.findIndex(e=>e.node.id===i.id),n=void 0!==i.children,d=B.has(i.id);switch(e.key){case"ArrowDown":e.preventDefault(),O[l+1]&&focusRow(O[l+1].node.id);break;case"ArrowUp":e.preventDefault(),O[l-1]&&focusRow(O[l-1].node.id);break;case"ArrowRight":e.preventDefault(),n&&!d?toggle(i.id,!0):n&&O[l+1]&&focusRow(O[l+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),n&&d){toggle(i.id,!1);break}for(let e=l-1;e>=0;e-=1)if(O[e].level<t){focusRow(O[e].node.id);break}break;case"Home":e.preventDefault(),O[0]&&focusRow(O[0].node.id);break;case"End":e.preventDefault(),O.length&&focusRow(O[O.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),n&&toggle(i.id),select(i),D?.(i)}})(e,l,m)},onClick:()=>{l.disabled||(h&&toggle(l.id),select(l),D?.(l))},className:s("flex cursor-pointer items-center select-none",a[M],u[F][M],d[M],c[M],r,p,o,l.disabled?"cursor-not-allowed opacity-50":x?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(m-1)*f[M]+6+"px"},children:[e("span",{"aria-hidden":"true",className:s("flex shrink-0 items-center text-(--plass-muted-fg)",p,h?"":"invisible",v?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(n,{})}),l.icon?e("span",{className:"flex shrink-0 items-center",children:l.icon}):null,e("span",{className:"truncate",children:l.label})]}),h&&v&&l.children.length>0?e("div",{role:"group",children:l.children.map(e=>renderRow({node:e,level:m+1}))}):null]},l.id)};return e("div",{ref:A,role:"tree","aria-multiselectable":"multiple"===k||void 0,className:s("flex flex-col",N),style:{...m(z,0),...E},...R,children:h.map(e=>renderRow({node:e,level:1}))})});

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

@@ -0,0 +1,2 @@
+export { PlTree } from './PlTree.js';
+export type { PlTreeNode, PlTreeProps, PlTreeSelection } from './PlTree.js';

package/dist/components/tree/index.js

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

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

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

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

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

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

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

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/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/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { usePlBreakpoint, usePlBreakpointValue } from './usePlBreakpoint.js';
+export { usePlColorScheme } from './usePlColorScheme.js';
+export type { PlColorScheme, PlColorSchemeOptions, PlColorSchemeResult, PlResolvedColorScheme } from './usePlColorScheme.js';
+export { usePlHotKeys } from './usePlHotKeys.js';
+export type { PlHotKeysOptions, PlHotKeysTarget } from './usePlHotKeys.js';
+export { usePlMediaQuery } from './usePlMediaQuery.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{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";

package/dist/hooks/usePlBreakpoint.d.ts

@@ -0,0 +1,38 @@
+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.
+ *
+ * **`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{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}}

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}}

package/dist/hooks/usePlHotKeys.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { PlassHotKeys } from '../types.js';
+/** Anything a listener can be attached to, plus the ref a React caller holds. */
+export type PlHotKeysTarget = Window | Document | HTMLElement | React.RefObject<HTMLElement | null> | null;
+export interface PlHotKeysOptions {
+    /**
+     * Whether the chords are bound at all. `false` removes the listener rather
+     * than making the handlers no-ops, so a shortcut that is off does not consume
+     * the key from whatever else wanted it.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * What the listener is attached to.
+     *
+     * `window` is the default and is what a global shortcut means. A ref, an
+     * element or `document` scopes the binding to a region — but note that a
+     * `keydown` only reaches an element that contains the focus, so scoping to a
+     * panel nobody has tabbed into binds nothing.
+     * @default window
+     */
+    target?: PlHotKeysTarget;
+    /**
+     * Whether a chord is answered while the focus is in a text field.
+     *
+     * Off by default, and this is the decision the hook exists to get right: a
+     * global `/` that jumps to search must not eat the slash out of a URL
+     * somebody is typing into a form.
+     *
+     * It is narrower than it sounds, and only two kinds of chord are ever held
+     * back. A chord carrying **`Mod`, `Ctrl`, `Meta` or `Alt` is answered either
+     * way**, because none of those can appear in a field's value — so the
+     * ordinary `Mod+K` needs nothing set here. Shift does not count as one:
+     * `Shift+A` is how a capital A is typed. And a key that **does nothing in a
+     * field** is answered either way too: `Escape` is the one that matters, since
+     * a panel that closes on Escape has to close from inside its own form.
+     *
+     * What is left is exactly the case this is for: a printable character, or one
+     * of the keys that edits or moves through text, pressed while the focus is in
+     * a field. Turn it on for a chord that belongs to the field the reader is in.
+     * @default false
+     */
+    whileTyping?: boolean;
+}
+/**
+ * Binds keyboard chords outside any one control.
+ *
+ * The map is the same `PlassHotKeys` a field's `hotKeys` prop takes and the
+ * chords are spelled the way `PlHotKeys` draws them, which is the whole point:
+ * a shortcut that is **displayed** on a key cap and a shortcut that is **bound**
+ * are one string rather than two that drift. `Mod` is Command on a Mac and
+ * Control everywhere else.
+ *
+ * `PlCommandPalette` is the hook's first caller — it has bound its own opener
+ * this way since it existed, with a private copy of the matcher — and an
+ * application's own shortcuts are the reason it is public.
+ *
+ * Three rules it shares with the `hotKeys` prop:
+ *
+ * - **A modifier is checked in both directions.** `Enter` does not fire on
+ *   `Shift+Enter`, and `Mod+K` does not fire on `Mod+Shift+K`.
+ * - **A chord that matches is consumed** — `preventDefault()`, so the browser's
+ *   own `Mod+K` search bar does not also open. Read from the other end, an
+ *   event that is **already** consumed is left alone: a field's own `hotKeys`
+ *   map wins over a page's.
+ * - **These are chords rather than letters.** A single unmodified key is
+ *   allowed and is sometimes right (`?` for help), but it is the case
+ *   `whileTyping` is about.
+ *
+ * The handlers are read fresh on every keystroke, so an inline object literal
+ * costs nothing and a handler closing over current state is never stale. What
+ * rebinds the listener is the **set of chords** changing, not the map's
+ * identity.
+ *
+ * @example
+ * usePlHotKeys({
+ *   'Mod+K': () => setPaletteOpen(true),
+ *   'Mod+S': save
+ * });
+ */
+export declare function usePlHotKeys(hotKeys: PlassHotKeys | undefined, options?: PlHotKeysOptions): void;

package/dist/hooks/usePlHotKeys.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{editsText as n,hasHardModifier as t,isTypingTarget as r,matchesHotKey as o}from"../internal/keys.js";export function usePlHotKeys(i,u={}){const{enabled:s=!0,target:f,whileTyping:c=!1}=u,l=e.useRef(i);e.useEffect(()=>{l.current=i});const d=Object.keys(i??{}).join("\n");e.useEffect(()=>{const e=function resolve(e){return void 0===e?"undefined"==typeof window?null:window:null===e?null:"current"in e?e.current:e}(f);if(!s||!e||""===d)return;const i=d.split("\n"),onKeyDown=e=>{const u=e;if(!u.defaultPrevented)for(const e of i)if(o(u,e)){if(!c&&!t(e)&&n(u.key)&&r(u.target))return;return u.preventDefault(),void l.current?.[e]?.()}};return e.addEventListener("keydown",onKeyDown),()=>e.removeEventListener("keydown",onKeyDown)},[d,f,s,c])}

package/dist/hooks/usePlMediaQuery.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether the window matches a CSS media query, as a boolean that re-renders
+ * when the answer changes.
+ *
+ * The library has always had this — it is how a `PlSidebar` knows it has become
+ * a drawer and how a `PlAnimate*` finds out that the reader asked for less
+ * motion — and it is public now because the alternative in application code is
+ * a `useState`, an effect and a listener that is nearly always subscribed one
+ * render too late.
+ *
+ * **The first answer in a browser is the server's answer.** There is no window
+ * to measure while the HTML is being generated, so this returns `false` on the
+ * server and through the hydrating render, and the real answer arrives in the
+ * render after that. Anything that has to be right in the *first* frame belongs
+ * in CSS — a Tailwind variant, or the `--plass-*` token that variant sets — and
+ * this hook is for the decisions CSS cannot make, like whether a component
+ * exists at all.
+ *
+ * @example
+ * const coarse = usePlMediaQuery('(pointer: coarse)');
+ */
+export declare function usePlMediaQuery(query: string): boolean;

package/dist/hooks/usePlMediaQuery.js

@@ -0,0 +1 @@
+"use client";import{useMediaQuery as e}from"../internal/media.js";export function usePlMediaQuery(r){return e(r)}

package/dist/hooks/usePlReducedMotion.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether the reader has asked their platform for less movement.
+ *
+ * `prefers-reduced-motion: reduce`, read as a boolean that re-renders when it
+ * changes. The library answers it on its own behalf everywhere it moves — every
+ * keyframe in the stylesheet is switched off at once, a typewriter simply
+ * arrives finished — and this is the same answer, for the motion an application
+ * writes itself.
+ *
+ * **"Reduced" is not "none", and the library's own components disagree with
+ * each other on purpose.** An entrance is dropped entirely, because an
+ * animation that never played has still delivered everything it was carrying. A
+ * loading indicator is *slowed* rather than stopped, because a spinner that
+ * stopped would be lying about whether anything is still happening. Which of
+ * those two an effect is, is the question to answer before reaching for this.
+ *
+ * The server's answer is `false` — it has no reader and so no preference — and
+ * so is the first answer in a browser. See `usePlMediaQuery` for why, and note
+ * that it is the safe direction here: the reader gets their preference in the
+ * render after hydration, before any of this has had a frame to run in.
+ */
+export declare function usePlReducedMotion(): boolean;

package/dist/hooks/usePlReducedMotion.js

@@ -0,0 +1 @@
+"use client";import{usePrefersReducedMotion as e}from"../internal/media.js";export function usePlReducedMotion(){return e()}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './types.js';
+export * from './hooks/index.js';
+export * from './provider/index.js';
 export * from './components/accordion/index.js';
 export * from './components/alert/index.js';
 export * from './components/animate-appear/index.js';
@@ -15,6 +17,7 @@ export * from './components/animate-zoom/index.js';
 export * from './components/aspect-ratio/index.js';
 export * from './components/avatar/index.js';
 export * from './components/avatar-group/index.js';
+export * from './components/back-top/index.js';
 export * from './components/badge/index.js';
 export * from './components/blockquote/index.js';
 export * from './components/bottom-navigation/index.js';
@@ -22,6 +25,7 @@ export * from './components/box/index.js';
 export * from './components/breadcrumb/index.js';
 export * from './components/button/index.js';
 export * from './components/button-group/index.js';
+export * from './components/calendar/index.js';
 export * from './components/card/index.js';
 export * from './components/carousel/index.js';
 export * from './components/chat-bubble/index.js';
@@ -30,6 +34,7 @@ export * from './components/chip/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/color-picker/index.js';
 export * from './components/combobox/index.js';
+export * from './components/confirm/index.js';
 export * from './components/command-palette/index.js';
 export * from './components/container/index.js';
 export * from './components/date-picker/index.js';
@@ -37,6 +42,7 @@ export * from './components/date-range-picker/index.js';
 export * from './components/date-time-picker/index.js';
 export * from './components/divider/index.js';
 export * from './components/drawer/index.js';
+export * from './components/empty/index.js';
 export * from './components/fieldset/index.js';
 export * from './components/file-picker/index.js';
 export * from './components/floating-bottom-navigation/index.js';
@@ -48,6 +54,7 @@ export * from './components/highlight/index.js';
 export * from './components/hot-keys/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
+export * from './components/image/index.js';
 export * from './components/list/index.js';
 export * from './components/menu/index.js';
 export * from './components/menubar/index.js';
@@ -60,6 +67,7 @@ export * from './components/page-layout/index.js';
 export * from './components/pagination/index.js';
 export * from './components/panes/index.js';
 export * from './components/pill/index.js';
+export * from './components/popconfirm/index.js';
 export * from './components/popover/index.js';
 export * from './components/progress-box/index.js';
 export * from './components/progress-circular/index.js';
@@ -73,6 +81,8 @@ export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
 export * from './components/spoiler/index.js';
+export * from './components/stat/index.js';
+export * from './components/stepper/index.js';
 export * from './components/switch/index.js';
 export * from './components/table/index.js';
 export * from './components/tabs/index.js';
@@ -84,5 +94,7 @@ export * from './components/toast/index.js';
 export * from './components/toggle/index.js';
 export * from './components/toolbar/index.js';
 export * from './components/tooltip/index.js';
+export * from './components/tree/index.js';
 export * from './components/transfer/index.js';
 export * from './components/typography/index.js';
+export * from './components/visually-hidden/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/modal/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";
+export*from"./types.js";export*from"./hooks/index.js";export*from"./provider/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/back-top/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/confirm/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/modal/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/stat/index.js";export*from"./components/stepper/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tree/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";

package/dist/internal/animate.d.ts

@@ -93,7 +93,6 @@ export declare function slideOffsets(from: PlassSide, distance: number | string)
     x: string;
     y: string;
 };
-export declare function usePrefersReducedMotion(): boolean;
 export interface AnimationRunOptions {
     trigger: PlassAnimateTrigger;
     play?: boolean;

package/dist/internal/animate.js

@@ -1 +1 @@
-import*as e from"react";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return e.easing&&(n["--p-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--p-anim-x"]=e.x),void 0!==e.y&&(n["--p-anim-y"]=e.y),void 0!==e.angle&&(n["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--p-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}const n="(prefers-reduced-motion: reduce)";function subscribeToMotion(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(n);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function readMotion(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(n).matches}function motionOnServer(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(subscribeToMotion,readMotion,motionOnServer)}export function useAnimationRun({trigger:n,play:t,once:a,threshold:i,paused:o,infinite:r}){const s=e.useRef(null),[u,c]=e.useState("mount"===n),[l,p]=e.useState(0),d=e.useCallback(()=>{c(!0),p(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===l)return;const n=[e,...e.querySelectorAll(".plass-anim, .plass-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[l]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void c(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(d(),a&&t.disconnect()):a||c(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,d]),e.useEffect(()=>{"manual"===n&&(t?d():c(!1))},[n,t,d]);const f="hover"===n?{onPointerEnter:d,onFocus:d,onPointerLeave:()=>{r&&c(!1)},onBlur:()=>{r&&c(!1)}}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:u&&!o?"running":"paused",started:u,handlers:f}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s,...u}=e,c=useAnimationRun({trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s});return{ref:c.ref,className:n?`plass-anim ${animationClasses[n]}`:"",style:{...animationSlots(u),"--p-anim-state":c.state},props:{...c.handlers,"data-plass-animation":n??void 0,"data-state":c.state}}}
+import*as e from"react";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return e.easing&&(n["--p-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--p-anim-x"]=e.x),void 0!==e.y&&(n["--p-anim-y"]=e.y),void 0!==e.angle&&(n["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--p-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function useAnimationRun({trigger:n,play:t,once:a,threshold:i,paused:s,infinite:r}){const o=e.useRef(null),[l,u]=e.useState("mount"===n),[c,p]=e.useState(0),m=e.useCallback(()=>{u(!0),p(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=o.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".plass-anim, .plass-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=o.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(m(),a&&t.disconnect()):a||u(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,m]),e.useEffect(()=>{"manual"===n&&(t?m():u(!1))},[n,t,m]);const f="hover"===n?{onPointerEnter:m,onFocus:m,onPointerLeave:()=>{r&&u(!1)},onBlur:()=>{r&&u(!1)}}:{};return{ref:e.useCallback(e=>{o.current=e},[]),state:l&&!s?"running":"paused",started:l,handlers:f}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:s,paused:r,infinite:o,...l}=e,u=useAnimationRun({trigger:t,play:a,once:i,threshold:s,paused:r,infinite:o});return{ref:u.ref,className:n?`plass-anim ${animationClasses[n]}`:"",style:{...animationSlots(l),"--p-anim-state":u.state},props:{...u.handlers,"data-plass-animation":n??void 0,"data-state":u.state}}}