@krizaka/ui 3.1.0 → 3.2.0

package/dist/date-picker.d.ts

@@ -1,6 +1,53 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** A part of a typed date. */
+type DatePart = "day" | "month" | "year";
+/** The order of day, month and year in a locale (`en-US` → month, day, year; `fr` → day, month, year). */
+declare function datePartsOrder(locale: string): DatePart[];
+/** The ISO-ordered value of what was typed: `""` when nothing is, `YYYY-MM-DD` otherwise (not necessarily a real date). */
+declare function composeDate(parts: Readonly<Record<DatePart, string>>): string;
+/** True for a real calendar date written `YYYY-MM-DD` (not `2001-02-30`). */
+declare function isRealDate(value: string): boolean;
+/** The latest date of birth of someone `age` years old today (`YYYY-MM-DD`): an age gate's `max`, `value <= latestBirthDate(18)`. */
+declare function latestBirthDate(age: number, today?: Date): string;
+/** The days of a month (`month` 1–12). */
+declare function daysInMonth(year: number, month: number): number;
+/** `{ 2026, 10, 11 }` → `2026-10-11`, the day kept inside the month (`2026-02-31` → `2026-02-28`). */
+declare function isoOf(year: number, month: number, day: number): string;
+/** The ISO date of today on this device (or of the `Date` given). */
+declare function todayIso(now?: Date): string;
+/** The age in whole years on `today` of someone born on `birth` (both ISO). */
+declare function ageOn(birth: string, today?: string): number;
+/** The month names of a locale, January first (`long` · `short` · `narrow`). */
+declare function monthNames(locale: string, style?: "long" | "short" | "narrow"): string[];
+/** The years from `from` to `to`, both included, in that order (descending when `from > to`). */
+declare function yearRange(from: number, to: number): number[];
+/** A time of day, `HH:mm` on 24 hours (`"09:30"`, `"18:00"`): the value of every time picker. */
+type TimeValue = string;
+/** `"9:5"` / `"09:05"` → minutes since midnight; `null` when it is not a time. */
+declare function timeToMinutes(value: string | null | undefined): number | null;
+/** Minutes since midnight → `HH:mm`. */
+declare function minutesToTime(minutes: number): TimeValue;
+/** The slots of a day from `start` to `end` (excluded) every `step` minutes: `timeSlots("09:00", "12:00", 30)`. */
+declare function timeSlots(start: TimeValue, end: TimeValue, step?: number): TimeValue[];
+/** True when the locale writes the time on 12 hours with a day period (`en-US` → true, `fr-CA` → false). */
+declare function uses12Hours(locale: string): boolean;
+/** The day periods of a locale, morning first (`["AM", "PM"]`, `["a.m.", "p.m."]`). */
+declare function dayPeriods(locale: string): [string, string];
+/** A time written the locale's way (`"18:30"` → `"6:30 PM"` in en-US, `"18 h 30"` in fr-CA). */
+declare function formatTime(locale: string, value: TimeValue): string;
+/** A local `Date` at midnight for an ISO date (for formatting). */
+declare const toLocalDate: (iso: string) => Date;
+/** The ISO date of a local `Date`. */
+declare const toIsoDate: (date: Date) => string;
+/** The ISO date `days` later (or earlier). */
+declare const addDays: (iso: string, days: number) => string;
+/** The ISO date `months` later (or earlier), the day kept inside the shorter months (`01-31` + 1 → `02-28`). */
+declare const addMonths: (iso: string, months: number) => string;
+/** The first day of the week for a locale (0 = Sunday … 6 = Saturday), from `Intl.Locale` week info; Monday otherwise. */
+declare function weekStartOf(locale: string): number;
+
 /** A calendar date, `YYYY-MM-DD`. */
 type IsoDate = string;
 /** A range of calendar dates; `end` is `null` while the second date is not chosen. */
@@ -9,85 +56,80 @@ type DateRange = {
     end: IsoDate | null;
 };
 declare const calendar: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            grid?: tailwind_variants.ClassValue;
-            weekday?: tailwind_variants.ClassValue;
-            cell?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            day?: tailwind_variants.ClassValue;
+    variant: {
+        plain: {};
+        card: {
+            root: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            grid?: tailwind_variants.ClassValue;
-            weekday?: tailwind_variants.ClassValue;
-            cell?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            day?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
+}, {
     root: string;
     header: string;
-    title: string;
+    caption: string;
     nav: string;
+    months: string;
+    month: string;
+    monthTitle: string;
     grid: string;
     weekday: string;
     cell: string;
     day: string;
+    node: string;
+    live: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
-            grid?: tailwind_variants.ClassValue;
-            weekday?: tailwind_variants.ClassValue;
-            cell?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            day?: tailwind_variants.ClassValue;
+    variant: {
+        plain: {};
+        card: {
+            root: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     header: string;
-    title: string;
+    caption: string;
     nav: string;
+    months: string;
+    month: string;
+    monthTitle: string;
     grid: string;
     weekday: string;
     cell: string;
     day: string;
-}, tailwind_variants.TVReturnTypeLike<unknown, {
+    node: string;
+    live: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        plain: {};
+        card: {
+            root: string;
+        };
+    };
+}, {
     root: string;
     header: string;
-    title: string;
+    caption: string;
     nav: string;
+    months: string;
+    month: string;
+    monthTitle: string;
     grid: string;
     weekday: string;
     cell: string;
     day: string;
+    node: string;
+    live: string;
 }>>;
-/** A local `Date` at midnight for an ISO date (for formatting). */
-declare const toLocalDate: (iso: IsoDate) => Date;
-/** The ISO date of a local `Date`. */
-declare const toIsoDate: (date: Date) => IsoDate;
-declare const addDays: (iso: IsoDate, days: number) => string;
-declare const addMonths: (iso: IsoDate, months: number) => string;
-/** The first day of the week for a locale (0 = Sunday … 6 = Saturday), from `Intl.Locale` week info; Monday otherwise. */
-declare function weekStartOf(locale: string): number;
 type CalendarLabels = {
     /** The previous-month button ("Previous month"). */
     previousMonth: string;
     /** The next-month button ("Next month"). */
     nextMonth: string;
+    /** The month's title as a button: opens the months of the year ("Choose month and year"). */
+    chooseMonth: string;
+    /** The previous-year button of the months view ("Previous year"). */
+    previousYear: string;
+    /** The next-year button of the months view ("Next year"). */
+    nextYear: string;
 };
 declare const calendarLabels: CalendarLabels;
 type CalendarProps = {
@@ -95,16 +137,18 @@ type CalendarProps = {
     locale: string;
     /** The chosen date (one-date mode). */
     value?: IsoDate | null;
-    /** The chosen range (range mode): its ends are marked, the days between tinted. */
+    /** The chosen range (range mode): its ends are lit, the days between are one band. */
     range?: DateRange | null;
     /** Called with the day picked. */
     onSelect?: (date: IsoDate) => void;
-    /** The month shown, any day of it (controlled). */
+    /** The month shown (the first one, with `numberOfMonths={2}`), any day of it (controlled). */
     month?: IsoDate;
     /** The month shown at first. Default: the value's, or today's. */
     defaultMonth?: IsoDate;
     /** Called when the month shown changes. */
     onMonthChange?: (month: IsoDate) => void;
+    /** One month, or two side by side (a period: from a phone's width up, they stack on a phone). */
+    numberOfMonths?: 1 | 2;
     /** The earliest date that can be picked. */
     min?: IsoDate;
     /** The latest date that can be picked. */
@@ -117,13 +161,134 @@ type CalendarProps = {
     today?: IsoDate;
     /** Moves the focus to the active day when it mounts (inside a popover). */
     autoFocus?: boolean;
+    /** `plain` (inside a popover, a card of the app) or `card` (the calendar is the interface: its own raised surface). */
+    variant?: "plain" | "card";
     /** The words, passed translated; English by default. */
     labels?: Partial<CalendarLabels>;
     /** Classes merged on the root. */
     className?: string;
 };
 /** A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker. */
-declare function Calendar({ locale, value, range, onSelect, month: monthProp, defaultMonth, onMonthChange, min, max, isDateDisabled, weekStartsOn, today: todayProp, autoFocus, labels: given, className, }: CalendarProps): React.JSX.Element;
+declare function Calendar({ locale, value, range, onSelect, month: monthProp, defaultMonth, onMonthChange, numberOfMonths, min, max, isDateDisabled, weekStartsOn, today: todayProp, autoFocus, variant, labels: given, className, }: CalendarProps): React.JSX.Element;
+
+declare const dateField: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
+            legend?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            part?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
+            legend?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            part?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    legend: string;
+    row: string;
+    part: string;
+    input: string;
+    hint: string;
+    error: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            input?: tailwind_variants.ClassValue;
+            legend?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            part?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    legend: string;
+    row: string;
+    part: string;
+    input: string;
+    hint: string;
+    error: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    legend: string;
+    row: string;
+    part: string;
+    input: string;
+    hint: string;
+    error: string;
+}>>;
+type DateFieldLabels = {
+    /** The name of the day ("Day"). */
+    day: string;
+    /** The name of the month ("Month"). */
+    month: string;
+    /** The name of the year ("Year"). */
+    year: string;
+};
+declare const dateFieldLabels: DateFieldLabels;
+type Common = {
+    /** The visible label, passed translated (the group's name). */
+    label: string;
+    /** The BCP 47 locale: the order of the parts, the names of the months. */
+    locale: string;
+    /** A help text under the field ("For example, 27 3 1990"). */
+    hint?: string;
+    /** An error under the field: marks it invalid and is read with it. Replaces the hint. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** The name of a hidden input holding the value, for a plain `<form>` post. */
+    name?: string;
+    /** The names of the parts, passed translated; English by default. */
+    labels?: Partial<DateFieldLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+type DateFieldProps = Common & {
+    /** The date, `YYYY-MM-DD` (controlled); `""` for none. What is typed comes back as it is, real date or not: the schema decides. */
+    value?: string;
+    /** The date at first, uncontrolled. */
+    defaultValue?: string;
+    /** Called on every key with the date typed so far (`""` when the boxes are empty). */
+    onValueChange?: (value: string) => void;
+    /** Called when the focus leaves the field. */
+    onBlur?: () => void;
+    /** `bday` for a date of birth: the browser offers to fill it. */
+    autoComplete?: "bday" | "off";
+};
+/** Day · month · year typed in the locale's order: numeric keyboards, the next box focused when one is full. */
+declare function DateField({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue, onValueChange, onBlur, autoComplete }: DateFieldProps): React.JSX.Element;
+type DateWheelProps = Common & {
+    /** The date, `YYYY-MM-DD` (controlled); `""` or `null` for none (the wheels then rest on `defaultView`). */
+    value?: string | null;
+    /** The date at first, uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the date under the band, always a real date within `min` / `max`. */
+    onValueChange?: (value: string) => void;
+    /** The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago. */
+    min?: string;
+    /** The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today. */
+    max?: string;
+    /** Where the wheels rest while there is no value. Default: `max` (a birth date: the youngest allowed). */
+    defaultView?: string;
+};
+/** Day, month and year as three wheels in the locale's order, bounded by `min` and `max`: always a real date. */
+declare function DateWheel({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue, onValueChange, min, max, defaultView }: DateWheelProps): React.JSX.Element;
 
 declare const datePicker: tailwind_variants.TVReturnType<{
     [key: string]: {
@@ -131,12 +296,13 @@ declare const datePicker: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             row?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
             hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             layout?: tailwind_variants.ClassValue;
             presets?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
+            presetNode?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             clear?: tailwind_variants.ClassValue;
             preset?: tailwind_variants.ClassValue;
@@ -148,12 +314,13 @@ declare const datePicker: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             row?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
             hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             layout?: tailwind_variants.ClassValue;
             presets?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
+            presetNode?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             clear?: tailwind_variants.ClassValue;
             preset?: tailwind_variants.ClassValue;
@@ -170,6 +337,7 @@ declare const datePicker: tailwind_variants.TVReturnType<{
     layout: string;
     presets: string;
     preset: string;
+    presetNode: string;
     hint: string;
     error: string;
 }, undefined, {
@@ -178,12 +346,13 @@ declare const datePicker: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             row?: tailwind_variants.ClassValue;
-            content?: tailwind_variants.ClassValue;
             hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             layout?: tailwind_variants.ClassValue;
             presets?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
+            presetNode?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             clear?: tailwind_variants.ClassValue;
             preset?: tailwind_variants.ClassValue;
@@ -200,6 +369,7 @@ declare const datePicker: tailwind_variants.TVReturnType<{
     layout: string;
     presets: string;
     preset: string;
+    presetNode: string;
     hint: string;
     error: string;
 }, tailwind_variants.TVReturnTypeLike<unknown, {
@@ -213,6 +383,7 @@ declare const datePicker: tailwind_variants.TVReturnType<{
     layout: string;
     presets: string;
     preset: string;
+    presetNode: string;
     hint: string;
     error: string;
 }>>;
@@ -221,7 +392,7 @@ type DatePickerLabels = CalendarLabels & {
     clear: string;
 };
 declare const datePickerLabels: DatePickerLabels;
-type Shared = Pick<CalendarProps, "locale" | "min" | "max" | "isDateDisabled" | "weekStartsOn" | "today"> & {
+type Shared$1 = Pick<CalendarProps, "locale" | "min" | "max" | "isDateDisabled" | "weekStartsOn" | "today"> & {
     /** The visible label, passed translated (also the button's accessible name, with the value). */
     label: string;
     /** Shown while nothing is chosen ("Pick a date"), passed translated. */
@@ -245,7 +416,7 @@ type Shared = Pick<CalendarProps, "locale" | "min" | "max" | "isDateDisabled" |
     /** Classes merged on the root. */
     className?: string;
 };
-type DatePickerProps = Shared & {
+type DatePickerProps = Shared$1 & {
     /** The chosen date, ISO (controlled); `null` for none. */
     value?: IsoDate | null;
     /** The chosen date at first, uncontrolled. */
@@ -263,7 +434,7 @@ type DateRangePreset = {
     /** The last day, ISO. */
     end: IsoDate;
 };
-type DateRangePickerProps = Shared & {
+type DateRangePickerProps = Shared$1 & {
     /** The chosen range (controlled); `null` for none. `end` is never `null` in a committed value. */
     value?: {
         start: IsoDate;
@@ -281,8 +452,426 @@ type DateRangePickerProps = Shared & {
     } | null) => void;
     /** Ranges one click away ("Last 7 days", "This month"), beside the calendar. */
     presets?: readonly DateRangePreset[];
+    /** Two months side by side (default, from a phone's width up) or one. */
+    numberOfMonths?: 1 | 2;
 };
 /** A period field: two clicks on one calendar (the days between tinted as you hover), optional presets. */
-declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, presets, defaultOpen, ...shared }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, presets, numberOfMonths, defaultOpen, ...shared }: DateRangePickerProps): React.JSX.Element;
+
+declare const dayStrip: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            number?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            node?: tailwind_variants.ClassValue;
+            navs?: tailwind_variants.ClassValue;
+            noMark?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            number?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            node?: tailwind_variants.ClassValue;
+            navs?: tailwind_variants.ClassValue;
+            noMark?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    title: string;
+    navs: string;
+    nav: string;
+    track: string;
+    day: string;
+    weekday: string;
+    number: string;
+    node: string;
+    mark: string;
+    noMark: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            number?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            node?: tailwind_variants.ClassValue;
+            navs?: tailwind_variants.ClassValue;
+            noMark?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    title: string;
+    navs: string;
+    nav: string;
+    track: string;
+    day: string;
+    weekday: string;
+    number: string;
+    node: string;
+    mark: string;
+    noMark: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    title: string;
+    navs: string;
+    nav: string;
+    track: string;
+    day: string;
+    weekday: string;
+    number: string;
+    node: string;
+    mark: string;
+    noMark: string;
+}>>;
+type DayStripLabels = {
+    /** The button that shows the earlier days ("Earlier days"). */
+    previous: string;
+    /** The button that shows the later days ("Later days"). */
+    next: string;
+    /** Added to the name of a marked day ("has events"). */
+    marked: string;
+};
+declare const dayStripLabels: DayStripLabels;
+type DayStripProps = {
+    /** The group's accessible name ("Delivery day"), passed translated. */
+    label: string;
+    /** The BCP 47 locale of the names and the dates: always explicit. */
+    locale: string;
+    /** The chosen day, ISO (controlled); `null` for none. */
+    value?: IsoDate | null;
+    /** The chosen day at first, uncontrolled. */
+    defaultValue?: IsoDate | null;
+    /** Called with the day picked. */
+    onValueChange?: (value: IsoDate) => void;
+    /** The first day of the strip. Default: today. */
+    start?: IsoDate;
+    /** How many days. Default 14. */
+    days?: number;
+    /** Refuses some days (closed, full): drawn dashed, skipped by the arrows. */
+    isDateDisabled?: (date: IsoDate) => boolean;
+    /** Marks the days that have something (a session, an event): a dot, and `labels.marked` in their name. */
+    isDateMarked?: (date: IsoDate) => boolean;
+    /** Today (marked by the node): inject it for a stable render or a test. Default: the device's date. */
+    today?: IsoDate;
+    /** Shows the month of the chosen day (or of the first) and the page buttons above the strip. */
+    showHeader?: boolean;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<DayStripLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** The days ahead in a row that scrolls sideways: one picked, today and the marked days shown. */
+declare function DayStrip({ label, locale, value: valueProp, defaultValue, onValueChange, start, days, isDateDisabled, isDateMarked, today: todayProp, showHeader, labels: given, className }: DayStripProps): React.JSX.Element;
+
+/** A calendar month, `YYYY-MM`. */
+type IsoMonth = string;
+declare const monthPicker: tailwind_variants.TVReturnType<{
+    variant: {
+        plain: {};
+        card: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    year: string;
+    nav: string;
+    grid: string;
+    month: string;
+}, undefined, {
+    variant: {
+        plain: {};
+        card: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    year: string;
+    nav: string;
+    grid: string;
+    month: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        plain: {};
+        card: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    year: string;
+    nav: string;
+    grid: string;
+    month: string;
+}>>;
+type MonthPickerLabels = {
+    /** The previous-year button ("Previous year"). */
+    previousYear: string;
+    /** The next-year button ("Next year"). */
+    nextYear: string;
+};
+declare const monthPickerLabels: MonthPickerLabels;
+type MonthPickerProps = {
+    /** The BCP 47 locale of the month names: always explicit. */
+    locale: string;
+    /** The chosen month, `YYYY-MM` (controlled); `null` for none. */
+    value?: IsoMonth | null;
+    /** The chosen month at first, uncontrolled. */
+    defaultValue?: IsoMonth | null;
+    /** Called with the month picked. */
+    onValueChange?: (value: IsoMonth | null) => void;
+    /** The year shown (controlled). */
+    year?: number;
+    /** Called when the year shown changes. */
+    onYearChange?: (year: number) => void;
+    /** The earliest month that can be picked, `YYYY-MM`. */
+    min?: IsoMonth;
+    /** The latest month that can be picked, `YYYY-MM`. */
+    max?: IsoMonth;
+    /** This month (marked): inject it for a stable render or a test. Default: the device's. */
+    current?: IsoMonth;
+    /** Moves the focus to the active month when it mounts. */
+    autoFocus?: boolean;
+    /** Without its own year header (inside the calendar, which has one). */
+    bare?: boolean;
+    /** `plain` or `card` (its own raised surface). */
+    variant?: "plain" | "card";
+    /** The words, passed translated; English by default. */
+    labels?: Partial<MonthPickerLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A month of a year: twelve months in a grid, the year above them. */
+declare function MonthPicker({ locale, value: valueProp, defaultValue, onValueChange, year: yearProp, onYearChange, min, max, current, autoFocus, bare, variant, labels: given, className }: MonthPickerProps): React.JSX.Element;
+
+declare const timePicker: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            slots?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            slots?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    slots: string;
+    slot: string;
+    group: string;
+    heading: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            slots?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    slots: string;
+    slot: string;
+    group: string;
+    heading: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    slots: string;
+    slot: string;
+    group: string;
+    heading: string;
+}>>;
+type TimePickerLabels = {
+    /** The hours' wheel ("Hours"). */
+    hours: string;
+    /** The minutes' wheel ("Minutes"). */
+    minutes: string;
+    /** The day period's wheel ("AM/PM"). */
+    period: string;
+};
+declare const timePickerLabels: TimePickerLabels;
+type Shared = {
+    /** The accessible name of the picker ("Pick-up time"), passed translated. */
+    label: string;
+    /** The BCP 47 locale: how times are written, and whether the day has a period (AM/PM). */
+    locale: string;
+    /** The time, `HH:mm` on 24 hours (controlled); `null` for none. */
+    value?: TimeValue | null;
+    /** The time at first, uncontrolled. */
+    defaultValue?: TimeValue | null;
+    /** Called with the time chosen. */
+    onValueChange?: (value: TimeValue) => void;
+    /** Not available. */
+    disabled?: boolean;
+    /** Classes merged on the root. */
+    className?: string;
+};
+type TimePickerProps = Shared & ({
+    /** `wheel`: hours and minutes (and the period) as wheels — a time you set (a reminder, an alarm). */
+    variant?: "wheel";
+    /** The minutes' step: 1, 5 (default), 10, 15, 30. */
+    minuteStep?: number;
+    /** Forces 12 or 24 hours. Default: the locale's. */
+    hour12?: boolean;
+    /** The words of the wheels, passed translated; English by default. */
+    labels?: Partial<TimePickerLabels>;
+    slots?: never;
+    isTimeDisabled?: never;
+    groupLabels?: never;
+} | {
+    /** `slots`: the free times as buttons — a booking, a delivery window, an appointment. */
+    variant: "slots";
+    /** The times offered, `HH:mm` (`timeSlots("09:00", "17:00", 30)`). */
+    slots: readonly TimeValue[];
+    /** Refuses some slots (taken, too soon): drawn struck through, skipped by the arrows. */
+    isTimeDisabled?: (time: TimeValue) => boolean;
+    /** Splits the slots under headings by part of the day: `{ morning: "Morning", afternoon: "Afternoon", evening: "Evening" }`. */
+    groupLabels?: {
+        morning: string;
+        afternoon: string;
+        evening: string;
+    };
+    minuteStep?: never;
+    hour12?: never;
+    labels?: never;
+});
+/** A time of day: wheels to set one, or slots to book one. */
+declare function TimePicker(props: TimePickerProps): React.JSX.Element;
+
+/** A value of a wheel: what is stored, and its words (passed translated or formatted for the locale). */
+type WheelOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+declare const wheel: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            band?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            divider?: tailwind_variants.ClassValue;
+            scroller?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            band?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            divider?: tailwind_variants.ClassValue;
+            scroller?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    band: string;
+    column: string;
+    scroller: string;
+    item: string;
+    divider: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            band?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            divider?: tailwind_variants.ClassValue;
+            scroller?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    band: string;
+    column: string;
+    scroller: string;
+    item: string;
+    divider: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    band: string;
+    column: string;
+    scroller: string;
+    item: string;
+    divider: string;
+}>>;
+type WheelProps = {
+    /** The column's accessible name ("Hour", "Month"), passed translated. */
+    label: string;
+    /** The values, in order. */
+    options: readonly WheelOption[];
+    /** The chosen value (controlled). */
+    value?: string | null;
+    /** The chosen value at first, uncontrolled. Default: the first one. */
+    defaultValue?: string;
+    /** Called with the value that comes to rest under the band. */
+    onValueChange?: (value: string) => void;
+    /** Not available. */
+    disabled?: boolean;
+    /** Classes merged on the column (a width: `w-20`). */
+    className?: string;
+};
+type WheelPickerProps = {
+    /** The group's accessible name ("Departure time"), passed translated. */
+    label: string;
+    /** The wheels (`Wheel`), and dividers (`WheelDivider`) between them. */
+    children: React.ReactNode;
+    /** How many values are visible: 3, 5 (default) or 7. */
+    visible?: 3 | 5 | 7;
+    /** The help text or the error that describes the group (their ids). */
+    "aria-describedby"?: string;
+    /** Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`. */
+    invalid?: boolean;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** The frame of one or several wheels: a raised surface, the lit band across them, a group named by `label`. */
+declare function WheelPicker({ label, children, visible, "aria-describedby": describedBy, invalid, className }: WheelPickerProps): React.JSX.Element;
+/** A divider between two wheels (`:` between the hours and the minutes). */
+declare function WheelDivider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** One column of a `WheelPicker`: a spinbutton over a scroll-snapped list of values. */
+declare function Wheel({ label, options, value: valueProp, defaultValue, onValueChange, disabled, className }: WheelProps): React.JSX.Element;
 
-export { Calendar, type CalendarLabels, type CalendarProps, DatePicker, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type IsoDate, addDays, addMonths, calendar, calendarLabels, datePicker, datePickerLabels, toIsoDate, toLocalDate, weekStartOf };
+export { Calendar, type CalendarLabels, type CalendarProps, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DatePicker, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DateWheel, type DateWheelProps, DayStrip, type DayStripLabels, type DayStripProps, type IsoDate, type IsoMonth, MonthPicker, type MonthPickerLabels, type MonthPickerProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, addDays, addMonths, ageOn, calendar, calendarLabels, composeDate, dateField, dateFieldLabels, datePartsOrder, datePicker, datePickerLabels, dayPeriods, dayStrip, dayStripLabels, daysInMonth, formatTime, isRealDate, isoOf, latestBirthDate, minutesToTime, monthNames, monthPicker, monthPickerLabels, timePicker, timePickerLabels, timeSlots, timeToMinutes, toIsoDate, toLocalDate, todayIso, uses12Hours, weekStartOf, wheel, yearRange };