@openwarelabs/ui 0.10.0 → 0.11.0

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/Container/Container.d.cts

@@ -0,0 +1,7 @@
+import type { ContainerProps } from "./Container.types.cjs";
+export type { ContainerProps, ContainerSize } from "./Container.types.cjs";
+/**
+ * Centres content at a set width with the page's side margins: 32px, and the phone gutter under 760px. Every block
+ * lines its content up the same way, so whatever sits in a Container lines up with the blocks above and below it.
+ */
+export declare function Container({ size, as: Element, className, ...props }: ContainerProps): import("react").JSX.Element;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,7 @@
+import type { ContainerProps } from "./Container.types.js";
+export type { ContainerProps, ContainerSize } from "./Container.types.js";
+/**
+ * Centres content at a set width with the page's side margins: 32px, and the phone gutter under 760px. Every block
+ * lines its content up the same way, so whatever sits in a Container lines up with the blocks above and below it.
+ */
+export declare function Container({ size, as: Element, className, ...props }: ContainerProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { ElementType, HTMLAttributes } from "react";
+export type ContainerSize = "narrow" | "page" | "wide" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * How wide the content can get: `page` is the blocks' width (1200px), `narrow` a reading width for an article or
+     * a form (720px), `wide` room for a dashboard or a big table (1440px), `full` no cap, only the side margins.
+     * @default "page"
+     */
+    size?: ContainerSize;
+    /** The element to render, such as `main` or `section`. @default "div" */
+    as?: ElementType;
+}

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

@@ -0,0 +1,12 @@
+import type { ElementType, HTMLAttributes } from "react";
+export type ContainerSize = "narrow" | "page" | "wide" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * How wide the content can get: `page` is the blocks' width (1200px), `narrow` a reading width for an article or
+     * a form (720px), `wide` room for a dashboard or a big table (1440px), `full` no cap, only the side margins.
+     * @default "page"
+     */
+    size?: ContainerSize;
+    /** The element to render, such as `main` or `section`. @default "div" */
+    as?: ElementType;
+}