@peasant-labs/fairtrade 0.0.1 → 0.0.2

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

@@ -0,0 +1,80 @@
+/**
+ * @typedef {Object} PolicyOption
+ * @property {string} value                 the value submitted / matched when selected.
+ * @property {import('react').ReactNode} label     the bold option label (mono).
+ * @property {import('react').ReactNode} [rationale] one-line plain-prose explanation (body font).
+ * @property {boolean} [disabled]           native disabled state for this option.
+ */
+/**
+ * @typedef {Object} PolicySelectProps
+ * @property {import('react').ReactNode} label   the field label above the control (mono, lowercase chrome).
+ * @property {string} name                       form name; the shared radio group name in the radio variant.
+ * @property {string} [value]                    controlled selected value; pair with onChange.
+ * @property {string} [defaultValue]             initial value for uncontrolled use.
+ * @property {(value: string) => void} [onChange] called with the next value on selection.
+ * @property {PolicyOption[]} options            the choices to render (each {value,label,rationale}).
+ * @property {'radio'|'select'} [variant='radio'] layout: a rationale-per-row radio group, or a native select.
+ * @property {import('react').ReactNode} [hint]  optional one-line helper beneath the label.
+ * @property {string} [id]                       id for the control / radiogroup; auto-generated when omitted.
+ */
+/**
+ * A governance policy selector. See PolicySelectProps.
+ * @param {PolicySelectProps} props
+ */
+export default function PolicySelect({ label, name, value, defaultValue, onChange, options, variant, hint, id, }: PolicySelectProps): any;
+export type PolicyOption = {
+    /**
+     * the value submitted / matched when selected.
+     */
+    value: string;
+    /**
+     * the bold option label (mono).
+     */
+    label: any;
+    /**
+     * one-line plain-prose explanation (body font).
+     */
+    rationale?: any;
+    /**
+     * native disabled state for this option.
+     */
+    disabled?: boolean;
+};
+export type PolicySelectProps = {
+    /**
+     * the field label above the control (mono, lowercase chrome).
+     */
+    label: any;
+    /**
+     * form name; the shared radio group name in the radio variant.
+     */
+    name: string;
+    /**
+     * controlled selected value; pair with onChange.
+     */
+    value?: string;
+    /**
+     * initial value for uncontrolled use.
+     */
+    defaultValue?: string;
+    /**
+     * called with the next value on selection.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * the choices to render (each {value,label,rationale}).
+     */
+    options: PolicyOption[];
+    /**
+     * layout: a rationale-per-row radio group, or a native select.
+     */
+    variant?: "radio" | "select";
+    /**
+     * optional one-line helper beneath the label.
+     */
+    hint?: any;
+    /**
+     * id for the control / radiogroup; auto-generated when omitted.
+     */
+    id?: string;
+};

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

@@ -0,0 +1,84 @@
+/**
+ * ProviderIcon — the real brand mark for a harness, single-color via currentColor.
+ *
+ * decorative by default (it is paired with a name in every composite below). pass
+ * `label` to make a STANDALONE mark informative (role="img" + the provider name).
+ * pass `accent` to tint the mark with its provider accent instead of inheriting
+ * the surrounding text color — but remember the accent is never the sole signal.
+ *
+ * @param {object} props
+ * @param {'claude-code'|'gemini-cli'|'codex'|'opencode'|'cursor'} props.harness
+ * @param {number} [props.size] explicit px; omit to inherit the contextual icon size.
+ * @param {boolean} [props.accent] tint with PROVIDER_ACCENT[harness] (default: currentColor).
+ * @param {boolean|string} [props.label] true → the provider name as aria-label; a string overrides.
+ * @param {string} [props.className] extra classes appended after `pv-icon`.
+ * @returns {JSX.Element|null} null when `harness` is unknown.
+ */
+export function ProviderIcon({ harness, size, accent, label, className, ...rest }: {
+    harness: "claude-code" | "gemini-cli" | "codex" | "opencode" | "cursor";
+    size?: number;
+    accent?: boolean;
+    label?: boolean | string;
+    className?: string;
+}): JSX.Element | null;
+/**
+ * ProviderTag — a square hairline chip: the real mark + the lowercase harness slug.
+ *
+ * the system's chip look (mono, hairline border, radius 0, lowercase chrome). the
+ * mark sits to the left of the slug so the chip is never color-only: even fully
+ * monochrome it names the provider in words. pass `accent` to tint the mark.
+ *
+ * @param {object} props
+ * @param {'claude-code'|'gemini-cli'|'codex'|'opencode'|'cursor'} props.harness
+ * @param {boolean} [props.accent] tint the mark with the provider accent (default: ink).
+ * @param {string} [props.className]
+ * @returns {JSX.Element|null}
+ */
+export function ProviderTag({ harness, accent, className, ...rest }: {
+    harness: "claude-code" | "gemini-cli" | "codex" | "opencode" | "cursor";
+    accent?: boolean;
+    className?: string;
+}): JSX.Element | null;
+/**
+ * ProviderName — mark + the harness slug as a plain inline label (no chip border).
+ *
+ * the in-prose form: use it inline in a sentence or a table cell. pass `accent` to
+ * tint BOTH the mark and the slug with the provider accent (the slug gets a
+ * non-color cue regardless — it is real text, so it is readable mono-color too).
+ *
+ * @param {object} props
+ * @param {'claude-code'|'gemini-cli'|'codex'|'opencode'|'cursor'} props.harness
+ * @param {boolean} [props.accent] tint mark + label with the provider accent.
+ * @param {string} [props.className]
+ * @returns {JSX.Element|null}
+ */
+export function ProviderName({ harness, accent, className, ...rest }: {
+    harness: "claude-code" | "gemini-cli" | "codex" | "opencode" | "cursor";
+    accent?: boolean;
+    className?: string;
+}): JSX.Element | null;
+/**
+ * AccentLegend — the per-provider accent map, documented as a UI.
+ *
+ * one row per harness across four aligned columns: the real mark, the provider
+ * name, the accent swatch, then its token name written out. the swatch sits after
+ * the mark + name on purpose — they already identify the provider, so the legend
+ * reads correctly with the color stripped (the neuroinclusive rule made visible),
+ * and the swatch keeps its own column so the colors line up down the list.
+ *
+ * @param {object} props
+ * @param {string} [props.className]
+ * @returns {JSX.Element}
+ */
+export function AccentLegend({ className, ...rest }: {
+    className?: string;
+}): JSX.Element;
+export const HARNESSES: string[];
+export const PROVIDER_ACCENT: {
+    'claude-code': string;
+    'gemini-cli': string;
+    codex: string;
+    opencode: string;
+    cursor: string;
+};
+export default ProviderIcon;

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

@@ -0,0 +1,199 @@
+/**
+ * @typedef {Object} RailShellProps
+ * @property {React.ReactNode} [toolbar]      optional sticky top toolbar (mono chrome row); omitted when absent.
+ * @property {React.ReactNode} children        the main content / canvas column (scrolls; min-width:0).
+ * @property {React.ReactNode} rail            the rail contents — compose with <RailSection> children.
+ * @property {'left'|'right'} [railSide='right']  which side the desktop rail sits on.
+ * @property {string} [sheetTitle='details']   the bottom-sheet toggle label (mono, lowercased) on mobile.
+ * @property {React.ReactNode} [sheetMeta]     quiet right-side content in the sheet header (e.g. a count).
+ * @property {string} [className]              extra class on the root.
+ */
+/**
+ * The shell frame: a two-column canvas + sticky-rail layout on desktop that collapses the rail into
+ * a fixed bottom-sheet below 880px. The main column scrolls and is min-width:0 so a wide canvas
+ * stays contained; the rail is a 320px sticky hairline card. The same `rail` content renders in both
+ * the desktop card and the mobile sheet, so avoid `id` attributes inside it. The sheet's expand /
+ * collapse is a button reporting aria-expanded and is wired to the sheet body via aria-controls.
+ */
+export default function RailShell({ toolbar, children, rail, railSide, sheetTitle, sheetMeta, className, }: {
+    toolbar: any;
+    children: any;
+    rail: any;
+    railSide?: string;
+    sheetTitle?: string;
+    sheetMeta: any;
+    className?: string;
+}): any;
+/**
+ * @typedef {Object} RailSectionProps
+ * @property {React.ReactNode} [title]         mono section header (lowercased by css).
+ * @property {React.ComponentType} [icon]      optional lucide icon component shown before the title.
+ * @property {React.ReactNode} [meta]          quiet right-aligned header content (a count, a glyph).
+ * @property {React.ReactNode} children         the section body.
+ * @property {boolean} [collapsible=false]     when true, the header is a button that toggles the body.
+ * @property {boolean} [defaultOpen=true]      initial open state when collapsible.
+ * @property {string} [className]              extra class on the section.
+ */
+/**
+ * One titled hairline section inside a rail: a mono header (optional icon + title + meta) over a
+ * body. When `collapsible`, the header becomes a button reporting aria-expanded and wired to the
+ * body via aria-controls; the chevron rotates open. Sections divide from one another with the
+ * rail card's hairlines.
+ */
+export function RailSection({ title, icon: Icon, meta, children, collapsible, defaultOpen, className, }: {
+    title: any;
+    icon: any;
+    meta: any;
+    children: any;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    className?: string;
+}): any;
+/**
+ * @typedef {Object} SplitRailProps
+ * @property {React.ReactNode} left            content of the left column (e.g. an outline tree).
+ * @property {React.ReactNode} right           content of the right column (e.g. filters).
+ * @property {string} [leftTitle='outline']    left column header (mono, lowercased).
+ * @property {string} [rightTitle='filters']   right column header (mono, lowercased).
+ * @property {React.ComponentType} [leftIcon]  optional lucide icon for the left header.
+ * @property {React.ComponentType} [rightIcon] optional lucide icon for the right header.
+ * @property {React.ReactNode} [leftMeta]      quiet right-aligned content in the left header.
+ * @property {React.ReactNode} [rightMeta]     quiet right-aligned content in the right header.
+ * @property {string} [className]              extra class on the root.
+ */
+/**
+ * The dual-rail variant: two independently-collapsible columns (outline-left / filters-right), each
+ * a hairline panel that collapses on its own. Side by side on desktop; stacks to a single column on
+ * mobile. Use as the `rail` of a RailShell, or standalone as a two-pane control surface.
+ */
+export function SplitRail({ left, right, leftTitle, rightTitle, leftIcon, rightIcon, leftMeta, rightMeta, className, }: {
+    left: any;
+    right: any;
+    leftTitle?: string;
+    rightTitle?: string;
+    leftIcon: any;
+    rightIcon: any;
+    leftMeta: any;
+    rightMeta: any;
+    className?: string;
+}): any;
+export type RailShellProps = {
+    /**
+     * optional sticky top toolbar (mono chrome row); omitted when absent.
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * the main content / canvas column (scrolls; min-width:0).
+     */
+    children: React.ReactNode;
+    /**
+     * the rail contents — compose with <RailSection> children.
+     */
+    rail: React.ReactNode;
+    /**
+     * which side the desktop rail sits on.
+     */
+    railSide?: "left" | "right";
+    /**
+     * the bottom-sheet toggle label (mono, lowercased) on mobile.
+     */
+    sheetTitle?: string;
+    /**
+     * quiet right-side content in the sheet header (e.g. a count).
+     */
+    sheetMeta?: React.ReactNode;
+    /**
+     * extra class on the root.
+     */
+    className?: string;
+};
+export type RailSectionProps = {
+    /**
+     * mono section header (lowercased by css).
+     */
+    title?: React.ReactNode;
+    /**
+     * optional lucide icon component shown before the title.
+     */
+    icon?: React.ComponentType;
+    /**
+     * quiet right-aligned header content (a count, a glyph).
+     */
+    meta?: React.ReactNode;
+    /**
+     * the section body.
+     */
+    children: React.ReactNode;
+    /**
+     * when true, the header is a button that toggles the body.
+     */
+    collapsible?: boolean;
+    /**
+     * initial open state when collapsible.
+     */
+    defaultOpen?: boolean;
+    /**
+     * extra class on the section.
+     */
+    className?: string;
+};
+export type SplitRailPanelProps = {
+    /**
+     * mono header for the column.
+     */
+    title?: React.ReactNode;
+    /**
+     * optional lucide icon before the title.
+     */
+    icon?: React.ComponentType;
+    /**
+     * quiet right-aligned header content.
+     */
+    meta?: React.ReactNode;
+    /**
+     * the column body.
+     */
+    children: React.ReactNode;
+    /**
+     * initial open state (each column collapses independently).
+     */
+    defaultOpen?: boolean;
+};
+export type SplitRailProps = {
+    /**
+     * content of the left column (e.g. an outline tree).
+     */
+    left: React.ReactNode;
+    /**
+     * content of the right column (e.g. filters).
+     */
+    right: React.ReactNode;
+    /**
+     * left column header (mono, lowercased).
+     */
+    leftTitle?: string;
+    /**
+     * right column header (mono, lowercased).
+     */
+    rightTitle?: string;
+    /**
+     * optional lucide icon for the left header.
+     */
+    leftIcon?: React.ComponentType;
+    /**
+     * optional lucide icon for the right header.
+     */
+    rightIcon?: React.ComponentType;
+    /**
+     * quiet right-aligned content in the left header.
+     */
+    leftMeta?: React.ReactNode;
+    /**
+     * quiet right-aligned content in the right header.
+     */
+    rightMeta?: React.ReactNode;
+    /**
+     * extra class on the root.
+     */
+    className?: string;
+};

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

@@ -0,0 +1,53 @@
+/**
+ * RedactionReview — the safe-by-default review surface.
+ *
+ * @param {object} props
+ * @param {'minimal'|'standard'|'maximum'} [props.level='standard'] - the selected redaction level
+ * @param {(level: string) => void} [props.onLevel] - called with the next level on select
+ * @param {Array<{id, category, confidence:number, before?:string, secret?:string, after:string, kept?:boolean}>} [props.matches]
+ *        - the flagged matches. `before`/`secret` is the original (one or the other), `after` the
+ *          redacted form. `kept` (controlled mode) = the user opted OUT, secret leaves as-is.
+ * @param {(id: string, kept: boolean) => void} [props.onToggle] - called when a match is toggled;
+ *        when given, the component is controlled (read `kept` off each match).
+ * @param {number} [props.scanned] - sessions/files scanned so far (defaults to `total`: done).
+ * @param {number} [props.total=0] - total to scan.
+ * @param {string|boolean} [props.failure] - honest-failure banner text; truthy shows the banner.
+ * @param {string} [props.className]
+ */
+export function RedactionReview({ level, onLevel, matches, onToggle, scanned, total, failure, className, ...rest }: {
+    level?: "minimal" | "standard" | "maximum";
+    onLevel?: (level: string) => void;
+    matches?: Array<{
+        id: any;
+        category: any;
+        confidence: number;
+        before?: string;
+        secret?: string;
+        after: string;
+        kept?: boolean;
+    }>;
+    onToggle?: (id: string, kept: boolean) => void;
+    scanned?: number;
+    total?: number;
+    failure?: string | boolean;
+    className?: string;
+}): any;
+/**
+ * WhereDoesThisGo — the transparency panel shown before an outbound action. the destination url,
+ * then a two-column split: "what gets sent" (Send icon, add rail) vs "what stays private" (Lock
+ * icon, neutral rail). calm, square, hairline. each column header pairs an icon with its word so
+ * the two halves never read on color alone.
+ *
+ * @param {object} props
+ * @param {string} props.destination - the outbound url (code -> mono, not lowercased)
+ * @param {string[]} [props.sent] - the things that WILL be sent
+ * @param {string[]} [props.private] - the things that stay on the machine
+ * @param {string} [props.className]
+ */
+export function WhereDoesThisGo({ destination, sent, private: stays, className, ...rest }: {
+    destination: string;
+    sent?: string[];
+    private?: string[];
+    className?: string;
+}): any;
+export default RedactionReview;

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

@@ -0,0 +1,97 @@
+/**
+ * The inline destructive-confirm: a trigger button that, on click, swaps in place to
+ * "{label}? [yes] [cancel]" — never a modal, so the row never reflows out from under the cursor.
+ * yes fires onConfirm and (if it doesn't throw) reverts to the trigger; cancel reverts immediately.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} [props.label='remove']       the trigger's lowercase chrome label
+ * @param {string} [props.confirmLabel]                  the verb echoed in the prompt + on yes (defaults to label, lowercased)
+ * @param {React.ReactNode} [props.icon]                 optional leading glyph for the trigger (e.g. <Trash2 />)
+ * @param {() => (void | Promise<void>)} props.onConfirm fired when yes is activated
+ * @param {boolean} [props.busy=false]                   external pending flag — disables yes + shows "{verb}…"
+ * @param {boolean} [props.disabled=false]               disables the trigger entirely
+ * @param {string} [props['aria-label']]                 accessible name for the trigger (defaults from label/confirmLabel)
+ * @param {string} [props.className]                     extra class on the wrapper
+ */
+export function ConfirmInline({ label, confirmLabel, icon, onConfirm, busy, disabled, "aria-label": ariaLabel, className, }: {
+    label?: React.ReactNode;
+    confirmLabel?: string;
+    icon?: React.ReactNode;
+    onConfirm: () => (void | Promise<void>);
+    busy?: boolean;
+    disabled?: boolean;
+}): any;
+/**
+ * @typedef {Object} RosterMember
+ * @property {string} handle           the member's handle (user content — never lowercased)
+ * @property {string} [name]           display name (user content)
+ * @property {'owner'|'member'|'contributor'|'guest'} role  the member's role
+ * @property {boolean} [owner]         locks the row: role select disabled, "owner" shown as text + lock glyph, no remove
+ * @property {string} [org]            an org affiliation chip (user content, e.g. a github org login)
+ * @property {string} [avatar]         avatar image url; falls back to the handle's initial
+ * @property {string} [id]             stable key (defaults to handle)
+ */
+/**
+ * A member role roster: one row per member with avatar/handle + name, an org chip, a role select,
+ * and (for non-owner rows) an inline remove. Owner rows are locked — the role reads as plain
+ * "owner" text beside a lock glyph and there's no remove, mirroring village where the owner can't
+ * be reassigned or removed here.
+ *
+ * @param {Object} props
+ * @param {RosterMember[]} props.members           the members to list
+ * @param {(member: RosterMember, role: string) => void} [props.onRole]   fired when a row's role select changes
+ * @param {(member: RosterMember) => (void | Promise<void>)} [props.onRemove]  fired when a row's remove is confirmed
+ * @param {string} [props.title='members']         section header label (lowercase chrome)
+ * @param {string[]} [props.roles]                 selectable roles (default member/contributor/guest; owner is never offered)
+ */
+export default function RoleRoster({ members, onRole, onRemove, title, roles, }: {
+    members: RosterMember[];
+    onRole?: (member: RosterMember, role: string) => void;
+    onRemove?: (member: RosterMember) => (void | Promise<void>);
+    title?: string;
+    roles?: string[];
+}): any;
+/**
+ * A clay-bordered section wrapping destructive actions (e.g. "delete collective"). Fronted by a
+ * warning glyph + the literal word "warning" so the danger framing is never carried by the clay
+ * border alone. children is the body — typically a sentence of consequence + a
+ * <ConfirmInline confirmLabel="delete" />.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} [props.title='danger zone']  the section header label (lowercase chrome)
+ * @param {React.ReactNode} props.children               the destructive actions / explanation
+ */
+export function DangerZone({ title, children }: {
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}): any;
+export type RosterMember = {
+    /**
+     * the member's handle (user content — never lowercased)
+     */
+    handle: string;
+    /**
+     * display name (user content)
+     */
+    name?: string;
+    /**
+     * the member's role
+     */
+    role: "owner" | "member" | "contributor" | "guest";
+    /**
+     * locks the row: role select disabled, "owner" shown as text + lock glyph, no remove
+     */
+    owner?: boolean;
+    /**
+     * an org affiliation chip (user content, e.g. a github org login)
+     */
+    org?: string;
+    /**
+     * avatar image url; falls back to the handle's initial
+     */
+    avatar?: string;
+    /**
+     * stable key (defaults to handle)
+     */
+    id?: string;
+};

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

@@ -0,0 +1,78 @@
+/**
+ * SignInProviders — a multi-provider OAuth split button.
+ *
+ * the first provider is the PRIMARY action ("continue with <label>"); the rest
+ * live behind a chevron that opens a keyboard-operable menu. clicking the
+ * primary or any menu row calls onSignIn(providerId).
+ *
+ * @param {object} props
+ * @param {Array<{id:string,label:string}>} [props.providers] ordered; [0] is primary. defaults to PROVIDERS.
+ * @param {(id:string)=>void} [props.onSignIn] called with the chosen provider id.
+ * @param {string} [props.className]
+ * @returns {JSX.Element|null}
+ */
+export function SignInProviders({ providers, onSignIn, className, ...rest }: {
+    providers?: Array<{
+        id: string;
+        label: string;
+    }>;
+    onSignIn?: (id: string) => void;
+    className?: string;
+}): JSX.Element | null;
+/**
+ * HandleClaim — the post-OAuth handle-claim card.
+ *
+ * a mono @-prefixed input with live validation shown as an ICON + a WORD (never
+ * color alone), one or two suggestion chips, and a "claim handle" button that
+ * stays disabled until the handle validates as available. the typed handle keeps
+ * its case; validation normalizes a copy.
+ *
+ * @param {object} props
+ * @param {(handle:string)=>void} [props.onSubmit] called with the typed handle on claim.
+ * @param {(raw:string)=>{state:'idle'|'available'|'taken'|'invalid'|'checking',hint?:string}} [props.validate]
+ *        override the validator; defaults to the built-in handle rule + taken set.
+ * @param {string} [props.initialValue] seed the field (kept verbatim, case preserved).
+ * @param {string} [props.suggestedFrom] a provider username to derive suggestion chips from.
+ * @param {string[]} [props.suggestions] explicit suggestion chips (overrides suggestedFrom).
+ * @param {string} [props.className]
+ * @returns {JSX.Element}
+ */
+export function HandleClaim({ onSubmit, validate, initialValue, suggestedFrom, suggestions, className, ...rest }: {
+    onSubmit?: (handle: string) => void;
+    validate?: (raw: string) => {
+        state: "idle" | "available" | "taken" | "invalid" | "checking";
+        hint?: string;
+    };
+    initialValue?: string;
+    suggestedFrom?: string;
+    suggestions?: string[];
+    className?: string;
+}): JSX.Element;
+/**
+ * OnboardingCard — the two steps composed into one onboarding specimen: the
+ * provider split button up top, the handle-claim card below. a thin pass-through
+ * wrapper so a consumer (and the combined story) can show the whole front door.
+ *
+ * @param {object} props
+ * @param {Array<{id:string,label:string}>} [props.providers]
+ * @param {(id:string)=>void} [props.onSignIn]
+ * @param {(handle:string)=>void} [props.onSubmit]
+ * @param {string} [props.suggestedFrom]
+ * @param {string} [props.className]
+ * @returns {JSX.Element}
+ */
+export function OnboardingCard({ providers, onSignIn, onSubmit, suggestedFrom, className, ...rest }: {
+    providers?: Array<{
+        id: string;
+        label: string;
+    }>;
+    onSignIn?: (id: string) => void;
+    onSubmit?: (handle: string) => void;
+    suggestedFrom?: string;
+    className?: string;
+}): JSX.Element;
+export const PROVIDERS: {
+    id: string;
+    label: string;
+}[];
+export default SignInProviders;

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

@@ -0,0 +1,19 @@
+/**
+ * @param {Object} props
+ * @param {Array<number|Object>} props.data     numbers, or objects with a `value` key.
+ * @param {'line'|'bar'} [props.type='line']     line or mini-bar.
+ * @param {'teal'|'olive'|'clay'|'mauve'|'amber'|1|2|3|4} [props.color='teal']  token colour.
+ * @param {number} [props.width=88]              px width.
+ * @param {number} [props.height=24]             px height.
+ * @param {string} props.label                   accessible name (e.g. "sessions, last 8 weeks, trending up"). required.
+ * @param {string} [props.className]             extra class.
+ */
+export default function Sparkline({ data, type, color, width, height, label, className }: {
+    data: Array<number | any>;
+    type?: "line" | "bar";
+    color?: "teal" | "olive" | "clay" | "mauve" | "amber" | 1 | 2 | 3 | 4;
+    width?: number;
+    height?: number;
+    label: string;
+    className?: string;
+}): any;