plass-ui 1.3.0 → 1.4.0

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. */
@@ -131,10 +172,53 @@ export interface AnimationRun {
  * style to settle, and putting it back is the one move that rewinds the element
  * and leaves everything inside it alone.
  */
-export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
-export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+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 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>;
@@ -142,6 +226,8 @@ export interface AnimateElement {
     style: React.CSSProperties;
     /** The hover handlers and the two data attributes, ready to be spread. */
     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 n}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,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";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),"view"===e.timeline&&(n["--p-anim-timeline"]="view()",n["--p-anim-range"]=e.range??defaultViewRange),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),void 0!==e.clip&&(n["--p-anim-clip"]=e.clip),n}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,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:r,infinite:s,nonce:o}){const l=e.useRef(null),[c,u]=e.useState("mount"===n),[p,m]=e.useState(0),d=e.useCallback(()=>{u(!0),m(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=l.current;if(!e||0===p)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=""},[p]),e.useEffect(()=>{if("visible"!==n)return;const e=l.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(d(),a&&t.disconnect()):a||u(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,d]);const f=e.useRef(o);e.useEffect(()=>{Object.is(o,f.current)||(f.current=o,d())},[o,d]),e.useEffect(()=>{"manual"===n&&(t?d():u(!1))},[n,t,d]);const g="hover"===n?{onPointerEnter:d,onFocus:d,onPointerLeave:()=>{s&&u(!1)},onBlur:()=>{s&&u(!1)}}:{};return{ref:e.useCallback(e=>{l.current=e},[]),state:c&&!r?"running":"paused",started:c,handlers:g}}export function staggerSlots(e,{index:n,count:t,stagger:a,durationStep:i,reverse:r}){const s=r?t-1-n:n;return{...e,delay:e.delay+s*a,duration:Math.max(0,e.duration+s*i)}}export function animateChildren(t,a,i){const r=e.Children.toArray(t);return r.map((t,s)=>{const o=i(s,r.length);if(!e.isValidElement(t))return e.createElement("span",{key:s,className:a,style:o},t);const l=t.props;return e.cloneElement(t,{className:n(a,l.className),style:{...o,...l.style}})})}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:r,paused:s,infinite:o,nonce:l,stagger:c=0,durationStep:u=0,reverse:p=!1,origin:m,children:d,...f}=e,g=useAnimationRun({trigger:"view"===f.timeline?"mount":t,play:a,once:i,threshold:r,paused:s,infinite:o,nonce:l}),y=n?`plass-anim ${animationClasses[n]}`:"",x=0!==c&&null!==n,v=void 0===m?null:{transformOrigin:m};return{ref:g.ref,className:x?"":y,style:{...v,...x?null:animationSlots(f),"--p-anim-state":g.state},props:{...g.handlers,"data-plass-animation":n??void 0,"data-state":g.state},children:x?animateChildren(d,y,(e,n)=>({...v,...animationSlots(staggerSlots(f,{index:e,count:n,stagger:c,durationStep:u,reverse:p}))})):d}}

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(" ");

package/dist/internal/calendar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type PlassLabels } from './labels.js';
 import { type CalendarView, type TimeUnit } from './date.js';
 import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types.js';
 /**
@@ -19,43 +20,17 @@ import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types
 /**
  * Every string a picker says that is not a date.
  *
- * One object rather than eighteen props. These are a set: a caller who has to
- * translate "Previous month" has to translate "Next month" in the same breath,
- * and a component with eighteen `*Label` props is a component whose signature is
- * mostly apology. The dates themselves are never in here — those come from
- * `Intl`, which already knows what July is called in more languages than this
- * file ever will.
+ * A slice of `PlassLabels` rather than a set of its own, which it used to be:
+ * the words were collected here first, and when the rest of the library's own
+ * vocabulary was gathered they went in beside them. The type stays, because
+ * the pickers are the one place that needs *all* of these and nothing else, and
+ * because a caller who has only translated a picker still has a name for what
+ * they translated.
+ *
+ * The dates themselves are never in here — those come from `Intl`, which
+ * already knows what July is called in more languages than this file ever will.
  */
-export interface PlassPickerLabels {
-    /** The calendar's steppers, in day view. */
-    previousMonth: string;
-    nextMonth: string;
-    /** The same steppers in month view, where they move by a year. */
-    previousYear: string;
-    nextYear: string;
-    /** And in year view, where they move by a page of twelve. */
-    previousYears: string;
-    nextYears: string;
-    /** The two header buttons that open the month grid and the year grid. */
-    chooseMonth: string;
-    chooseYear: string;
-    /** The footer's actions. */
-    today: string;
-    /** The same shortcut on a picker that only asks for a month or a year. */
-    thisMonth: string;
-    thisYear: string;
-    now: string;
-    clear: string;
-    done: string;
-    /** The clock's columns. */
-    hour: string;
-    minute: string;
-    second: string;
-    meridiem: string;
-    /** Which end of a range the calendar is currently asking for. */
-    start: string;
-    end: string;
-}
+export type PlassPickerLabels = Pick<PlassLabels, 'previousMonth' | 'nextMonth' | 'previousYear' | 'nextYear' | 'previousYears' | 'nextYears' | 'chooseMonth' | 'chooseYear' | 'today' | 'thisMonth' | 'thisYear' | 'now' | 'clear' | 'done' | 'hour' | 'minute' | 'second' | 'meridiem' | 'start' | 'end'>;
 export declare const defaultPickerLabels: PlassPickerLabels;
 /**
  * The labels a picker says, resolved once per render.

package/dist/internal/calendar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"./defaults.js";import{PlButton as s}from"../components/button/PlButton.js";import{ChevronIcon as n}from"./icons.js";import{dateFormatter as l}from"./format.js";import{addDays as a,addMonths as i,addYears as c,calendarWeeks as u,compareDay as d,isDayOutside as m,isMonthBeforeYear as h,isMonthOutside as p,isSameDay as g,isSameMonth as f,isValidDate as v,isYearOutside as x,makeDate as b,meridiemLabels as y,monthLabels as w,startOfDay as D,startOfMonth as N,today as M,weekdayLabels as C,withTime as S,YEAR_PAGE_SIZE as P,yearPageStart as k}from"./date.js";import{controlHeightClasses as Y,controlTextClasses as z,cx as A,gapClasses as j,metaTextClasses as E,srOnlyClasses as F,transitionClasses as T}from"./styles.js";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){const{labels:o}=r();return t.useMemo(()=>o||e?{...defaultPickerLabels,...o,...e}:defaultPickerLabels,[o,e])}const H={year:0,month:1,day:2},R={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},B={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},L={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},G={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},K=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",T,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:t,label:r,selected:s,inRange:n=!1,rangeEdge:l=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:u=!1,size:d,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return o("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":s,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:A(K,"start"===l?L[d]:"end"===l?G[d]:"middle"===l?"rounded-none":B[d],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":s?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":n?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[t,a?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:l,view:a,precision:i,month:c,locale:u,labels:d,showPreviousButton:m,showNextButton:p,onStep:g,onViewChange:f}){const v=w(u,"long")[c.getMonth()],x=String(c.getFullYear()),b=h(u),y="day"===a?[d.previousMonth,d.nextMonth]:"month"===a?[d.previousYear,d.nextYear]:[d.previousYears,d.nextYears],stepper=(o,t)=>t?e(s,{variant:"ghost",size:r,color:l,density:"compact","aria-label":y[-1===o?0:1],onClick:()=>g(o),startIcon:e("span",{className:A("flex items-center",-1===o?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(n,{})})}):e("span",{"aria-hidden":"true",className:A(Y[r],"w-(--p-cell)")}),disclosure=o=>e("span",{className:A("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",o&&"rotate-180"),children:e(n,{})}),D=e(s,{variant:"ghost",size:r,color:l,density:"compact","aria-label":d.chooseMonth,"aria-expanded":"month"===a,onClick:()=>f("month"===a?i:"month"),endIcon:disclosure("month"===a),children:v},"month"),N=e(s,{variant:"ghost",size:r,color:l,density:"compact",className:"tabular-nums","aria-label":d.chooseYear,"aria-expanded":"year"===a,onClick:()=>f("year"===a?i:"year"),endIcon:disclosure("year"===a),children:x},"year"),M=k(c.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,m),e("div",{className:A("flex min-w-0 flex-1 items-center justify-center",j[r]),children:"year"===a?e("span",{className:A("flex items-center font-semibold tabular-nums text-(--plass-fg)",Y[r],z[r]),children:`${M}–${M+P-1}`}):"month"===a?N:o(t.Fragment,b?{children:[D,N]}:{children:[N,D]})}),stepper(1,p)]})}export function Calendar({size:r,color:s,locale:n,weekStartsOn:l,month:a,onMonthChange:u,precision:d="day",selected:h,rangeStart:p=null,rangeEnd:g=null,onSelect:x,onPreviewChange:y,minDate:w,maxDate:C,shouldDisableDate:S,showOutsideDays:k=!0,autoFocus:Y=!1,showPreviousButton:z=!0,showNextButton:E=!0,labels:F,className:T}){const[B,L]=t.useState(d),G=H[B]>H[d]?d:B,K=t.useMemo(()=>h.filter(v),[h]),[I,O]=t.useState(()=>{const e=K.find(e=>f(e,a));return e?D(e):f(M(),a)?M():N(a)}),U=t.useRef(Y),q=t.useRef(null);t.useEffect(()=>{O(e=>f(e,a)?e:N(a))},[a]),t.useLayoutEffect(()=>{U.current&&(U.current=!1,q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const $=t.useCallback(e=>m(e,w,C)||(S?.(e)??!1),[w,C,S]),changeView=e=>{U.current=!0,L(e)},moveCursor=e=>{U.current=!0,u(e)};return o("div",{ref:q,className:A("flex flex-col",j[r],T),style:{"--p-cell":R[r]},onPointerLeave:()=>y?.(null),children:[e(Header,{size:r,color:s,view:G,precision:d,month:a,locale:n,labels:F,showPreviousButton:z,showNextButton:E,onStep:e=>{u("day"===G?i(a,e):c(a,"month"===G?e:e*P))},onViewChange:changeView}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===G?e(DayGrid,{size:r,locale:n,weekStartsOn:l,month:a,chosen:K,rangeStart:p,rangeEnd:g,focusedDate:I,showOutsideDays:k,isDisabled:$,onSelect:e=>{O(e),x(e)},onPreviewChange:y,onMoveFocus:e=>{U.current=!0,O(e),f(e,a)||u(N(e))}}):"month"===G?e(MonthGrid,{size:r,locale:n,month:a,chosen:K,minDate:w,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{const o=b(a.getFullYear(),e,1);u(o),"month"===d?x(o):changeView("day")}}):e(YearGrid,{size:r,month:a,chosen:K,minDate:w,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{const o=b(e,"year"===d?0:a.getMonth(),1);u(o),"year"===d?x(o):changeView("month")}})})]})}function DayGrid({size:t,locale:r,weekStartsOn:s,month:n,chosen:c,rangeStart:m,rangeEnd:h,focusedDate:p,showOutsideDays:x,isDisabled:b,onSelect:y,onPreviewChange:w,onMoveFocus:D}){const N=u(n,s),S=C(r,s,"short"),P=C(r,s,"long"),k=l(r,{dateStyle:"full"}),Y=function orderedRange(e,o){return v(e)&&v(o)?d(e,o)<=0?[e,o]:[o,e]:null}(m,h),j=M();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,r)=>e("span",{role:"columnheader","aria-label":P[r],className:A("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",E[t]),children:o},r))}),N.map((o,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const r=!f(o,n);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},o.getTime());const l=c.some(e=>g(e,o)),u=null!==Y&&d(o,Y[0])>=0&&d(o,Y[1])<=0,m=null!==Y&&u&&g(o,Y[0]),h=null!==Y&&u&&g(o,Y[1]);return e(Cell,{size:t,label:k.format(o),selected:l,inRange:u&&!l,rangeEdge:u?m&&h?"both":m?"start":h?"end":"middle":null,current:g(o,j)&&!l,muted:r,disabled:b(o),focused:g(o,p),className:A("size-(--p-cell)",z[t]),onClick:()=>y(o),onPointerEnter:()=>w?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-s+7)%7,r={ArrowLeft:()=>a(o,-1),ArrowRight:()=>a(o,1),ArrowUp:()=>a(o,-7),ArrowDown:()=>a(o,7),Home:()=>a(o,-t),End:()=>a(o,6-t),PageUp:()=>i(o,e.shiftKey?-12:-1),PageDown:()=>i(o,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,o),children:o.getDate()},o.getTime())})},r))]})}function MonthGrid({size:o,locale:t,month:r,chosen:s,minDate:n,maxDate:l,onMoveCursor:a,onPick:c}){const u=w(t,"short"),d=w(t,"long"),m=r.getFullYear(),h=new Date,onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),a(i(N(r),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(a=>{const i=3*t+a;return e(Cell,{size:o,label:`${d[i]} ${m}`,selected:s.some(e=>e.getFullYear()===m&&e.getMonth()===i),current:h.getFullYear()===m&&h.getMonth()===i,disabled:p(b(m,i,1),n,l),focused:i===r.getMonth(),className:A("h-(--p-cell) w-full",z[o]),onClick:()=>c(i),onKeyDown,children:u[i]},i)})},t))})}function YearGrid({size:o,month:t,chosen:r,minDate:s,maxDate:n,onMoveCursor:l,onPick:a}){const i=k(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-P,PageDown:P}[e.key];void 0!==o&&(e.preventDefault(),l(c(N(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(c=>{const d=i+4*l+c;return e(Cell,{size:o,label:String(d),selected:r.some(e=>e.getFullYear()===d),current:d===u,disabled:x(b(d,0,1),s,n),focused:d===t.getFullYear(),className:A("h-(--p-cell) w-full",z[o]),onClick:()=>a(d),onKeyDown,children:d},d)})},l))})}function revealInColumn(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),r=o.getBoundingClientRect(),s=t.top-r.top-o.clientTop+o.scrollTop,n=s+t.height;s<o.scrollTop?o.scrollTop=s:n>o.scrollTop+o.clientHeight&&(o.scrollTop=n-o.clientHeight)}export function TimeGrid({size:r,density:s,locale:n,value:a,referenceDate:i,onChange:c,hour12:u,showSeconds:d,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:v,className:x}){const b=a??i,w=t.useRef(null),[D,N]=t.useMemo(()=>y(n),[n]);t.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const M=t.useMemo(()=>{const e=Math.ceil((u?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return u?o.map(e=>0===e?12:e):o},[u,m]),C=t.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,o)=>o*h),[h]),P=t.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,o)=>o*p),[p]),pad=e=>String(e).padStart(2,"0"),k=u?b.getHours()%12||12:b.getHours(),column=(o,t,s,n,l)=>e("div",{role:"listbox","aria-label":t,className:A("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:s.map(t=>{const s=((e,o)=>S(b,"hour"===e?{hours:u?o%12+(b.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:b.getHours()%12+12*o}))(o,t),i=null!==a&&n(t),d=g?.(s,o)??!1;return e("button",{type:"button",role:"option","aria-selected":i,"aria-disabled":d||void 0,"data-chosen":i?"true":void 0,className:A(K,B[r],Y[r],z[r],"w-full shrink-0",d?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":i?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{d||c(s)},children:l(t)},t)})},o);return o("div",{ref:w,className:A("flex","compact"===s?"gap-0.5":"gap-1",x),style:{"--p-cell":R[r]},children:[column("hour",v.hour,M,e=>e===k,e=>u?String(e):pad(e)),column("minute",v.minute,C,e=>e===b.getMinutes(),pad),d?column("second",v.second,P,e=>e===b.getSeconds(),pad):null,u?column("meridiem",v.meridiem,[0,1],e=>(b.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===a?"":l(n,{hour:"numeric",minute:"2-digit",...d?{second:"2-digit"}:{}}).format(a)})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{defaultLabels as r,useLabels as s}from"./labels.js";import{PlButton as n}from"../components/button/PlButton.js";import{ChevronIcon as l}from"./icons.js";import{dateFormatter as a}from"./format.js";import{addDays as i,addMonths as c,addYears as u,calendarWeeks as d,compareDay as m,isDayOutside as h,isMonthBeforeYear as p,isMonthOutside as g,isSameDay as f,isSameMonth as v,isValidDate as b,isYearOutside as x,makeDate as w,meridiemLabels as y,monthLabels as D,startOfDay as N,startOfMonth as S,today as C,weekdayLabels as M,withTime as k,YEAR_PAGE_SIZE as P,yearPageStart as z}from"./date.js";import{controlHeightClasses as Y,controlTextClasses as j,cx as A,gapClasses as F,metaTextClasses as E,srOnlyClasses as R,transitionClasses as H}from"./styles.js";export const defaultPickerLabels=r;export function usePickerLabels(e){const t=s();return o.useMemo(()=>e?{...t,...e}:t,[t,e])}const T={year:0,month:1,day:2},B={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},G={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},K={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},L={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},I=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",H,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:o,label:r,selected:s,inRange:n=!1,rangeEdge:l=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:u=!1,size:d,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":s,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:A(I,"start"===l?K[d]:"end"===l?L[d]:"middle"===l?"rounded-none":G[d],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":s?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":n?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[o,a?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:s,view:a,precision:i,month:c,locale:u,labels:d,showPreviousButton:m,showNextButton:h,onStep:g,onViewChange:f}){const v=D(u,"long")[c.getMonth()],b=String(c.getFullYear()),x=p(u),w="day"===a?[d.previousMonth,d.nextMonth]:"month"===a?[d.previousYear,d.nextYear]:[d.previousYears,d.nextYears],stepper=(t,o)=>o?e(n,{variant:"ghost",size:r,color:s,density:"compact","aria-label":w[-1===t?0:1],onClick:()=>g(t),startIcon:e("span",{className:A("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:A(Y[r],"w-(--p-cell)")}),disclosure=t=>e("span",{className:A("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",t&&"rotate-180"),children:e(l,{})}),y=e(n,{variant:"ghost",size:r,color:s,density:"compact","aria-label":d.chooseMonth,"aria-expanded":"month"===a,onClick:()=>f("month"===a?i:"month"),endIcon:disclosure("month"===a),children:v},"month"),N=e(n,{variant:"ghost",size:r,color:s,density:"compact",className:"tabular-nums","aria-label":d.chooseYear,"aria-expanded":"year"===a,onClick:()=>f("year"===a?i:"year"),endIcon:disclosure("year"===a),children:b},"year"),S=z(c.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,m),e("div",{className:A("flex min-w-0 flex-1 items-center justify-center",F[r]),children:"year"===a?e("span",{className:A("flex items-center font-semibold tabular-nums text-(--plass-fg)",Y[r],j[r]),children:`${S}–${S+P-1}`}):"month"===a?N:t(o.Fragment,x?{children:[y,N]}:{children:[N,y]})}),stepper(1,h)]})}export function Calendar({size:r,color:s,locale:n,weekStartsOn:l,month:a,onMonthChange:i,precision:d="day",selected:m,rangeStart:p=null,rangeEnd:g=null,onSelect:f,onPreviewChange:x,minDate:y,maxDate:D,shouldDisableDate:M,showOutsideDays:k=!0,autoFocus:z=!1,showPreviousButton:Y=!0,showNextButton:j=!0,labels:E,className:R}){const[H,G]=o.useState(d),K=T[H]>T[d]?d:H,L=o.useMemo(()=>m.filter(b),[m]),[I,O]=o.useState(()=>{const e=L.find(e=>v(e,a));return e?N(e):v(C(),a)?C():S(a)}),U=o.useRef(z),q=o.useRef(null);o.useEffect(()=>{O(e=>v(e,a)?e:S(a))},[a]),o.useLayoutEffect(()=>{U.current&&(U.current=!1,q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const $=o.useCallback(e=>h(e,y,D)||(M?.(e)??!1),[y,D,M]),changeView=e=>{U.current=!0,G(e)},moveCursor=e=>{U.current=!0,i(e)};return t("div",{ref:q,className:A("flex flex-col",F[r],R),style:{"--p-cell":B[r]},onPointerLeave:()=>x?.(null),children:[e(Header,{size:r,color:s,view:K,precision:d,month:a,locale:n,labels:E,showPreviousButton:Y,showNextButton:j,onStep:e=>{i("day"===K?c(a,e):u(a,"month"===K?e:e*P))},onViewChange:changeView}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===K?e(DayGrid,{size:r,locale:n,weekStartsOn:l,month:a,chosen:L,rangeStart:p,rangeEnd:g,focusedDate:I,showOutsideDays:k,isDisabled:$,onSelect:e=>{O(e),f(e)},onPreviewChange:x,onMoveFocus:e=>{U.current=!0,O(e),v(e,a)||i(S(e))}}):"month"===K?e(MonthGrid,{size:r,locale:n,month:a,chosen:L,minDate:y,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const t=w(a.getFullYear(),e,1);i(t),"month"===d?f(t):changeView("day")}}):e(YearGrid,{size:r,month:a,chosen:L,minDate:y,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const t=w(e,"year"===d?0:a.getMonth(),1);i(t),"year"===d?f(t):changeView("month")}})})]})}function DayGrid({size:o,locale:r,weekStartsOn:s,month:n,chosen:l,rangeStart:u,rangeEnd:h,focusedDate:p,showOutsideDays:g,isDisabled:x,onSelect:w,onPreviewChange:y,onMoveFocus:D}){const N=d(n,s),S=M(r,s,"short"),k=M(r,s,"long"),P=a(r,{dateStyle:"full"}),z=function orderedRange(e,t){return b(e)&&b(t)?m(e,t)<=0?[e,t]:[t,e]:null}(u,h),Y=C();return t("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((t,r)=>e("span",{role:"columnheader","aria-label":k[r],className:A("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",E[o]),children:t},r))}),N.map((t,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(t=>{const r=!v(t,n);if(r&&!g)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},t.getTime());const a=l.some(e=>f(e,t)),u=null!==z&&m(t,z[0])>=0&&m(t,z[1])<=0,d=null!==z&&u&&f(t,z[0]),h=null!==z&&u&&f(t,z[1]);return e(Cell,{size:o,label:P.format(t),selected:a,inRange:u&&!a,rangeEdge:u?d&&h?"both":d?"start":h?"end":"middle":null,current:f(t,Y)&&!a,muted:r,disabled:x(t),focused:f(t,p),className:A("size-(--p-cell)",j[o]),onClick:()=>w(t),onPointerEnter:()=>y?.(t),onKeyDown:e=>((e,t)=>{const o=(t.getDay()-s+7)%7,r={ArrowLeft:()=>i(t,-1),ArrowRight:()=>i(t,1),ArrowUp:()=>i(t,-7),ArrowDown:()=>i(t,7),Home:()=>i(t,-o),End:()=>i(t,6-o),PageUp:()=>c(t,e.shiftKey?-12:-1),PageDown:()=>c(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},r))]})}function MonthGrid({size:t,locale:o,month:r,chosen:s,minDate:n,maxDate:l,onMoveCursor:a,onPick:i}){const u=D(o,"short"),d=D(o,"long"),m=r.getFullYear(),h=new Date,onKeyDown=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==t&&(e.preventDefault(),a(c(S(r),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(o=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(a=>{const c=3*o+a;return e(Cell,{size:t,label:`${d[c]} ${m}`,selected:s.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:h.getFullYear()===m&&h.getMonth()===c,disabled:g(w(m,c,1),n,l),focused:c===r.getMonth(),className:A("h-(--p-cell) w-full",j[t]),onClick:()=>i(c),onKeyDown,children:u[c]},c)})},o))})}function YearGrid({size:t,month:o,chosen:r,minDate:s,maxDate:n,onMoveCursor:l,onPick:a}){const i=z(o.getFullYear()),c=(new Date).getFullYear(),onKeyDown=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-P,PageDown:P}[e.key];void 0!==t&&(e.preventDefault(),l(u(S(o),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(u=>{const d=i+4*l+u;return e(Cell,{size:t,label:String(d),selected:r.some(e=>e.getFullYear()===d),current:d===c,disabled:x(w(d,0,1),s,n),focused:d===o.getFullYear(),className:A("h-(--p-cell) w-full",j[t]),onClick:()=>a(d),onKeyDown,children:d},d)})},l))})}function revealInColumn(e){const t=e.parentElement;if(!t)return;const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=o.top-r.top-t.clientTop+t.scrollTop,n=s+o.height;s<t.scrollTop?t.scrollTop=s:n>t.scrollTop+t.clientHeight&&(t.scrollTop=n-t.clientHeight)}export function TimeGrid({size:r,density:s,locale:n,value:l,referenceDate:i,onChange:c,hour12:u,showSeconds:d,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:v,className:b}){const x=l??i,w=o.useRef(null),[D,N]=o.useMemo(()=>y(n),[n]);o.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const S=o.useMemo(()=>{const e=Math.ceil((u?12:24)/m),t=Array.from({length:e},(e,t)=>t*m);return u?t.map(e=>0===e?12:e):t},[u,m]),C=o.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,t)=>t*h),[h]),M=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),pad=e=>String(e).padStart(2,"0"),P=u?x.getHours()%12||12:x.getHours(),column=(t,o,s,n,a)=>e("div",{role:"listbox","aria-label":o,className:A("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:s.map(o=>{const s=((e,t)=>k(x,"hour"===e?{hours:u?t%12+(x.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:x.getHours()%12+12*t}))(t,o),i=null!==l&&n(o),d=g?.(s,t)??!1;return e("button",{type:"button",role:"option","aria-selected":i,"aria-disabled":d||void 0,"data-chosen":i?"true":void 0,className:A(I,G[r],Y[r],j[r],"w-full shrink-0",d?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":i?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{d||c(s)},children:a(o)},o)})},t);return t("div",{ref:w,className:A("flex","compact"===s?"gap-0.5":"gap-1",b),style:{"--p-cell":B[r]},children:[column("hour",v.hour,S,e=>e===P,e=>u?String(e):pad(e)),column("minute",v.minute,C,e=>e===x.getMinutes(),pad),d?column("second",v.second,M,e=>e===x.getSeconds(),pad):null,u?column("meridiem",v.meridiem,[0,1],e=>(x.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:R,"aria-live":"polite",children:null===l?"":a(n,{hour:"numeric",minute:"2-digit",...d?{second:"2-digit"}:{}}).format(l)})]})}