plass-ui 1.3.0 → 1.5.0

package/dist/hooks/usePlElementSize.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/** The box an element is laid out at, in pixels. */
+export interface PlElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * How big an element is, kept up to date as it changes.
+ *
+ * A `ResizeObserver` and the two things a hook has to add. The first is
+ * **when**: the size is read in a layout effect as well as from the observer,
+ * because an observer's first callback arrives after a frame has been painted
+ * and a component that laid itself out from `0 × 0` for one frame flashes.
+ *
+ * The second is what it reports: the **content box**, the room actually left
+ * inside the element once its own padding has been taken off. A hand-written
+ * version nearly always reports `getBoundingClientRect` or `borderBoxSize`
+ * instead, which is a different number — and the wrong one for the question
+ * that made somebody measure the element.
+ *
+ * `null` until there is an element to measure, which is the honest answer on a
+ * server and on the first render: guessing `0` there would let a caller divide
+ * by it. The ref is read again after every render, so an element that is
+ * attached later — `loading ? <Spinner /> : <div ref={box}>` — or swapped for
+ * another is measured from the moment it is there, and the answer goes back to
+ * `null` while there is none.
+ *
+ * @example
+ * const box = React.useRef<HTMLDivElement>(null);
+ * const size = usePlElementSize(box);
+ *
+ * <div ref={box}>{size ? `${Math.round(size.width)}px` : null}</div>
+ */
+export declare function usePlElementSize(target: React.RefObject<HTMLElement | null>): PlElementSize | null;

package/dist/hooks/usePlElementSize.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function usePlElementSize(t){const[n,r]=e.useState(null),[i,o]=e.useState(null);return e.useLayoutEffect(()=>{t.current!==i&&o(t.current)}),e.useLayoutEffect(()=>{if(!i)return void r(null);const read=()=>{const e=function contentBoxOf(e){const t=getComputedStyle(e),n=parseFloat(t.paddingInlineStart)+parseFloat(t.paddingInlineEnd),r=parseFloat(t.paddingBlockStart)+parseFloat(t.paddingBlockEnd);return{width:Math.max(0,e.clientWidth-n),height:Math.max(0,e.clientHeight-r)}}(i);r(t=>t?.width===e.width&&t.height===e.height?t:e)};if(read(),"undefined"==typeof ResizeObserver)return;const e=new ResizeObserver(read);return e.observe(i),()=>e.disconnect()},[i]),n}

package/dist/hooks/usePlHotKeys.d.ts

@@ -55,7 +55,7 @@ export interface PlHotKeysOptions {
  * 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:
+ * Five 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`.
@@ -66,6 +66,10 @@ export interface PlHotKeysOptions {
  * - **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.
+ * - **A chord names the key, not the character it types.** `Alt+K` answers
+ *   the `˚` Option+K types on a Mac, and `?` needs no `Shift+`.
+ * - **A key an input method is composing is left alone**, so the Enter that
+ *   commits a syllable fires nothing.
  *
  * 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

package/dist/hooks/usePlHotKeys.js

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

package/dist/hooks/usePlOnScreen.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+export interface PlOnScreenOptions {
+    /**
+     * How much of the element has to be showing before it counts, from `0` to
+     * `1`.
+     * @default 0
+     */
+    threshold?: number;
+    /**
+     * How far outside the viewport still counts, as a CSS margin — `'200px'`
+     * starts a fetch a screen early.
+     */
+    rootMargin?: string;
+    /**
+     * What it is measured against. The viewport when it is not given; a scrolling
+     * panel otherwise.
+     */
+    root?: React.RefObject<Element | null>;
+    /**
+     * Stops watching the first time it appears.
+     *
+     * On by default, because the question a caller almost always has is "has this
+     * been seen yet" rather than "is it on screen right now" — a lazily loaded
+     * picture, a section that animates once, a page that fetches the next batch.
+     * Turn it off for the answer that keeps changing.
+     * @default true
+     */
+    once?: boolean;
+}
+/**
+ * Whether an element is on screen.
+ *
+ * An `IntersectionObserver` with the three things a hook has to decide, and
+ * the interesting one is `once`. It is **on** by default: the question a caller
+ * almost always has is "has this been seen yet", not "is it on screen right
+ * now", and a hook that kept answering the second one would re-render a page of
+ * lazily loaded pictures every time the reader scrolled past any of them.
+ *
+ * `false` on a server and on the first render, which is the safe answer for
+ * both of the things this is used for: nothing is fetched that did not need to
+ * be, and nothing is played before a reader could see it.
+ *
+ * A browser with no observer is told **yes** rather than no. There is no way to
+ * find out, and a picture that never loads is worse than one that loads early.
+ *
+ * The refs are read again after every render, so an element or a `root` that is
+ * attached after the first one, or swapped for another, is watched from the
+ * moment it is there.
+ *
+ * @example
+ * const section = React.useRef<HTMLDivElement>(null);
+ * const seen = usePlOnScreen(section, { rootMargin: '200px' });
+ */
+export declare function usePlOnScreen(target: React.RefObject<Element | null>, { threshold, rootMargin, root, once }?: PlOnScreenOptions): boolean;

package/dist/hooks/usePlOnScreen.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function usePlOnScreen(t,{threshold:r=0,rootMargin:n,root:o,once:s=!0}={}){const[u,c]=e.useState(!1),[i,l]=e.useState(null),[f,a]=e.useState(null);return e.useEffect(()=>{t.current!==i&&l(t.current),(o?.current??null)!==f&&a(o?.current??null)}),e.useEffect(()=>{if(!i)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const e=new IntersectionObserver(([t])=>{t.isIntersecting?(c(!0),s&&e.disconnect()):s||c(!1)},{threshold:r,rootMargin:n,root:f});return e.observe(i),()=>e.disconnect()},[i,f,r,n,s]),u}

package/dist/index.d.ts

@@ -3,22 +3,31 @@ 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/anchor/index.js';
 export * from './components/animate-appear/index.js';
 export * from './components/animate-blink/index.js';
+export * from './components/animate-counter/index.js';
 export * from './components/animate-fade/index.js';
+export * from './components/animate-float/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-reveal/index.js';
 export * from './components/animate-rotate/index.js';
+export * from './components/animate-scramble/index.js';
+export * from './components/animate-shake/index.js';
 export * from './components/animate-slide/index.js';
+export * from './components/animate-split/index.js';
 export * from './components/animate-typing/index.js';
 export * from './components/animate-zoom/index.js';
+export * from './components/app-logo/index.js';
+export * from './components/area-chart/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/bar-chart/index.js';
 export * from './components/blockquote/index.js';
 export * from './components/bottom-navigation/index.js';
 export * from './components/box/index.js';
@@ -31,12 +40,15 @@ 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/code-block/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/data-list/index.js';
+export * from './components/data-table/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';
@@ -45,19 +57,29 @@ 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/flex/index.js';
+export * from './components/floating-action-button/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/gallery/index.js';
+export * from './components/gauge-chart/index.js';
 export * from './components/grid/index.js';
 export * from './components/header/index.js';
+export * from './components/heatmap-chart/index.js';
 export * from './components/highlight/index.js';
 export * from './components/hot-keys/index.js';
+export * from './components/hover-card/index.js';
+export * from './components/how-to-steps/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
 export * from './components/image/index.js';
+export * from './components/line-chart/index.js';
 export * from './components/list/index.js';
 export * from './components/menu/index.js';
 export * from './components/menubar/index.js';
+export * from './components/meter/index.js';
+export * from './components/mockup/index.js';
 export * from './components/modal/index.js';
 export * from './components/navigation-menu/index.js';
 export * from './components/number-field/index.js';
@@ -66,21 +88,28 @@ 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/pie-chart/index.js';
 export * from './components/pill/index.js';
 export * from './components/popconfirm/index.js';
 export * from './components/popover/index.js';
+export * from './components/portal/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/scatter-chart/index.js';
+export * from './components/scroll-area/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/show/index.js';
 export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
+export * from './components/sparkline/index.js';
 export * from './components/spoiler/index.js';
+export * from './components/stack/index.js';
 export * from './components/stat/index.js';
 export * from './components/stepper/index.js';
 export * from './components/switch/index.js';
@@ -90,11 +119,15 @@ 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/timeline-chart/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/tour/index.js';
 export * from './components/tree/index.js';
+export * from './components/tree-select/index.js';
 export * from './components/transfer/index.js';
 export * from './components/typography/index.js';
 export * from './components/visually-hidden/index.js';
+export * from './components/window-pane/index.js';

package/dist/index.js

@@ -1 +1 @@
-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";
+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/anchor/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-counter/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-float/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-reveal/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-scramble/index.js";export*from"./components/animate-shake/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-split/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/app-logo/index.js";export*from"./components/area-chart/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/back-top/index.js";export*from"./components/badge/index.js";export*from"./components/bar-chart/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/code-block/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/data-list/index.js";export*from"./components/data-table/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/flex/index.js";export*from"./components/floating-action-button/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/gallery/index.js";export*from"./components/gauge-chart/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/heatmap-chart/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/hover-card/index.js";export*from"./components/how-to-steps/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/line-chart/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/meter/index.js";export*from"./components/mockup/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/pie-chart/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/portal/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/scatter-chart/index.js";export*from"./components/scroll-area/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/show/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/sparkline/index.js";export*from"./components/spoiler/index.js";export*from"./components/stack/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/timeline-chart/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/tour/index.js";export*from"./components/tree/index.js";export*from"./components/tree-select/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";export*from"./components/window-pane/index.js";

package/dist/internal/animate.d.ts

@@ -25,15 +25,27 @@
  * `rotate` properties rather than on the `transform` shorthand, so a caller's
  * own transform on the same element survives.
  *
+ * ## Telling the children apart
+ *
+ * `stagger`, `durationStep` and `reverse` move an effect off the box and onto
+ * the things inside it, one after another. There is no `PlAnimateStagger`
+ * component and there should not be: a stagger is a *differential* rather than
+ * an effect, and a wrapper would be a second way to spell something all six
+ * effects can already say. `animateChildren` and `staggerSlots` are what
+ * `PlAnimateAppear` — which was staggering long before the six could — now runs
+ * on as well, because two implementations of "one after another" is two
+ * opinions about the arithmetic.
+ *
  * ## What is deliberately not here
  *
  * An effect that has to know what its children *are* — a marquee that lays them
  * down twice, a headline that swaps between them, a typewriter that counts
  * graphemes — cannot be a class name and a few numbers. Those are components,
- * and their logic stays in their own files.
+ * and their logic stays in their own files. They are also the four that cannot
+ * take a `stagger`, for the same reason: their children are already spoken for.
  */
 import * as React from 'react';
-import type { PlassAnimateRepeat, PlassAnimateTrigger, PlassAnimation, PlassSide } from '../types.js';
+import type { PlassAnimateRepeat, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassAnimateTrigger, PlassAnimation, PlassSide } from '../types.js';
 /**
  * Which keyframe an effect runs.
  *
@@ -59,7 +71,15 @@ export declare function isInfinite(repeat: PlassAnimateRepeat | undefined): bool
  * is `both`, so a faded-out element stays faded out instead of snapping back.
  */
 export declare function directionValue(mode: 'in' | 'out', alternate: boolean | undefined): string;
-export interface AnimationSlotOptions {
+/**
+ * Where a scroll-linked effect starts and finishes, as an `animation-range`.
+ *
+ * Finished while the element is still arriving rather than when it reaches the
+ * middle of the screen: an entrance that is only half drawn by the time a
+ * reader has read past it is an entrance that never happened.
+ */
+export declare const defaultViewRange = "entry 0% cover 45%";
+export interface AnimationSlotOptions extends PlassAnimateTimelineProps {
     duration: number;
     delay: number;
     easing?: string;
@@ -73,6 +93,8 @@ export interface AnimationSlotOptions {
     y?: string;
     angle?: string;
     angleTo?: string;
+    /** The `clip-path` a reveal is uncovered from. */
+    clip?: string;
 }
 /**
  * The `--p-anim-*` slots, as an inline style object.
@@ -82,6 +104,14 @@ export interface AnimationSlotOptions {
  * has never seen written down.
  */
 export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * The `clip-path` a reveal starts from, given the edge it uncovers from.
+ *
+ * `inset()` takes its four sides in the physical order CSS writes them, and
+ * `PlassSide` is physical for the same reason it is on a slide: a title wiped
+ * in from the top is wiped in from the top in every writing direction.
+ */
+export declare function revealClip(from: PlassSide): string;
 /**
  * Which way a slide starts, given the edge it comes from.
  *
@@ -101,6 +131,17 @@ export interface AnimationRunOptions {
     paused?: boolean;
     /** An infinite effect stops when the pointer leaves; a finite one finishes. */
     infinite: boolean;
+    /**
+     * A value that plays the effect again whenever it changes, and never on the
+     * first render.
+     *
+     * `play` is a boolean, so replaying with it means toggling off and on — two
+     * renders for one event, and a piece of state whose only job is to be
+     * flipped back. A response to something that can happen twice needs the
+     * *event*, and a value that has changed is the closest React has to one: a
+     * count of failed attempts already is this.
+     */
+    nonce?: unknown;
 }
 export interface AnimationRun {
     /** Goes on the animated element. */
@@ -109,7 +150,25 @@ export interface AnimationRun {
     state: 'running' | 'paused';
     /** Whether the animation has been let go at all. */
     started: boolean;
-    /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
+    /**
+     * How many times it has been started, counting every hover, every `play` and
+     * every change of `nonce`.
+     *
+     * `started` stays `true` from the first start on, so a second hover changes
+     * nothing an effect could depend on. A keyframe does not need to know, because
+     * it is rewound in the DOM whenever this changes. Counter, Scramble and Typing
+     * run their own loops in JavaScript, and they replay by listing this among
+     * their effects' dependencies.
+     */
+    runs: number;
+    /**
+     * The hover trigger's handlers when `trigger` is `hover`; empty otherwise.
+     *
+     * Merged with the caller's props through `mergeProps` rather than spread
+     * beside them. Both sides want `onPointerEnter` and `onFocus`, and a spread
+     * keeps only one: either a caller's prefetch never runs, or a caller's
+     * `onFocus` quietly takes the keyboard's way in away from the effect.
+     */
     handlers: React.HTMLAttributes<HTMLElement>;
 }
 /**
@@ -130,18 +189,73 @@ export interface AnimationRun {
  * with it. Clearing `animation-name`, reading a layout property to force the
  * style to settle, and putting it back is the one move that rewinds the element
  * and leaves everything inside it alone.
+ *
+ * **`visible` is measured rather than observed.** Two observers report and
+ * neither decides: what they say is that the view has moved, and the answer is
+ * then read off the element's own resting box. An `IntersectionObserver` sees
+ * the element where its first frame is holding it, which for a slide is a
+ * screen from where it lives, so the box it reports on is the wrong box.
+ */
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, nonce }: AnimationRunOptions): AnimationRun;
+export interface StaggerPosition extends Required<PlassAnimateStaggerProps> {
+    index: number;
+    count: number;
+}
+/**
+ * Where one child sits in a staggered run.
+ *
+ * `reverse` turns the *order* round and nothing else: the last child goes
+ * first and every child still plays forwards. An effect that ran backwards is
+ * `mode="out"`, which is a different question and already has an answer.
+ *
+ * The duration is floored at zero rather than allowed to go negative, because a
+ * negative `animation-duration` is invalid and an invalid declaration is
+ * dropped — which would leave that one child playing at the CSS default while
+ * its neighbours honoured the prop.
+ */
+export declare function staggerSlots(slots: AnimationSlotOptions, { index, count, stagger, durationStep, reverse }: StaggerPosition): AnimationSlotOptions;
+/**
+ * Writes one effect onto each child, with that child's own slots.
+ *
+ * Onto the children **themselves** rather than onto wrappers around them, which
+ * is the whole reason this is worth sharing: a row of `<li>`s stays a row of
+ * `<li>`s, a grid's cells stay its direct children, and nothing about the
+ * layout changes because the set is being animated. A wrapper per child would
+ * break every one of those.
+ *
+ * The trade is the one `React.cloneElement` always makes — a child has to
+ * accept a `className` and a `style` — and it is taken here and nowhere else in
+ * the library. It is bearable because what is being copied is *only* the
+ * animation, so a child that ignores both is a child that does not animate,
+ * rather than a child that lands in the wrong place. `PlStack` draws a wrapper
+ * per item instead, and takes the layout cost, precisely because *there* the
+ * failure would not be survivable: a child that dropped the class would land in
+ * the wrong place rather than merely arriving without an entrance.
+ *
+ * A bare string has no element to write onto, so that one is wrapped in a
+ * `<span>`. It is the only case that gets a wrapper.
  */
-export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
-export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+export declare function animateChildren(children: React.ReactNode, className: string, slotsFor: (index: number, count: number) => React.CSSProperties): React.ReactNode[];
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions, PlassAnimateStaggerProps {
     /** Which keyframe. `null` for the components that write their own. */
     effect: PlassAnimation | null;
+    /** `transform-origin`, for the two effects that turn about a point. */
+    origin?: string;
+    /** Needed only to be handed back staggered. Passed straight through otherwise. */
+    children?: React.ReactNode;
 }
 export interface AnimateElement {
     ref: React.RefCallback<HTMLElement>;
     className: string;
     style: React.CSSProperties;
-    /** The hover handlers and the two data attributes, ready to be spread. */
+    /**
+     * The hover handlers and the two data attributes, to be merged with the
+     * caller's props through `mergeProps` for the reason `AnimationRun.handlers`
+     * gives.
+     */
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /** The children, with the effect written onto them if it was staggered. */
+    children: React.ReactNode;
 }
 /**
  * Everything a one-keyframe `PlAnimate*` root needs, in one call.

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"}}}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}}}
+import*as e from"react";import{cx as t}from"./styles.js";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",reveal:"plass-anim-reveal"};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,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";export function animationSlots(e){const t={"--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&&(t["--p-anim-ease"]=e.easing),"view"===e.timeline&&(t["--p-anim-timeline"]="view()",t["--p-anim-range"]=e.range??defaultViewRange),void 0!==e.opacity&&(t["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(t["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(t["--p-anim-x"]=e.x),void 0!==e.y&&(t["--p-anim-y"]=e.y),void 0!==e.angle&&(t["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(t["--p-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(t["--p-anim-clip"]=e.clip),t}export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function slideOffsets(e,t){const n=lengthValue(t),r="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:r};case"bottom":return{x:"0px",y:n};case"left":return{x:r,y:"0px"};default:return{x:n,y:"0px"}}}function viewportRect(){const e=document.documentElement;return new DOMRect(0,0,e.clientWidth,e.clientHeight)}function holds(e,t){return null!==e&&t instanceof Node&&e.contains(t)}export function useAnimationRun({trigger:t,play:n,once:r,threshold:i,paused:a,infinite:o,nonce:s}){const l=e.useRef(null),[c,u]=e.useState("mount"===t),[m,p]=e.useState(0),f=e.useCallback(()=>{u(!0),p(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=l.current;if(!e||0===m)return;const t=[e];for(const n of e.querySelectorAll(".plass-anim, .plass-marquee-track"))n.closest("[data-plass-animation]")===e&&t.push(n);for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[m]);const d=e.useRef("mount"!==t);e.useEffect(()=>{d.current=!c},[c]),e.useEffect(()=>{if("visible"!==t)return;const e=l.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const n=[],a=e.parentElement;let o=a?null:viewportRect();const check=()=>{if(!o)return;const t=function visibleShare(e,t){const n=e.width*e.height;if(n<=0)return 0;const r=Math.min(e.right,t.right)-Math.max(e.left,t.left),i=Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top);return Math.max(0,r)*Math.max(0,i)/n}(function restingRect(e,t){if(!t)return e.getBoundingClientRect();const n=e.style.animationName;e.style.animationName="none";const r=e.getBoundingClientRect();return e.style.animationName=n,r}(e,d.current),o);if(t>0&&t>=i){if(f(),r)for(const e of n)e.disconnect()}else r||u(!1)},s=function measureSteps(e){const t=Array.from({length:21},(e,t)=>t/20);return e>0&&e<1?[...t,e]:t}(i);if(a){const e=new IntersectionObserver(([e])=>{o=function clipRect(e){const t=e.boundingClientRect;return t.width*t.height>0?e.intersectionRect:e.rootBounds??viewportRect()}(e),check()},{threshold:s});n.push(e),e.observe(a)}const c=new IntersectionObserver(check,{threshold:s});return n.push(c),c.observe(e),()=>{for(const e of n)e.disconnect()}},[t,r,i,f]);const g=e.useRef(s);e.useEffect(()=>{Object.is(s,g.current)||(g.current=s,f())},[s,f]),e.useEffect(()=>{"manual"===t&&(n?f():u(!1))},[t,n,f]);const h="hover"===t?{onPointerEnter:f,onFocus:e=>{holds(l.current,e.relatedTarget)||f()},onPointerLeave:()=>{o&&u(!1)},onBlur:e=>{o&&!holds(l.current,e.relatedTarget)&&u(!1)}}:{};return{ref:e.useCallback(e=>{l.current=e},[]),state:c&&!a?"running":"paused",started:c,runs:m,handlers:h}}export function staggerSlots(e,{index:t,count:n,stagger:r,durationStep:i,reverse:a}){const o=a?n-1-t:t;return{...e,delay:e.delay+o*r,duration:Math.max(0,e.duration+o*i)}}export function animateChildren(n,r,i){const a=e.Children.toArray(n);return a.map((n,o)=>{const s=i(o,a.length);if(!e.isValidElement(n))return e.createElement("span",{key:o,className:r,style:s},n);const l=n.props;return e.cloneElement(n,{className:t(r,l.className),style:{...s,...l.style}})})}export function useAnimateElement(e){const{effect:t,trigger:n,play:r,once:i,threshold:a,paused:o,infinite:s,nonce:l,stagger:c=0,durationStep:u=0,reverse:m=!1,origin:p,children:f,...d}=e,g=useAnimationRun({trigger:"view"===d.timeline?"mount":n,play:r,once:i,threshold:a,paused:o,infinite:s,nonce:l}),h=t?`plass-anim ${animationClasses[t]}`:"",y=0!==c&&null!==t,v=void 0===p?null:{transformOrigin:p};return{ref:g.ref,className:y?"":h,style:{...v,...y?null:animationSlots(d),"--p-anim-state":g.state},props:{...g.handlers,"data-plass-animation":t??void 0,"data-state":g.state},children:y?animateChildren(f,h,(e,t)=>({...v,...animationSlots(staggerSlots(d,{index:e,count:t,stagger:c,durationStep:u,reverse:m}))})):f}}

package/dist/internal/breakpoints.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The width of each rung, and the queries the library asks about them.
+ *
+ * The ladder itself is declared **in the stylesheet**, as
+ * `--plass-breakpoint-*`, because a page must not have two answers about how
+ * wide it is. That file explains the whole arrangement; the short version is
+ * that a media query's *condition* cannot read a custom property, so the CSS
+ * half resolves Tailwind's `--breakpoint-*` theme at build time through
+ * `@variant`, and this — where a breakpoint is a *value* rather than a
+ * condition — reads the same answer off the document at runtime.
+ *
+ * So a project that moves a breakpoint moves one thing:
+ *
+ *   @theme { --breakpoint-md: 50rem; }
+ *
+ * and both halves follow.
+ */
+import type { PlassBreakpointFloor } from '../types.js';
+/**
+ * Tailwind's own widths, and what is used when the stylesheet cannot be read.
+ *
+ * That is not an edge case: it is every server render, and the first client
+ * render of a page whose CSS has not arrived. Both want the same answer the
+ * shipped stylesheet has baked in, which is this.
+ */
+export declare const defaultFloors: Record<PlassBreakpointFloor, string>;
+export declare function breakpointFloors(): Record<PlassBreakpointFloor, string>;
+/** `(width >= …)` — at this rung and above. */
+export declare function fromQuery(rung: PlassBreakpointFloor): string;
+/** `(width < …)` — below this rung. The mirror of `fromQuery`, never both. */
+export declare function belowQuery(rung: PlassBreakpointFloor): string;

package/dist/internal/breakpoints.js

@@ -0,0 +1 @@
+"use client";export const defaultFloors={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};let e=null;export function breakpointFloors(){if(e)return e;if("undefined"==typeof document||"undefined"==typeof getComputedStyle)return defaultFloors;const t=getComputedStyle(document.documentElement),read=e=>{const o=t.getPropertyValue(`--plass-breakpoint-${e}`).trim();return""===o?defaultFloors[e]:o};return e={sm:read("sm"),md:read("md"),lg:read("lg"),xl:read("xl")},e}export function fromQuery(e){return`(width >= ${breakpointFloors()[e]})`}export function belowQuery(e){return`(width < ${breakpointFloors()[e]})`}

package/dist/internal/button-group.d.ts

@@ -1,5 +1,6 @@
 /**
- * What a `PlButton` inherits from the `PlButtonGroup` around it.
+ * What a `PlButton` inherits from the `PlButtonGroup` around it, and what a run
+ * of keys is made of.
  *
  * A context rather than `React.Children.map` with `cloneElement`, and a file of
  * its own rather than something the group exports, for one reason each.
@@ -13,9 +14,13 @@
  * Every field is optional, and every one of them means *not specified* rather
  * than a value: a button falls back to its own default, so a `PlButtonGroup`
  * with no props of its own changes nothing except the corners.
+ *
+ * The three class lists at the end are here for the same reason the context is:
+ * a `PlToggleGroup` is the same run of keys with a selection on it, and two
+ * copies of the join would be two places for the seam to stop lining up.
  */
 import * as React from 'react';
-import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../types.js';
+import type { PlassColor, PlassDensity, PlassElevation, PlassOrientation, PlassSize, PlassVariant } from '../types.js';
 export interface PlassButtonGroupContextValue {
     variant?: PlassVariant;
     size?: PlassSize;
@@ -25,3 +30,25 @@ export interface PlassButtonGroupContextValue {
     disabled?: boolean;
 }
 export declare const ButtonGroupContext: React.Context<PlassButtonGroupContextValue | null>;
+/**
+ * The corners that face a neighbour are squared off, so a run reads as one
+ * piece scored into segments rather than as three keys that happen to be
+ * touching.
+ *
+ * Logical properties (`s`/`e`) rather than left/right: under RTL the first key
+ * is on the right, and `rounded-l-none` would flatten the wrong side.
+ */
+export declare const groupJoinClasses: Record<PlassOrientation, string>;
+/**
+ * Only `glass` needs the overlap, because it is the only variant that draws an
+ * edge. Two glass keys meeting would otherwise show both of their hairlines and
+ * the seam would be twice as heavy as every other edge on the page; pulling the
+ * second one back a pixel makes the two share one line.
+ *
+ * A `solid` run must **not** do this. Its keys have no border to double up, and
+ * overlapping would put one gradient over the start of the next — which is
+ * exactly the join the squared corners are drawing.
+ */
+export declare const groupOverlapClasses: Record<PlassOrientation, string>;
+/** What a run of keys is, before either of the two above. */
+export declare const groupBaseClasses: string;

package/dist/internal/button-group.js

@@ -1,2 +1,2 @@
-import*as t from"react";export const ButtonGroupContext=
-/* @__PURE__ */t.createContext(null);
+import*as o from"react";export const ButtonGroupContext=
+/* @__PURE__ */o.createContext(null);export const groupJoinClasses={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"};export const groupOverlapClasses={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"};export const groupBaseClasses=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");