@openwarelabs/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,31 @@
+import { type ISODate } from "./dates.cjs";
+export interface CalendarProps {
+    /** The chosen date as "YYYY-MM-DD", or "" for none. */
+    value?: ISODate;
+    /** @default "" */
+    defaultValue?: ISODate;
+    onChange?(value: ISODate): void;
+    /** The earliest date that can be chosen, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest date that can be chosen. */
+    max?: ISODate;
+    /** Return true for dates that can't be chosen, such as weekends. */
+    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;
+    /** Focus the chosen (or today's) date on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface CalendarHandle {
+    focus(): void;
+}
+/**
+ * A month grid for picking a date. Arrow keys move by day and week, PageUp and PageDown by month
+ * (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>>;

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

@@ -0,0 +1,31 @@
+import { type ISODate } from "./dates.js";
+export interface CalendarProps {
+    /** The chosen date as "YYYY-MM-DD", or "" for none. */
+    value?: ISODate;
+    /** @default "" */
+    defaultValue?: ISODate;
+    onChange?(value: ISODate): void;
+    /** The earliest date that can be chosen, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest date that can be chosen. */
+    max?: ISODate;
+    /** Return true for dates that can't be chosen, such as weekends. */
+    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;
+    /** Focus the chosen (or today's) date on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface CalendarHandle {
+    focus(): void;
+}
+/**
+ * A month grid for picking a date. Arrow keys move by day and week, PageUp and PageDown by month
+ * (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>>;

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

@@ -0,0 +1,21 @@
+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;
+}
+/** 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

@@ -0,0 +1,21 @@
+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;
+}
+/** 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/dates.d.cts

@@ -0,0 +1,15 @@
+/** Dates as "YYYY-MM-DD" strings: no time, no time zone, so a date never shifts by a day. */
+export type ISODate = string;
+export declare function toISO(year: number, month: number, day: number): ISODate;
+export declare function parseISO(iso: ISODate): {
+    year: number;
+    month: number;
+    day: number;
+};
+export declare function todayISO(): ISODate;
+export declare function addDays(iso: ISODate, days: number): ISODate;
+export declare function addMonths(iso: ISODate, months: number): ISODate;
+/** 0 = Sunday … 6 = Saturday. */
+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;

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

@@ -0,0 +1,15 @@
+/** Dates as "YYYY-MM-DD" strings: no time, no time zone, so a date never shifts by a day. */
+export type ISODate = string;
+export declare function toISO(year: number, month: number, day: number): ISODate;
+export declare function parseISO(iso: ISODate): {
+    year: number;
+    month: number;
+    day: number;
+};
+export declare function todayISO(): ISODate;
+export declare function addDays(iso: ISODate, days: number): ISODate;
+export declare function addMonths(iso: ISODate, months: number): ISODate;
+/** 0 = Sunday … 6 = Saturday. */
+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;

package/dist/components/Card/Card.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** `none` for a card that holds a list or table edge to edge; `md` is 16px, `lg` 24px.
+     * @default "md" */
+    padding?: "none" | "md" | "lg";
+}
+/** A surface with a hairline border and no shadow: borders before shadows. */
+export declare function Card({ className, padding, ...props }: CardProps): import("react").JSX.Element;
+export interface SettingsRowProps {
+    label: ReactNode;
+    /** A muted line or two under the label. */
+    description?: ReactNode;
+    /** The control: a Switch, a Select, a Button. */
+    children: ReactNode;
+    className?: string;
+}
+/** A label on the left and its control on the right, like macOS System Settings. Stack them in a Card. */
+export declare function SettingsRow({ children, description, label, className }: SettingsRowProps): import("react").JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** `none` for a card that holds a list or table edge to edge; `md` is 16px, `lg` 24px.
+     * @default "md" */
+    padding?: "none" | "md" | "lg";
+}
+/** A surface with a hairline border and no shadow: borders before shadows. */
+export declare function Card({ className, padding, ...props }: CardProps): import("react").JSX.Element;
+export interface SettingsRowProps {
+    label: ReactNode;
+    /** A muted line or two under the label. */
+    description?: ReactNode;
+    /** The control: a Switch, a Select, a Button. */
+    children: ReactNode;
+    className?: string;
+}
+/** A label on the left and its control on the right, like macOS System Settings. Stack them in a Card. */
+export declare function SettingsRow({ children, description, label, className }: SettingsRowProps): import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.cts

@@ -0,0 +1,59 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** `sm` is 14px, for dense rows; `md` is 16px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** `danger` for choices that make an action destructive, like also deleting files.
+     * @default "primary" */
+    tone?: "primary" | "danger";
+    /** Shows a dash: some, not all, of what it controls is checked (a "select all" box).
+     * @default false */
+    indeterminate?: boolean;
+    /** The label. With it, Checkbox renders its own <label>; without it, wrap it in yours. */
+    children?: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+}
+/**
+ * A real checkbox input, restyled. It keeps native behaviour (Space to toggle, form submission, `disabled`).
+ * Give it children for its label, or wrap the bare box in your own <label>. Inside a CheckboxGroup, give it a `value`.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface CheckboxGroupProps {
+    /** The question, shown as the group's legend. */
+    label: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    /** The checked values. */
+    value?: string[];
+    /** @default [] */
+    defaultValue?: string[];
+    onChange?(value: string[]): void;
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** An error under the options. */
+    error?: ReactNode;
+    disabled?: boolean;
+    /** The form field name for every box. */
+    name?: string;
+    /** Checkboxes, each with a `value` and a label. */
+    children: ReactNode;
+    className?: string;
+}
+/** Several options where any number can be chosen, under one label. */
+export declare function CheckboxGroup({ label, description, value, defaultValue, onChange, orientation, error, disabled, name, children, className, }: CheckboxGroupProps): import("react").JSX.Element;
+export interface FieldsetProps {
+    /** The group's title. */
+    legend: ReactNode;
+    /** A muted line under the legend. */
+    description?: ReactNode;
+    /** An error under the content, announced when it appears. */
+    error?: ReactNode;
+    /** @internal */
+    errorId?: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** Groups related controls under a legend: a set of checkboxes, an address, a pair of dates. */
+export declare function Fieldset({ legend, description, error, errorId, disabled, children, className }: FieldsetProps): import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,59 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** `sm` is 14px, for dense rows; `md` is 16px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** `danger` for choices that make an action destructive, like also deleting files.
+     * @default "primary" */
+    tone?: "primary" | "danger";
+    /** Shows a dash: some, not all, of what it controls is checked (a "select all" box).
+     * @default false */
+    indeterminate?: boolean;
+    /** The label. With it, Checkbox renders its own <label>; without it, wrap it in yours. */
+    children?: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+}
+/**
+ * A real checkbox input, restyled. It keeps native behaviour (Space to toggle, form submission, `disabled`).
+ * Give it children for its label, or wrap the bare box in your own <label>. Inside a CheckboxGroup, give it a `value`.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface CheckboxGroupProps {
+    /** The question, shown as the group's legend. */
+    label: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    /** The checked values. */
+    value?: string[];
+    /** @default [] */
+    defaultValue?: string[];
+    onChange?(value: string[]): void;
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** An error under the options. */
+    error?: ReactNode;
+    disabled?: boolean;
+    /** The form field name for every box. */
+    name?: string;
+    /** Checkboxes, each with a `value` and a label. */
+    children: ReactNode;
+    className?: string;
+}
+/** Several options where any number can be chosen, under one label. */
+export declare function CheckboxGroup({ label, description, value, defaultValue, onChange, orientation, error, disabled, name, children, className, }: CheckboxGroupProps): import("react").JSX.Element;
+export interface FieldsetProps {
+    /** The group's title. */
+    legend: ReactNode;
+    /** A muted line under the legend. */
+    description?: ReactNode;
+    /** An error under the content, announced when it appears. */
+    error?: ReactNode;
+    /** @internal */
+    errorId?: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** Groups related controls under a legend: a set of checkboxes, an address, a pair of dates. */
+export declare function Fieldset({ legend, description, error, errorId, disabled, children, className }: FieldsetProps): import("react").JSX.Element;

package/dist/components/ChoiceCard/ChoiceCard.d.cts

@@ -0,0 +1,14 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface ChoiceCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    title: string;
+    /** One line under the title saying what this choice does. */
+    description: string;
+    /** A 20px lucide-react icon, shown on a tinted tile. */
+    icon: ReactNode;
+    /** Marks the recommended choice with a tinted border. */
+    recommended?: boolean;
+    /** Keyboard shortcut shown in the top-right corner, e.g. "⌘N". Only pass one that actually works. */
+    shortcut?: string;
+}
+/** A large, card-shaped button for picking between a few options, e.g. on an empty state. */
+export declare const ChoiceCard: import("react").ForwardRefExoticComponent<ChoiceCardProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ChoiceCard/ChoiceCard.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface ChoiceCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    title: string;
+    /** One line under the title saying what this choice does. */
+    description: string;
+    /** A 20px lucide-react icon, shown on a tinted tile. */
+    icon: ReactNode;
+    /** Marks the recommended choice with a tinted border. */
+    recommended?: boolean;
+    /** Keyboard shortcut shown in the top-right corner, e.g. "⌘N". Only pass one that actually works. */
+    shortcut?: string;
+}
+/** A large, card-shaped button for picking between a few options, e.g. on an empty state. */
+export declare const ChoiceCard: import("react").ForwardRefExoticComponent<ChoiceCardProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CodeBlock/CodeBlock.d.cts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+export interface CopyButtonProps {
+    /** The text to copy. */
+    value: string;
+    /** Shown beside the icon, and read out.
+     * @default "Copy" */
+    label?: string;
+    /** Shown for two seconds after copying.
+     * @default "Copied" */
+    copiedLabel?: string;
+    /** Just the icon; the label is still read out.
+     * @default false */
+    iconOnly?: boolean;
+    /** `default` sits on surfaces; `onDark` sits on a code block.
+     * @default "default" */
+    tone?: "default" | "onDark";
+    onCopy?(): void;
+    className?: string;
+}
+/** Copies a value and says so: the icon turns into a check for two seconds and screen readers hear "Copied". */
+export declare function CopyButton({ value, label, copiedLabel, iconOnly, tone, onCopy, className }: CopyButtonProps): import("react").JSX.Element;
+export interface CodeBlockProps {
+    /** The code, as plain text. It's what the copy button copies. */
+    code: string;
+    /** Pre-highlighted HTML for the code (from Shiki or Prism, say). Without it the code shows plain. */
+    html?: string;
+    /** A file name or caption in the header. */
+    title?: ReactNode;
+    /** Shown on the right of the header, e.g. "tsx". */
+    language?: string;
+    /** @default false */
+    showLineNumbers?: boolean;
+    /** @default true */
+    copyable?: boolean;
+    /** Scrolls past this height (pixels). */
+    maxHeight?: number;
+    className?: string;
+}
+/** Code on a night ground, the same in both themes, with a copy button. */
+export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
+export interface SnippetProps {
+    /** The command or value, copied as is. */
+    value: string;
+    /** A muted prompt before it, such as "$".
+     * @default "$" */
+    prompt?: string | null;
+    className?: string;
+}
+/** One line to copy: an install command, an API key name, a URL. */
+export declare function Snippet({ value, prompt, className }: SnippetProps): import("react").JSX.Element;

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+export interface CopyButtonProps {
+    /** The text to copy. */
+    value: string;
+    /** Shown beside the icon, and read out.
+     * @default "Copy" */
+    label?: string;
+    /** Shown for two seconds after copying.
+     * @default "Copied" */
+    copiedLabel?: string;
+    /** Just the icon; the label is still read out.
+     * @default false */
+    iconOnly?: boolean;
+    /** `default` sits on surfaces; `onDark` sits on a code block.
+     * @default "default" */
+    tone?: "default" | "onDark";
+    onCopy?(): void;
+    className?: string;
+}
+/** Copies a value and says so: the icon turns into a check for two seconds and screen readers hear "Copied". */
+export declare function CopyButton({ value, label, copiedLabel, iconOnly, tone, onCopy, className }: CopyButtonProps): import("react").JSX.Element;
+export interface CodeBlockProps {
+    /** The code, as plain text. It's what the copy button copies. */
+    code: string;
+    /** Pre-highlighted HTML for the code (from Shiki or Prism, say). Without it the code shows plain. */
+    html?: string;
+    /** A file name or caption in the header. */
+    title?: ReactNode;
+    /** Shown on the right of the header, e.g. "tsx". */
+    language?: string;
+    /** @default false */
+    showLineNumbers?: boolean;
+    /** @default true */
+    copyable?: boolean;
+    /** Scrolls past this height (pixels). */
+    maxHeight?: number;
+    className?: string;
+}
+/** Code on a night ground, the same in both themes, with a copy button. */
+export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
+export interface SnippetProps {
+    /** The command or value, copied as is. */
+    value: string;
+    /** A muted prompt before it, such as "$".
+     * @default "$" */
+    prompt?: string | null;
+    className?: string;
+}
+/** One line to copy: an install command, an API key name, a URL. */
+export declare function Snippet({ value, prompt, className }: SnippetProps): import("react").JSX.Element;

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

@@ -0,0 +1,62 @@
+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>;
+        };
+    }
+}
+/**
+ * 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

@@ -0,0 +1,62 @@
+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>;
+        };
+    }
+}
+/**
+ * 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/Combobox/Combobox.d.cts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export interface ComboboxOption {
+    value: string;
+    /** The text shown and matched. */
+    label: string;
+    /** A muted line under the label; also matched. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    /** The chosen option's value, or "" for none. */
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called as the person types, to load options from a server. */
+    onInputChange?(text: string): void;
+    /** @default "Search…" */
+    placeholder?: string;
+    /** Shown when nothing matches.
+     * @default "No matches" */
+    emptyMessage?: ReactNode;
+    /** Keep what was typed even if it isn't an option; onChange gets the text.
+     * @default false */
+    allowCustomValue?: boolean;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A text field that suggests options as you type: pick a country, a repository, a person.
+ * Down opens the list, Up and Down move, Enter picks, Escape closes then clears.
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export interface ComboboxOption {
+    value: string;
+    /** The text shown and matched. */
+    label: string;
+    /** A muted line under the label; also matched. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    /** The chosen option's value, or "" for none. */
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called as the person types, to load options from a server. */
+    onInputChange?(text: string): void;
+    /** @default "Search…" */
+    placeholder?: string;
+    /** Shown when nothing matches.
+     * @default "No matches" */
+    emptyMessage?: ReactNode;
+    /** Keep what was typed even if it isn't an option; onChange gets the text.
+     * @default false */
+    allowCustomValue?: boolean;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A text field that suggests options as you type: pick a country, a repository, a person.
+ * Down opens the list, Up and Down move, Enter picks, Escape closes then clears.
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;