panelui-web 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,189 @@
+/**
+ * Frame — a widget shell: a panel of rows sitting in a tray, with the tray's
+ * one exposed strip along the top carrying the title.
+ *
+ * ```tsx
+ * <Frame>
+ *   <Frame.Header>
+ *     <Frame.Title>Deploys</Frame.Title>
+ *     <Frame.Action>Last 24 hours</Frame.Action>
+ *   </Frame.Header>
+ *   <Frame.Panel>
+ *     <Frame.Row>
+ *       <Frame.Media><RocketIcon /></Frame.Media>
+ *       <Frame.Content>
+ *         <Frame.Title>main · a41c2e9</Frame.Title>
+ *         <Frame.Description>Production · 2 minutes ago</Frame.Description>
+ *       </Frame.Content>
+ *       <Frame.Actions><Badge>Ready</Badge></Frame.Actions>
+ *     </Frame.Row>
+ *   </Frame.Panel>
+ * </Frame>
+ * ```
+ *
+ * ## Two surfaces, one exposed edge
+ *
+ * The panel sits flush against the shell's left, right and bottom, so the
+ * shell reads as something the panel is set into rather than as a border
+ * round it — and the strip left at the top is the header, which is why the
+ * header needs no rule under it and no background of its own. The panel's
+ * bottom corners are not drawn at all: the shell clips them to its own radius.
+ *
+ * ## Four ways to nest them
+ *
+ * `default` is the tray. `band` holds a bordered card in a thin muted band,
+ * with the band's top strip naming what is inside — the frame for a widget
+ * with one thing to show, a figure or a chart, rather than a list of rows.
+ * `inset` floats the panel clear of the shell on all four sides, at the radius
+ * that keeps the two curves concentric, and the band left round it is a recess
+ * — darker than the panel in a light theme and a dark one alike — that
+ * `Frame.Footer` puts its actions in. `plain` drops the shell, for a frame
+ * inside something that already draws an edge, where a second one just inside
+ * it reads as a double line.
+ *
+ * ## Rows divide themselves
+ *
+ * The panel draws the hairline between its children, so no row has to know
+ * whether it is first. A row with `href` is a link and one with `onClick` is a
+ * button, each with the hover and focus a pressable row should have, and
+ * `chevron` marks one that leads somewhere.
+ *
+ * ## It renders on the server
+ *
+ * The variant reaches the parts through a data attribute and CSS rather than
+ * through context, so a frame has no client JavaScript of its own.
+ */
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+export type FrameVariant = 'default' | 'band' | 'inset' | 'plain';
+export interface FrameProps extends ComponentProps<'div'> {
+    /**
+     * `default` sets the panel in a tray. `band` holds a bordered card in a
+     * thin muted band, for a widget showing one figure or chart. `inset` floats
+     * the panel in a recessed band and gives `Frame.Footer` somewhere to sit.
+     * `plain` drops the shell, for a frame inside a container that already draws
+     * its own edge.
+     */
+    variant?: FrameVariant;
+}
+declare function FrameRoot({ variant, className, ...props }: FrameProps): import("react").JSX.Element;
+declare namespace FrameRoot {
+    var displayName: string;
+}
+export interface FrameHeaderProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+declare function FrameHeader({ className, ...props }: FrameHeaderProps): import("react").JSX.Element;
+declare namespace FrameHeader {
+    var displayName: string;
+}
+export interface FrameTitleProps extends ComponentProps<'h3'> {
+    /** The heading level in a header. Default `h3`; a row title is always a `p`. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+/** A caption in the header; the subject line inside `Frame.Content`. */
+declare function FrameTitle({ as: Tag, className, ...props }: FrameTitleProps): import("react").JSX.Element;
+declare namespace FrameTitle {
+    var displayName: string;
+}
+export interface FrameDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under a title, in the header or in a row. */
+declare function FrameDescription({ className, ...props }: FrameDescriptionProps): import("react").JSX.Element;
+declare namespace FrameDescription {
+    var displayName: string;
+}
+export interface FrameActionProps extends ComponentProps<'div'> {
+}
+/** The header's trailing side: a short status, a link, a small button. */
+declare function FrameAction({ className, ...props }: FrameActionProps): import("react").JSX.Element;
+declare namespace FrameAction {
+    var displayName: string;
+}
+export interface FramePanelProps extends ComponentProps<'div'> {
+}
+/** The card the rows sit on. It draws the hairline between its children. */
+declare function FramePanel({ className, ...props }: FramePanelProps): import("react").JSX.Element;
+declare namespace FramePanel {
+    var displayName: string;
+}
+export interface FrameRowProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** Make the row a link to this address. */
+    href?: string;
+    /** Where a link row opens, as on an `<a>`. */
+    target?: string;
+    /** The relationship of a link row's target, as on an `<a>`. */
+    rel?: string;
+    /** Make the row a button that calls this. Ignored when `href` is set. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** A trailing chevron, for a row that leads somewhere. */
+    chevron?: boolean;
+}
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+declare function FrameRow({ className, children, chevron, href, target, rel, ...props }: FrameRowProps): import("react").JSX.Element;
+declare namespace FrameRow {
+    var displayName: string;
+}
+export interface FrameMediaProps extends ComponentProps<'div'> {
+}
+/** A row's leading icon, avatar or picture. Holds its size. */
+declare function FrameMedia({ className, ...props }: FrameMediaProps): import("react").JSX.Element;
+declare namespace FrameMedia {
+    var displayName: string;
+}
+export interface FrameContentProps extends ComponentProps<'div'> {
+}
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+declare function FrameContent({ className, ...props }: FrameContentProps): import("react").JSX.Element;
+declare namespace FrameContent {
+    var displayName: string;
+}
+export interface FrameActionsProps extends ComponentProps<'div'> {
+}
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+declare function FrameActions({ className, ...props }: FrameActionsProps): import("react").JSX.Element;
+declare namespace FrameActions {
+    var displayName: string;
+}
+export interface FrameSectionProps extends Omit<ComponentProps<'section'>, 'title'> {
+    /** The heading over the section's rows. */
+    title?: ReactNode;
+}
+/** A labelled group of rows, for a panel holding more than one. */
+declare function FrameSection({ title, className, children, ...props }: FrameSectionProps): import("react").JSX.Element;
+declare namespace FrameSection {
+    var displayName: string;
+}
+export interface FrameFooterProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+declare function FrameFooter({ className, ...props }: FrameFooterProps): import("react").JSX.Element;
+declare namespace FrameFooter {
+    var displayName: string;
+}
+export declare const Frame: typeof FrameRoot & {
+    Header: typeof FrameHeader;
+    Title: typeof FrameTitle;
+    Description: typeof FrameDescription;
+    Action: typeof FrameAction;
+    Panel: typeof FramePanel;
+    Row: typeof FrameRow;
+    Media: typeof FrameMedia;
+    Content: typeof FrameContent;
+    Actions: typeof FrameActions;
+    Section: typeof FrameSection;
+    Footer: typeof FrameFooter;
+};
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

package/dist/components/frame/index.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+/*
+ * `inset` geometry. The panel's radius is the shell's less the shell's padding,
+ * so the two curves are concentric — a panel radius that ignored the band
+ * would leave a crescent of shell thicker at the corners than along the sides.
+ */
+const frameVariants = tv({
+    slots: {
+        root: 'group/frame flex flex-col text-foreground',
+        header: [
+            'grid grid-cols-[minmax(0,1fr)] items-center gap-x-3 gap-y-0.5 px-4 pt-2.5 pb-3',
+            'has-data-[slot=frame-action]:grid-cols-[minmax(0,1fr)_auto]',
+            'group-data-[variant=inset]/frame:px-3 group-data-[variant=inset]/frame:pt-1 group-data-[variant=inset]/frame:pb-2.5',
+            'group-data-[variant=plain]/frame:px-1',
+            'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:py-2.5',
+        ],
+        /*
+         * One part in two places. In the header it labels the tray, so it stays
+         * quiet; inside a row's content it is the row's subject, so it takes the
+         * foreground and the weight, and truncates rather than pushing the row's
+         * trailing slot out of view.
+         */
+        title: [
+            'text-sm font-medium text-muted-foreground',
+            'in-data-[slot=frame-content]:truncate in-data-[slot=frame-content]:text-foreground',
+            // A band names one thing rather than captioning a list, so its title reads first.
+            'group-data-[variant=band]/frame:text-foreground',
+        ],
+        description: 'text-sm text-muted-foreground in-data-[slot=frame-content]:truncate',
+        action: 'col-start-2 row-span-2 row-start-1 text-sm text-muted-foreground',
+        // The panel's shape follows the root's variant, read from its data attribute.
+        panel: [
+            'flex flex-col divide-y overflow-hidden bg-card text-card-foreground',
+            'group-data-[variant=default]/frame:rounded-t-2xl group-data-[variant=default]/frame:border-t',
+            'group-data-[variant=plain]/frame:rounded-3xl group-data-[variant=plain]/frame:border group-data-[variant=plain]/frame:shadow-xs',
+            'group-data-[variant=inset]/frame:rounded-[30px] group-data-[variant=inset]/frame:bg-popover group-data-[variant=inset]/frame:text-popover-foreground group-data-[variant=inset]/frame:shadow-xs',
+            // 18px is the band's 24 less its 6px of padding: one corner, two curves.
+            'group-data-[variant=band]/frame:rounded-[1.125rem] group-data-[variant=band]/frame:border group-data-[variant=band]/frame:shadow-xs',
+        ],
+        row: 'flex w-full items-center gap-3 px-4 py-3 text-start',
+        rowPressable: [
+            'cursor-pointer outline-none transition-colors hover:bg-muted/60',
+            'focus-visible:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+        ],
+        chevron: 'size-4 shrink-0 text-muted-foreground/70 rtl:-scale-x-100',
+        media: 'flex shrink-0 items-center justify-center',
+        content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+        actions: 'flex shrink-0 items-center gap-1.5',
+        section: 'flex flex-col divide-y',
+        sectionTitle: 'bg-muted/40 px-4 pt-2.5 pb-1.5 text-xs font-medium uppercase tracking-wider text-muted-foreground',
+        footer: [
+            'flex items-center gap-2 px-4 pt-3 pb-3.5',
+            // Under `inset` the band is a row of equal decisions: equal widths, full pills.
+            'group-data-[variant=inset]/frame:gap-3.5 group-data-[variant=inset]/frame:px-[18px] group-data-[variant=inset]/frame:pt-4 group-data-[variant=inset]/frame:pb-2.5',
+            'group-data-[variant=inset]/frame:*:h-11 group-data-[variant=inset]/frame:*:flex-1 group-data-[variant=inset]/frame:*:rounded-full',
+            'group-data-[variant=plain]/frame:px-1',
+            'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:pt-2.5 group-data-[variant=band]/frame:pb-1',
+        ],
+    },
+    variants: {
+        variant: {
+            default: {
+                // `overflow-hidden` is what gives the panel the shell's bottom corners.
+                root: 'overflow-hidden rounded-3xl border bg-muted',
+            },
+            plain: {},
+            band: {
+                root: 'rounded-3xl bg-muted p-1.5',
+            },
+            inset: {
+                // The band is the popover surface with black mixed in, so it is the
+                // darker of the two in either theme, which a step on a grey scale
+                // cannot promise: those run darker one way and lighter the other.
+                root: [
+                    'rounded-[38px] p-2 ring-1 ring-foreground/[0.06]',
+                    'bg-[color-mix(in_oklab,var(--popover),black_5%)] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+                ],
+            },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function FrameRoot({ variant = 'default', className, ...props }) {
+    const slots = frameVariants({ variant });
+    return _jsx("div", { "data-slot": "frame", "data-variant": variant, className: slots.root({ className }), ...props });
+}
+FrameRoot.displayName = 'Frame';
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+function FrameHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-header", className: frameVariants().header({ className }), ...props });
+}
+FrameHeader.displayName = 'Frame.Header';
+/** A caption in the header; the subject line inside `Frame.Content`. */
+function FrameTitle({ as: Tag = 'h3', className, ...props }) {
+    return _jsx(Tag, { "data-slot": "frame-title", className: frameVariants().title({ className }), ...props });
+}
+FrameTitle.displayName = 'Frame.Title';
+/** A line under a title, in the header or in a row. */
+function FrameDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "frame-description", className: frameVariants().description({ className }), ...props }));
+}
+FrameDescription.displayName = 'Frame.Description';
+/** The header's trailing side: a short status, a link, a small button. */
+function FrameAction({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-action", className: frameVariants().action({ className }), ...props });
+}
+FrameAction.displayName = 'Frame.Action';
+/** The card the rows sit on. It draws the hairline between its children. */
+function FramePanel({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-panel", className: frameVariants().panel({ className }), ...props });
+}
+FramePanel.displayName = 'Frame.Panel';
+const Chevron = ({ className }) => (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+function FrameRow({ className, children, chevron = false, href, target, rel, ...props }) {
+    const slots = frameVariants();
+    const inside = (_jsxs(_Fragment, { children: [children, chevron ? _jsx(Chevron, { className: slots.chevron() }) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { "data-slot": "frame-row", href: href, target: target, rel: rel, className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    // `onClick` stays in `props`, so it reaches whichever element is rendered.
+    if (props.onClick !== undefined) {
+        return (_jsx("button", { type: "button", "data-slot": "frame-row", className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    return (_jsx("div", { "data-slot": "frame-row", className: slots.row({ className }), ...props, children: inside }));
+}
+FrameRow.displayName = 'Frame.Row';
+/** A row's leading icon, avatar or picture. Holds its size. */
+function FrameMedia({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-media", className: frameVariants().media({ className }), ...props });
+}
+FrameMedia.displayName = 'Frame.Media';
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+function FrameContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-content", className: frameVariants().content({ className }), ...props });
+}
+FrameContent.displayName = 'Frame.Content';
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+function FrameActions({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-actions", className: frameVariants().actions({ className }), ...props });
+}
+FrameActions.displayName = 'Frame.Actions';
+/** A labelled group of rows, for a panel holding more than one. */
+function FrameSection({ title, className, children, ...props }) {
+    const slots = frameVariants();
+    return (_jsxs("section", { "data-slot": "frame-section", className: slots.section({ className }), ...props, children: [title !== undefined ? _jsx("h4", { className: slots.sectionTitle(), children: title }) : null, children] }));
+}
+FrameSection.displayName = 'Frame.Section';
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+function FrameFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-footer", className: frameVariants().footer({ className }), ...props });
+}
+FrameFooter.displayName = 'Frame.Footer';
+export const Frame = Object.assign(FrameRoot, {
+    Header: FrameHeader,
+    Title: FrameTitle,
+    Description: FrameDescription,
+    Action: FrameAction,
+    Panel: FramePanel,
+    Row: FrameRow,
+    Media: FrameMedia,
+    Content: FrameContent,
+    Actions: FrameActions,
+    Section: FrameSection,
+    Footer: FrameFooter,
+});
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

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

@@ -0,0 +1,211 @@
+/**
+ * Kpi — one number, and what it is doing.
+ *
+ * ```tsx
+ * <Kpi>
+ *   <Kpi.Header>
+ *     <Kpi.Title>Subscribers</Kpi.Title>
+ *   </Kpi.Header>
+ *   <Kpi.Content>
+ *     <Kpi.Value>18,240</Kpi.Value>
+ *     <Kpi.Trend value={6.4} />
+ *   </Kpi.Content>
+ *   <Kpi.Chart data={month} />
+ * </Kpi>
+ * ```
+ *
+ * ## The number is the message
+ *
+ * A metric card is not a chart with a caption. The parts are sized and ordered
+ * round the number: a title that stays quiet, a value that does not, a trend
+ * that says which way and by how much, and a sparkline that is allowed to be
+ * small because nobody reads values off it.
+ *
+ * ## The trend is given a number
+ *
+ * `Kpi.Trend` takes the change as a number and decides the sign and the colour
+ * itself, so a minus sign and a red cannot fall out of step at the call site.
+ * Where a rise is the bad news, such as churn, latency or cost, say so with
+ * `goodDirection="down"` and the colour follows the meaning and not the sign.
+ *
+ * ## The same parts as the app
+ *
+ * The parts and their names are the app library's Kpi, so a metric written for
+ * one reads the same in the other. Two things differ because the platform
+ * does: the chart takes a plain list of numbers, and colours are named by the
+ * theme's roles as everywhere in this collection.
+ *
+ * ## Not a client module
+ *
+ * It holds no state and handles no events, so there is no `'use client'` at
+ * the top. A Server Component can render it, dotted parts and all, and it
+ * adds nothing to the JavaScript a page sends.
+ */
+import type { ComponentProps, ReactNode } from 'react';
+/** Which of the theme's roles a chart or a bar is drawn in. */
+export type KpiColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+/** Which direction of movement is the good news for this metric. */
+export type KpiGoodDirection = 'up' | 'down' | 'none';
+/** How a part is coloured once the metric's polarity has been applied. */
+export type KpiTone = 'good' | 'bad' | 'flat' | 'neutral';
+export interface KpiProps extends ComponentProps<'div'> {
+    /** Draws the metric as a card of its own. Leave it off inside a frame or a group. */
+    surface?: boolean;
+}
+declare function KpiRoot({ surface, className, ...props }: KpiProps): import("react").JSX.Element;
+declare namespace KpiRoot {
+    var displayName: string;
+}
+export interface KpiHeaderProps extends ComponentProps<'div'> {
+}
+/** The row over the number: an icon, the title, and anything at the end. */
+declare function KpiHeader({ className, ...props }: KpiHeaderProps): import("react").JSX.Element;
+declare namespace KpiHeader {
+    var displayName: string;
+}
+export interface KpiIconProps extends ComponentProps<'span'> {
+    /** How the tile is coloured: by good or bad news, or left neutral. */
+    tone?: KpiTone;
+}
+/** A small tile for an icon, at the start of the header. */
+declare function KpiIcon({ tone, className, ...props }: KpiIconProps): import("react").JSX.Element;
+declare namespace KpiIcon {
+    var displayName: string;
+}
+export interface KpiTitleProps extends ComponentProps<'div'> {
+}
+/** What the number measures. */
+declare function KpiTitle({ className, ...props }: KpiTitleProps): import("react").JSX.Element;
+declare namespace KpiTitle {
+    var displayName: string;
+}
+export interface KpiActionsProps extends ComponentProps<'div'> {
+}
+/** Whatever belongs at the end of the header: a period, a badge, a button. */
+declare function KpiActions({ className, ...props }: KpiActionsProps): import("react").JSX.Element;
+declare namespace KpiActions {
+    var displayName: string;
+}
+export interface KpiContentProps extends ComponentProps<'div'> {
+    /** `inline` puts a chart beside the number in a fixed box; `below` leaves it under everything. */
+    layout?: 'below' | 'inline';
+}
+/** The row the number is in, with a trend or a chart at its other end. */
+declare function KpiContent({ layout, className, ...props }: KpiContentProps): import("react").JSX.Element;
+declare namespace KpiContent {
+    var displayName: string;
+}
+export interface KpiStatProps extends ComponentProps<'div'> {
+}
+/** Title, value and trend stacked as one block, for a row with a chart beside it. */
+declare function KpiStat({ className, ...props }: KpiStatProps): import("react").JSX.Element;
+declare namespace KpiStat {
+    var displayName: string;
+}
+export interface KpiValueProps extends ComponentProps<'div'> {
+}
+/** The number. */
+declare function KpiValue({ className, ...props }: KpiValueProps): import("react").JSX.Element;
+declare namespace KpiValue {
+    var displayName: string;
+}
+export interface KpiTrendProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** The change. Its sign decides the direction. */
+    value: number;
+    /** Writes the change. Defaults to a signed percentage with one decimal: "+7.8%". */
+    format?: (value: number) => string;
+    /** Which direction is the good news. `down` for churn, latency, cost; `none` for no colour. */
+    goodDirection?: KpiGoodDirection;
+    /** `text` is a line of colour; `badge` puts a pill and an arrow round it. */
+    variant?: 'text' | 'badge';
+    /** Quiet words after the change: "this month". */
+    caption?: string;
+    /** A change this small or smaller is drawn as no change. */
+    threshold?: number;
+}
+/**
+ * The change. Colour comes from what the movement means, not from its sign: a
+ * fall in churn is good news and is drawn as good news.
+ */
+declare function KpiTrend({ value, format, goodDirection, variant, caption, threshold, className, ...props }: KpiTrendProps): import("react").JSX.Element;
+declare namespace KpiTrend {
+    var displayName: string;
+}
+export interface KpiChartProps extends Omit<ComponentProps<'svg'>, 'children' | 'color'> {
+    /** The values, oldest first. */
+    data: number[];
+    /** Which of the theme's roles the line is drawn in. */
+    color?: KpiColor;
+    /** Fills under the line with a wash of the same colour. */
+    filled?: boolean;
+    /** How tall the chart is, in pixels. */
+    height?: number;
+    /**
+     * A fixed box for the end of a `layout="inline"` row. Charts beside numbers
+     * of different lengths are then all one width, and line up down a column.
+     */
+    inline?: boolean;
+    /** How thick the line is, in pixels. */
+    strokeWidth?: number;
+}
+/** The sparkline: the shape of the number over time, with no axis and no values. */
+declare function KpiChart({ data, color, filled, height, inline, strokeWidth, className, style, ...props }: KpiChartProps): import("react").JSX.Element;
+declare namespace KpiChart {
+    var displayName: string;
+}
+export interface KpiProgressProps extends Omit<ComponentProps<'div'>, 'children' | 'color'> {
+    /** How far along. */
+    value: number;
+    /** What `value` is out of. */
+    maxValue?: number;
+    /** Words at the start of the row over the bar: "of 5,000". */
+    label?: ReactNode;
+    /** Writes the percentage at the end of the row over the bar. */
+    showValueLabel?: boolean;
+    /** Which of the theme's roles the bar is drawn in. */
+    color?: KpiColor;
+}
+/** Progress towards a target, under the number. */
+declare function KpiProgress({ value, maxValue, label, showValueLabel, color, className, ...props }: KpiProgressProps): import("react").JSX.Element;
+declare namespace KpiProgress {
+    var displayName: string;
+}
+export interface KpiFooterProps extends ComponentProps<'div'> {
+}
+/** A quiet line under everything: when it was measured, how long is left. */
+declare function KpiFooter({ className, ...props }: KpiFooterProps): import("react").JSX.Element;
+declare namespace KpiFooter {
+    var displayName: string;
+}
+export interface KpiSeparatorProps extends ComponentProps<'div'> {
+}
+/** A rule between two parts of one card. */
+declare function KpiSeparator({ className, ...props }: KpiSeparatorProps): import("react").JSX.Element;
+declare namespace KpiSeparator {
+    var displayName: string;
+}
+export interface KpiGroupProps extends ComponentProps<'div'> {
+    /** Side by side with upright rules, or stacked with level ones. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Several metrics as one panel, with a rule between each and the next. */
+declare function KpiGroup({ orientation, className, ...props }: KpiGroupProps): import("react").JSX.Element;
+declare namespace KpiGroup {
+    var displayName: string;
+}
+export declare const Kpi: typeof KpiRoot & {
+    Header: typeof KpiHeader;
+    Icon: typeof KpiIcon;
+    Title: typeof KpiTitle;
+    Actions: typeof KpiActions;
+    Content: typeof KpiContent;
+    Stat: typeof KpiStat;
+    Value: typeof KpiValue;
+    Trend: typeof KpiTrend;
+    Chart: typeof KpiChart;
+    Progress: typeof KpiProgress;
+    Footer: typeof KpiFooter;
+    Separator: typeof KpiSeparator;
+    Group: typeof KpiGroup;
+};
+export { KpiHeader, KpiIcon, KpiTitle, KpiActions, KpiContent, KpiStat, KpiValue, KpiTrend, KpiChart, KpiProgress, KpiFooter, KpiSeparator, KpiGroup, };