plass-ui 0.0.1 → 1.0.1

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./components/button";export*from"./components/text-field";
+export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/combobox/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/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/grid/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/modal/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/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/typography/index.js";

package/dist/internal/animate.d.ts

@@ -0,0 +1,161 @@
+/**
+ * The machinery every `PlAnimate*` component runs on.
+ *
+ * It lives in `internal/` for the reason `button-group.ts` and `progress.ts`
+ * do: eleven components need it and none of them should have to import another.
+ *
+ * ## The shape of it
+ *
+ * Every effect is one `@keyframes` in `styles.css` running from a state written
+ * entirely in custom properties to the element's natural one. Nothing here
+ * generates CSS — it fills `--p-anim-*` slots and the stylesheet decides what
+ * they mean, which is the same split `controlSlots()` makes for colour and for
+ * the same reason: Tailwind only ever sees class names that appear literally in
+ * the source, so a class per duration would not survive the first prop.
+ *
+ * Because the from-state is the *keyframe* rather than a second class, running
+ * an effect backwards is `animation-direction: reverse` and nothing else. That
+ * is what makes `mode="out"` free on the five that offer it.
+ *
+ * ## Where the design language draws the line
+ *
+ * A Plass **control** never moves — a key that scales resamples its label, and
+ * that rule holds without exception. What moves here is content a caller has
+ * asked to have moved, and it moves on the independent `translate`, `scale` and
+ * `rotate` properties rather than on the `transform` shorthand, so a caller's
+ * own transform on the same element survives.
+ *
+ * ## 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.
+ */
+import * as React from 'react';
+import type { PlassAnimateRepeat, PlassAnimateTrigger, PlassAnimation, PlassSide } from '../types.js';
+/**
+ * Which keyframe an effect runs.
+ *
+ * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
+ * and a second identical `@keyframes` would only be a second place to fix a
+ * bug. What separates them is their defaults and their origin, and an origin is
+ * a property rather than a keyframe.
+ */
+export declare const animationClasses: Record<PlassAnimation, string>;
+/** The class that reads the slots. Always paired with one of the above. */
+export declare const animBaseClass = "plass-anim";
+/** A number is pixels; a string is already a CSS length. */
+export declare function lengthValue(value: number | string): string;
+/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
+export declare function repeatValue(repeat: PlassAnimateRepeat): string;
+export declare function isInfinite(repeat: PlassAnimateRepeat | undefined): boolean;
+/**
+ * `normal`, `reverse`, `alternate`, `alternate-reverse` — the four CSS already
+ * has, assembled from the two props that mean something to a caller.
+ *
+ * `mode="out"` is a reversed run rather than a keyframe of its own, which is
+ * also why a reversed animation ends held on its own first frame: `fill-mode`
+ * 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 {
+    duration: number;
+    delay: number;
+    easing?: string;
+    repeat: PlassAnimateRepeat;
+    alternate?: boolean;
+    mode?: 'in' | 'out';
+    /** Where the animated properties start. Only the ones an effect reads. */
+    opacity?: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    angleTo?: string;
+}
+/**
+ * The `--p-anim-*` slots, as an inline style object.
+ *
+ * Inline rather than utilities for the reason the colour slots are: these are
+ * per-instance numbers, and Tailwind cannot generate a class for a duration it
+ * has never seen written down.
+ */
+export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * Which way a slide starts, given the edge it comes from.
+ *
+ * `PlassSide` is physical everywhere in the library and it stays physical here:
+ * something arriving from the top of the window arrives from the top in every
+ * writing direction.
+ */
+export declare function slideOffsets(from: PlassSide, distance: number | string): {
+    x: string;
+    y: string;
+};
+export declare function usePrefersReducedMotion(): boolean;
+export interface AnimationRunOptions {
+    trigger: PlassAnimateTrigger;
+    play?: boolean;
+    once: boolean;
+    threshold: number;
+    paused?: boolean;
+    /** An infinite effect stops when the pointer leaves; a finite one finishes. */
+    infinite: boolean;
+}
+export interface AnimationRun {
+    /** Goes on the animated element. */
+    ref: React.RefCallback<HTMLElement>;
+    /** `running` or `paused`, for `--p-anim-state`. */
+    state: 'running' | 'paused';
+    /** Whether the animation has been let go at all. */
+    started: boolean;
+    /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
+    handlers: React.HTMLAttributes<HTMLElement>;
+}
+/**
+ * Starts, restarts and holds an animation.
+ *
+ * Two things here are less obvious than they look.
+ *
+ * **Waiting is `animation-play-state: paused`, not a second class.** An element
+ * that has not been triggered yet has to already look like its own first frame,
+ * or a `visible` fade would be fully drawn until it scrolled into view and then
+ * blink out to start. With `fill-mode: both` a paused animation shows exactly
+ * that frame, so waiting and running are one animation in two states rather
+ * than two states to keep in step.
+ *
+ * **Restarting reaches for the DOM.** There is no way to rewind a CSS animation
+ * from React: re-rendering with the same class changes nothing, and a `key`
+ * would restart the animation by unmounting the children, taking their state
+ * 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.
+ */
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+    /** Which keyframe. `null` for the components that write their own. */
+    effect: PlassAnimation | null;
+}
+export interface AnimateElement {
+    ref: React.RefCallback<HTMLElement>;
+    className: string;
+    style: React.CSSProperties;
+    /** The hover handlers and the two data attributes, ready to be spread. */
+    props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+}
+/**
+ * Everything a one-keyframe `PlAnimate*` root needs, in one call.
+ *
+ * The six effect components differ only in their defaults and in which slots
+ * they fill, so this is where the identical two-thirds of each of them lives.
+ * The ones that have to understand their children — Appear, Headline, Marquee,
+ * Typing — call `useAnimationRun` directly and put the classes where their own
+ * structure needs them, which is why `effect` is allowed to be `null`.
+ *
+ * `data-plass-animation` and `data-state` are here rather than in each
+ * component because they are the same two facts every time, and because a test
+ * that has to assert on a class name is a test that breaks when a class name
+ * changes.
+ */
+export declare function useAnimateElement(params: AnimateElementParams): AnimateElement;

package/dist/internal/animate.js

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

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

@@ -0,0 +1,27 @@
+/**
+ * What a `PlButton` inherits from the `PlButtonGroup` around it.
+ *
+ * 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.
+ *
+ * Cloning breaks the moment a caller wraps one of the buttons in a `PlTooltip`,
+ * a `<Fragment>` or a `.map()` — which is most of the time — and a context
+ * reaches the button wherever it ended up. And it lives here rather than beside
+ * the group so that `PlButton` can read it without the two components importing
+ * each other, which is the arrangement `internal/menu.ts` already has.
+ *
+ * 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.
+ */
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../types.js';
+export interface PlassButtonGroupContextValue {
+    variant?: PlassVariant;
+    size?: PlassSize;
+    color?: PlassColor;
+    density?: PlassDensity;
+    elevation?: PlassElevation;
+    disabled?: boolean;
+}
+export declare const ButtonGroupContext: React.Context<PlassButtonGroupContextValue | null>;

package/dist/internal/button-group.js

@@ -0,0 +1,2 @@
+import*as t from"react";export const ButtonGroupContext=
+/* @__PURE__ */t.createContext(null);

package/dist/internal/calendar.d.ts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { type TimeUnit } from './date.js';
+import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types.js';
+/**
+ * The calendar grid and the clock columns, written once for the four pickers.
+ *
+ * They live in `internal/` for the reason `button-group.ts` does: a
+ * `PlDateTimePicker` is a date picker and a time picker in one popup and a
+ * `PlDateRangePicker` is two calendars, so three components need this and none
+ * of them should have to import another. The one thing it reaches *up* for is
+ * `PlButton` — the header's steppers are buttons, they are not a new kind of
+ * control, and `PlPagination` already makes that argument.
+ *
+ * The day cells are deliberately **not** `PlButton`s. A cell has states a
+ * button has no vocabulary for — inside a range, at the end of a range, today,
+ * belonging to the month next door — and four of them have to be told apart at
+ * a glance in a grid of forty-two.
+ */
+/**
+ * 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.
+ */
+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;
+    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 declare const defaultPickerLabels: PlassPickerLabels;
+/** Merges a caller's overrides over the defaults, once per render. */
+export declare function usePickerLabels(overrides?: Partial<PlassPickerLabels>): PlassPickerLabels;
+export interface CalendarProps {
+    size: PlassSize;
+    color: PlassColor;
+    locale?: string;
+    weekStartsOn: PlassWeekday;
+    /** The month on screen. Controlled, so two panels can be kept a month apart. */
+    month: Date;
+    onMonthChange: (month: Date) => void;
+    /** The days drawn filled — one for a single picker, up to two for a range. */
+    selected: readonly (Date | null | undefined)[];
+    /** The two ends the band is drawn between. Both `null` outside range mode. */
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    onSelect: (date: Date) => void;
+    /** The day under the pointer, for a range that is only half chosen. */
+    onPreviewChange?: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * Draws the leading and trailing days that belong to the neighbouring months.
+     *
+     * On by default, because clicking the 1st of next month from this month's
+     * panel is a real shortcut. A two-month range picker turns it *off*, and not
+     * as a matter of taste: with both panels showing six full weeks, the 1st of
+     * August appears twice — once as a trailing day of July and once as itself —
+     * and two cells with the same name in the same popup is ambiguous to a
+     * pointer and outright broken to a screen reader.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    labels: PlassPickerLabels;
+    className?: string;
+}
+/**
+ * One month, with a way to reach every other one.
+ *
+ * Three views on the same footprint: the days of a month, the twelve months of
+ * a year, twelve years at a time. They are deliberately the same width *and*
+ * the same height — the day view is seven rows counting its header, and the
+ * other two stretch four rows and three rows across that same height — so
+ * switching view never resizes the popup under the pointer that opened it.
+ *
+ * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
+ * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
+ * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
+ * grid instead of walking forty-two cells — the pattern the ARIA date-picker
+ * practice describes, and the reason none of the cells is a `disabled` button.
+ */
+export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
+export type { TimeUnit };
+export interface TimeGridProps {
+    size: PlassSize;
+    density: PlassDensity;
+    locale?: string;
+    /** The time on screen, or `null` while nothing has been chosen. */
+    value: Date | null;
+    /** The day the columns write into while `value` is still `null`. */
+    referenceDate: Date;
+    onChange: (value: Date) => void;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12: boolean;
+    showSeconds: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    labels: PlassPickerLabels;
+    className?: string;
+}
+/**
+ * Hours, minutes and — when asked for — seconds, as columns you scroll rather
+ * than as a dial you drag.
+ *
+ * Columns because they are the shape that answers what a time picker is actually
+ * asked: "half past nine" is two glances, and "any time at all, on the hour" is
+ * a column you never touch. A clock face is prettier and needs a `transform` to
+ * read, which this library does not have.
+ *
+ * The chosen row in each column is scrolled into view once, on open. That is the
+ * only imperative work here and it is not optional: a column of sixty minutes
+ * that opens at `00` while the value is `45` has hidden its own answer.
+ */
+export declare function TimeGrid({ size, density, locale, value, referenceDate, onChange, hour12, showSeconds, hourStep, minuteStep, secondStep, shouldDisableTime, autoFocus, labels, className }: TimeGridProps): React.JSX.Element;

package/dist/internal/calendar.js

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

package/dist/internal/date.d.ts

@@ -0,0 +1,173 @@
+/**
+ * The arithmetic and the naming the four pickers share.
+ *
+ * No date library under it, deliberately. Plass has one runtime dependency —
+ * Base UI — and a component library that quietly adds `date-fns`, or worse
+ * picks a side in the dayjs/luxon/Temporal argument on its consumer's behalf,
+ * has made a decision that was not its to make. Everything here is either
+ * `Date` arithmetic, which is a dozen lines, or `Intl`, which the platform
+ * already ships and which knows more about month names in more languages than
+ * any bundled table ever will.
+ *
+ * **That is also the whole of the localisation story.** There is no table of
+ * translated month names to import and no per-language module to register: the
+ * only strings a picker says that `Intl` has no opinion about are the labels on
+ * its own buttons, and those are one `labels` prop with English defaults. A
+ * project that ships in twelve languages pays nothing for eleven of them.
+ *
+ * Two rules hold everywhere below:
+ *
+ * - **Local time, always.** A calendar day is a thing a person is looking at on
+ *   a wall, not an instant on a line. `makeDate(2026, 6, 27)` is midnight local
+ *   and every comparison here is made on the local Y/M/D triple, so a picker in
+ *   Seoul and a picker in São Paulo both light up the cell that says 27.
+ * - **Nothing is mutated.** `Date` is mutable and every method on it that
+ *   sounds like a question is actually a command. Each function here copies
+ *   first, so a `value` handed in by a caller is never the object that comes
+ *   back out.
+ */
+import type { PlassWeekday } from '../types.js';
+/** Which unit the calendar is currently letting you pick. */
+export type CalendarView = 'day' | 'month' | 'year';
+/** How many years one page of the year grid holds. Four columns of three. */
+export declare const YEAR_PAGE_SIZE = 12;
+/**
+ * A local midnight on the given Y/M/D, with out-of-range parts normalised —
+ * month `12` rolls into January, day `0` into the last day of the month before.
+ *
+ * Built through `setFullYear` rather than `new Date(year, month, day)` because
+ * the multi-argument constructor maps years 0–99 onto 1900–1999. Nobody is
+ * going to pick a date in the year 47, but a component that silently rewrites
+ * the year it was handed is a component that will eventually be blamed for
+ * something else.
+ */
+export declare function makeDate(year: number, month: number, day: number): Date;
+/** Is this a `Date` that stands for a real instant? `new Date('nope')` is not. */
+export declare function isValidDate(value: unknown): value is Date;
+/** The same day with the clock wound back to midnight. */
+export declare function startOfDay(date: Date): Date;
+/** The first day of the month this date is in, at midnight. */
+export declare function startOfMonth(date: Date): Date;
+/** How many days a month has, leap years included. */
+export declare function daysInMonth(year: number, month: number): number;
+/** Today, at midnight. The one place the pickers read the clock for a *date*. */
+export declare function today(): Date;
+export declare function addDays(date: Date, amount: number): Date;
+/**
+ * Months, with the day of the month clamped rather than allowed to overflow.
+ *
+ * 31 January plus one month is 28 February, not 3 March. The naive
+ * `setMonth(getMonth() + 1)` gives the second answer, which is why stepping a
+ * calendar forward from a 31st with it skips February entirely.
+ */
+export declare function addMonths(date: Date, amount: number): Date;
+export declare function addYears(date: Date, amount: number): Date;
+/** Negative, zero or positive, the way a sort comparator wants it. */
+export declare function compareDay(a: Date, b: Date): number;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date | null | undefined, b: Date | null | undefined): boolean;
+/** Holds a date inside `[min, max]`, at whatever precision the bounds carry. */
+export declare function clampDate(date: Date, min?: Date | null, max?: Date | null): Date;
+/**
+ * Is this calendar *day* outside the allowed span?
+ *
+ * Day-granular on purpose. A `maxDate` of 27 July at 09:00 still leaves the
+ * 27th pickable — the bound is about which days exist, and the time of day is
+ * the time picker's problem. `PlDateTimePicker` re-checks at full precision
+ * once an hour has been chosen.
+ */
+export declare function isDayOutside(date: Date, min?: Date | null, max?: Date | null): boolean;
+/** Seconds since local midnight — what `minTime`/`maxTime` are compared on. */
+export declare function secondsOfDay(date: Date): number;
+/** Which column of a clock a candidate time is being offered for. */
+export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';
+/**
+ * The span of the day one row of one column covers, in seconds since midnight.
+ *
+ * This is the detail that separates a working time picker from a frustrating
+ * one. A bound has to be checked against the *span* a row stands for, not
+ * against one instant inside it: with a `minTime` of 09:30, the hour `9` covers
+ * 09:00:00–09:59:59, which overlaps what is allowed, so it stays available and
+ * the minute column is where `00` through `25` grey out. Comparing the whole
+ * candidate instead hides the 9 and makes half past nine unreachable.
+ */
+export declare function timeUnitSpan(unit: TimeUnit, at: Date): [number, number];
+/** The same instant with one or more clock fields replaced. */
+export declare function withTime(date: Date, parts: {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}): Date;
+/** `date`'s calendar day wearing `time`'s clock. */
+export declare function mergeDateAndTime(date: Date, time: Date): Date;
+/**
+ * Six weeks of seven days, always — including the leading and trailing days
+ * that belong to the neighbouring months.
+ *
+ * Six rows whatever the month, and that is the whole point. A February that
+ * starts on a Sunday needs four rows and a 31-day month starting on a Saturday
+ * needs six; a grid that renders only the rows it needs is a grid that changes
+ * height when you step a month forward, moving every cell out from under the
+ * pointer that just pressed one. The same reason `PlPagination` pins its slot
+ * count.
+ */
+export declare function calendarWeeks(month: Date, weekStartsOn: PlassWeekday): Date[][];
+/** The first year on the page a given year falls on. 2026 becomes 2016 at 12 a page. */
+export declare function yearPageStart(year: number): number;
+/** Formats a date, tolerating the `null` a cleared picker holds. */
+export declare function formatDate(date: Date | null | undefined, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Every distinct string those instants format to. Deduplicated, because a
+ * date-only format collapses twenty-four of them into a handful.
+ */
+export declare function displaySamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
+/**
+ * The samples plus the placeholder, when the placeholder is a string.
+ *
+ * An empty picker shows the placeholder, which can easily be longer than any
+ * date — "Pick a departure date" against "3 Aug 2026" — and a trigger that
+ * shrinks the moment the first date is chosen is the same jump from the other
+ * direction. A `ReactNode` placeholder is left out: there is nothing to measure
+ * without rendering it twice.
+ */
+export declare function withPlaceholder(samples: string[], placeholder: unknown): string[];
+/**
+ * The three machine-readable spellings, for the hidden input that makes a
+ * picker submit with a form.
+ *
+ * Local, not UTC, and that is the whole point: `toISOString()` on a `Date`
+ * standing for 27 July in Seoul gives `2026-07-26T15:00:00Z`, and a form field
+ * that quietly reports the day before the one on screen is the single most
+ * expensive bug a date picker can ship. The shapes are the ones the native
+ * `<input type="date">`, `type="time"` and `type="datetime-local"` submit, so a
+ * server that already parses those needs no new code.
+ */
+export declare function toISODate(date: Date): string;
+export declare function toISOTime(date: Date, withSeconds?: boolean): string;
+export declare function toISODateTime(date: Date, withSeconds?: boolean): string;
+/**
+ * The seven column headers, rotated so the first one is `weekStartsOn`.
+ *
+ * `short` rather than `narrow`: narrow gives `S`, `M`, `T`, `W`, `T`, `F`, `S`
+ * in English, where two pairs are indistinguishable. The full name goes on the
+ * header's `aria-label` so a screen reader hears "Monday" rather than "Mon".
+ */
+export declare function weekdayLabels(locale: string | undefined, weekStartsOn: PlassWeekday, weekday?: 'narrow' | 'short' | 'long'): string[];
+/** The twelve month names, January first, in the locale's own words. */
+export declare function monthLabels(locale: string | undefined, month?: 'short' | 'long'): string[];
+/**
+ * Does this locale write the month before the year?
+ *
+ * The calendar's header is two separate buttons — one that opens the month grid
+ * and one that opens the year grid — so it cannot just print what `Intl` gives
+ * it. Asking `formatToParts` which part came first is how the two buttons end
+ * up in the order the reader expects: `July 2026` in English, `2026년 7월` in
+ * Korean. Getting this wrong is subtle and reads as broken to exactly the
+ * people it is wrong for.
+ */
+export declare function isMonthBeforeYear(locale: string | undefined): boolean;
+/** Does this locale put a clock on a 12-hour dial? */
+export declare function isHour12(locale: string | undefined): boolean;
+/** What this locale calls AM and PM. */
+export declare function meridiemLabels(locale: string | undefined): [string, string];
+export declare function localeWeekStart(locale: string | undefined): PlassWeekday;

package/dist/internal/date.js

@@ -0,0 +1 @@
+import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,r){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(r)&&t.getTime()>r.getTime()?new Date(r.getTime()):t}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,r,n){return isValidDate(e)?t(r,n).format(e):""}const e=/* @__PURE__ */Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(r,n){const o=t(r,n);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),r=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${r}:${pad(t.getSeconds())}`:r}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,n,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(r,(n+e)%7)))}export function monthLabels(e,r="short"){const n=t(e,{month:r});return Array.from({length:12},(t,e)=>n.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(r);return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const r=t(e,{hour:"numeric"}).resolvedOptions();return r.hourCycle?"h11"===r.hourCycle||"h12"===r.hourCycle:!0===r.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}

package/dist/internal/format.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The `Intl` formatters, memoised.
+ *
+ * Here rather than inline for one reason: constructing a formatter is the
+ * expensive half of using one. On V8, `new Intl.DateTimeFormat(...).format(d)`
+ * costs about 16us and `format(d)` on a formatter that already exists costs
+ * about 0.3us — fifty-five times the work for the same string.
+ *
+ * That ratio only matters where the call is in a loop or in a render, and in the
+ * pickers it is both: a calendar builds seven weekday names and twelve month
+ * names for a 42-cell month view, and it builds them again on every step, every
+ * hover and every keystroke.
+ *
+ * The cache is unbounded on purpose. The keys are not user data — they come from
+ * a component's own option objects, of which any one page has a handful — so
+ * there is nothing here that grows with the size of anything.
+ *
+ * The options object is deliberately **not** part of the key by identity. A
+ * caller writing `format={{ dateStyle: 'medium' }}` inline hands over a new
+ * object on every render, which is the ordinary way that prop gets written, and
+ * keying on identity would miss every time and cache nothing but garbage.
+ */
+/** A memoised `Intl.DateTimeFormat`. */
+export declare function dateFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;

package/dist/internal/format.js

@@ -0,0 +1 @@
+const t=new Map;export function dateFormatter(e,n){const r=function cacheKey(t,e){return`${t??""}\0${e?JSON.stringify(e):""}`}(e,n);let o=t.get(r);return o||(o=new Intl.DateTimeFormat(e,n),t.set(r,o)),o}