@peasant-labs/fairtrade 0.0.0

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/Button.stories.d.ts

@@ -0,0 +1,129 @@
+export default meta;
+export const Playground: {};
+export namespace Primary {
+    namespace args {
+        let variant: string;
+    }
+}
+export namespace Loading {
+    export namespace args_1 {
+        let variant_1: string;
+        export { variant_1 as variant };
+        export let loading: boolean;
+        export let children: string;
+    }
+    export { args_1 as args };
+}
+export namespace Disabled {
+    export namespace args_2 {
+        let disabled: boolean;
+    }
+    export { args_2 as args };
+}
+export namespace DisabledStates {
+    function render(): any;
+}
+export namespace LoadingDisabled {
+    export namespace args_3 {
+        let variant_2: string;
+        export { variant_2 as variant };
+        let loading_1: boolean;
+        export { loading_1 as loading };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let children_1: string;
+        export { children_1 as children };
+    }
+    export { args_3 as args };
+}
+export namespace DisabledLink {
+    export namespace args_4 {
+        export let as: string;
+        export let href: string;
+        let disabled_2: boolean;
+        export { disabled_2 as disabled };
+        let children_2: string;
+        export { children_2 as children };
+    }
+    export { args_4 as args };
+}
+export namespace WithIcon {
+    export namespace args_5 {
+        let variant_3: string;
+        export { variant_3 as variant };
+        export { Download as icon };
+        let children_3: string;
+        export { children_3 as children };
+    }
+    export { args_5 as args };
+}
+export namespace IconOnly {
+    let args_6: {
+        icon: react.ForwardRefExoticComponent<any>;
+        'aria-label': string;
+        children: any;
+    };
+    export { args_6 as args };
+}
+export namespace Small {
+    export namespace args_7 {
+        let size: string;
+    }
+    export { args_7 as args };
+}
+export namespace Group {
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace SegmentedControl {
+    export function render_2(): any;
+    export { render_2 as render };
+}
+declare namespace meta {
+    export let title: string;
+    export { Button as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace variant_4 {
+            let control: string;
+            let options: string[];
+        }
+        export { variant_4 as variant };
+        export namespace size_1 {
+            let control_1: string;
+            export { control_1 as control };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+        export { size_1 as size };
+        export namespace disabled_3 {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        export { disabled_3 as disabled };
+        export namespace loading_2 {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        export { loading_2 as loading };
+        export namespace children_4 {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        export { children_4 as children };
+    }
+    export namespace args_8 {
+        let children_5: string;
+        export { children_5 as children };
+        let variant_5: string;
+        export { variant_5 as variant };
+        let size_2: string;
+        export { size_2 as size };
+    }
+    export { args_8 as args };
+    export namespace parameters {
+        let layout: string;
+    }
+}
+import { Download } from 'lucide-react';
+import Button from './Button.jsx';

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/Card.stories.d.ts

@@ -0,0 +1,70 @@
+export default meta;
+export const Playground: {};
+export namespace AsLink {
+    namespace args {
+        let link: boolean;
+        let href: string;
+        let children: any;
+    }
+}
+export namespace Imagery {
+    function render(): any;
+}
+export namespace Redacted {
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace Minimal {
+    export function render_2(): any;
+    export { render_2 as render };
+}
+export namespace DenseRow {
+    export function render_3(): any;
+    export { render_3 as render };
+}
+export namespace RowList {
+    export function render_4(): any;
+    export { render_4 as render };
+}
+export namespace MetaItems {
+    export function render_5(): any;
+    export { render_5 as render };
+}
+export namespace Focused {
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace Slots {
+    export function render_6(): any;
+    export { render_6 as render };
+}
+declare namespace meta {
+    export let title: string;
+    export { Card as component };
+    export let tags: string[];
+    export let decorators: Function[];
+    export namespace argTypes {
+        export namespace link_1 {
+            let control: string;
+        }
+        export { link_1 as link };
+        export namespace className {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export namespace children_1 {
+            let control_2: boolean;
+            export { control_2 as control };
+        }
+        export { children_1 as children };
+    }
+    export namespace args_1 {
+        let link_2: boolean;
+        export { link_2 as link };
+        let children_2: any;
+        export { children_2 as children };
+    }
+    export { args_1 as args };
+}
+import Card from './Card.jsx';

package/dist/lib/types/Chart.stories.d.ts

@@ -0,0 +1,55 @@
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        let layout: string;
+    }
+}
+export default _default;
+export namespace Bar {
+    let decorators: ((Story: any) => any)[];
+    function render(): any;
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace GroupedBars {
+    let decorators_1: ((Story: any) => any)[];
+    export { decorators_1 as decorators };
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace StackedBars {
+    let decorators_2: ((Story: any) => any)[];
+    export { decorators_2 as decorators };
+    export function render_2(): any;
+    export { render_2 as render };
+}
+export namespace LineArea {
+    export let name: string;
+    let decorators_3: ((Story: any) => any)[];
+    export { decorators_3 as decorators };
+    export function render_3(): any;
+    export { render_3 as render };
+    export function play_1({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_1 as play };
+}
+export namespace MultiLine {
+    let name_1: string;
+    export { name_1 as name };
+    let decorators_4: ((Story: any) => any)[];
+    export { decorators_4 as decorators };
+    export function render_4(): any;
+    export { render_4 as render };
+}
+export namespace Sparklines {
+    let decorators_5: ((Story: any) => any)[];
+    export { decorators_5 as decorators };
+    export function render_5(): any;
+    export { render_5 as render };
+    export function play_2({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_2 as play };
+}

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;
+};