@peasant-labs/fairtrade 0.0.1 → 0.0.3

package/dist/lib/types/Accordion.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @typedef {Object} AccordionItem
+ * @property {string} id        stable id for the item (used for the header/region aria wiring)
+ * @property {React.ReactNode} title  the header's visible label (not force-lowercased)
+ * @property {React.ComponentType<any>} [icon]  optional leading lucide icon component (e.g. icon={Boxes})
+ * @property {React.ReactNode} content  the panel body, shown when the item is open
+ */
+/**
+ * Accordion - a stack of collapsible, hairline panels.
+ *
+ * Uncontrolled only (manages its own open set seeded from `defaultOpen`). With
+ * allowMultiple=false (default) opening one item closes the others; with
+ * allowMultiple=true any number may be open at once.
+ *
+ * @param {Object} props
+ * @param {AccordionItem[]} props.items                 the items to render (each needs a unique id)
+ * @param {string|string[]} [props.defaultOpen]         id(s) open on mount; a lone string or an array.
+ *        when allowMultiple is false only the first matching id is honoured (default: none open)
+ * @param {boolean} [props.allowMultiple=false]         allow several items open simultaneously
+ * @param {number} [props.headingLevel=3]               heading level (1-6) for each item header,
+ *        so the accordion fits the surrounding document outline (default: h3)
+ * @param {string} [props['aria-label']]                accessible name for the accordion group
+ */
+export default function Accordion({ items, defaultOpen, allowMultiple, headingLevel, "aria-label": ariaLabel }: {
+    items: AccordionItem[];
+    defaultOpen?: string | string[];
+    allowMultiple?: boolean;
+    headingLevel?: number;
+}): any;
+export type AccordionItem = {
+    /**
+     * stable id for the item (used for the header/region aria wiring)
+     */
+    id: string;
+    /**
+     * the header's visible label (not force-lowercased)
+     */
+    title: React.ReactNode;
+    /**
+     * optional leading lucide icon component (e.g. icon={Boxes})
+     */
+    icon?: React.ComponentType<any>;
+    /**
+     * the panel body, shown when the item is open
+     */
+    content: React.ReactNode;
+};

package/dist/lib/types/Avatar.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @typedef {'sm' | 'md' | 'lg'} AvatarSize
+ */
+/**
+ * a single avatar tile: initials, or a photo with the initials as the fallback beneath it.
+ * the base .avatar is 18px (inline meta); size scales it up for standalone use.
+ *
+ * @param {object} props
+ * @param {string} props.name - the person's name; used as the accessible label and to derive initials when none are given.
+ * @param {string} [props.initials] - explicit initials to render; defaults to the first letters of `name`.
+ * @param {AvatarSize} [props.size] - one of 'sm' | 'md' | 'lg' (24 / 32 / 44px). omit for the bare 18px base.
+ * @param {string} [props.src] - optional photo url; when set the tile becomes an .av-img with the photo over the initials.
+ * @param {boolean} [props.more] - render the amber "+N overflow" tile (.av-more); `initials` carries the "+5" text.
+ * @param {string} [props.className] - extra class names appended after the avatar classes.
+ */
+export function Avatar({ name, initials, size, src, more, className, ...rest }: {
+    name: string;
+    initials?: string;
+    size?: AvatarSize;
+    src?: string;
+    more?: boolean;
+    className?: string;
+}): any;
+/**
+ * a stacked, overlapping run of avatars with an optional +N overflow tile.
+ * pass <Avatar> children directly; the .av-group nth-child rules handle overlap + z-order.
+ *
+ * @param {object} props
+ * @param {string} props.label - accessible name for the group (e.g. "9 contributors").
+ * @param {React.ReactNode} props.children - the <Avatar> tiles (include an `more` avatar last for overflow).
+ * @param {string} [props.className] - extra class names appended after .av-group.
+ */
+export function AvatarGroup({ label, children, className, ...rest }: {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+}): any;
+/**
+ * a real <kbd> styled as a single keyboard key. accepts text children or a lucide icon (e.g. icon={ArrowUp}).
+ * the CSS sizes the icon (.kbd-key .lucide), so render it plainly.
+ *
+ * @param {object} props
+ * @param {React.ComponentType} [props.icon] - a lucide icon component reference, rendered in place of text.
+ * @param {string} [props.label] - accessible name for an icon-only key (the glyph is aria-hidden, so a bare icon key would otherwise announce empty).
+ * @param {React.ReactNode} [props.children] - the key label (e.g. "esc", "enter", "K").
+ * @param {string} [props.className] - extra class names appended after .kbd-key.
+ */
+export function Kbd({ icon: Icon, label, children, className, ...rest }: {
+    icon?: React.ComponentType;
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+}): any;
+/**
+ * a keyboard chord: several <Kbd> keys joined by a faint, aria-hidden "+" that is not itself a key.
+ * the spoken form lives in `label` (e.g. "command k"); the visible "+" is decorative.
+ *
+ * @param {object} props
+ * @param {string} props.label - the accessible spelling of the chord (e.g. "control shift p").
+ * @param {React.ReactNode} props.children - the <Kbd> keys to join.
+ * @param {string} [props.className] - extra class names appended after .kbd-chord.
+ */
+export function KbdChord({ label, children, className, ...rest }: {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+}): any;
+/**
+ * a tag / label token. may carry a leading swatch dot (color pairs with the word, never color alone),
+ * a leading lucide icon, a selected (amber) state, and an optional dismiss button.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children - the tag label (sentence/case passed in is preserved; chrome is lowercased by CSS).
+ * @param {string} [props.brand] - a provider/company name (claude, gemini, openai, cursor, opencode, or an alias).
+ *        When the tag names a company, pass this instead of `icon`: it leads with the real brand mark, never a generic glyph.
+ * @param {React.ComponentType} [props.icon] - a lucide icon component reference rendered before the label (ignored when `brand` is set).
+ * @param {string} [props.dot] - a color value for the leading swatch dot (set as --tag-c).
+ * @param {boolean} [props.selected] - apply the amber .tag-on state.
+ * @param {() => void} [props.onRemove] - when set, render a real, labelled remove button (.tag-x).
+ * @param {string} [props.removeLabel] - accessible label for the remove button; falls back to "remove tag".
+ * @param {string} [props.className] - extra class names appended after .tag.
+ */
+export function Tag({ children, brand, icon: Icon, dot, selected, onRemove, removeLabel, className, ...rest }: {
+    children: React.ReactNode;
+    brand?: string;
+    icon?: React.ComponentType;
+    dot?: string;
+    selected?: boolean;
+    onRemove?: () => void;
+    removeLabel?: string;
+    className?: string;
+}): any;
+export default Avatar;
+export type AvatarSize = "sm" | "md" | "lg";

package/dist/lib/types/BrandMark.d.ts

@@ -0,0 +1,25 @@
+/**
+ * resolve any accepted name/alias to a canonical mark key, or null when unknown.
+ * @param {string} name
+ * @returns {('claude'|'gemini'|'openai'|'cursor'|'opencode')|null}
+ */
+export function resolveBrand(name: string): ("claude" | "gemini" | "openai" | "cursor" | "opencode") | null;
+/**
+ * BrandMark - a single-color, currentColor-tinted company/provider logo.
+ *
+ * @param {object} props
+ * @param {'claude'|'gemini'|'openai'|'cursor'|'opencode'|'anthropic'|'google'|'codex'|string} props.name
+ *        the company/product; aliases resolve (anthropic->claude, google->gemini, codex->openai).
+ * @param {number} [props.size] explicit px size; omit to inherit the contextual icon-token size
+ *        from the `.brand` rules in src/index.css (so a mark in a chip/tag/button matches its neighbours).
+ * @param {string} [props.label] when set, the mark is INFORMATIVE: role="img" + this aria-label.
+ *        omit when a visible text label already names the provider (the mark is then decorative).
+ * @param {string} [props.className] extra classes appended after `.brand`.
+ * @returns {JSX.Element|null} null when `name` does not resolve to a known mark.
+ */
+export default function BrandMark({ name, size, label, className, ...rest }: {
+    name: "claude" | "gemini" | "openai" | "cursor" | "opencode" | "anthropic" | "google" | "codex" | string;
+    size?: number;
+    label?: string;
+    className?: string;
+}): JSX.Element | null;

package/dist/lib/types/Breadcrumb.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @typedef {Object} CrumbItem
+ * @property {string} label - the crumb text
+ * @property {string} [href] - optional link target; when present the crumb renders as an <a>
+ * @property {React.ComponentType<{className?: string}>} [icon] - optional leading lucide icon component (e.g. icon={Folder})
+ */
+/**
+ * Breadcrumb — names the path back. Items are joined by ChevronRight separators;
+ * the last item is marked `.cur` (bold ink) as the current location.
+ *
+ * Emits `<nav><div class="crumb">…</div></nav>` matching src/index.css with zero new CSS.
+ *
+ * @param {Object} props
+ * @param {CrumbItem[]} props.items - ordered crumbs from root to current; the last is the current page.
+ * @param {string} [props.label='breadcrumb'] - aria-label for the nav landmark.
+ * @returns {JSX.Element}
+ */
+export default function Breadcrumb({ items, label }: {
+    items: CrumbItem[];
+    label?: string;
+}): JSX.Element;
+/**
+ * @typedef {Object} StepItem
+ * @property {string} label - the step text
+ * @property {'done'|'cur'|'todo'} [status='todo'] - 'done' shows a Check, 'cur' is the active step, 'todo' shows its number.
+ */
+/**
+ * Steps — a step wizard marking progress through a flow. Completed steps show a Check,
+ * the current step is highlighted (amber number), pending steps show their index.
+ * Steps are joined by `.step-line` dividers. State reads from icon/number, never color alone.
+ *
+ * Emits `<div class="steps">…</div>` matching src/index.css with zero new CSS.
+ *
+ * @param {Object} props
+ * @param {StepItem[]} props.steps - ordered steps; numbering is derived from position (1-based).
+ * @returns {JSX.Element}
+ */
+export function Steps({ steps }: {
+    steps: StepItem[];
+}): JSX.Element;
+export type CrumbItem = {
+    /**
+     * - the crumb text
+     */
+    label: string;
+    /**
+     * - optional link target; when present the crumb renders as an <a>
+     */
+    href?: string;
+    /**
+     * - optional leading lucide icon component (e.g. icon={Folder})
+     */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+};
+export type StepItem = {
+    /**
+     * - the step text
+     */
+    label: string;
+    /**
+     * - 'done' shows a Check, 'cur' is the active step, 'todo' shows its number.
+     */
+    status?: "done" | "cur" | "todo";
+};

package/dist/lib/types/Button.d.ts

@@ -0,0 +1,86 @@
+/**
+ * a single control. icon-only when there are no text children (renders .btn-icon).
+ * loading swaps the leading icon for the .bs-spin ring and sets aria-busy; pressed turns it into a
+ * toggle (.bs-toggle + aria-pressed). renders as a <button> or, with as="a", a real <a>.
+ *
+ * @param {object} props
+ * @param {ButtonVariant} [props.variant='secondary'] - visual treatment
+ * @param {ButtonSize} [props.size='md'] - md = 36px, sm = 28px (.btn-sm)
+ * @param {React.ElementType} [props.icon] - lucide component rendered before the label
+ * @param {React.ElementType} [props.iconRight] - lucide component rendered after the label
+ * @param {boolean} [props.loading=false] - shows the .bs-spin ring + aria-busy="true"
+ * @param {boolean} [props.disabled=false] - native disabled (button) / aria-disabled (anchor)
+ * @param {boolean} [props.pressed] - toggle button: when defined adds .bs-toggle + aria-pressed
+ * @param {'button'|'a'} [props.as='button'] - element to render
+ * @param {string} [props.className] - extra classes appended after the computed ones
+ * @param {React.ReactNode} [props.children] - the label; omit for an icon-only button (then aria-label is required so the control still has an accessible name)
+ */
+export default function Button({ variant, size, icon: Icon, iconRight: IconRight, loading, disabled, pressed, as, className, children, ...rest }: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: React.ElementType;
+    iconRight?: React.ElementType;
+    loading?: boolean;
+    disabled?: boolean;
+    pressed?: boolean;
+    as?: "button" | "a";
+    className?: string;
+    children?: React.ReactNode;
+}): any;
+/**
+ * groups a set of related buttons into one track with shared seams (.bs-group). pass real Button
+ * children. carries role="group"; give it an aria-label naming the action set.
+ *
+ * @param {object} props
+ * @param {string} [props.label] - aria-label for the group (recommended)
+ * @param {string} [props.className] - extra classes appended after .bs-group
+ * @param {React.ReactNode} props.children - the buttons in the group
+ */
+export function ButtonGroup({ label, className, children, ...rest }: {
+    label?: string;
+    className?: string;
+    children: React.ReactNode;
+}): any;
+/**
+ * @typedef {object} SegmentedOption
+ * @property {string} value - the option's value, compared against the control's value
+ * @property {string} label - the option's lowercase label text
+ * @property {React.ElementType} [icon] - lucide component shown before the label
+ */
+/**
+ * a segmented control (.bs-seg): a single track of mutually-exclusive options. the selected option
+ * carries aria-pressed="true" and the amber fill, so the choice never rides on color alone.
+ * controlled (value + onChange) or uncontrolled (defaultValue).
+ *
+ * @param {object} props
+ * @param {SegmentedOption[]} props.options - the choices
+ * @param {string} [props.value] - controlled selected value
+ * @param {string} [props.defaultValue] - initial value when uncontrolled
+ * @param {(value: string) => void} [props.onChange] - called with the next value on select
+ * @param {string} [props.label] - aria-label for the group (recommended)
+ * @param {string} [props.className] - extra classes appended after .bs-seg
+ */
+export function Segmented({ options, value, defaultValue, onChange, label, className, ...rest }: {
+    options: SegmentedOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    className?: string;
+}): any;
+export type SegmentedOption = {
+    /**
+     * - the option's value, compared against the control's value
+     */
+    value: string;
+    /**
+     * - the option's lowercase label text
+     */
+    label: string;
+    /**
+     * - lucide component shown before the label
+     */
+    icon?: React.ElementType;
+};
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "md" | "sm";

package/dist/lib/types/Card.d.ts

@@ -0,0 +1,145 @@
+/**
+ * @typedef {Object} CardProps
+ * @property {React.ReactNode} [children] - card contents (slotted, e.g. a <CardImg/> or arbitrary markup).
+ * @property {boolean} [link=false] - render the card as an <a> (one big target) instead of a <div>.
+ * @property {string} [className] - extra classes appended after the base `card`.
+ */
+/**
+ * Base card surface. Pass `link` to render as an <a> (the ref-01 cards are a single anchor target).
+ * Slot content via children, or compose with <CardImg/> for the imagery-on-top variant.
+ * @param {CardProps & React.HTMLAttributes<HTMLElement>} props
+ */
+export default function Card({ children, link, className, ...rest }: CardProps & React.HTMLAttributes<HTMLElement>): any;
+/**
+ * @typedef {Object} CardImgProps
+ * @property {React.ReactNode} [thumb] - decorative imagery rendered inside `.card-thumb` (e.g. an <AsciiImage/>).
+ * @property {React.ReactNode} [head] - the `.card-head` row. When it names a provider it MUST lead with the real brand mark via <BrandMark name="claude" /> (a label beside a visible name is decorative), never a generic glyph. A trailing icon may follow as a meta indicator.
+ * @property {React.ReactNode} [title] - the card title; rendered inside an <h3> when provided.
+ * @property {React.ReactNode} [desc] - the short summary; rendered inside `<p class="desc">` when provided.
+ * @property {React.ReactNode[]} [bullets] - bullet metadata; rendered as `<ul class="bullets"><li>…`.
+ * @property {React.ReactNode} [foot] - the `.card-foot` row (avatar + tabular metaitems).
+ * @property {boolean} [link=true] - render as an <a> (the whole card is one target); set false for a <div>.
+ * @property {string} [className] - extra classes appended after `card card-img`.
+ * @property {React.ReactNode} [children] - extra body content appended after the slots, if any.
+ */
+/**
+ * Imagery-on-top card: `.card.card-img` with a `.card-thumb` slot and a `.card-body` carrying the
+ * head, title, desc, bullets and foot. Provide imagery via `thumb` (decorative — caller passes the
+ * already-aria-hidden specimen, e.g. <AsciiImage/>). All text slots are optional.
+ * @param {CardImgProps & React.HTMLAttributes<HTMLElement>} props
+ */
+export function CardImg({ thumb, head, title, desc, bullets, foot, link, className, children, ...rest }: CardImgProps & React.HTMLAttributes<HTMLElement>): any;
+/**
+ * @typedef {Object} RowProps
+ * @property {React.ReactNode} [children] - row contents: metaitems, a `.grow` label, an avatar, etc.
+ * @property {boolean} [link=false] - render the row as an <a> (a focusable, navigable target). Only an interactive row shows the hover affordance; a plain row stays static.
+ * @property {string} [className] - extra classes appended after the base `row`.
+ */
+/**
+ * Compact dense-list row. The base `.row` styles the surface and border; stacked rows collapse
+ * their shared border automatically (`.row + .row`). Use a child with the `grow` class for the
+ * flexible label column. Pass `link` (with an href) when the row is navigable so it becomes a
+ * focusable <a> that earns its hover affordance and the global focus ring; a plain row is static.
+ * @param {RowProps & React.HTMLAttributes<HTMLElement>} props
+ */
+export function Row({ children, link, className, ...rest }: RowProps & React.HTMLAttributes<HTMLElement>): any;
+/**
+ * @typedef {Object} MetaItemProps
+ * @property {React.ComponentType<{ size?: number }>} [icon] - leading icon component reference (e.g. icon={Clock}). Icon size is owned by the `.metaitem .lucide` token rule (`--ic-sm`); it is not configurable per-instance.
+ * @property {React.ReactNode} [value] - emphasised tabular value, rendered as `<b class="tnum">` before the children.
+ * @property {React.ReactNode} [children] - the trailing label / units.
+ * @property {string} [className] - extra classes appended after the base `metaitem` (e.g. `mono`).
+ */
+/**
+ * A single piece of card / row metadata: an optional leading icon, an optional bold tabular value and a
+ * label. The icon and a `<b>` value pick up `.metaitem` styling (icon sized via `--ic-sm`, `<b>` tinted).
+ * Decorative icon gets aria-hidden. Pass `value` for counts/durations so they render in the tnum face.
+ * @param {MetaItemProps & React.HTMLAttributes<HTMLSpanElement>} props
+ */
+export function MetaItem({ icon: Icon, value, children, className, ...rest }: MetaItemProps & React.HTMLAttributes<HTMLSpanElement>): any;
+export type CardProps = {
+    /**
+     * - card contents (slotted, e.g. a <CardImg/> or arbitrary markup).
+     */
+    children?: React.ReactNode;
+    /**
+     * - render the card as an <a> (one big target) instead of a <div>.
+     */
+    link?: boolean;
+    /**
+     * - extra classes appended after the base `card`.
+     */
+    className?: string;
+};
+export type CardImgProps = {
+    /**
+     * - decorative imagery rendered inside `.card-thumb` (e.g. an <AsciiImage/>).
+     */
+    thumb?: React.ReactNode;
+    /**
+     * - the `.card-head` row. When it names a provider it MUST lead with the real brand mark via <BrandMark name="claude" /> (a label beside a visible name is decorative), never a generic glyph. A trailing icon may follow as a meta indicator.
+     */
+    head?: React.ReactNode;
+    /**
+     * - the card title; rendered inside an <h3> when provided.
+     */
+    title?: React.ReactNode;
+    /**
+     * - the short summary; rendered inside `<p class="desc">` when provided.
+     */
+    desc?: React.ReactNode;
+    /**
+     * - bullet metadata; rendered as `<ul class="bullets"><li>…`.
+     */
+    bullets?: React.ReactNode[];
+    /**
+     * - the `.card-foot` row (avatar + tabular metaitems).
+     */
+    foot?: React.ReactNode;
+    /**
+     * - render as an <a> (the whole card is one target); set false for a <div>.
+     */
+    link?: boolean;
+    /**
+     * - extra classes appended after `card card-img`.
+     */
+    className?: string;
+    /**
+     * - extra body content appended after the slots, if any.
+     */
+    children?: React.ReactNode;
+};
+export type RowProps = {
+    /**
+     * - row contents: metaitems, a `.grow` label, an avatar, etc.
+     */
+    children?: React.ReactNode;
+    /**
+     * - render the row as an <a> (a focusable, navigable target). Only an interactive row shows the hover affordance; a plain row stays static.
+     */
+    link?: boolean;
+    /**
+     * - extra classes appended after the base `row`.
+     */
+    className?: string;
+};
+export type MetaItemProps = {
+    /**
+     * - leading icon component reference (e.g. icon={Clock}). Icon size is owned by the `.metaitem .lucide` token rule (`--ic-sm`); it is not configurable per-instance.
+     */
+    icon?: React.ComponentType<{
+        size?: number;
+    }>;
+    /**
+     * - emphasised tabular value, rendered as `<b class="tnum">` before the children.
+     */
+    value?: React.ReactNode;
+    /**
+     * - the trailing label / units.
+     */
+    children?: React.ReactNode;
+    /**
+     * - extra classes appended after the base `metaitem` (e.g. `mono`).
+     */
+    className?: string;
+};

package/dist/lib/types/ChartBar.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @typedef {Object} BarSeries
+ * @property {string} key                 the data key this series reads from each row.
+ * @property {string} [name]              legend/tooltip label (defaults to key); lowercased by css.
+ * @property {'teal'|'olive'|'clay'|'mauve'|'amber'|1|2|3|4} [color]  series colour; defaults along the earth ramp.
+ */
+/**
+ * @param {Object} props
+ * @param {Object[]} props.data                 row objects.
+ * @param {string} props.xKey                   the category key on the x axis.
+ * @param {BarSeries[]} props.series            one or more bar series.
+ * @param {boolean} [props.stacked=false]       stack series instead of grouping them.
+ * @param {React.ComponentType} [props.icon]    a lucide icon for the head.
+ * @param {React.ReactNode} [props.title]       chart title (lowercase chrome).
+ * @param {React.ReactNode} [props.aside]       a tabular summary shown at the head's right.
+ * @param {React.ReactNode} [props.sub]         a sub line under the head.
+ * @param {number} [props.height=200]           plot height in px.
+ * @param {number[]} [props.yTicks]             explicit y ticks; omit to auto-pick integers.
+ * @param {(v:any)=>React.ReactNode} [props.xFormatter]     format x tick + tooltip label.
+ * @param {(v:any)=>React.ReactNode} [props.valueFormatter] format the tooltip value.
+ * @param {string} [props.className]            extra class on the chart frame.
+ */
+export default function ChartBar({ data, xKey, series, stacked, icon, title, aside, sub, height, yTicks, xFormatter, valueFormatter, className, }: {
+    data: any[];
+    xKey: string;
+    series: BarSeries[];
+    stacked?: boolean;
+    icon?: React.ComponentType;
+    title?: React.ReactNode;
+    aside?: React.ReactNode;
+    sub?: React.ReactNode;
+    height?: number;
+    yTicks?: number[];
+    xFormatter?: (v: any) => React.ReactNode;
+    valueFormatter?: (v: any) => React.ReactNode;
+    className?: string;
+}): any;
+export type BarSeries = {
+    /**
+     * the data key this series reads from each row.
+     */
+    key: string;
+    /**
+     * legend/tooltip label (defaults to key); lowercased by css.
+     */
+    name?: string;
+    /**
+     * series colour; defaults along the earth ramp.
+     */
+    color?: "teal" | "olive" | "clay" | "mauve" | "amber" | 1 | 2 | 3 | 4;
+};

package/dist/lib/types/ChartLine.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @typedef {Object} LineSeries
+ * @property {string} key                 data key.
+ * @property {string} [name]              legend/tooltip label (defaults to key).
+ * @property {'teal'|'olive'|'clay'|'mauve'|'amber'|1|2|3|4} [color]  series colour; defaults along the earth ramp.
+ * @property {boolean} [area]             fill the region under the line.
+ */
+/**
+ * @param {Object} props
+ * @param {Object[]} props.data                 row objects.
+ * @param {string} props.xKey                   the x-axis key.
+ * @param {LineSeries[]} props.series           one or more line/area series.
+ * @param {React.ComponentType} [props.icon]    a lucide icon for the head.
+ * @param {React.ReactNode} [props.title]       chart title (lowercase chrome).
+ * @param {React.ReactNode} [props.aside]       a tabular summary at the head's right.
+ * @param {React.ReactNode} [props.sub]         a sub line under the head.
+ * @param {number} [props.height=200]           plot height in px.
+ * @param {number[]} [props.yTicks]             explicit y ticks; omit to auto-pick integers.
+ * @param {(v:any)=>React.ReactNode} [props.xFormatter]     format x tick + tooltip label.
+ * @param {(v:any)=>React.ReactNode} [props.valueFormatter] format the tooltip value.
+ * @param {string} [props.className]            extra class on the chart frame.
+ */
+export default function ChartLine({ data, xKey, series, icon, title, aside, sub, height, yTicks, xFormatter, valueFormatter, className, }: {
+    data: any[];
+    xKey: string;
+    series: LineSeries[];
+    icon?: React.ComponentType;
+    title?: React.ReactNode;
+    aside?: React.ReactNode;
+    sub?: React.ReactNode;
+    height?: number;
+    yTicks?: number[];
+    xFormatter?: (v: any) => React.ReactNode;
+    valueFormatter?: (v: any) => React.ReactNode;
+    className?: string;
+}): any;
+export type LineSeries = {
+    /**
+     * data key.
+     */
+    key: string;
+    /**
+     * legend/tooltip label (defaults to key).
+     */
+    name?: string;
+    /**
+     * series colour; defaults along the earth ramp.
+     */
+    color?: "teal" | "olive" | "clay" | "mauve" | "amber" | 1 | 2 | 3 | 4;
+    /**
+     * fill the region under the line.
+     */
+    area?: boolean;
+};