@peasant-labs/fairtrade 0.0.0

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

@@ -0,0 +1,91 @@
+export default meta;
+export const Playground: {};
+export namespace SingleOpen {
+    namespace args {
+        let defaultOpen: string;
+        let allowMultiple: boolean;
+    }
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace Multiple {
+    export namespace args_1 {
+        let allowMultiple_1: boolean;
+        export { allowMultiple_1 as allowMultiple };
+        let defaultOpen_1: string[];
+        export { defaultOpen_1 as defaultOpen };
+    }
+    export { args_1 as args };
+}
+export namespace AllClosed {
+    export namespace args_2 {
+        let defaultOpen_2: any;
+        export { defaultOpen_2 as defaultOpen };
+    }
+    export { args_2 as args };
+}
+export namespace Empty {
+    let args_3: {
+        items: any[];
+        'aria-label': string;
+    };
+    export { args_3 as args };
+}
+export namespace HeadingLevelTwo {
+    export namespace args_4 {
+        export let headingLevel: number;
+        let defaultOpen_3: string;
+        export { defaultOpen_3 as defaultOpen };
+    }
+    export { args_4 as args };
+}
+export namespace InteractiveContent {
+    let args_5: {
+        items: {
+            id: string;
+            title: string;
+            icon: react.ForwardRefExoticComponent<any>;
+            content: any;
+        }[];
+        defaultOpen: string;
+        'aria-label': string;
+    };
+    export { args_5 as args };
+    export function play_1({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_1 as play };
+}
+declare namespace meta {
+    export let title: string;
+    export { Accordion as component };
+    export let tags: string[];
+    export let decorators: Function[];
+    export let argTypes: {
+        allowMultiple: {
+            control: string;
+        };
+        defaultOpen: {
+            control: string;
+        };
+        'aria-label': {
+            control: string;
+        };
+        items: {
+            control: boolean;
+        };
+    };
+    let args_6: {
+        items: {
+            id: string;
+            title: string;
+            icon: react.ForwardRefExoticComponent<any>;
+            content: any;
+        }[];
+        allowMultiple: boolean;
+        'aria-label': string;
+    };
+    export { args_6 as args };
+}
+import Accordion from './Accordion.jsx';

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

@@ -0,0 +1,160 @@
+export default meta;
+export const Playground: {};
+export namespace Base {
+    namespace args {
+        let size: any;
+    }
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let story: string;
+            }
+        }
+    }
+}
+export namespace Sizes {
+    function render(): any;
+}
+export namespace ExplicitInitials {
+    export namespace args_1 {
+        export let name: string;
+        export let initials: string;
+        let size_1: string;
+        export { size_1 as size };
+    }
+    export { args_1 as args };
+}
+export namespace Photo {
+    export namespace args_2 {
+        let name_1: string;
+        export { name_1 as name };
+        let size_2: string;
+        export { size_2 as size };
+        export let src: string;
+    }
+    export { args_2 as args };
+    export namespace parameters_1 {
+        export namespace docs_1 {
+            export namespace description_1 {
+                let story_1: string;
+                export { story_1 as story };
+            }
+            export { description_1 as description };
+        }
+        export { docs_1 as docs };
+    }
+    export { parameters_1 as parameters };
+}
+export namespace PhotoFallback {
+    export namespace args_3 {
+        let name_2: string;
+        export { name_2 as name };
+        let size_3: string;
+        export { size_3 as size };
+        let src_1: string;
+        export { src_1 as src };
+    }
+    export { args_3 as args };
+    export namespace parameters_2 {
+        export namespace docs_2 {
+            export namespace description_2 {
+                let story_2: string;
+                export { story_2 as story };
+            }
+            export { description_2 as description };
+        }
+        export { docs_2 as docs };
+    }
+    export { parameters_2 as parameters };
+}
+export namespace More {
+    export namespace args_4 {
+        let name_3: string;
+        export { name_3 as name };
+        let initials_1: string;
+        export { initials_1 as initials };
+        export let more: boolean;
+        let size_4: string;
+        export { size_4 as size };
+    }
+    export { args_4 as args };
+}
+export namespace Group {
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace Keys {
+    export function render_2(): any;
+    export { render_2 as render };
+}
+export namespace Chord {
+    export function render_3(): any;
+    export { render_3 as render };
+}
+export namespace Tags {
+    export function render_4(): any;
+    export { render_4 as render };
+}
+export namespace TagBrands {
+    export function render_5(): any;
+    export { render_5 as render };
+    export namespace parameters_3 {
+        export namespace docs_3 {
+            export namespace description_3 {
+                let story_3: string;
+                export { story_3 as story };
+            }
+            export { description_3 as description };
+        }
+        export { docs_3 as docs };
+    }
+    export { parameters_3 as parameters };
+}
+export namespace TagSelected {
+    export function render_6(): any;
+    export { render_6 as render };
+}
+export namespace TagRemovable {
+    export function render_7(): any;
+    export { render_7 as render };
+}
+declare namespace meta {
+    export let title: string;
+    export { Avatar as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace name_4 {
+            let control: string;
+        }
+        export { name_4 as name };
+        export namespace initials_2 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { initials_2 as initials };
+        export namespace size_5 {
+            let control_2: string;
+            export { control_2 as control };
+            export let options: string[];
+        }
+        export { size_5 as size };
+        export namespace src_2 {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        export { src_2 as src };
+        export namespace more_1 {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        export { more_1 as more };
+    }
+    export namespace args_5 {
+        let name_5: string;
+        export { name_5 as name };
+        let size_6: string;
+        export { size_6 as size };
+    }
+    export { args_5 as args };
+}
+import Avatar from './Avatar.jsx';

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

@@ -0,0 +1,75 @@
+export default meta;
+export const Playground: {};
+export namespace Gallery {
+    function render(): any;
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace Aliases {
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace Sizes {
+    export function render_2(): any;
+    export { render_2 as render };
+}
+export namespace InTags {
+    export function render_3(): any;
+    export { render_3 as render };
+}
+export namespace Labelled {
+    export namespace args {
+        let name: string;
+        let label: boolean;
+        let size: number;
+    }
+    export function play_1({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_1 as play };
+}
+export namespace UnknownIsEmpty {
+    export function render_4(): any;
+    export { render_4 as render };
+    export function play_2({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_2 as play };
+}
+declare namespace meta {
+    export let title: string;
+    export { BrandMark as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace name_1 {
+            let control: string;
+            let options: string[];
+        }
+        export { name_1 as name };
+        export namespace size_1 {
+            export namespace control_1 {
+                let type: string;
+                let min: number;
+                let max: number;
+                let step: number;
+            }
+            export { control_1 as control };
+        }
+        export { size_1 as size };
+        export namespace label_1 {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        export { label_1 as label };
+    }
+    export namespace args_1 {
+        let name_2: string;
+        export { name_2 as name };
+    }
+    export { args_1 as args };
+    export namespace parameters {
+        let layout: string;
+    }
+}
+import BrandMark from './BrandMark.jsx';

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

@@ -0,0 +1,91 @@
+export default meta;
+export const Playground: {};
+export namespace WithIcons {
+    namespace args {
+        let items: ({
+            label: string;
+            href: string;
+            icon: react.ForwardRefExoticComponent<any>;
+        } | {
+            label: string;
+            icon: react.ForwardRefExoticComponent<any>;
+            href?: undefined;
+        })[];
+    }
+}
+export namespace SingleCurrent {
+    export namespace args_1 {
+        let items_1: {
+            label: string;
+        }[];
+        export { items_1 as items };
+    }
+    export { args_1 as args };
+}
+export namespace DeepPath {
+    export namespace args_2 {
+        let items_2: ({
+            label: string;
+            href: string;
+        } | {
+            label: string;
+            href?: undefined;
+        })[];
+        export { items_2 as items };
+    }
+    export { args_2 as args };
+}
+export namespace LongLabel {
+    export namespace args_3 {
+        let items_3: ({
+            label: string;
+            href: string;
+        } | {
+            label: string;
+            href?: undefined;
+        })[];
+        export { items_3 as items };
+    }
+    export { args_3 as args };
+}
+export namespace StepsWizard {
+    function render(): any;
+}
+export namespace StepsFirst {
+    export function render_1(): any;
+    export { render_1 as render };
+}
+export namespace StepsComplete {
+    export function render_2(): any;
+    export { render_2 as render };
+}
+declare namespace meta {
+    export let title: string;
+    export { Breadcrumb as component };
+    export let decorators: Function[];
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace label {
+            let control: string;
+        }
+        export namespace items_4 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { items_4 as items };
+    }
+    export namespace args_4 {
+        let label_1: string;
+        export { label_1 as label };
+        let items_5: ({
+            label: string;
+            href: string;
+        } | {
+            label: string;
+            href?: undefined;
+        })[];
+        export { items_5 as items };
+    }
+    export { args_4 as args };
+}
+import Breadcrumb from './Breadcrumb.jsx';