@openwarelabs/ui 0.10.0 → 0.10.1

package/README.md

@@ -2,8 +2,12 @@
 
 React components and design tokens with a quiet, tactile look: a midnight brand colour, a brass accent kept small, cool slate surfaces, buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
 
+**Docs: [openwarelabs.github.io/ui](https://openwarelabs.github.io/ui/)**: every component with live examples and props, every block, the tokens and the guides. It's published from each release, so it matches the packages on npm.
+
 ## Docs
 
+To run them from the repository:
+
 ```sh
 npm install         # installs and builds dist/
 npm run dev         # the docs site: http://localhost:5173
@@ -133,7 +137,7 @@ Five checks have to pass to merge:
 - **Visual**: every block (desktop and phone width) and every component example, in light and dark, rendered from the PR and from `main` and compared pixel by pixel. If something looks different, the run's summary lists it and the `visual-report` artifact shows each one before, after and with the changed pixels marked. When the change is meant, add the **visual change** label and the check passes. `npm run visual` runs the same comparison locally against `main` (`-- --filter Hero` for a few).
 - **Accessibility**: axe over every block (desktop and phone width) and every component example, in light and dark, against WCAG 2.2 A and AA. The run's summary lists each problem with the element and how to fix it. `a11y-known.json` lists the problems there already were, which don't fail it; fixing one means lowering its count. `npm run a11y` runs it locally (`-- --filter Hero` for a few).
 
-Dependabot opens a pull request each Monday with the week's npm and GitHub Actions updates, minor and patch ones grouped; every check above runs on it.
+Dependabot opens a pull request each Monday with the week's npm and GitHub Actions updates, minor and patch ones grouped, and React with React DOM in one. Only Checks runs on those (types, builds, size and the package smoke test): PR title, Cleaner, Visual and Accessibility are for changes people make, and skipped jobs count as passing.
 
 `scripts/setup-github.sh` sets this up on GitHub (squash merges only, the PR title as the commit, the ruleset for `main`, the visual change label). Repository admins can bypass the ruleset, which `npm run release` uses to push its version commit and tag.
 

package/dist/components/Avatar/Avatar.d.cts

@@ -1,17 +1,6 @@
 import { type CSSProperties } from "react";
-export interface AvatarProps {
-    /** The person's name; its initials show when there's no image. */
-    name: string;
-    /** A photo URL. If it fails to load, the initials show instead. */
-    src?: string;
-    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
-     * @default "md" */
-    size?: AvatarSize;
-    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
-    label?: string;
-    className?: string;
-}
-export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+import type { AvatarProps, AvatarSize } from "./Avatar.types.cjs";
+export type { AvatarProps, AvatarSize } from "./Avatar.types.cjs";
 /**
  * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
  * @internal

package/dist/components/Avatar/Avatar.d.ts

@@ -1,17 +1,6 @@
 import { type CSSProperties } from "react";
-export interface AvatarProps {
-    /** The person's name; its initials show when there's no image. */
-    name: string;
-    /** A photo URL. If it fails to load, the initials show instead. */
-    src?: string;
-    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
-     * @default "md" */
-    size?: AvatarSize;
-    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
-    label?: string;
-    className?: string;
-}
-export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+import type { AvatarProps, AvatarSize } from "./Avatar.types.js";
+export type { AvatarProps, AvatarSize } from "./Avatar.types.js";
 /**
  * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
  * @internal

package/dist/components/Avatar/Avatar.types.d.cts

@@ -0,0 +1,13 @@
+export interface AvatarProps {
+    /** The person's name; its initials show when there's no image. */
+    name: string;
+    /** A photo URL. If it fails to load, the initials show instead. */
+    src?: string;
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
+     * @default "md" */
+    size?: AvatarSize;
+    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,13 @@
+export interface AvatarProps {
+    /** The person's name; its initials show when there's no image. */
+    name: string;
+    /** A photo URL. If it fails to load, the initials show instead. */
+    src?: string;
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
+     * @default "md" */
+    size?: AvatarSize;
+    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;

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

@@ -1,21 +1,4 @@
-import { type CalendarProps } from "./Calendar.cjs";
-export interface DatePickerProps extends Omit<CalendarProps, "autoFocus" | "className"> {
-    /** Shown when no date is chosen.
-     * @default "Pick a date" */
-    placeholder?: string;
-    /** How the chosen date is written in the field.
-     * @default { dateStyle: "medium" } */
-    formatOptions?: Intl.DateTimeFormatOptions;
-    /** @default "md" */
-    size?: "sm" | "md";
-    /** @default false */
-    isInvalid?: boolean;
-    disabled?: boolean;
-    id?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
+import type { DatePickerProps } from "./DatePicker.types.cjs";
+export type { DatePickerProps } from "./DatePicker.types.cjs";
 /** A field that opens a Calendar. Choosing a date closes it; Escape closes it without changing anything. */
 export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,21 +1,4 @@
-import { type CalendarProps } from "./Calendar.js";
-export interface DatePickerProps extends Omit<CalendarProps, "autoFocus" | "className"> {
-    /** Shown when no date is chosen.
-     * @default "Pick a date" */
-    placeholder?: string;
-    /** How the chosen date is written in the field.
-     * @default { dateStyle: "medium" } */
-    formatOptions?: Intl.DateTimeFormatOptions;
-    /** @default "md" */
-    size?: "sm" | "md";
-    /** @default false */
-    isInvalid?: boolean;
-    disabled?: boolean;
-    id?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
+import type { DatePickerProps } from "./DatePicker.types.js";
+export type { DatePickerProps } from "./DatePicker.types.js";
 /** A field that opens a Calendar. Choosing a date closes it; Escape closes it without changing anything. */
 export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,19 @@
+import type { CalendarProps } from "./Calendar.cjs";
+export interface DatePickerProps extends Omit<CalendarProps, "autoFocus" | "className"> {
+    /** Shown when no date is chosen.
+     * @default "Pick a date" */
+    placeholder?: string;
+    /** How the chosen date is written in the field.
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}

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

@@ -0,0 +1,19 @@
+import type { CalendarProps } from "./Calendar.js";
+export interface DatePickerProps extends Omit<CalendarProps, "autoFocus" | "className"> {
+    /** Shown when no date is chosen.
+     * @default "Pick a date" */
+    placeholder?: string;
+    /** How the chosen date is written in the field.
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}

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

@@ -1,37 +1,5 @@
-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;
-}
+import type { DateRangePickerProps } from "./DateRangePicker.types.cjs";
+export type { DateRangePickerProps, DateRangePreset } from "./DateRangePicker.types.cjs";
 /**
  * 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.

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

@@ -1,37 +1,5 @@
-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;
-}
+import type { DateRangePickerProps } from "./DateRangePicker.types.js";
+export type { DateRangePickerProps, DateRangePreset } from "./DateRangePicker.types.js";
 /**
  * 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.

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

@@ -0,0 +1,34 @@
+import type { DateRange, 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;
+}

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

@@ -0,0 +1,34 @@
+import type { DateRange, 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;
+}

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

@@ -1,62 +1,9 @@
-import { type Placement } from "../../hooks/useFloating.cjs";
-/** What a swatch is: a colour, or a colour with a name to read out. */
-export type ColorSwatchOption = string | {
-    color: string;
-    name: string;
-};
-export interface ColorPickerProps {
-    /** A hex colour: "#0d9488", or "#0d9488cc" with alpha. */
-    value?: string;
-    /** @default "#312c7e" */
-    defaultValue?: string;
-    /** Called with a lowercase hex colour as the person drags, types or picks. */
-    onChange?(color: string): void;
-    /** Adds an opacity slider; colours come back as #rrggbbaa.
-     * @default false */
-    alpha?: boolean;
-    /** Ready-made colours as swatches under the picker. */
-    swatches?: ColorSwatchOption[];
-    /** The hex field under the picker.
-     * @default true */
-    showInput?: boolean;
-    /** A button that picks a colour from anywhere on the screen, where the browser can (Chrome and Edge).
-     * @default true */
-    eyeDropper?: boolean;
-    /** Names the picker for screen readers.
-     * @default "Colour" */
-    "aria-label"?: string;
-    className?: string;
-}
-interface EyeDropperResult {
-    sRGBHex: string;
-}
-declare global {
-    interface Window {
-        EyeDropper?: new () => {
-            open(): Promise<EyeDropperResult>;
-        };
-    }
-}
+import type { ColorFieldProps, ColorPickerProps } from "./ColorPicker.types.cjs";
+export type { ColorFieldProps, ColorPickerProps, ColorSwatchOption } from "./ColorPicker.types.cjs";
 /**
  * Picks a colour: a saturation area and a hue slider (react-colorful, dressed in Openware's look), a hex field,
  * an eyedropper where the browser has one, and optional swatches. The area and sliders work with the arrow keys.
  */
 export declare function ColorPicker({ value, defaultValue, onChange, alpha, swatches, showInput, eyeDropper, "aria-label": ariaLabel, className, }: ColorPickerProps): import("react").JSX.Element;
-export interface ColorFieldProps extends Omit<ColorPickerProps, "className" | "aria-label"> {
-    /** @default "md" */
-    size?: "sm" | "md";
-    /** @default false */
-    isInvalid?: boolean;
-    disabled?: boolean;
-    /** Where the picker opens; it flips when there's no room.
-     * @default "bottom-start" */
-    placement?: Placement;
-    id?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
 /** A field that shows a colour and its hex, and opens a ColorPicker below. Escape or a click outside closes it. */
 export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

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

@@ -1,62 +1,9 @@
-import { type Placement } from "../../hooks/useFloating.js";
-/** What a swatch is: a colour, or a colour with a name to read out. */
-export type ColorSwatchOption = string | {
-    color: string;
-    name: string;
-};
-export interface ColorPickerProps {
-    /** A hex colour: "#0d9488", or "#0d9488cc" with alpha. */
-    value?: string;
-    /** @default "#312c7e" */
-    defaultValue?: string;
-    /** Called with a lowercase hex colour as the person drags, types or picks. */
-    onChange?(color: string): void;
-    /** Adds an opacity slider; colours come back as #rrggbbaa.
-     * @default false */
-    alpha?: boolean;
-    /** Ready-made colours as swatches under the picker. */
-    swatches?: ColorSwatchOption[];
-    /** The hex field under the picker.
-     * @default true */
-    showInput?: boolean;
-    /** A button that picks a colour from anywhere on the screen, where the browser can (Chrome and Edge).
-     * @default true */
-    eyeDropper?: boolean;
-    /** Names the picker for screen readers.
-     * @default "Colour" */
-    "aria-label"?: string;
-    className?: string;
-}
-interface EyeDropperResult {
-    sRGBHex: string;
-}
-declare global {
-    interface Window {
-        EyeDropper?: new () => {
-            open(): Promise<EyeDropperResult>;
-        };
-    }
-}
+import type { ColorFieldProps, ColorPickerProps } from "./ColorPicker.types.js";
+export type { ColorFieldProps, ColorPickerProps, ColorSwatchOption } from "./ColorPicker.types.js";
 /**
  * Picks a colour: a saturation area and a hue slider (react-colorful, dressed in Openware's look), a hex field,
  * an eyedropper where the browser has one, and optional swatches. The area and sliders work with the arrow keys.
  */
 export declare function ColorPicker({ value, defaultValue, onChange, alpha, swatches, showInput, eyeDropper, "aria-label": ariaLabel, className, }: ColorPickerProps): import("react").JSX.Element;
-export interface ColorFieldProps extends Omit<ColorPickerProps, "className" | "aria-label"> {
-    /** @default "md" */
-    size?: "sm" | "md";
-    /** @default false */
-    isInvalid?: boolean;
-    disabled?: boolean;
-    /** Where the picker opens; it flips when there's no room.
-     * @default "bottom-start" */
-    placement?: Placement;
-    id?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
 /** A field that shows a colour and its hex, and opens a ColorPicker below. Escape or a click outside closes it. */
 export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

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

@@ -0,0 +1,54 @@
+import type { Placement } from "../../hooks/useFloating.cjs";
+/** What a swatch is: a colour, or a colour with a name to read out. */
+export type ColorSwatchOption = string | {
+    color: string;
+    name: string;
+};
+export interface ColorPickerProps {
+    /** A hex colour: "#0d9488", or "#0d9488cc" with alpha. */
+    value?: string;
+    /** @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex colour as the person drags, types or picks. */
+    onChange?(color: string): void;
+    /** Adds an opacity slider; colours come back as #rrggbbaa.
+     * @default false */
+    alpha?: boolean;
+    /** Ready-made colours as swatches under the picker. */
+    swatches?: ColorSwatchOption[];
+    /** The hex field under the picker.
+     * @default true */
+    showInput?: boolean;
+    /** A button that picks a colour from anywhere on the screen, where the browser can (Chrome and Edge).
+     * @default true */
+    eyeDropper?: boolean;
+    /** Names the picker for screen readers.
+     * @default "Colour" */
+    "aria-label"?: string;
+    className?: string;
+}
+export interface EyeDropperResult {
+    sRGBHex: string;
+}
+declare global {
+    interface Window {
+        EyeDropper?: new () => {
+            open(): Promise<EyeDropperResult>;
+        };
+    }
+}
+export interface ColorFieldProps extends Omit<ColorPickerProps, "className" | "aria-label"> {
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    /** Where the picker opens; it flips when there's no room.
+     * @default "bottom-start" */
+    placement?: Placement;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}

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

@@ -0,0 +1,54 @@
+import type { Placement } from "../../hooks/useFloating.js";
+/** What a swatch is: a colour, or a colour with a name to read out. */
+export type ColorSwatchOption = string | {
+    color: string;
+    name: string;
+};
+export interface ColorPickerProps {
+    /** A hex colour: "#0d9488", or "#0d9488cc" with alpha. */
+    value?: string;
+    /** @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex colour as the person drags, types or picks. */
+    onChange?(color: string): void;
+    /** Adds an opacity slider; colours come back as #rrggbbaa.
+     * @default false */
+    alpha?: boolean;
+    /** Ready-made colours as swatches under the picker. */
+    swatches?: ColorSwatchOption[];
+    /** The hex field under the picker.
+     * @default true */
+    showInput?: boolean;
+    /** A button that picks a colour from anywhere on the screen, where the browser can (Chrome and Edge).
+     * @default true */
+    eyeDropper?: boolean;
+    /** Names the picker for screen readers.
+     * @default "Colour" */
+    "aria-label"?: string;
+    className?: string;
+}
+export interface EyeDropperResult {
+    sRGBHex: string;
+}
+declare global {
+    interface Window {
+        EyeDropper?: new () => {
+            open(): Promise<EyeDropperResult>;
+        };
+    }
+}
+export interface ColorFieldProps extends Omit<ColorPickerProps, "className" | "aria-label"> {
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    /** Where the picker opens; it flips when there's no room.
+     * @default "bottom-start" */
+    placement?: Placement;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}

package/dist/components/ListBox/ListBox.d.cts

@@ -1,64 +1,6 @@
-import { type ReactElement, type ReactNode, type RefAttributes } from "react";
-import type { SelectOption } from "../Select/Select.cjs";
-/** An option, shaped like Select's, with an optional icon. */
-export interface ListBoxOption extends SelectOption {
-    /** A 16px icon between the checkmark and the label. */
-    icon?: ReactNode;
-    /** Plain text for type-to-find, when `label` isn't a string. */
-    textValue?: string;
-}
-/** Options under a heading, like a Select's groups. */
-export interface ListBoxGroup {
-    /** The heading, shown in uppercase above the options and read out as the group's name. */
-    label: string;
-    options: ListBoxOption[];
-}
-export type ListBoxItem = ListBoxOption | ListBoxGroup;
-export type ListBoxSelectionMode = "single" | "multiple";
-/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
-export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
-    /** The options, and groups of options under a heading. */
-    options: ListBoxItem[];
-    /** `single` chooses one option; `multiple` any number.
-     * @default "single" */
-    selectionMode?: Mode;
-    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
-    value?: Mode extends "multiple" ? string[] : string;
-    /** The starting value when uncontrolled.
-     * @default "" or [] */
-    defaultValue?: Mode extends "multiple" ? string[] : string;
-    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
-    onChange?(value: Mode extends "multiple" ? string[] : string): void;
-    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
-     * @default false */
-    disallowEmptySelection?: boolean;
-    /** Shown in the list when there are no options.
-     * @default "No options" */
-    emptyMessage?: ReactNode;
-    /** Scrolls the options past this height, e.g. 240 or "40vh". */
-    maxHeight?: number | string;
-    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
-     * @default "md" */
-    size?: "sm" | "md";
-    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
-     * @default false */
-    isInvalid?: boolean;
-    /** The options can be moved through and read, but the selection can't change.
-     * @default false */
-    isReadOnly?: boolean;
-    /** Fades the list and takes it out of the tab order.
-     * @default false */
-    disabled?: boolean;
-    id?: string;
-    /** Names the list for screen readers when it isn't in a Field. */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
-/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
-export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
-}
+import { type ReactElement, type RefAttributes } from "react";
+import type { ListBoxModeProps, ListBoxSelectionMode } from "./ListBox.types.cjs";
+export type { ListBoxGroup, ListBoxItem, ListBoxModeProps, ListBoxOption, ListBoxProps, ListBoxSelectionMode } from "./ListBox.types.cjs";
 /**
  * Select's list of options on its own: a choice that stays on the page. `selectionMode="multiple"` makes `value` an array.
  */