@openwarelabs/ui 0.9.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
@@ -71,7 +75,7 @@ Hooks for your own components: `useControllableState`, `useFloating` (top-layer
 
 ## Blocks as components
 
-Blocks are becoming components in their own package, `@openwarelabs/blocks`, that take their content as props, so you don't copy their code. The heroes are first, `Hero01` to `Hero06`:
+Every block is also a component in its own package, `@openwarelabs/blocks`, that takes its content as props, so you don't copy its code: all 95, from `Header01` and `Hero01` to `Settings03` and `Chat03` ([the list](blocks/README.md#blocks)).
 
 ```sh
 npm install @openwarelabs/blocks
@@ -125,13 +129,17 @@ The docs' header has a colour picker that does this live, and the Theming page s
 
 `main` takes changes only through pull requests, squash-merged, so each one lands as a single commit named after the PR. The PR title follows [Conventional Commits](https://www.conventionalcommits.org) because `npm run release` reads it: `feat: add a date range picker`, `fix(Menu): close on Escape`, `feat!: rename Stack's gap sizes`. Put `BREAKING CHANGE: …` in the PR description for a breaking change.
 
-Three checks have to pass to merge:
+Five checks have to pass to merge:
 
-- **Checks**: types, contrast, blocks, the library, the MCP server and the docs.
+- **Checks**: types, contrast, blocks, the library, the MCP server and the docs, and the bundle size: what an app pays, minified and gzipped, for each package and for one piece of it imported alone, against the limits in `size-limits.json` (`npm run size` after a build). Raise a limit in the PR that needs it, so the growth is seen in review. It also lints for React's hooks rules (`npm run lint`; `eslint-suppressions.json` lists the problems there already were), and packs both packages as `npm publish` would, installs them in a new app and imports, requires, bundles and type-checks them there (`npm run smoke`).
 - **PR title**: the title follows the convention (`npm run commits:check -- --title "feat: …"` locally).
 - **Cleaner**: [openwarelabs/cleaner](https://github.com/openwarelabs/cleaner) on the `.ts` and `.tsx` files the PR changes. Types go in a `<name>.types.ts` beside the component, and imports from another folder use the aliases instead of `../`: `@/…` for `src/` (in the library and the docs), `@docs/…` for `docs/` (`?highlight` imports too) and `@build/…` in `mcp/`. Files that haven't been touched yet don't follow it; they catch up as they change.
+- **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, 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`). Repository admins can bypass the ruleset, which `npm run release` uses to push its version commit and tag.
+`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.
 
 ## Releasing
 

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;
+}