@amberstack/comp-lib 0.0.0-stage → 0.1.0

package/dist/components/Dialog/dialogContext.d.ts

@@ -0,0 +1,23 @@
+export interface DialogContextValue {
+    titleId: string;
+    descriptionId: string;
+    /** Marks the title or description as present. Returns a function that removes it again. */
+    registerLabel: (kind: 'title' | 'description') => () => void;
+    /** Closes the surrounding modal. Undefined when it can't be dismissed by the user. */
+    onClose?: () => void;
+}
+export declare const DialogContext: import("react").Context<DialogContextValue | null>;
+export declare const useDialogContext: () => DialogContextValue | null;
+/** Builds the context and ARIA attributes that tie a modal surface to its DialogHeader. */
+export declare function useDialogLabels(dismissible: boolean, close: () => void): {
+    context: {
+        titleId: string;
+        descriptionId: string;
+        registerLabel: (kind: "title" | "description") => () => void;
+        onClose: (() => void) | undefined;
+    };
+    labelProps: {
+        'aria-labelledby': string | undefined;
+        'aria-describedby': string | undefined;
+    };
+};

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

@@ -0,0 +1,5 @@
+export * from './Dialog';
+export * from './DialogHeader';
+export * from './DialogBody';
+export * from './DialogFooter';
+export * from './useModalBehaviour';

package/dist/components/Dialog/useModalBehaviour.d.ts

@@ -0,0 +1,27 @@
+import { type RefObject } from 'react';
+/** Every element inside `container` that Tab can reach, in DOM order. */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+export interface ModalBehaviourOptions {
+    /** Whether the modal is showing. All behaviour is active only while this is true. */
+    open: boolean;
+    /** The modal surface. Focus is kept inside it. It needs `tabIndex={-1}` in case it holds nothing focusable. */
+    containerRef: RefObject<HTMLElement | null>;
+    /** The backdrop element. A press that starts and ends on it counts as a dismissal. */
+    backdropRef?: RefObject<HTMLElement | null>;
+    /** Element to focus on open. Defaults to the first focusable element, then the container. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Whether Escape and backdrop presses call `onDismiss`. */
+    dismissible?: boolean;
+    /** Called when the user dismisses the modal. */
+    onDismiss?: () => void;
+}
+/**
+ * Shared modal behaviour for Dialog and Drawer: focus trap, focus restore, body scroll lock,
+ * and Escape and backdrop dismissal. Stacked modals are supported; only the top one responds.
+ *
+ * Non-modal layers rendered in a portal, such as Popover, set `data-focus-scope` so the trap leaves
+ * their Tab handling alone, and call `preventDefault` on keys they consume so Escape closes one layer at a time.
+ */
+export declare function useModalBehaviour({ open, containerRef, backdropRef, initialFocusRef, dismissible, onDismiss, }: ModalBehaviourOptions): void;
+/** Open state for an overlay that works both controlled (`open`) and uncontrolled (`defaultOpen`). */
+export declare function useOverlayOpen(open: boolean | undefined, defaultOpen: boolean, onClose?: () => void): readonly [boolean, () => void];

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Direction of the line. A `vertical` divider stretches to the height of its container. */
+    orientation?: DividerOrientation;
+    /** Text in the middle of the line, also used as its accessible name. */
+    label?: string;
+}
+/** Separates groups of content. */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/DonutChart/DonutChart.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChartSegment } from '../ChartCore';
+export interface DonutChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The parts of the whole. Up to five; any more fold into Other. */
+    segments: ChartSegment[];
+    /** Word under the total in the centre. */
+    centerLabel?: string;
+    /** Word beside the percentage in the tooltip. */
+    shareLabel?: string;
+    /** Diameter of the ring in pixels. */
+    height?: number;
+    /** Accessible name of the chart. Say what it shows. */
+    'aria-label'?: string;
+    /** Shown in place of the chart when there is no data. */
+    emptyMessage?: ReactNode;
+    /** Formats the total and the values in the data table. */
+    formatValue?: (value: number) => string;
+}
+/** Parts of one whole, for five segments or fewer. The total sits in the centre, and the legend gives each share so identity is never colour alone. */
+export declare const DonutChart: import("react").ForwardRefExoticComponent<DonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type RefObject } from 'react';
+export type DrawerSide = 'right' | 'left';
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the drawer is showing. Leave undefined to use `defaultOpen` and let the drawer manage itself. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the user closes the drawer. */
+    onClose?: () => void;
+    /** Whether Escape, a backdrop press and the header's close button can close the drawer. */
+    dismissible?: boolean;
+    /** The edge of the viewport the panel attaches to. */
+    side?: DrawerSide;
+    /** Element to focus on open. Defaults to the first focusable element. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+}
+/**
+ * A modal side panel for details and secondary tasks. Compose it from DialogHeader, DialogBody and DialogFooter.
+ * It behaves like Dialog: focus trap, focus restore, scroll lock, Escape and backdrop close.
+ */
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,32 @@
+import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type PopupPlacement } from '../Menu';
+/** Props a custom trigger must spread onto its button. */
+export interface DropdownMenuTriggerProps {
+    ref: Ref<HTMLElement>;
+    id: string;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls'?: string;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+type TriggerElementProps = Partial<Pick<DropdownMenuTriggerProps, 'onClick' | 'onKeyDown'>>;
+export interface DropdownMenuProps {
+    /** The button that opens the menu: an element such as `<Button>`, or a function that spreads the given props onto one. */
+    trigger: ReactElement<TriggerElementProps> | ((props: DropdownMenuTriggerProps) => ReactNode);
+    /** DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuLabel and DropdownMenuSeparator rows. */
+    children: ReactNode;
+    /** Whether the menu is open, when controlled. */
+    open?: boolean;
+    /** Whether the menu starts open, when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the menu asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger the menu lines up with. */
+    placement?: PopupPlacement;
+    /** Class name for the popup. */
+    className?: string;
+}
+/** Action menu with a button trigger, following the WAI-ARIA menu button pattern. For choosing a value use Select. */
+export declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, placement, className, }: DropdownMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export interface DropdownMenuCheckboxItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Whether the item is ticked, when controlled. */
+    checked?: boolean;
+    /** Whether the item starts ticked, when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Called with the new state. The menu stays open, so several items can be changed. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Stops the item changing, and keyboard navigation skips it. */
+    disabled?: boolean;
+}
+/** An on or off setting in a DropdownMenu. The orange check shows when it is on. */
+export declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownMenu/DropdownMenuContext.d.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuContextValue {
+    /** Closes the menu and returns focus to its trigger. */
+    close: () => void;
+}
+export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;

package/dist/components/DropdownMenu/DropdownMenuItem.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+import type { IconName } from '../../icons';
+export interface DropdownMenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Icon before the label. */
+    icon?: IconName;
+    /** Keyboard shortcut shown at the end of the row. It is a hint only and does not bind the key. */
+    shortcut?: string;
+    /** Uses the danger colour, for destructive actions. */
+    danger?: boolean;
+    /** Stops the item being chosen, and keyboard navigation skips it. */
+    disabled?: boolean;
+    /** Called when the item is chosen with the pointer, Enter or Space. The menu then closes. */
+    onSelect?: () => void;
+}
+/** One action in a DropdownMenu. */
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownMenu/DropdownMenuLabel.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type DropdownMenuLabelProps = HTMLAttributes<HTMLDivElement>;
+/** A heading for the items that follow it in a DropdownMenu. */
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownMenu/DropdownMenuSeparator.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type DropdownMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+/** A line between groups of items in a DropdownMenu. */
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+export * from './DropdownMenu';
+export * from './DropdownMenuCheckboxItem';
+export * from './DropdownMenuItem';
+export * from './DropdownMenuLabel';
+export * from './DropdownMenuSeparator';

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Icon above the title. */
+    icon?: IconName;
+    /** What is empty. */
+    title: ReactNode;
+    /** Why it is empty, or what to do about it. */
+    description?: ReactNode;
+    /** The next step, normally a Button. */
+    action?: ReactNode;
+}
+/** Fills a space that has no content yet, and points to the next step. */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/EnvironmentLabel/EnvironmentLabel.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+export type EnvironmentLabelKind = 'production' | 'standard';
+export interface EnvironmentLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    /** `production` is always visually distinct and has fixed text. `standard` shows `name`. */
+    kind: EnvironmentLabelKind;
+    /** Environment name, such as `staging`. Only used by the `standard` kind. */
+    name?: string;
+}
+/** Identifies the environment. Production gets a rule, a lock and uppercase text so it cannot be mistaken for anything else. */
+export declare const EnvironmentLabel: import("react").ForwardRefExoticComponent<EnvironmentLabelProps & import("react").RefAttributes<HTMLSpanElement>>;

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

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

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** The visible label. */
+    label: ReactNode;
+    /** Short text at the end of the label row, such as a locale. */
+    meta?: ReactNode;
+    /** Help text below the control. */
+    help?: ReactNode;
+    /** Error text. It replaces the help text and puts the control in its error state. */
+    error?: ReactNode;
+    /** Disables the control and dims the label. */
+    disabled?: boolean;
+    /** Puts the control in its locked state, for values set by staff. */
+    locked?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** The id for the control. Generated when left out. */
+    controlId?: string;
+    /** One control that reads the Field through `useFieldControl`, such as Input, Textarea, Select or MultiSelect. */
+    children: ReactNode;
+}
+/**
+ * A labelled form control. It connects the label, help text and error text to its control. Use a library control
+ * as the child, or build one with `useFieldControl`; a plain native input is not connected.
+ */
+export declare function Field({ label, meta, help, error, disabled, locked, required, controlId, className, children, ...props }: FieldProps): import("react").JSX.Element;

package/dist/components/Field/FieldContext.d.ts

@@ -0,0 +1,17 @@
+export interface FieldContextValue {
+    /** The id the label points at. */
+    controlId: string;
+    /** The id of the label, for controls that need `aria-labelledby`. */
+    labelId: string;
+    /** The id of the help or error text, if either is showing. */
+    describedById?: string;
+    /** True when the field shows an error. */
+    invalid: boolean;
+    /** True when the field is disabled. */
+    disabled: boolean;
+    /** True when the field is locked. */
+    locked: boolean;
+    /** True when the field is required. */
+    required: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;

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

@@ -0,0 +1,2 @@
+export * from './Field';
+export * from './useFieldControl';

package/dist/components/Field/useFieldControl.d.ts

@@ -0,0 +1,34 @@
+export interface FieldControlInput {
+    /** The control's own id. A surrounding Field's id takes priority, so its label stays connected. */
+    id?: string;
+    /** The control's own error state. */
+    invalid?: boolean;
+    /** The control's own disabled state. */
+    disabled?: boolean;
+    /** The control's own locked state. */
+    locked?: boolean;
+    /** The control's own required state. */
+    required?: boolean;
+    /** Extra descriptions, kept beside the Field's help or error text. */
+    'aria-describedby'?: string;
+    /** The control's own label reference. */
+    'aria-labelledby'?: string;
+}
+export interface FieldControlResult {
+    /** Use as the control's `id`. */
+    id?: string;
+    /** Show the error state and set `aria-invalid`. */
+    invalid: boolean;
+    /** Disable the control. */
+    disabled: boolean;
+    /** Show the locked state. */
+    locked: boolean;
+    /** Mark the control as required. */
+    required: boolean;
+    /** Use as `aria-describedby`. */
+    describedBy?: string;
+    /** The Field's label id, or the control's own `aria-labelledby`. Custom controls such as a combobox use this. */
+    labelledBy?: string;
+}
+/** Merges a control's own props with the surrounding Field, if there is one. Build custom Field controls with this. */
+export declare function useFieldControl(props?: FieldControlInput): FieldControlResult;

package/dist/components/Filters/FilterBar.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type MouseEventHandler } from 'react';
+export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Called when Clear all is pressed. Without it, no Clear all button is shown. */
+    onClearAll?: MouseEventHandler<HTMLButtonElement>;
+    /** Text of the Clear all button. */
+    clearAllLabel?: string;
+}
+/** A row of FilterChip children, followed by Clear all. */
+export declare const FilterBar: import("react").ForwardRefExoticComponent<FilterBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Filters/FilterChip.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
+export type FilterChipState = 'applied' | 'hover' | 'add';
+export interface FilterChipProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** `applied` shows one filter. `hover` forces the hover look. `add` is the button that adds a filter. */
+    state?: FilterChipState;
+    /** The field being filtered, such as `Status`. */
+    field?: ReactNode;
+    /** The chosen values, such as `Healthy, Degraded`. */
+    value?: ReactNode;
+    /** Called when the remove button is pressed. Without it, no remove button is shown. */
+    onRemove?: MouseEventHandler<HTMLButtonElement>;
+    /** Accessible name of the remove button. */
+    removeLabel?: string;
+    /** Text of the `add` chip. */
+    addLabel?: ReactNode;
+}
+/** One applied filter above a table, or the button that adds another. Orange tint marks it as a selection. */
+export declare const FilterChip: import("react").ForwardRefExoticComponent<FilterChipProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Filters/FilterMenu.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface FilterOption {
+    /** Stored when the option is chosen. */
+    value: string;
+    /** Shown to the person. */
+    label: string;
+    /** How many rows have this value. */
+    count?: number;
+}
+export interface FilterMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue' | 'onChange'> {
+    /** The field being filtered, such as `Status`. */
+    title: ReactNode;
+    /** The options to choose from. */
+    options: FilterOption[];
+    /** The chosen values, when controlled. They are a draft until Apply. */
+    value?: string[];
+    /** The first chosen values, when uncontrolled. */
+    defaultValue?: string[];
+    /** Called whenever a box is ticked or cleared. */
+    onChange?: (value: string[]) => void;
+    /** Called with the chosen values when Apply is pressed. */
+    onApply?: (value: string[]) => void;
+    /** Called after Clear empties the choices. */
+    onClear?: () => void;
+    /** Hides the search box, for a short list. */
+    searchable?: boolean;
+    /** Placeholder and accessible name of the search box. */
+    searchPlaceholder?: string;
+    /** Shown when the search matches no option. */
+    noMatchesLabel?: ReactNode;
+    /** Text of the Clear button. */
+    clearLabel?: string;
+    /** Text of the Apply button. */
+    applyLabel?: string;
+}
+/** A panel of checkbox options with counts. Choices apply only when Apply is pressed. Place it in a popup. */
+export declare const FilterMenu: import("react").ForwardRefExoticComponent<FilterMenuProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export * from './FilterChip';
+export * from './FilterMenu';
+export * from './FilterBar';

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export type IconButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type IconButtonSize = 'md' | 'sm';
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Icon to draw. */
+    icon: IconName;
+    /** Accessible name, announced by screen readers because the button has no visible text. */
+    label: string;
+    /** Visual emphasis. Use `primary` at most once per view. */
+    variant?: IconButtonVariant;
+    /** Square size: `md` is 34 px and `sm` is 28 px. */
+    size?: IconButtonSize;
+}
+/** Compact action with an icon only. Add a Tooltip if the icon is not universally understood. */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { type InputHTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag, for values set by staff. */
+    locked?: boolean;
+    /** Icon before the value. */
+    leadingIcon?: IconName;
+    /** Icon after the value. */
+    trailingIcon?: IconName;
+}
+/** Single-line text control without a label. Use Field for a labelled input in a form. */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/LockedTagInternal.d.ts

@@ -0,0 +1,2 @@
+/** The "Locked" tag and lock icon shared by the locked state of the form controls. */
+export declare function LockedTag(): import("react").JSX.Element;

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

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

package/dist/components/KPI/KPI.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type KPIVariant = 'plain' | 'card';
+export type KPITrend = 'up' | 'down' | 'none';
+export type KPITrendIntent = 'good' | 'bad' | 'neutral';
+export interface KPIProps extends HTMLAttributes<HTMLDivElement> {
+    /** What is being measured. */
+    label: ReactNode;
+    /** The number. Never show zero for data that was not recorded. */
+    value: ReactNode;
+    /** Text after the value, such as a unit or `of 44`. */
+    unit?: ReactNode;
+    /** Direction of change. `up` and `down` draw an arrow before the meta text. */
+    trend?: KPITrend;
+    /** Whether the change is welcome, which sets the colour. Defaults to `good` for `up` and `bad` for `down`. Set it when lower is better, such as an error rate. */
+    trendIntent?: KPITrendIntent;
+    /** Accessible name of the arrow. Defaults to `Up` or `Down`. */
+    trendLabel?: string;
+    /** Supporting detail below the value. */
+    meta?: ReactNode;
+    /** `plain` has no frame. `card` adds a border and padding. */
+    variant?: KPIVariant;
+}
+/** One key number with its context. Colour is never the only signal: a trend always has an arrow and supporting text. */
+export declare const KPI: import("react").ForwardRefExoticComponent<KPIProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/KPIGraph/KPIGraph.d.ts

@@ -0,0 +1,12 @@
+import { type KPIProps } from '../KPI';
+export type KPIGraphType = 'line' | 'area' | 'bars';
+export interface KPIGraphProps extends KPIProps {
+    /** Values for the mini graph, oldest first. */
+    data: number[];
+    /** `line` and `area` suit continuous trends. `bars` suits counts per period, with the current period in the accent colour. */
+    graph?: KPIGraphType;
+    /** Accessible name of the graph. Say what the trend is, because the shape alone has no words. */
+    graphLabel: string;
+}
+/** A KPI with a mini graph of its recent history at the right. */
+export declare const KPIGraph: import("react").ForwardRefExoticComponent<KPIGraphProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type KbdProps = HTMLAttributes<HTMLElement>;
+/** Chip for a key or keyboard shortcut, as in the Search box. */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;

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

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

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export type LabelTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'outline';
+export type LabelSize = 'md' | 'sm';
+export interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour treatment of the tag. */
+    tone?: LabelTone;
+    /** Height: `md` is 24 px and `sm` is 20 px. */
+    size?: LabelSize;
+    /** Icon before the text. */
+    icon?: IconName;
+}
+/** Short categorical tag, such as a type, count or plan. Use Status instead when showing the state of an object. */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;

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

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

package/dist/components/LineChart/LineChart.d.ts

@@ -0,0 +1,4 @@
+import { type SeriesChartProps } from './SeriesChartInternal';
+export type LineChartProps = SeriesChartProps;
+/** Change over time for up to five series, on one y axis. Two or more series get a legend that can hide or isolate them. */
+export declare const LineChart: import("react").ForwardRefExoticComponent<SeriesChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LineChart/SeriesChartInternal.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChartSeries } from '../ChartCore';
+/** Props shared by LineChart and AreaChart. */
+export interface SeriesChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The series to draw. Up to five; any more fold into Other. */
+    series: ChartSeries[];
+    /** Height of the plot in pixels, including the axis labels. Width fills the container. */
+    height?: number;
+    /** Accessible name of the chart. Say what it shows. */
+    'aria-label'?: string;
+    /** Shown in place of the chart when there is no data. */
+    emptyMessage?: ReactNode;
+    /** Formats values in labels, tooltips and the data table. */
+    formatValue?: (value: number) => string;
+    /** Draws the end marker and end value of each series. Turn off for small charts inside a card. */
+    showEndMarkers?: boolean;
+    /** Hidden series ids, when controlled. */
+    hiddenSeries?: string[];
+    /** Hidden series ids at first, when uncontrolled. */
+    defaultHiddenSeries?: string[];
+    /** Called with the new hidden series ids. */
+    onHiddenSeriesChange?: (hiddenSeries: string[]) => void;
+}
+interface InternalProps extends SeriesChartProps {
+    /** Adds the wash under each line. */
+    wash: boolean;
+}
+/** The chart behind LineChart and AreaChart, which differ only in the wash. */
+export declare const SeriesChartInternal: import("react").ForwardRefExoticComponent<InternalProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './LineChart';
+export type { SeriesChartProps } from './SeriesChartInternal';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,20 @@
+import { type AnchorHTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export type LinkTone = 'default' | 'muted';
+export type LinkSize = 'md' | 'sm';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Colour: `default` is the link colour, `muted` is for quieter links. */
+    tone?: LinkTone;
+    /** Text size: `md` is 13 px and `sm` is 12 px. */
+    size?: LinkSize;
+    /** Icon after the text. Defaults to `external-link` when `external` is set. */
+    icon?: IconName;
+    /** Leaves the product: opens a new tab, sets a safe `rel` and shows the external-link icon. */
+    external?: boolean;
+    /** Removes the link from the tab order and blocks navigation, while still exposing it as a disabled link. */
+    disabled?: boolean;
+    /** Text announced with an `external` link to say that it opens a new tab. */
+    newTabLabel?: string;
+}
+/** Navigates somewhere rather than performing an action. For actions, use Button instead. */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

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

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

package/dist/components/MediaTile/MediaTile.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface MediaTileProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Image to show. Without it, the tile shows an empty placeholder. */
+    src?: string;
+    /** The name of the file. */
+    name: string;
+    /** A quieter line, such as its size. */
+    meta?: ReactNode;
+    /** Marks the tile as chosen. */
+    selected?: boolean;
+}
+/** A selectable thumbnail of a media file. A toggle button that states its selection with `aria-pressed`. */
+export declare const MediaTile: import("react").ForwardRefExoticComponent<MediaTileProps & import("react").RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'react';
+export type MenuProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The floating surface for a list of MenuItems. It is visual only and has no behaviour, so give it the `role` the
+ * content needs. For interactive lists use Select, MultiSelect or DropdownMenu.
+ */
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;