altitude-design 0.2.1 → 0.3.0

package/dist/types/input-otp.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface InputOTPProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'pattern' | 'children'> {
+    /** How many characters the code has. */
+    maxLength: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (code: string) => void;
+    /** Called when the last character lands, and again whenever a full code changes. */
+    onComplete?: (code: string) => void;
+    /** Which characters it takes. Default 'digits'. Anything else typed or pasted is dropped. */
+    pattern?: 'digits' | 'alphanumeric' | RegExp;
+    /** Show • instead of the characters. */
+    mask?: boolean;
+    invalid?: boolean;
+    /** The code is being checked: aria-busy, and nothing more can be typed. */
+    verifying?: boolean;
+    /** InputOTPGroup, InputOTPSlot and InputOTPSeparator. Default: one group of maxLength slots. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A one-time code as a row of openings that fill. One real input (inputmode numeric, autocomplete one-time-code) drives
+ * the slots, so autofill, paste and screen readers see one field; each slot is a well whose floor rises flush as its
+ * character lands, and a rejected code drops the whole row to a trench.
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
+/** Slots that sit together, parted from the next group by an InputOTPSeparator. */
+export declare function InputOTPGroup({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** One character's opening: a well whose floor rises flush when its character lands. */
+export declare function InputOTPSlot({ index, className }: {
+    index: number;
+    className?: string;
+}): React.JSX.Element;
+/** A decorative dash between groups. */
+export declare function InputOTPSeparator({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/types/item-group.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { EditRegionBinder, EditRegionSaveResult } from './edit-region.js';
+export type ItemGroupResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+};
+export type ItemGroupCreateResult<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    error: string;
+};
+/**
+ * How removal is recovered. There's no default: say whether the application can reverse it (immediate, with Undo)
+ * or needs confirmation first. A danger button doesn't imply irreversibility. A recoverable removal leaves a
+ * RemovalReceipt with Undo in the slat's place for dur-linger, then closes the gap and offers Undo in a toast (render
+ * a Toaster); a confirmed one glides the slat shut.
+ */
+export type ItemGroupRemoval<T> = {
+    kind: 'recoverable';
+    undo: (item: T) => void | Promise<unknown>;
+} | {
+    kind: 'confirm';
+    title: (item: T) => string;
+    description?: (item: T) => React.ReactNode;
+    confirmLabel?: string;
+};
+/** What renderItem gets. Spread editProps and removeProps onto visible Buttons: they carry the name, the handler and focus repair. */
+export interface ItemActionsApi {
+    edit: () => void;
+    remove: () => void;
+    editProps: {
+        onClick: () => void;
+        'aria-label': string;
+        'data-action': 'edit';
+    };
+    removeProps: {
+        onClick: () => void;
+        'aria-label': string;
+        'data-action': 'remove';
+    };
+}
+export interface ItemGroupProps<T extends Record<string, unknown>> {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    items: T[];
+    getKey: (item: T) => string;
+    /** Names actions (“Edit Production webhook”) and announcements. */
+    getLabel: (item: T) => string;
+    /** One slat. `edit` and `remove` open the editor and remove the item, with focus and recovery handled. */
+    renderItem: (item: T, actions: ItemActionsApi) => React.ReactNode;
+    /** The in-place editor's fields (EditRegion's draft binder). */
+    renderEditor?: (field: EditRegionBinder<T>, item: T | null) => React.ReactNode;
+    /** Save an edited item: the EditRegion contract. */
+    onSave?: (draft: T, context: {
+        previousValue: T;
+        changed: (keyof T)[];
+    }) => EditRegionSaveResult<T> | Promise<EditRegionSaveResult<T>>;
+    /** Publish a saved item's canonical record (a synchronous setter, no network). */
+    onItemChange?: (canonical: T) => void;
+    /** The draft for a new item. With onCreate, shows the add slat. */
+    newItem?: () => T;
+    /** Resolve after `items` includes the new item. */
+    onCreate?: (draft: T) => ItemGroupCreateResult<T> | Promise<ItemGroupCreateResult<T>>;
+    /** Default “Add item”. */
+    addLabel?: string;
+    /** Shows grips: Space to pick up, arrows to move, Space to drop. Resolve after `items` is in the new order. */
+    onReorder?: (next: T[]) => void | ItemGroupResult | Promise<void | ItemGroupResult>;
+    /** Resolve after `items` no longer includes it. */
+    onRemove?: (item: T) => void | ItemGroupResult | Promise<void | ItemGroupResult>;
+    removal?: ItemGroupRemoval<T>;
+    /** Shown when there are no items (an EmptyState). */
+    empty?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A list of slats changed in the list itself. Slats are the record, flush on the ground with line dividers. One slat
+ * at a time lifts into its editor (EditRegion), its neighbours flush and readable; the add slat is an opening; a slat
+ * picked up to reorder floats at level 3 over its slot. Removal follows the application's stated policy.
+ */
+export declare function ItemGroup<T extends Record<string, unknown>>({ items, getKey, getLabel, renderItem, renderEditor, onSave, onItemChange, newItem, onCreate, addLabel, onReorder, onRemove, removal, empty, className, ...aria }: ItemGroupProps<T>): React.JSX.Element;
+export declare function Item({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function ItemMedia({ variant, className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    variant?: 'icon' | 'image' | 'avatar';
+}): React.JSX.Element;
+export declare function ItemContent({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function ItemTitle({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** The item's secondary line. `truncate` clamps it to that many lines (true: one), so a long one never pushes the row. */
+export declare function ItemDescription({ className, truncate, style, ...rest }: React.HTMLAttributes<HTMLParagraphElement> & {
+    truncate?: boolean | number;
+}): React.JSX.Element;
+/** Visible actions (not hover-only). Give the item's Edit and Remove buttons data-action="edit" and "remove" for focus repair. */
+/**
+ * Visible actions (not hover-only). Give the item's Edit and Remove buttons data-action="edit" and "remove" for focus
+ * repair. `narrow` (#267): 'below' (default) moves them to their own row under the content when the group is narrow
+ * (under 480px), so they never squeeze the title; 'inline' keeps them beside it.
+ */
+export declare function ItemActions({ className, narrow, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    narrow?: 'below' | 'inline';
+}): React.JSX.Element;
+export declare function ItemSeparator({ className, ...rest }: React.HTMLAttributes<HTMLHRElement>): React.JSX.Element;

package/dist/types/line-chart.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { type ChartCompare, type ChartConfig, type ChartDatum, type ChartInfo, type ChartStatus } from './chart.js';
+export interface LineChartProps {
+    /** The records, in x order: one per time or value of x. */
+    data: ChartDatum[] | null | undefined | PromiseLike<ChartDatum[] | null>;
+    /** The key of each record's x: an ISO date, a timestamp or a number. */
+    x: string;
+    /** 'linear' joins points with straight lines; 'monotone' curves through them without overshooting. Default 'linear'. */
+    curve?: 'linear' | 'monotone';
+    /** Formats values (the axis, the readout, the names and the summary) of series that have no format of their own. */
+    y?: {
+        format?: (value: number) => string;
+    };
+    /** Name each line at its end. Default: on for up to four series, and always under forced colours and in print. */
+    endLabels?: boolean;
+    /** The crosshair and readout. Default true. */
+    tooltip?: boolean;
+    /**
+     * Which records aren't yet the record: 'partial' for a period still being counted, 'projected' for a forecast. The
+     * line is dashed from the last settled point on, its points hollow, and each says "So far" or "Projected".
+     */
+    status?: (d: ChartDatum) => ChartStatus | undefined;
+    /** The rule where the record ends: its word (default "Today"), or false for none. */
+    boundary?: string | false;
+    /**
+     * An uncertainty band around a series, from each record's `low` to its `high`: a flat, low-opacity fill of the
+     * series colour, never error bars and never a gradient. `label` names it in the readout (default "Range").
+     */
+    band?: {
+        low: string;
+        high: string;
+        series?: string;
+        label?: string;
+    };
+    /**
+     * Read each value against the record before (#189): `{ data: lastWeek, label: 'Last week' }` for records matched by
+     * position, or `{ key: 'lastWeek', label: 'Last week' }` for a field on the same record. The earlier period is a
+     * 1.5px solid ink-muted trace under the compared series (`series`, default the first), named at its end.
+     */
+    compare?: ChartCompare;
+    /**
+     * Let people pin a reading to the plot (#190): with the readout open, a click (or P on the keyboard path, or a tap
+     * while the touch readout is open) sets it down as a plate. true allows two, which compare in words; a number allows
+     * that many. Escape removes the last.
+     */
+    pinnable?: boolean | number;
+    /** The pinned readings' x values, controlled (to keep them in the URL, say); and when they change. */
+    pins?: Array<string | number>;
+    onPinsChange?: (pins: Array<string | number>) => void;
+    /**
+     * What the chart is about (#188): these series keep their colours and the rest are drawn in data-context, their
+     * labels in ink-muted. The author's statement of importance, not a reader's filter (that's relevance).
+     */
+    focus?: string[];
+    /**
+     * Filter in place: which records match. The line recedes to 35% around its misses (each record owns its stretch of
+     * x), keeping its place and colour; the frame says how many match. Nothing is removed.
+     */
+    relevance?: (d: ChartDatum) => 'match' | 'miss' | undefined;
+    /** With relevance: fit the axis to the matches. Default false: the axis holds, so positions survive. */
+    rescale?: boolean;
+    /** The selected record's x value, for marks you can select. The others recede; the frame says "Filtered to …". */
+    selected?: unknown;
+    /** Makes marks selectable: called with the chosen record, or null when the selection clears (Escape, Clear, or choosing it again). */
+    onSelect?: (d: ChartDatum | null) => void;
+    /** Makes marks open a level down, inside a Drilldown: return the id of the current node's child this record opens. */
+    drill?: (d: ChartDatum) => string | null | undefined;
+    /**
+     * Show only the latest stretch of x: `{ minutes: 15 }` (or `hours`, `days`) of time, or the last `points` records.
+     * In a `live` container, when the window moves on, x glides one step and the marks ride along with it.
+     */
+    window?: ChartWindow;
+    /** Called with the new { start, end } when a ChartBrush moves the window. Without `window`, the brush keeps its own. */
+    onWindowChange?: (window: {
+        start: string | number;
+        end: string | number;
+    }) => void;
+    /** A ChartTooltip, to change what the readout shows. */
+    /**
+     * 'banked' (#194): the plot takes the proportions that bank the lines' segments to 45° on average, so slopes read
+     * accurately, between 1 and 4 for the data area; the width is the card's. Use a fixed aspect in a grid of equal cards.
+     */
+    aspect?: 'banked';
+    children?: React.ReactNode;
+    /** What the plot says when there's no data: an EmptyState at widget size. */
+    empty?: import('./chart.js').ChartEmpty;
+}
+export interface ChartWindow {
+    minutes?: number;
+    hours?: number;
+    days?: number;
+    points?: number;
+    /** A fixed stretch of x, both ends included (a DateRange fits): what a ChartBrush sets. null leaves that end open. */
+    start?: string | number | null;
+    end?: string | number | null;
+}
+/** The records inside a sliding window, and the x domain the window spans. */
+export declare function windowed(data: ChartDatum[], x: string, w: ChartWindow | undefined): {
+    rows: ChartDatum[];
+    domain?: [number, number];
+};
+/**
+ * A path through points, broken wherever a value is missing: a null is a gap (nothing was recorded), never bridged.
+ * 'monotone' is a cubic through the points whose tangents never overshoot them (Fritsch–Carlson), so a curve never
+ * invents a peak or a dip the data doesn't have.
+ */
+export declare function linePath(points: Array<[number, number] | null>, curve?: 'linear' | 'monotone'): string;
+/**
+ * Change over time for one to four series. Lines are the record: 2px strokes in their series' colours, round joins,
+ * no fill, no glow. A missing value breaks the line. The last point carries a marker and each line is named at its
+ * end, so the legend is the lines themselves.
+ */
+export declare function LineChart({ curve, endLabels, band, compare }: LineChartProps): React.JSX.Element;
+export declare namespace LineChart {
+    var chartInfo: (props: Record<string, unknown>, config: ChartConfig) => ChartInfo;
+}

package/dist/types/link.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Leaves the app: opens in a new tab (rel="noopener noreferrer"), with an icon and "(opens in a new tab)" for screen readers. */
+    external?: boolean;
+    /** Styles your own link element (a router's Link) instead of rendering an <a>. Pass exactly one element. */
+    asChild?: boolean;
+    /** Mark links already followed: their underline turns ink-muted. Off by default; use it in long lists of documents. */
+    visited?: boolean;
+}
+/** Navigation in accent-ink with an underline. A link is text in the record, so it never lifts: hover thickens the underline. */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/markdown.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { CitationSource } from './inline-citation.js';
+/** The elements a caller can replace. `pre` gets the fenced code's parts rather than children. */
+export interface MarkdownComponents {
+    a?: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+    img?: React.ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    code?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
+    pre?: React.ComponentType<{
+        code: string;
+        language?: string;
+        streaming?: boolean;
+    }>;
+    table?: React.ComponentType<React.TableHTMLAttributes<HTMLTableElement>>;
+    blockquote?: React.ComponentType<React.BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+}
+export interface MarkdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The Markdown source: CommonMark, plus GFM tables, task lists, strikethrough and bare links. */
+    children: string;
+    /**
+     * The answer is still arriving: unfinished constructs render as unfinished, never as raw text. An open fence is a
+     * streaming CodeBlock, a table shows nothing until its delimiter row arrives and never a half-received row, and an
+     * unclosed `**`, backtick or link shows its text without the markers.
+     */
+    streaming?: boolean;
+    /** Sources for `[n]` markers, which render as InlineCitation (1-based). */
+    citations?: CitationSource[];
+    /** Passed to InlineCitation, as in Sources. */
+    idPrefix?: string;
+    /** Passed to every CodeBlock. */
+    syntax?: (code: string, language?: string) => React.ReactNode;
+    /** The element level of a `#` heading. Default 3, so an answer's headings sit under the conversation's. */
+    headingLevel?: number;
+    /** Replace the element used for a kind of node, e.g. `{ a: RouterLink }`. */
+    components?: MarkdownComponents;
+    /** Render raw HTML blocks from the source. Default false: they show as text. Only for sources you trust. */
+    allowHtml?: boolean;
+    /** Rewrite or refuse (undefined) a link or image URL. Default: refuses javascript:, vbscript:, file: and data: (except images). */
+    transformUrl?: (url: string, kind: 'link' | 'image') => string | undefined;
+}
+type Align = 'left' | 'center' | 'right' | undefined;
+type Block = {
+    t: 'p';
+    text: string;
+} | {
+    t: 'h';
+    depth: number;
+    text: string;
+} | {
+    t: 'hr';
+} | {
+    t: 'code';
+    lang?: string;
+    code: string;
+    open: boolean;
+} | {
+    t: 'quote';
+    children: Block[];
+} | {
+    t: 'list';
+    ordered: boolean;
+    start: number;
+    tight: boolean;
+    items: {
+        task?: boolean;
+        children: Block[];
+    }[];
+} | {
+    t: 'table';
+    align: Align[];
+    head: string[];
+    rows: string[][];
+} | {
+    t: 'html';
+    html: string;
+};
+export declare function safeUrl(url: string, kind: 'link' | 'image'): string | undefined;
+/** Parses Markdown into blocks; exported for tests and adapters. */
+export declare function parseMarkdown(source: string, { streaming, allowHtml }?: {
+    streaming?: boolean | undefined;
+    allowHtml?: boolean | undefined;
+}): Block[];
+/**
+ * An answer's Markdown, set as Altitude prose: the record's typography, adding no height. Code is CodeBlock, links are
+ * Link, `[n]` markers are InlineCitation, tables use Table's flush rows, images rise from an imprint. While
+ * `streaming`, unfinished constructs render as unfinished rather than as raw text.
+ */
+export declare const Markdown: React.ForwardRefExoticComponent<MarkdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/meter.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { ChartSlot } from './chart.js';
+export interface MeterSegment {
+    key: string;
+    label: string;
+    value: number;
+    /** The segment's colour slot. Default: its place in the list (data-1, data-2, …; a seventh and later are data-other). */
+    color?: ChartSlot;
+}
+export interface MeterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What's being measured: "Storage". It names the meter. */
+    label: React.ReactNode;
+    /** The reading. Undefined while your data loads: until it lands the track is an imprint. Ignored when `segments` is set (their sum is the reading). */
+    value?: number;
+    /** Default 0. */
+    min?: number;
+    /** Default 100. A reading above it is over the limit. */
+    max?: number;
+    /** From here the reading is near its limit: the fill turns caution and the meter says "Near limit". */
+    high?: number;
+    /** From here the reading is critical: the fill turns critical and the meter says "Over limit". Default: anything above `max`. */
+    critical?: number;
+    /** Parts of the whole (storage by type): flat data-* fills parted by 2px, with a legend of their values. */
+    segments?: MeterSegment[];
+    /** Formats readings: "62 GB". Default: Intl.NumberFormat. */
+    format?: (value: number) => string;
+    /** The words for each state. Default "Near limit" and "Over limit". */
+    states?: {
+        high?: string;
+        critical?: string;
+    };
+    /** Hide the "62 GB of 100 GB" text beside the label (it's still announced). */
+    hideValue?: boolean;
+    locale?: string;
+}
+/**
+ * Where a reading sits in a known range: storage of a quota, seats of a plan, CPU. A reading is the record, so the
+ * meter lies on the ground: a flush track with the reading drawn as flat ink across it (unlike Progress, whose fill
+ * rises out of a trench because a task under way is live). Thresholds are 1px notches at the track's rim; past them
+ * the fill turns caution or critical and the state is said in words, with a lamp that relights when it changes.
+ * Segments show parts of a whole, the honest replacement for a donut.
+ */
+export declare function Meter(props: MeterProps): React.JSX.Element;

package/dist/types/modal-state.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+export interface ModalProvider {
+    stage: HTMLElement | null;
+    parent: ModalProvider | null;
+    recede: boolean;
+    owners: Set<ModalOwner>;
+    legacy: Set<symbol>;
+}
+export declare const AltitudeContext: React.Context<{
+    host: HTMLElement | null;
+    provider: ModalProvider;
+} | null>;
+export declare const useAltitudeContext: () => {
+    host: HTMLElement | null;
+    provider: ModalProvider;
+} | null;
+export interface ModalOwner {
+    panel: HTMLElement;
+    root: HTMLElement;
+    provider: ModalProvider | null;
+    open: boolean;
+    modal: boolean;
+    summit: boolean;
+    background: 'recede' | 'stationary';
+    invoker: HTMLElement | null;
+    autoFocus: boolean;
+    restoreFocus: boolean;
+    focusSelector: string;
+    returnFocus?: () => HTMLElement | null;
+    retired: boolean;
+    lastFocus?: HTMLElement | null;
+}
+export declare function focusable(el: HTMLElement | null, doc?: Document): el is HTMLElement;
+export declare function tabbables(panel: HTMLElement): HTMLElement[];
+declare class ModalDocument {
+    readonly doc: Document;
+    owners: ModalOwner[];
+    active: ModalOwner | null;
+    inert: Map<HTMLElement, string | null>;
+    stages: Set<HTMLElement>;
+    legacyProviders: Set<ModalProvider>;
+    listeners: Set<() => void>;
+    observer: MutationObserver | null;
+    overflow: {
+        value: string;
+        priority: string;
+    } | null;
+    live: HTMLElement | null;
+    said: Set<number>;
+    constructor(doc: Document);
+    vote(provider: ModalProvider): () => void;
+    releaseProvider(provider: ModalProvider): void;
+    notify: () => void;
+    guard: (event: FocusEvent) => void;
+    subscribe: (fn: () => void) => () => void;
+    add(owner: ModalOwner): boolean;
+    remove(owner: ModalOwner): void;
+    reconcile(initial?: boolean): void;
+    announce(id: number, message: string): void;
+}
+export declare function modalDocument(doc: Document): ModalDocument;
+export {};

package/dist/types/nav.d.ts

@@ -3,10 +3,17 @@ export interface DrillNode {
     id: string;
     title: React.ReactNode;
     description?: React.ReactNode;
-    /** Leaf content. A node with children lists them instead. */
+    /**
+     * What the node shows. Without it, a node with children lists them. With both, the content shows and opens its
+     * children itself, as a chart does with `drill` (useDrilldown().open).
+     */
     content?: React.ReactNode;
     children?: DrillNode[];
 }
+/** Inside a Drilldown's content: open one of the current node's children by id, as its rows do. False if there's none. */
+export declare function useDrilldown(): {
+    open: (id: string) => boolean;
+} | null;
 export interface DrilldownProps extends React.HTMLAttributes<HTMLDivElement> {
     root: DrillNode;
 }

package/dist/types/notifications.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface NotificationEntry {
+    id: string;
+    title: React.ReactNode;
+    body?: React.ReactNode;
+    createdAt: Date | string | number;
+    read: boolean;
+    /** Where it leads. The item is a link, and opening it marks it read. */
+    href?: string;
+    /** Things to do about it ("Approve"), as Buttons. */
+    actions?: React.ReactNode;
+}
+export interface NotificationListProps {
+    items: NotificationEntry[];
+    onMarkRead?: (ids: string[]) => void;
+    onMarkAllRead?: () => void;
+    preferencesHref?: string;
+    /** 'day' (default) puts a heading before each day. */
+    groupBy?: 'day' | 'none';
+    locale?: string;
+    /** Called when an item that links is opened. */
+    onOpen?: (item: NotificationEntry) => void;
+    /** Ids that arrived while the list wasn't showing (NotificationCenter passes them), to arrive with the afterglow. */
+    fresh?: Set<string>;
+}
+/**
+ * The list itself, for a page or a panel. It's a record of what happened, so it lies on the ground. Unread is a mark,
+ * not a height: a dot, weight 600 and "Unread" in its name. A new notification arrives lifted and settles, as anything
+ * new does.
+ */
+export declare function NotificationList({ items, onMarkRead, onMarkAllRead, preferencesHref, groupBy, locale, onOpen, fresh: given }: NotificationListProps): React.JSX.Element;
+export interface NotificationCenterProps extends NotificationListProps {
+    /** Below this width the panel is a bottom Sheet. Default 640. */
+    mobileBreakpoint?: number;
+    className?: string;
+}
+/**
+ * A bell with a count that opens the list. The bell is live (a ghost button), the count floats (only a count wants
+ * you), the panel floats at level 3 (a Sheet at level 4 on narrow screens), and the list in it lies on the ground.
+ * New notifications are announced, batched, whether or not the panel is open.
+ */
+export declare function NotificationCenter({ mobileBreakpoint, className, ...list }: NotificationCenterProps): React.JSX.Element;

package/dist/types/number-input.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/** Reads what was typed in the locale's own way: "1.000,5" is 1000.5 in German. Returns null for nothing, NaN for nonsense. */
+export declare function parseNumber(text: string, locale?: string): number | null;
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'min' | 'max' | 'step'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called with the parsed value when it's committed (on blur, Enter, a step or a stepper), or null when cleared. */
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Default 1. Shift+arrow, PageUp and PageDown move ten steps. */
+    step?: number;
+    /** Intl.NumberFormat options: `{ style: 'unit', unit: 'day' }`, `{ style: 'currency', currency: 'EUR' }`, `{ style: 'percent' }` (the value is a fraction). The unit is shown beside the number and spoken with it. */
+    format?: Intl.NumberFormatOptions;
+    /** Default: the browser's. Parsing follows it: "1.000,5" in de-DE. */
+    locale?: string;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    /** The scroll wheel steps the value while the field is focused. Default false. */
+    wheel?: boolean;
+    /** The steppers' names. Default "Increase" and "Decrease". Say what: "Increase seats". */
+    incrementLabel?: string;
+    decrementLabel?: string;
+}
+/**
+ * A number field: an opening that fills, with two small raised steppers in its end cap (push up, fill down). It reads
+ * what's typed in the locale's own way, clamps to min and max when committed, and is a spinbutton with its unit in
+ * aria-valuetext. The steppers aren't tab stops: the arrow keys step.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;