@amberstack/comp-lib 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Icon before the label. */
+    icon?: IconName;
+    /** Shows the orange check for the chosen item. */
+    selected?: boolean;
+    /** Shows the highlight, for the item under the pointer or the keyboard. */
+    active?: boolean;
+    /** Dims the item and sets `aria-disabled`. */
+    disabled?: boolean;
+    /** Uses the danger colour, for destructive actions. */
+    danger?: boolean;
+    /** Keyboard shortcut shown at the end of the row. */
+    shortcut?: string;
+    /** Replaces the icon, for a control such as a checkbox. */
+    leading?: ReactNode;
+}
+/** One row of a Menu. It is visual only, so give it the `role` and handlers the list needs. */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export * from './Menu';
+export * from './MenuItem';
+export * from './usePopup';

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

@@ -0,0 +1,46 @@
+import { type CSSProperties, type RefObject } from 'react';
+/** Which edge of the trigger the popup lines up with. It opens below, and flips above when there is no room. */
+export type PopupPlacement = 'bottom-start' | 'bottom-end';
+/** Why the popup asked to close. */
+export type PopupCloseReason = 'outside' | 'escape';
+export interface UsePopupOptions {
+    /** Whether the popup is rendered. The hook only positions and listens while this is true. */
+    open: boolean;
+    /** Called on a pointer press outside the trigger and popup, and on Escape. The caller sets `open` to false. */
+    onClose: (reason: PopupCloseReason) => void;
+    /** Which edge of the trigger to line up with. */
+    placement?: PopupPlacement;
+    /** Gap between trigger and popup, in pixels. */
+    offset?: number;
+    /** Makes the popup exactly as wide as the trigger. */
+    matchTriggerWidth?: boolean;
+    /** Set to false if the caller handles Escape itself. */
+    closeOnEscape?: boolean;
+}
+export interface UsePopupResult<TTrigger extends HTMLElement, TPopup extends HTMLElement> {
+    /** Attach to the element the popup is anchored to. */
+    triggerRef: RefObject<TTrigger | null>;
+    /** Attach to the popup element. */
+    popupRef: RefObject<TPopup | null>;
+    /** Spread as `style` on the popup element. */
+    popupStyle: CSSProperties;
+    /** Measures and positions again. Scrolling and resizing already do this. */
+    reposition: () => void;
+}
+/**
+ * Positions a portalled popup against a trigger, and dismisses it.
+ *
+ * The popup uses `position: fixed` and is positioned by writing to its style, so moving it does not re-render.
+ * It flips above the trigger when there is no room below, stays inside the viewport and limits its own height.
+ * While `open`, it follows scrolling, resizing and size changes of the trigger or popup. A pointer press outside
+ * both elements or Escape calls `onClose`. `data-placement` on the popup is `top` or `bottom`.
+ *
+ * The caller renders the popup and owns focus:
+ *
+ * ```tsx
+ * const { triggerRef, popupRef, popupStyle } = usePopup<HTMLButtonElement>({ open, onClose: () => setOpen(false) });
+ * <button ref={triggerRef} onClick={() => setOpen(!open)}>Open</button>
+ * {open && createPortal(<div ref={popupRef} style={popupStyle}>Content</div>, document.body)}
+ * ```
+ */
+export declare function usePopup<TTrigger extends HTMLElement = HTMLElement, TPopup extends HTMLElement = HTMLDivElement>({ open, onClose, placement, offset, matchTriggerWidth, closeOnEscape, }: UsePopupOptions): UsePopupResult<TTrigger, TPopup>;

package/dist/components/MetricCard/MetricCard.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type MetricCardState = 'default' | 'unavailable';
+export interface MetricCardProps extends HTMLAttributes<HTMLElement> {
+    /** `default` shows the figure and chart. `unavailable` explains what is off and how to turn it on, and never draws zeros. */
+    state?: MetricCardState;
+    /** What is measured. */
+    label?: ReactNode;
+    /** The figure. */
+    value?: ReactNode;
+    /** Context for the figure, such as the change against a named period. */
+    meta?: ReactNode;
+    /** When unavailable: what is off. */
+    unavailableTitle?: ReactNode;
+    /** When unavailable: why it is off, and what still works. */
+    unavailableDescription?: ReactNode;
+    /** When unavailable: text of the link that explains how to turn it on. */
+    linkLabel?: string;
+    /** When unavailable: where that link goes. */
+    linkHref?: string;
+    /** When unavailable: whether that link leaves the app. */
+    linkExternal?: boolean;
+    /** The chart beside the figure. */
+    children?: ReactNode;
+}
+/** A label and value beside a chart. When the source is off, it explains what is off and how to turn it on. */
+export declare const MetricCard: import("react").ForwardRefExoticComponent<MetricCardProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/MetricCard/index.d.ts

@@ -0,0 +1 @@
+export * from './MetricCard';

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectOption } from '../Select';
+export interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    /** The options to choose from. */
+    options: SelectOption[];
+    /** The chosen values, when controlled. */
+    value?: string[];
+    /** The first chosen values, when uncontrolled. */
+    defaultValue?: string[];
+    /** Called with all chosen values whenever they change. */
+    onChange?: (value: string[]) => void;
+    /** Called when the clear button is used. Passing this shows the clear button while there are values. */
+    onClear?: () => void;
+    /** Text shown when nothing is chosen. */
+    placeholder?: string;
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Stops all interaction. */
+    disabled?: boolean;
+    /** Read-only look with a "Locked" tag. It can be focused but not opened. */
+    locked?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** How many chips to show before the "+N" overflow. */
+    maxVisible?: number;
+    /** Adds a filter box at the top of the popup. */
+    searchable?: boolean;
+    /** Label of the select-all row. The row appears when this is set, and shows a mixed state for a partial selection. */
+    selectAllLabel?: string;
+    /** Accessible name and placeholder of the filter box. */
+    filterLabel?: string;
+    /** Text shown when the filter matches nothing. */
+    emptyLabel?: string;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Builds the accessible name of a chip's remove button. */
+    removeLabel?: (label: string) => string;
+    /** Form field name. Each chosen value is submitted under it. */
+    name?: string;
+}
+/** Multi select dropdown. Chosen values appear as removable chips, and the popup stays open while selecting. */
+export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './MultiSelect';

package/dist/components/NavGroup/NavGroup.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface NavGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Overline heading, which also names the group. Without it the items simply sit together. */
+    label?: string;
+    /** Makes the heading a button that shows and hides the items. Needs a `label`. */
+    collapsible?: boolean;
+    /** Whether the items are showing, when controlled. */
+    expanded?: boolean;
+    /** Whether the items first show, when uncontrolled. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when the heading is pressed. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** The NavItems of this group. */
+    children: ReactNode;
+}
+/** A labelled group of nav items, optionally collapsible. */
+export declare const NavGroup: import("react").ForwardRefExoticComponent<NavGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/NavGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './NavGroup';

package/dist/components/NavItem/NavItem.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface NavItemProps extends HTMLAttributes<HTMLElement> {
+    /** The label of the row. */
+    children: ReactNode;
+    /** Icon before the label. */
+    icon?: IconName;
+    /** Number shown at the end of the row. */
+    count?: number;
+    /** Marks the current location with the orange bar and `aria-current="page"`. Use on one item per navigation column. */
+    active?: boolean;
+    /** Blocks the item and shows a lock, for a place the user is not allowed to open. */
+    disabled?: boolean;
+    /** Indents the row under its parent item. */
+    child?: boolean;
+    /** Shows a chevron, because this item opens a list of child items. */
+    hasChildren?: boolean;
+    /** Whether the child items are showing. Only used with `hasChildren`. */
+    expanded?: boolean;
+    /** Renders an anchor to this address. Without it the item is a button. */
+    href?: string;
+    /** Where an anchor opens. */
+    target?: string;
+    /** Relationship of an anchor to its target. */
+    rel?: string;
+}
+/** A row in the sidebar. The orange bar marks the current location. */
+export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/NavItem/index.d.ts

@@ -0,0 +1 @@
+export * from './NavItem';

package/dist/components/NodeGraph/GraphNode.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export type GraphNodeHealth = 'healthy' | 'degraded' | 'offline';
+export interface GraphNodeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Name of the system. */
+    name: string;
+    /** How the system is doing. Sets the dot colour and is part of the accessible name. */
+    health?: GraphNodeHealth;
+    /** Word for the health, in place of the default. */
+    healthLabel?: string;
+    /** Icon for the kind of system. */
+    icon?: IconName;
+}
+/** One system in a node graph: its name and a health dot. The health is in the accessible name and in the hover title. */
+export declare const GraphNode: import("react").ForwardRefExoticComponent<GraphNodeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/NodeGraph/NodeGraph.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type GraphNodeHealth } from './GraphNode';
+/** A system in the graph. */
+export interface NodeGraphNode {
+    /** Stable identifier, used by edges. */
+    id: string;
+    /** Name of the system. */
+    label: string;
+    /** How the system is doing. */
+    health: GraphNodeHealth;
+    /** Left position in pixels at full size. */
+    x: number;
+    /** Top position in pixels. */
+    y: number;
+}
+/** A connection between two systems. */
+export interface NodeGraphEdge {
+    /** Id of the node the connection starts from. */
+    from: string;
+    /** Id of the node the connection goes to. An offline target draws the edge in the danger colour. */
+    to: string;
+}
+export interface NodeGraphProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The systems, with their positions. */
+    nodes: readonly NodeGraphNode[];
+    /** The connections between them. */
+    edges: readonly NodeGraphEdge[];
+    /** Accessible name of the graph. Say what it shows. */
+    'aria-label'?: string;
+    /** Shown in place of the graph when there are no nodes. */
+    emptyMessage?: ReactNode;
+}
+/** Shows how systems connect, such as a topology. Edges to an offline node are drawn in the danger colour. */
+export declare const NodeGraph: import("react").ForwardRefExoticComponent<NodeGraphProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/NodeGraph/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NodeGraph';
+export * from './GraphNode';

package/dist/components/NodeReference/NodeReference.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type NodeReferenceHealth = 'healthy' | 'degraded' | 'offline' | 'maintenance';
+export interface NodeReferenceProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The name of the node. */
+    name: ReactNode;
+    /** The state of the node. */
+    health?: NodeReferenceHealth;
+    /** The state in words. Defaults to the health. It is only announced for `healthy`, which the design shows as a dot alone. */
+    healthLabel?: ReactNode;
+}
+/** A compact mention of a node, with its health as a dot and text. */
+export declare const NodeReference: import("react").ForwardRefExoticComponent<NodeReferenceProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/NodeReference/index.d.ts

@@ -0,0 +1 @@
+export * from './NodeReference';

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

@@ -0,0 +1,28 @@
+import { type InputHTMLAttributes } from 'react';
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+    /** The number, when controlled. `null` means empty. */
+    value?: number | null;
+    /** The first number, when uncontrolled. */
+    defaultValue?: number | null;
+    /** Called with the new number, or `null` when the box is empty. */
+    onChange?: (value: number | null) => void;
+    /** The lowest allowed number. */
+    min?: number;
+    /** The highest allowed number. */
+    max?: number;
+    /** How far the steppers and arrow keys move. */
+    step?: number;
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag, for values set by staff. */
+    locked?: boolean;
+    /** Accessible name of the decrease button. */
+    decreaseLabel?: string;
+    /** Accessible name of the increase button. */
+    increaseLabel?: string;
+}
+/**
+ * A number input styled like Input, with stepper buttons. Arrow keys move by `step`, Page Up and Page Down move
+ * by ten steps, and Home and End go to `min` and `max`. Steppers stay out of the tab order because the arrow keys do the same job.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export * from './NumberField';

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type PageHeaderHeadingLevel = 1 | 2 | 3;
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The page title. */
+    title: ReactNode;
+    /** Small uppercase line above the title, such as the parent project. */
+    overline?: ReactNode;
+    /** One or two lines below the title. */
+    description?: ReactNode;
+    /** Address of the documentation. Shows the Docs link beside the title. */
+    docsHref?: string;
+    /** Text of the Docs link. */
+    docsLabel?: string;
+    /** Buttons at the right of the header. */
+    actions?: ReactNode;
+    /** Level of the title heading. */
+    headingLevel?: PageHeaderHeadingLevel;
+}
+/** The title block at the top of a page. */
+export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeader';

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /** The one-based current page, when controlled. */
+    page?: number;
+    /** The first one-based page, when uncontrolled. */
+    defaultPage?: number;
+    /** How many pages there are. */
+    pageCount: number;
+    /** Called with the one-based page the user chooses. */
+    onPageChange?: (page: number) => void;
+    /** Text at the left, such as "Showing 1–5 of 42". */
+    summary?: ReactNode;
+    /** Accessible name of the previous button. */
+    previousLabel?: string;
+    /** Accessible name of the next button. */
+    nextLabel?: string;
+    /** Accessible name of a page button, given its number. */
+    pageLabel?: (page: number) => string;
+}
+/** Moves through a long list one page at a time. */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/PickerItem/PickerItem.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface PickerItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    /** Icon in the tile. */
+    icon?: IconName;
+    /** A letter in the tile, when there is no icon. */
+    glyph?: ReactNode;
+    /** The name of the choice. */
+    title: ReactNode;
+    /** What the choice gives you. */
+    description?: ReactNode;
+}
+/** One choice in a picker, such as a type of block to add. */
+export declare const PickerItem: import("react").ForwardRefExoticComponent<PickerItemProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/PickerItem/index.d.ts

@@ -0,0 +1 @@
+export * from './PickerItem';

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { type AnchoredPlacement } from '../Tooltip/useAnchoredPosition';
+export type PopoverPlacement = AnchoredPlacement;
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** The one element that opens the popover. It must accept click and ARIA props. */
+    trigger: ReactElement<HTMLAttributes<HTMLElement>>;
+    /** What the panel shows. */
+    content: ReactNode;
+    /** Which side of the trigger the panel sits on. It flips if there isn't room. */
+    placement?: PopoverPlacement;
+    /** Whether the panel is showing. Leave undefined to use `defaultOpen` and let the popover manage itself. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the popover asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the panel. */
+    'aria-label'?: string;
+}
+/**
+ * An anchored, non-modal panel. Focus moves in on open and returns to the trigger on close.
+ * Closes on an outside press, on Escape, and when Tab leaves the panel.
+ */
+export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ProgressBarTone = 'default' | 'accent' | 'warning' | 'danger';
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Progress from 0 to 100. Values outside that range are clamped. */
+    value: number;
+    /** Fill colour. Use `warning` and `danger` for capacity near its limit, and `accent` only for the main task on the page. */
+    tone?: ProgressBarTone;
+    /** Visible name. Without it, pass `aria-label`. */
+    label?: ReactNode;
+    /** Shows the percentage. Defaults to true when there is a `label`. */
+    showValue?: boolean;
+    /** Helper text below the bar, also exposed as its description. */
+    meta?: ReactNode;
+}
+/** Shows how much of something is complete or used. */
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/dist/components/ProposedNote/ProposedNote.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ProposedNoteProps extends HTMLAttributes<HTMLDivElement> {
+    /** Short status line above the note, such as what the proposal is waiting for. */
+    overline: ReactNode;
+    /** The note itself. */
+    children?: ReactNode;
+}
+/** Marks something as proposed rather than built, and says what it still needs. */
+export declare const ProposedNote: import("react").ForwardRefExoticComponent<ProposedNoteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ProposedNote/index.d.ts

@@ -0,0 +1 @@
+export * from './ProposedNote';

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> {
+    /** The value this radio stands for. */
+    value: string;
+    /** The visible label. Leave it out for a bare circle, and give the radio an `aria-label`. */
+    label?: ReactNode;
+    /** Longer text below the label. */
+    description?: ReactNode;
+}
+/** One option of a RadioGroup. Built on a native radio, so the browser handles arrow keys within the group. */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** The visible group label. Without it, give the group an `aria-label`. */
+    label?: ReactNode;
+    /** The chosen value, when controlled. */
+    value?: string;
+    /** The first chosen value, when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new value when a radio is chosen. */
+    onChange?: (value: string) => void;
+    /** The native group name. Generated when left out. */
+    name?: string;
+    /** Disables every radio in the group. */
+    disabled?: boolean;
+    /** How the radios are laid out. */
+    orientation?: RadioGroupOrientation;
+    /** The Radio options. */
+    children: ReactNode;
+}
+/** Selects exactly one option from a short list. Use Select when there are more than about five options. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/RadioGroupContext.d.ts

@@ -0,0 +1,11 @@
+export interface RadioGroupContextValue {
+    /** The native group name shared by the radios. */
+    name: string;
+    /** The chosen value. */
+    value?: string;
+    /** Disables every radio in the group. */
+    disabled: boolean;
+    /** Called when a radio is chosen. */
+    onChange: (value: string) => void;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/components/RangeTabs/RangeTabs.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactElement, type RefAttributes } from 'react';
+export interface RangeTabsOption<T extends string = string> {
+    /** The value reported when this option is chosen. */
+    value: T;
+    /** The visible text. */
+    label: string;
+    /** Blocks this option. */
+    disabled?: boolean;
+}
+export interface RangeTabsProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    /** The choices, in order. */
+    options: RangeTabsOption<T>[];
+    /** The chosen value, when controlled. */
+    value?: T;
+    /** The first chosen value, when uncontrolled. Defaults to the first option that is enabled. */
+    defaultValue?: T;
+    /** Called with the value the user chooses. */
+    onChange?: (value: T) => void;
+}
+/** Segmented control for switching a time range or view. Use one per chart group. */
+export declare const RangeTabs: <T extends string = string>(props: RangeTabsProps<T> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/components/RangeTabs/Segment.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface SegmentProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Raises this segment as the selected one. */
+    selected?: boolean;
+}
+/** One choice in RangeTabs. The selected segment is raised and uses no colour. */
+export declare const Segment: import("react").ForwardRefExoticComponent<SegmentProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/RangeTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeTabs';
+export * from './Segment';

package/dist/components/ResourceCard/ResourceCard.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+import { type StatusTone } from '../Status';
+export interface ResourceCardDetail {
+    /** The name of the fact. */
+    label: ReactNode;
+    /** The fact. */
+    value: ReactNode;
+}
+export interface ResourceCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Icon in the tile at the top left. */
+    icon?: IconName;
+    /** The name of the resource. */
+    title: ReactNode;
+    /** Its machine-readable name. */
+    identifier?: ReactNode;
+    /** Tone of the status dot. */
+    statusTone?: StatusTone;
+    /** The status text. Without it, no status is shown. */
+    statusLabel?: ReactNode;
+    /** Facts about the resource, as label and value pairs. */
+    details?: ResourceCardDetail[];
+    /** Icon before the footer. */
+    footerIcon?: IconName;
+    /** A line at the bottom, such as what uses this resource. */
+    footer?: ReactNode;
+}
+/** A provisioned resource, with its state and key facts. */
+export declare const ResourceCard: import("react").ForwardRefExoticComponent<ResourceCardProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/ResourceCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ResourceCard';

package/dist/components/RichTextField/RichTextField.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface RichTextFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** The visible label, which also names the editor. */
+    label: ReactNode;
+    /** Short text at the end of the label row, such as a locale. */
+    meta?: ReactNode;
+    /** Help text below the editor. */
+    help?: ReactNode;
+    /** Error text. It replaces the help text and puts the editor in its error state. */
+    error?: ReactNode;
+    /** The content as an HTML string, when controlled. It is sanitised before display. */
+    value?: string;
+    /** The first content as an HTML string, when uncontrolled. It is sanitised before display. */
+    defaultValue?: string;
+    /** Called with the content as an HTML string after every change. */
+    onChange?: (html: string) => void;
+    /** Stops editing and disables the toolbar. */
+    disabled?: boolean;
+    /** Asks for a link address when the Link tool is used. Defaults to `window.prompt`. Return null to cancel. */
+    requestLinkUrl?: () => string | null;
+}
+/**
+ * A labelled editor with a formatting toolbar, for long-form content. The toolbar marks the formatting at the cursor.
+ * Pasted and dropped content arrives as plain text, and only safe markup is kept from the value passed in.
+ */
+export declare function RichTextField({ label, meta, help, error, value, defaultValue, onChange, disabled, requestLinkUrl, className, ...props }: RichTextFieldProps): import("react").JSX.Element;

package/dist/components/RichTextField/RichTextTool.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface RichTextToolProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The full name of the tool, for assistive technology, such as "Bold". */
+    label: string;
+    /** Marks the format as applied at the cursor. */
+    active?: boolean;
+}
+/** One toolbar button of a RichTextField. Its children are the short visible text, such as "B". */
+export declare const RichTextTool: import("react").ForwardRefExoticComponent<RichTextToolProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/RichTextField/RichTextToolbar.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from 'react';
+import type { RichTextFormat } from './richTextCommands';
+export interface RichTextToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** The formats applied at the cursor. */
+    activeFormats?: RichTextFormat[];
+    /** Called when a tool is used. */
+    onFormat?: (format: RichTextFormat) => void;
+    /** Disables every tool. */
+    disabled?: boolean;
+}
+/** The formatting toolbar of a RichTextField. Tab enters it once, and arrow keys move between tools. */
+export declare const RichTextToolbar: import("react").ForwardRefExoticComponent<RichTextToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/RichTextField/index.d.ts

@@ -0,0 +1,4 @@
+export * from './RichTextField';
+export * from './RichTextTool';
+export * from './RichTextToolbar';
+export type { RichTextFormat } from './richTextCommands';