@openwarelabs/ui 0.3.0 → 0.4.0

package/README.md

@@ -50,18 +50,19 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-71 components, each with a page in the docs.
+83 components, each with a page in the docs.
 
 | Group | Components |
 | --- | --- |
-| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`) |
-| Buttons | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `ToggleButton`, `CloseButton`, `CopyButton`, `SegmentedControl`, `ChoiceCard` |
-| Forms | `Field`, `Fieldset`, `Input` (start and end content), `SearchField`, `NumberField`, `InputOTP`, `Textarea` (`autoGrow`), `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Slider` (one value or a range), `ColorPicker`, `ColorField`, `FileDropZone` |
-| Dates | `Calendar`, `DatePicker` |
-| Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
+| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
+| Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl`, `ToggleButtonGroup` (one or several on), `Toolbar` + `ToolbarSeparator` (arrow keys across its controls) |
+| Inputs | `Form` (the browser's checks, your own and the server's errors, under each field; `useFormStatus`), `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField`, `DateField` and `TimeField` (typed in segments, in the locale's order) |
+| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `ChoiceCard`, `ListBox` (one or many, on the page) |
+| Pickers | `Calendar`, `DatePicker`, `RangeCalendar`, `DateRangePicker` (with presets), `ColorPicker`, `ColorArea`, `ColorSlider`, `ColorSwatchPicker`, `FileDropZone` |
+| Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Meter` (an amount in a range, toned by thresholds), `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
 | Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `Menu` + `MenuItem`, `CommandPalette` |
-| Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Link`, `Pagination`, `Steps`, `NavList` + `NavItem` |
-| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
+| Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
+| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User` |
 | Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden` |
 | Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
 

package/dist/components/Calendar/Calendar.d.cts

@@ -1,3 +1,4 @@
+import { type KeyboardEvent, type Ref } from "react";
 import { type ISODate } from "./dates.cjs";
 export interface CalendarProps {
     /** The chosen date as "YYYY-MM-DD", or "" for none. */
@@ -29,3 +30,60 @@ export interface CalendarHandle {
  * (with Shift, by year), Home and End to the week's ends. Today is marked with a brass dot.
  */
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarHandle>>;
+/** Whether the month before `first` has a day on or after `min`. */
+export declare function canShowBefore(first: ISODate, min: ISODate | undefined): boolean;
+/** Whether the month after `last` (the first of the last month shown) has a day on or before `max`. */
+export declare function canShowAfter(last: ISODate, max: ISODate | undefined): boolean;
+/** Where a key moves the focus from `date`: a day, a week, the week's ends, a month (with Shift, a year). */
+export declare function dateForKey(event: KeyboardEvent<HTMLElement>, date: ISODate, weekStartsOn: 0 | 1): ISODate | undefined;
+/** Which way the month changed since the last render, so the new one slides in from that side. */
+export declare function useSlide(month: number): "next" | "previous" | undefined;
+interface MonthNavButton {
+    disabled: boolean;
+    onClick(): void;
+}
+export interface MonthHeaderProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    locale?: string;
+    slide?: "next" | "previous";
+    /** The previous-month button, or null for an empty space of the same size. */
+    previous: MonthNavButton | null;
+    /** The next-month button, or null for an empty space of the same size. */
+    next: MonthNavButton | null;
+}
+/** The month's name between the previous- and next-month buttons. */
+export declare function MonthHeader({ month, locale, slide, previous, next }: MonthHeaderProps): import("react").JSX.Element;
+export interface MonthGridProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    /** The day that takes Tab focus (roving tabindex). */
+    focused: ISODate;
+    today: ISODate;
+    locale?: string;
+    weekStartsOn: 0 | 1;
+    slide?: "next" | "previous";
+    /** Leaves the days of the months either side empty, for months shown side by side. */
+    hideOutsideDays?: boolean;
+    isDisabled(date: ISODate): boolean;
+    /** aria-selected on the day's cell. */
+    isSelected(date: ISODate): boolean;
+    /** Fills the day with the primary colour. */
+    isFilled(date: ISODate): boolean;
+    /** Extra classes for a day's cell; `column` is 0 to 6 across the week. */
+    cellClassName?(date: ISODate, column: number): string | undefined;
+    /** Extra classes for a day's button. */
+    dayClassName?(date: ISODate): string | undefined;
+    /** Extra attributes for a day's button. */
+    dayProps?(date: ISODate): {
+        "aria-describedby"?: string;
+    };
+    onChoose(date: ISODate): void;
+    onDayKeyDown(event: KeyboardEvent<HTMLButtonElement>, date: ISODate): void;
+    onDayFocus(date: ISODate): void;
+    onDayPointerEnter?(date: ISODate): void;
+    gridRef?: Ref<HTMLTableElement>;
+}
+/** One month as a grid of day buttons: six weeks, weekday names above, each day read out in full. */
+export declare function MonthGrid({ month, focused, today, locale, weekStartsOn, slide, hideOutsideDays, isDisabled, isSelected, isFilled, cellClassName, dayClassName, dayProps, onChoose, onDayKeyDown, onDayFocus, onDayPointerEnter, gridRef, }: MonthGridProps): import("react").JSX.Element;
+export {};

package/dist/components/Calendar/Calendar.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardEvent, type Ref } from "react";
 import { type ISODate } from "./dates.js";
 export interface CalendarProps {
     /** The chosen date as "YYYY-MM-DD", or "" for none. */
@@ -29,3 +30,60 @@ export interface CalendarHandle {
  * (with Shift, by year), Home and End to the week's ends. Today is marked with a brass dot.
  */
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarHandle>>;
+/** Whether the month before `first` has a day on or after `min`. */
+export declare function canShowBefore(first: ISODate, min: ISODate | undefined): boolean;
+/** Whether the month after `last` (the first of the last month shown) has a day on or before `max`. */
+export declare function canShowAfter(last: ISODate, max: ISODate | undefined): boolean;
+/** Where a key moves the focus from `date`: a day, a week, the week's ends, a month (with Shift, a year). */
+export declare function dateForKey(event: KeyboardEvent<HTMLElement>, date: ISODate, weekStartsOn: 0 | 1): ISODate | undefined;
+/** Which way the month changed since the last render, so the new one slides in from that side. */
+export declare function useSlide(month: number): "next" | "previous" | undefined;
+interface MonthNavButton {
+    disabled: boolean;
+    onClick(): void;
+}
+export interface MonthHeaderProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    locale?: string;
+    slide?: "next" | "previous";
+    /** The previous-month button, or null for an empty space of the same size. */
+    previous: MonthNavButton | null;
+    /** The next-month button, or null for an empty space of the same size. */
+    next: MonthNavButton | null;
+}
+/** The month's name between the previous- and next-month buttons. */
+export declare function MonthHeader({ month, locale, slide, previous, next }: MonthHeaderProps): import("react").JSX.Element;
+export interface MonthGridProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    /** The day that takes Tab focus (roving tabindex). */
+    focused: ISODate;
+    today: ISODate;
+    locale?: string;
+    weekStartsOn: 0 | 1;
+    slide?: "next" | "previous";
+    /** Leaves the days of the months either side empty, for months shown side by side. */
+    hideOutsideDays?: boolean;
+    isDisabled(date: ISODate): boolean;
+    /** aria-selected on the day's cell. */
+    isSelected(date: ISODate): boolean;
+    /** Fills the day with the primary colour. */
+    isFilled(date: ISODate): boolean;
+    /** Extra classes for a day's cell; `column` is 0 to 6 across the week. */
+    cellClassName?(date: ISODate, column: number): string | undefined;
+    /** Extra classes for a day's button. */
+    dayClassName?(date: ISODate): string | undefined;
+    /** Extra attributes for a day's button. */
+    dayProps?(date: ISODate): {
+        "aria-describedby"?: string;
+    };
+    onChoose(date: ISODate): void;
+    onDayKeyDown(event: KeyboardEvent<HTMLButtonElement>, date: ISODate): void;
+    onDayFocus(date: ISODate): void;
+    onDayPointerEnter?(date: ISODate): void;
+    gridRef?: Ref<HTMLTableElement>;
+}
+/** One month as a grid of day buttons: six weeks, weekday names above, each day read out in full. */
+export declare function MonthGrid({ month, focused, today, locale, weekStartsOn, slide, hideOutsideDays, isDisabled, isSelected, isFilled, cellClassName, dayClassName, dayProps, onChoose, onDayKeyDown, onDayFocus, onDayPointerEnter, gridRef, }: MonthGridProps): import("react").JSX.Element;
+export {};

package/dist/components/Calendar/DateRangePicker.d.cts

@@ -0,0 +1,39 @@
+import { type DateRange, type RangeCalendarProps } from "./RangeCalendar.cjs";
+/** A named range to pick in one go, such as "Last 7 days". */
+export interface DateRangePreset {
+    /** What the list shows, in sentence case. */
+    label: string;
+    range: DateRange;
+}
+export interface DateRangePickerProps extends Omit<RangeCalendarProps, "autoFocus" | "className" | "visibleMonths"> {
+    /** Ranges to pick in one go, listed beside the calendar: "Last 7 days", "This month". */
+    presets?: DateRangePreset[];
+    /** How many months the calendar shows side by side. Phones always get one.
+     * @default 2 */
+    visibleMonths?: 1 | 2;
+    /** Shown when no range is chosen.
+     * @default "Pick dates" */
+    placeholder?: string;
+    /** How each date is written in the field; dates the two ends share are written once, as in "3 – 9 Oct 2026".
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** md is 40px tall, sm 32px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** For the field's button, so a label can point at it. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Classes for the field, e.g. a width. */
+    className?: string;
+}
+/**
+ * A field that opens a two-month RangeCalendar, with optional presets beside it. Picking the second day, or a preset,
+ * closes it; Escape closes it without changing anything. Once there's a range, a clear button empties it.
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/DateRangePicker.d.ts

@@ -0,0 +1,39 @@
+import { type DateRange, type RangeCalendarProps } from "./RangeCalendar.js";
+/** A named range to pick in one go, such as "Last 7 days". */
+export interface DateRangePreset {
+    /** What the list shows, in sentence case. */
+    label: string;
+    range: DateRange;
+}
+export interface DateRangePickerProps extends Omit<RangeCalendarProps, "autoFocus" | "className" | "visibleMonths"> {
+    /** Ranges to pick in one go, listed beside the calendar: "Last 7 days", "This month". */
+    presets?: DateRangePreset[];
+    /** How many months the calendar shows side by side. Phones always get one.
+     * @default 2 */
+    visibleMonths?: 1 | 2;
+    /** Shown when no range is chosen.
+     * @default "Pick dates" */
+    placeholder?: string;
+    /** How each date is written in the field; dates the two ends share are written once, as in "3 – 9 Oct 2026".
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** md is 40px tall, sm 32px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** For the field's button, so a label can point at it. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Classes for the field, e.g. a width. */
+    className?: string;
+}
+/**
+ * A field that opens a two-month RangeCalendar, with optional presets beside it. Picking the second day, or a preset,
+ * closes it; Escape closes it without changing anything. Once there's a range, a clear button empties it.
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/RangeCalendar.d.cts

@@ -0,0 +1,38 @@
+import { type CalendarHandle } from "./Calendar.cjs";
+import { type ISODate } from "./dates.cjs";
+/** A range of days, both ends included, as "YYYY-MM-DD". */
+export interface DateRange {
+    start: ISODate;
+    end: ISODate;
+}
+export interface RangeCalendarProps {
+    /** The chosen range, or null for none. */
+    value?: DateRange | null;
+    /** @default null */
+    defaultValue?: DateRange | null;
+    /** Called once both ends are picked, with the earlier day as the start. */
+    onChange?(range: DateRange | null): void;
+    /** The earliest day either end can be, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest day either end can be. */
+    max?: ISODate;
+    /** Return true for days that can't be an end of the range, such as weekends. A range can still run across them. */
+    isDateDisabled?(date: ISODate): boolean;
+    /** Month and day names follow this locale, e.g. "en-IE", "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** 1 starts weeks on Monday, 0 on Sunday.
+     * @default 1 */
+    weekStartsOn?: 0 | 1;
+    /** How many months show side by side. Two stack when there isn't room for both.
+     * @default 1 */
+    visibleMonths?: 1 | 2;
+    /** Focus the range's start (or today) on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Month grids for picking a range of days. The first pick sets the start and the range follows the pointer or the
+ * focus until the second pick sets the end; Escape drops a half-picked range. The keys move as in Calendar.
+ */
+export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<CalendarHandle>>;

package/dist/components/Calendar/RangeCalendar.d.ts

@@ -0,0 +1,38 @@
+import { type CalendarHandle } from "./Calendar.js";
+import { type ISODate } from "./dates.js";
+/** A range of days, both ends included, as "YYYY-MM-DD". */
+export interface DateRange {
+    start: ISODate;
+    end: ISODate;
+}
+export interface RangeCalendarProps {
+    /** The chosen range, or null for none. */
+    value?: DateRange | null;
+    /** @default null */
+    defaultValue?: DateRange | null;
+    /** Called once both ends are picked, with the earlier day as the start. */
+    onChange?(range: DateRange | null): void;
+    /** The earliest day either end can be, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest day either end can be. */
+    max?: ISODate;
+    /** Return true for days that can't be an end of the range, such as weekends. A range can still run across them. */
+    isDateDisabled?(date: ISODate): boolean;
+    /** Month and day names follow this locale, e.g. "en-IE", "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** 1 starts weeks on Monday, 0 on Sunday.
+     * @default 1 */
+    weekStartsOn?: 0 | 1;
+    /** How many months show side by side. Two stack when there isn't room for both.
+     * @default 1 */
+    visibleMonths?: 1 | 2;
+    /** Focus the range's start (or today) on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Month grids for picking a range of days. The first pick sets the start and the range follows the pointer or the
+ * focus until the second pick sets the end; Escape drops a half-picked range. The keys move as in Calendar.
+ */
+export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<CalendarHandle>>;

package/dist/components/Calendar/dates.d.cts

@@ -13,3 +13,16 @@ export declare function addMonths(iso: ISODate, months: number): ISODate;
 export declare function weekday(iso: ISODate): number;
 export declare function toDate(iso: ISODate): Date;
 export declare function formatDate(iso: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Two dates as one range in the locale, sharing what they have in common: "3 – 9 Oct 2026", "28 Sept – 4 Oct 2026".
+ * The same day twice is written once.
+ */
+export declare function formatDateRange(start: ISODate, end: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/** Keeps a date between min and max, when they're given. */
+export declare function clampDate(date: ISODate, min: ISODate | undefined, max: ISODate | undefined): ISODate;
+/** The first day of the month a date falls in. */
+export declare function startOfMonth(iso: ISODate): ISODate;
+/** Months counted from year 0, so two months can be compared and subtracted. */
+export declare function monthIndex(iso: ISODate): number;
+/** The six weeks a month grid shows for the month starting on `first`, each starting on `weekStartsOn`. */
+export declare function monthWeeks(first: ISODate, weekStartsOn: 0 | 1): ISODate[][];

package/dist/components/Calendar/dates.d.ts

@@ -13,3 +13,16 @@ export declare function addMonths(iso: ISODate, months: number): ISODate;
 export declare function weekday(iso: ISODate): number;
 export declare function toDate(iso: ISODate): Date;
 export declare function formatDate(iso: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Two dates as one range in the locale, sharing what they have in common: "3 – 9 Oct 2026", "28 Sept – 4 Oct 2026".
+ * The same day twice is written once.
+ */
+export declare function formatDateRange(start: ISODate, end: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/** Keeps a date between min and max, when they're given. */
+export declare function clampDate(date: ISODate, min: ISODate | undefined, max: ISODate | undefined): ISODate;
+/** The first day of the month a date falls in. */
+export declare function startOfMonth(iso: ISODate): ISODate;
+/** Months counted from year 0, so two months can be compared and subtracted. */
+export declare function monthIndex(iso: ISODate): number;
+/** The six weeks a month grid shows for the month starting on `first`, each starting on `weekStartsOn`. */
+export declare function monthWeeks(first: ISODate, weekStartsOn: 0 | 1): ISODate[][];

package/dist/components/ColorPicker/ColorArea.d.cts

@@ -0,0 +1,44 @@
+export interface ColorAreaProps {
+    /** The colour as hex, "#0d9488". Given with alpha ("#0d9488cc"), it keeps the alpha. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Pass a hue ColorSlider's `onHueChange`
+     * value here to keep the two in step on greys. Without it, the area keeps the last hue it had. */
+    hue?: number;
+    /** Pixels, or any CSS width. It never grows past its container.
+     * @default 232 */
+    width?: number | string;
+    /** Pixels, or any CSS height.
+     * @default 152 */
+    height?: number | string;
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the percentages screen readers hear. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the area for screen readers; its two sliders are "Saturation" and "Brightness" within it.
+     * @default "Colour" */
+    "aria-label"?: string;
+    /** Names the area by a visible label's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after each slider's value. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the area, e.g. a size. */
+    className?: string;
+}
+/**
+ * A square of one hue: saturation across, brightness up and down. Drag the thumb, or use the arrow keys.
+ * To screen readers it's two sliders, saturation and brightness, each reading out the colour.
+ * The ref is the saturation slider's input, for focusing it.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorArea.d.ts

@@ -0,0 +1,44 @@
+export interface ColorAreaProps {
+    /** The colour as hex, "#0d9488". Given with alpha ("#0d9488cc"), it keeps the alpha. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Pass a hue ColorSlider's `onHueChange`
+     * value here to keep the two in step on greys. Without it, the area keeps the last hue it had. */
+    hue?: number;
+    /** Pixels, or any CSS width. It never grows past its container.
+     * @default 232 */
+    width?: number | string;
+    /** Pixels, or any CSS height.
+     * @default 152 */
+    height?: number | string;
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the percentages screen readers hear. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the area for screen readers; its two sliders are "Saturation" and "Brightness" within it.
+     * @default "Colour" */
+    "aria-label"?: string;
+    /** Names the area by a visible label's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after each slider's value. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the area, e.g. a size. */
+    className?: string;
+}
+/**
+ * A square of one hue: saturation across, brightness up and down. Drag the thumb, or use the arrow keys.
+ * To screen readers it's two sliders, saturation and brightness, each reading out the colour.
+ * The ref is the saturation slider's input, for focusing it.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorSlider.d.cts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** A channel a ColorSlider changes: HSL's hue, saturation or lightness, the alpha, or red, green or blue. */
+export type ColorChannel = "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue";
+export interface ColorSliderProps {
+    /** The channel it changes. Saturation and lightness are HSL's; the track shows the channel's range for the current colour. */
+    channel: ColorChannel;
+    /** The colour as hex. The alpha channel takes and returns "#rrggbbaa"; the others keep any alpha they're given. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Without it, the slider keeps the last hue it had. */
+    hue?: number;
+    /** Called with the hue as a hue slider moves, including over a grey, whose hex doesn't change. Pass it on to a
+     * ColorArea's `hue` to keep the two in step. */
+    onHueChange?(hue: number): void;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the channel's value (174°, 72%, or 0 to 255 for red, green and blue) at the right of the label.
+     * Defaults to true when there's a label. */
+    showValue?: boolean;
+    /** A vertical slider is 152px tall, a ColorArea's height; set another with CSS.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the value shown and read out. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the slider when there's no label. Defaults to the channel's name ("Hue", "Opacity"), unless aria-labelledby
+     * or a Field names it. */
+    "aria-label"?: string;
+    /** Names the slider by a visible label's id. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after the value; a Field sets it. */
+    "aria-describedby"?: string;
+    /** The input's id; a Field sets it so its label names the slider. */
+    id?: string;
+    /** Classes for the slider's outer element, e.g. a height for a vertical one. */
+    className?: string;
+}
+/**
+ * Changes one channel of a colour by dragging, over a track that shows that channel's range: a hue slider, an
+ * opacity slider over a checkerboard, or red, green and blue. It works with the keyboard like Slider.
+ * The ref is its input, for focusing it.
+ */
+export declare const ColorSlider: import("react").ForwardRefExoticComponent<ColorSliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorSlider.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** A channel a ColorSlider changes: HSL's hue, saturation or lightness, the alpha, or red, green or blue. */
+export type ColorChannel = "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue";
+export interface ColorSliderProps {
+    /** The channel it changes. Saturation and lightness are HSL's; the track shows the channel's range for the current colour. */
+    channel: ColorChannel;
+    /** The colour as hex. The alpha channel takes and returns "#rrggbbaa"; the others keep any alpha they're given. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Without it, the slider keeps the last hue it had. */
+    hue?: number;
+    /** Called with the hue as a hue slider moves, including over a grey, whose hex doesn't change. Pass it on to a
+     * ColorArea's `hue` to keep the two in step. */
+    onHueChange?(hue: number): void;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the channel's value (174°, 72%, or 0 to 255 for red, green and blue) at the right of the label.
+     * Defaults to true when there's a label. */
+    showValue?: boolean;
+    /** A vertical slider is 152px tall, a ColorArea's height; set another with CSS.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the value shown and read out. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the slider when there's no label. Defaults to the channel's name ("Hue", "Opacity"), unless aria-labelledby
+     * or a Field names it. */
+    "aria-label"?: string;
+    /** Names the slider by a visible label's id. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after the value; a Field sets it. */
+    "aria-describedby"?: string;
+    /** The input's id; a Field sets it so its label names the slider. */
+    id?: string;
+    /** Classes for the slider's outer element, e.g. a height for a vertical one. */
+    className?: string;
+}
+/**
+ * Changes one channel of a colour by dragging, over a track that shows that channel's range: a hue slider, an
+ * opacity slider over a checkerboard, or red, green and blue. It works with the keyboard like Slider.
+ * The ref is its input, for focusing it.
+ */
+export declare const ColorSlider: import("react").ForwardRefExoticComponent<ColorSliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorSwatchPicker.d.cts

@@ -0,0 +1,43 @@
+export interface ColorSwatchPickerOption {
+    /** A hex colour: "#312c7e". */
+    value: string;
+    /** The colour's name, read out and shown on hover: "Midnight". Defaults to a description, like "dark indigo". */
+    label?: string;
+    /** Shown faded and skipped by the arrow keys, e.g. a colour another label has taken. */
+    disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+    /** The colours to choose from: hex strings, or { value, label } to give them names. */
+    options: Array<string | ColorSwatchPickerOption>;
+    /** The chosen colour. It matches an option whatever its case or length (#abc, #aabbcc). */
+    value?: string;
+    /** The starting colour when uncontrolled. Defaults to none. */
+    defaultValue?: string;
+    /** Called with the chosen option's value, as written in `options`. */
+    onChange?(color: string): void;
+    /** sm 24px, md 32px swatches.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    /** Fades every swatch and takes the picker out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    /** The form field name; the chosen colour is submitted under it. */
+    name?: string;
+    /** Names the group for screen readers, e.g. "Label colour". */
+    "aria-label"?: string;
+    /** Names the group by a visible heading's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out with the group. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the group, e.g. a width that sets where the rows wrap. */
+    className?: string;
+}
+/**
+ * Picks one colour from a set of swatches, in rows that wrap. It's a radio group: Tab moves into it, onto the chosen
+ * swatch, and the arrow keys move and choose. The chosen swatch has a ring and a check mark.
+ */
+export declare const ColorSwatchPicker: import("react").ForwardRefExoticComponent<ColorSwatchPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker/ColorSwatchPicker.d.ts

@@ -0,0 +1,43 @@
+export interface ColorSwatchPickerOption {
+    /** A hex colour: "#312c7e". */
+    value: string;
+    /** The colour's name, read out and shown on hover: "Midnight". Defaults to a description, like "dark indigo". */
+    label?: string;
+    /** Shown faded and skipped by the arrow keys, e.g. a colour another label has taken. */
+    disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+    /** The colours to choose from: hex strings, or { value, label } to give them names. */
+    options: Array<string | ColorSwatchPickerOption>;
+    /** The chosen colour. It matches an option whatever its case or length (#abc, #aabbcc). */
+    value?: string;
+    /** The starting colour when uncontrolled. Defaults to none. */
+    defaultValue?: string;
+    /** Called with the chosen option's value, as written in `options`. */
+    onChange?(color: string): void;
+    /** sm 24px, md 32px swatches.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    /** Fades every swatch and takes the picker out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    /** The form field name; the chosen colour is submitted under it. */
+    name?: string;
+    /** Names the group for screen readers, e.g. "Label colour". */
+    "aria-label"?: string;
+    /** Names the group by a visible heading's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out with the group. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the group, e.g. a width that sets where the rows wrap. */
+    className?: string;
+}
+/**
+ * Picks one colour from a set of swatches, in rows that wrap. It's a radio group: Tab moves into it, onto the chosen
+ * swatch, and the arrow keys move and choose. The chosen swatch has a ring and a check mark.
+ */
+export declare const ColorSwatchPicker: import("react").ForwardRefExoticComponent<ColorSwatchPickerProps & import("react").RefAttributes<HTMLDivElement>>;