@openwarelabs/ui 0.0.0-stage → 0.1.1

package/dist/components/Marketing/Marketing.d.cts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** A white pill with a brass dot that names a section, set just above its title. */
+export declare function Chip({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export interface SectionHeadingProps {
+    /** One to three words for the Chip above the title. */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    intro?: ReactNode;
+    /** @default "start" */
+    align?: "start" | "center";
+    /** The heading level.
+     * @default "h2" */
+    as?: "h1" | "h2" | "h3";
+    className?: string;
+}
+/** How a marketing section opens: a Chip, a big light title, then an intro in muted text. */
+export declare function SectionHeading({ eyebrow, title, intro, align, as: Heading, className, }: SectionHeadingProps): import("react").JSX.Element;
+export interface SiteHeaderProps {
+    /** Your logo or name, usually a link home. */
+    brand: ReactNode;
+    /** Links in the middle; hidden under 760px wide. */
+    nav?: ReactNode;
+    /** On the right: one primary Button with shape="pill". */
+    actions?: ReactNode;
+    className?: string;
+}
+/** The marketing site's header: a floating white pill over a blur, with a hairline border and a soft shadow. */
+export declare function SiteHeader({ brand, nav, actions, className }: SiteHeaderProps): import("react").JSX.Element;
+export interface DotGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fades the dots out toward the edges.
+     * @default false */
+    fade?: boolean;
+    /** Turns the dots under the pointer brass.
+     * @default false */
+    interactive?: boolean;
+}
+/** A ground of 1px dots every 22px, like a sheet laid out for planning. Content goes inside. */
+export declare function DotGrid({ fade, interactive, className, children, onPointerMove, ...props }: DotGridProps): import("react").JSX.Element;

package/dist/components/Marketing/Marketing.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** A white pill with a brass dot that names a section, set just above its title. */
+export declare function Chip({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export interface SectionHeadingProps {
+    /** One to three words for the Chip above the title. */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    intro?: ReactNode;
+    /** @default "start" */
+    align?: "start" | "center";
+    /** The heading level.
+     * @default "h2" */
+    as?: "h1" | "h2" | "h3";
+    className?: string;
+}
+/** How a marketing section opens: a Chip, a big light title, then an intro in muted text. */
+export declare function SectionHeading({ eyebrow, title, intro, align, as: Heading, className, }: SectionHeadingProps): import("react").JSX.Element;
+export interface SiteHeaderProps {
+    /** Your logo or name, usually a link home. */
+    brand: ReactNode;
+    /** Links in the middle; hidden under 760px wide. */
+    nav?: ReactNode;
+    /** On the right: one primary Button with shape="pill". */
+    actions?: ReactNode;
+    className?: string;
+}
+/** The marketing site's header: a floating white pill over a blur, with a hairline border and a soft shadow. */
+export declare function SiteHeader({ brand, nav, actions, className }: SiteHeaderProps): import("react").JSX.Element;
+export interface DotGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fades the dots out toward the edges.
+     * @default false */
+    fade?: boolean;
+    /** Turns the dots under the pointer brass.
+     * @default false */
+    interactive?: boolean;
+}
+/** A ground of 1px dots every 22px, like a sheet laid out for planning. Content goes inside. */
+export declare function DotGrid({ fade, interactive, className, children, onPointerMove, ...props }: DotGridProps): import("react").JSX.Element;

package/dist/components/Menu/Menu.d.cts

@@ -0,0 +1,43 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+export interface MenuProps {
+    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
+    trigger: ReactElement;
+    /** MenuItem, MenuLabel and MenuSeparator. */
+    children: ReactNode;
+    /** Names the menu for screen readers. */
+    label: string;
+    /** Which edge of the trigger it lines up with.
+     * @default "start" */
+    align?: "start" | "end";
+    /** Prefers opening upward. Either way it flips when there's no room.
+     * @default false */
+    above?: boolean;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Starts open, for documentation and tests. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+/**
+ * A dropdown menu of actions under a button. Opening it focuses the first item; the arrow keys, Home and End
+ * move; Escape closes it and returns focus to the button; a click outside or Tab closes it.
+ */
+export declare function Menu({ trigger, children, label, align, above, width, defaultOpen, className }: MenuProps): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    /** A 15px lucide-react icon before the label. */
+    icon?: ReactNode;
+    /** Runs the action; the menu then closes. */
+    onSelect?(): void;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
+    shortcut?: string;
+}
+/** One action in a Menu. */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A small uppercase heading for a group of items. */
+export declare function MenuLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A hairline between groups of items. */
+export declare function MenuSeparator(): import("react").JSX.Element;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+export interface MenuProps {
+    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
+    trigger: ReactElement;
+    /** MenuItem, MenuLabel and MenuSeparator. */
+    children: ReactNode;
+    /** Names the menu for screen readers. */
+    label: string;
+    /** Which edge of the trigger it lines up with.
+     * @default "start" */
+    align?: "start" | "end";
+    /** Prefers opening upward. Either way it flips when there's no room.
+     * @default false */
+    above?: boolean;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Starts open, for documentation and tests. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+/**
+ * A dropdown menu of actions under a button. Opening it focuses the first item; the arrow keys, Home and End
+ * move; Escape closes it and returns focus to the button; a click outside or Tab closes it.
+ */
+export declare function Menu({ trigger, children, label, align, above, width, defaultOpen, className }: MenuProps): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    /** A 15px lucide-react icon before the label. */
+    icon?: ReactNode;
+    /** Runs the action; the menu then closes. */
+    onSelect?(): void;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
+    shortcut?: string;
+}
+/** One action in a Menu. */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A small uppercase heading for a group of items. */
+export declare function MenuLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A hairline between groups of items. */
+export declare function MenuSeparator(): import("react").JSX.Element;

package/dist/components/NavList/NavList.d.cts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface NavListProps {
+    /** Names the navigation for screen readers, e.g. "Settings". */
+    label: string;
+    /** A muted heading above the items (vertical only). */
+    heading?: ReactNode;
+    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    children: ReactNode;
+    className?: string;
+}
+/** A list of places to go, the way a settings dialog's sidebar lists its sections. Place it on ow-canvas. */
+export declare function NavList({ label, heading, orientation, children, className }: NavListProps): import("react").JSX.Element;
+export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** A 15px lucide-react icon. */
+    icon?: ReactNode;
+    /** The current section: raised on a surface, its icon in the primary colour.
+     * @default false */
+    active?: boolean;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+    /** Muted text at the right: a count, a badge. */
+    end?: ReactNode;
+}
+/** One place in a NavList: a button, or a link when given an href. */
+export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/NavList/NavList.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface NavListProps {
+    /** Names the navigation for screen readers, e.g. "Settings". */
+    label: string;
+    /** A muted heading above the items (vertical only). */
+    heading?: ReactNode;
+    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    children: ReactNode;
+    className?: string;
+}
+/** A list of places to go, the way a settings dialog's sidebar lists its sections. Place it on ow-canvas. */
+export declare function NavList({ label, heading, orientation, children, className }: NavListProps): import("react").JSX.Element;
+export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** A 15px lucide-react icon. */
+    icon?: ReactNode;
+    /** The current section: raised on a surface, its icon in the primary colour.
+     * @default false */
+    active?: boolean;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+    /** Muted text at the right: a count, a badge. */
+    end?: ReactNode;
+}
+/** One place in a NavList: a button, or a link when given an href. */
+export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/NumberField/NumberField.d.cts

@@ -0,0 +1,23 @@
+import { type InputHTMLAttributes } from "react";
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+    /** The number, or null when empty. */
+    value?: number | null;
+    /** @default null */
+    defaultValue?: number | null;
+    onChange?(value: number | null): void;
+    min?: number;
+    max?: number;
+    /** How much the buttons and arrow keys change it. PageUp and PageDown move ten steps.
+     * @default 1 */
+    step?: number;
+    /** How the number is shown while the field isn't being edited, e.g. { style: "currency", currency: "EUR" }. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** Names the field when there's no visible label (Field gives it one). */
+    "aria-label"?: string;
+}
+/** A number with − and + buttons either side. Up and Down step it; the value is clamped to min and max. */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,23 @@
+import { type InputHTMLAttributes } from "react";
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+    /** The number, or null when empty. */
+    value?: number | null;
+    /** @default null */
+    defaultValue?: number | null;
+    onChange?(value: number | null): void;
+    min?: number;
+    max?: number;
+    /** How much the buttons and arrow keys change it. PageUp and PageDown move ten steps.
+     * @default 1 */
+    step?: number;
+    /** How the number is shown while the field isn't being edited, e.g. { style: "currency", currency: "EUR" }. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** Names the field when there's no visible label (Field gives it one). */
+    "aria-label"?: string;
+}
+/** A number with − and + buttons either side. Up and Down step it; the value is clamped to min and max. */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Pagination/Pagination.d.cts

@@ -0,0 +1,24 @@
+export interface PaginationProps {
+    /** The current page, starting at 1. */
+    page: number;
+    pageCount: number;
+    onPageChange(page: number): void;
+    /** Pages shown either side of the current one.
+     * @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at each end.
+     * @default 1 */
+    boundaryCount?: number;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Names the control for screen readers.
+     * @default "Pagination" */
+    label?: string;
+    className?: string;
+}
+type Item = number | "start-gap" | "end-gap";
+/** The page numbers to show, with gaps where pages are skipped. */
+export declare function paginationItems(page: number, pageCount: number, siblingCount?: number, boundaryCount?: number): Item[];
+/** Moves through pages of results: previous, numbered pages with gaps, next. */
+export declare function Pagination({ page, pageCount, onPageChange, siblingCount, boundaryCount, size, label, className, }: PaginationProps): import("react").JSX.Element;
+export {};

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,24 @@
+export interface PaginationProps {
+    /** The current page, starting at 1. */
+    page: number;
+    pageCount: number;
+    onPageChange(page: number): void;
+    /** Pages shown either side of the current one.
+     * @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at each end.
+     * @default 1 */
+    boundaryCount?: number;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Names the control for screen readers.
+     * @default "Pagination" */
+    label?: string;
+    className?: string;
+}
+type Item = number | "start-gap" | "end-gap";
+/** The page numbers to show, with gaps where pages are skipped. */
+export declare function paginationItems(page: number, pageCount: number, siblingCount?: number, boundaryCount?: number): Item[];
+/** Moves through pages of results: previous, numbered pages with gaps, next. */
+export declare function Pagination({ page, pageCount, onPageChange, siblingCount, boundaryCount, size, label, className, }: PaginationProps): import("react").JSX.Element;
+export {};

package/dist/components/Popover/Popover.d.cts

@@ -0,0 +1,30 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type Placement } from "../../hooks/useFloating.cjs";
+export interface PopoverProps {
+    /** The button that opens it. Popover adds the click handler and aria attributes. */
+    trigger: ReactElement;
+    children: ReactNode;
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** Where it opens relative to the trigger; it flips when there's no room.
+     * @default "bottom-start" */
+    placement?: Placement;
+    /** A heading at the top that also names the popover for screen readers. */
+    title?: ReactNode;
+    /** Names the popover when there's no title. */
+    "aria-label"?: string;
+    /** Pixels, or any CSS width.
+     * @default 280 */
+    width?: number | string;
+    /** Moves focus into the popover when it opens.
+     * @default true */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * A small panel attached to a button, for a few controls or details that don't need a dialog.
+ * Escape, a click outside or the trigger closes it, and focus goes back to the trigger.
+ */
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement, title, "aria-label": ariaLabel, width, autoFocus, className, }: PopoverProps): import("react").JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,30 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type Placement } from "../../hooks/useFloating.js";
+export interface PopoverProps {
+    /** The button that opens it. Popover adds the click handler and aria attributes. */
+    trigger: ReactElement;
+    children: ReactNode;
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** Where it opens relative to the trigger; it flips when there's no room.
+     * @default "bottom-start" */
+    placement?: Placement;
+    /** A heading at the top that also names the popover for screen readers. */
+    title?: ReactNode;
+    /** Names the popover when there's no title. */
+    "aria-label"?: string;
+    /** Pixels, or any CSS width.
+     * @default 280 */
+    width?: number | string;
+    /** Moves focus into the popover when it opens.
+     * @default true */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * A small panel attached to a button, for a few controls or details that don't need a dialog.
+ * Escape, a click outside or the trigger closes it, and focus goes back to the trigger.
+ */
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement, title, "aria-label": ariaLabel, width, autoFocus, className, }: PopoverProps): import("react").JSX.Element;

package/dist/components/Progress/Progress.d.cts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+export type ProgressTone = "primary" | "success" | "warning" | "danger";
+export interface ProgressBarProps {
+    /** How far along, from 0 to max. Leave out for work of unknown length. */
+    value?: number;
+    /** @default 100 */
+    max?: number;
+    /** Shown above the bar, and names it for screen readers. */
+    label?: ReactNode;
+    /** Shows the value at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
+    valueLabel?: string;
+    /** sm is 4px, for a pipeline bar; md is 8px.
+     * @default "sm" */
+    size?: "sm" | "md";
+    /** @default "primary" */
+    tone?: ProgressTone;
+    "aria-label"?: string;
+    className?: string;
+}
+/** How far a task has got: a thin bar, or a sliding segment when the length isn't known. */
+export declare function ProgressBar({ value, max, label, showValue, valueLabel, size, tone, "aria-label": ariaLabel, className, }: ProgressBarProps): import("react").JSX.Element;
+export interface ProgressCircleProps {
+    /** From 0 to max. Leave out to spin, for work of unknown length. */
+    value?: number;
+    /** @default 100 */
+    max?: number;
+    /** sm 16px, md 24px, lg 48px (lg shows the percentage inside).
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "primary" */
+    tone?: ProgressTone;
+    /** Names it for screen readers.
+     * @default "Progress" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Progress as a ring, for tight spaces: a row in a list, a file being uploaded. */
+export declare function ProgressCircle({ value, max, size, tone, "aria-label": ariaLabel, className, }: ProgressCircleProps): import("react").JSX.Element;

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+export type ProgressTone = "primary" | "success" | "warning" | "danger";
+export interface ProgressBarProps {
+    /** How far along, from 0 to max. Leave out for work of unknown length. */
+    value?: number;
+    /** @default 100 */
+    max?: number;
+    /** Shown above the bar, and names it for screen readers. */
+    label?: ReactNode;
+    /** Shows the value at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
+    valueLabel?: string;
+    /** sm is 4px, for a pipeline bar; md is 8px.
+     * @default "sm" */
+    size?: "sm" | "md";
+    /** @default "primary" */
+    tone?: ProgressTone;
+    "aria-label"?: string;
+    className?: string;
+}
+/** How far a task has got: a thin bar, or a sliding segment when the length isn't known. */
+export declare function ProgressBar({ value, max, label, showValue, valueLabel, size, tone, "aria-label": ariaLabel, className, }: ProgressBarProps): import("react").JSX.Element;
+export interface ProgressCircleProps {
+    /** From 0 to max. Leave out to spin, for work of unknown length. */
+    value?: number;
+    /** @default 100 */
+    max?: number;
+    /** sm 16px, md 24px, lg 48px (lg shows the percentage inside).
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "primary" */
+    tone?: ProgressTone;
+    /** Names it for screen readers.
+     * @default "Progress" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Progress as a ring, for tight spaces: a row in a list, a file being uploaded. */
+export declare function ProgressCircle({ value, max, size, tone, "aria-label": ariaLabel, className, }: ProgressCircleProps): import("react").JSX.Element;

package/dist/components/RadioGroup/RadioGroup.d.cts

@@ -0,0 +1,36 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface RadioGroupProps {
+    /** The question, shown as the group's legend. */
+    label: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    value?: string;
+    /** The starting choice when uncontrolled.
+     * @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** `default` is a dot and a label; `cards` turns each option into a bordered card, for choices that need a description.
+     * @default "default" */
+    variant?: "default" | "cards";
+    /** An error under the options. */
+    error?: ReactNode;
+    disabled?: boolean;
+    /** The form field name. Generated when left out. */
+    name?: string;
+    /** Radio options. */
+    children: ReactNode;
+    className?: string;
+}
+/** One choice from a few visible options. The arrow keys move between them, as with any radio group. */
+export declare function RadioGroup({ label, description, value, defaultValue, onChange, orientation, variant, error, disabled, name, children, className, }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "size"> {
+    value: string;
+    /** The label. */
+    children: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+}
+/** One option in a RadioGroup. */
+export declare function Radio({ value, children, description, disabled, className, ...inputProps }: RadioProps): import("react").JSX.Element;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,36 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface RadioGroupProps {
+    /** The question, shown as the group's legend. */
+    label: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    value?: string;
+    /** The starting choice when uncontrolled.
+     * @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** `default` is a dot and a label; `cards` turns each option into a bordered card, for choices that need a description.
+     * @default "default" */
+    variant?: "default" | "cards";
+    /** An error under the options. */
+    error?: ReactNode;
+    disabled?: boolean;
+    /** The form field name. Generated when left out. */
+    name?: string;
+    /** Radio options. */
+    children: ReactNode;
+    className?: string;
+}
+/** One choice from a few visible options. The arrow keys move between them, as with any radio group. */
+export declare function RadioGroup({ label, description, value, defaultValue, onChange, orientation, variant, error, disabled, name, children, className, }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "size"> {
+    value: string;
+    /** The label. */
+    children: ReactNode;
+    /** A muted line under the label. */
+    description?: ReactNode;
+}
+/** One option in a RadioGroup. */
+export declare function Radio({ value, children, description, disabled, className, ...inputProps }: RadioProps): import("react").JSX.Element;

package/dist/components/SearchField/SearchField.d.cts

@@ -0,0 +1,17 @@
+import { type InputProps } from "../Input/Input.cjs";
+export interface SearchFieldProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "startContent" | "endContent" | "onSubmit"> {
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called with the text when the person presses Enter. */
+    onSubmit?(value: string): void;
+    /** Shows a spinner in place of the clear button while results load.
+     * @default false */
+    loading?: boolean;
+    /** Names the field when there's no visible label.
+     * @default "Search" */
+    "aria-label"?: string;
+}
+/** A search box: a magnifier, the text, and a clear button once there's something to clear. Escape clears it. */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchField/SearchField.d.ts

@@ -0,0 +1,17 @@
+import { type InputProps } from "../Input/Input.js";
+export interface SearchFieldProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "startContent" | "endContent" | "onSubmit"> {
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called with the text when the person presses Enter. */
+    onSubmit?(value: string): void;
+    /** Shows a spinner in place of the clear button while results load.
+     * @default false */
+    loading?: boolean;
+    /** Names the field when there's no visible label.
+     * @default "Search" */
+    "aria-label"?: string;
+}
+/** A search box: a magnifier, the text, and a clear button once there's something to clear. Escape clears it. */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SegmentedControl/SegmentedControl.d.cts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    /** A 16px icon before the label. With no label, give the option an aria-label. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    "aria-label"?: string;
+}
+export interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value?: string;
+    /** The starting value when uncontrolled. Defaults to the first option. */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** sm 28px, md 32px tall.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Stretches the segments to fill the container.
+     * @default false */
+    fullWidth?: boolean;
+    /** Names the choice for screen readers. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Two to five mutually exclusive options in a well, with the chosen one raised: a view switch, a filter.
+ * It behaves like a radio group: the arrow keys move and choose.
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, className, ...aria }: SegmentedControlProps): import("react").JSX.Element;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    /** A 16px icon before the label. With no label, give the option an aria-label. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    "aria-label"?: string;
+}
+export interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value?: string;
+    /** The starting value when uncontrolled. Defaults to the first option. */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** sm 28px, md 32px tall.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Stretches the segments to fill the container.
+     * @default false */
+    fullWidth?: boolean;
+    /** Names the choice for screen readers. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Two to five mutually exclusive options in a well, with the chosen one raised: a view switch, a filter.
+ * It behaves like a radio group: the arrow keys move and choose.
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, className, ...aria }: SegmentedControlProps): import("react").JSX.Element;