@walkeros/explorer 4.7.2 → 4.8.0-next-1791496487198

package/dist/design/components/index.d.cts

@@ -0,0 +1,382 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes, DetailsHTMLAttributes } from 'react';
+
+/** Tagging and test attributes passed through to an element (`data-alst*`, `data-elb*`). */
+type DataAttributes = Record<`data-${string}`, string>;
+/** A client-side router link (a Docusaurus or Next `Link`) rendered instead of `<a>`. */
+type LinkComponent = ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+/** A call to action inside a component: its label, its target and its own tagging. */
+interface CallToAction {
+    label: ReactNode;
+    href: string;
+    attributes?: DataAttributes;
+}
+
+interface ButtonOwnProps {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary';
+    arrow?: boolean;
+    block?: boolean;
+    className?: string;
+}
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+/** With `href`: a link, rendered by `linkComponent` when given, else `<a>`. */
+interface ButtonLinkProps extends ButtonOwnProps, Omit<AnchorProps, keyof ButtonOwnProps | 'href'> {
+    href: string;
+    /**
+     * A client-side router link (a Docusaurus or Next `Link` taking `href`),
+     * rendered instead of `<a>` with the same `href`, `className`, children and
+     * every other attribute.
+     */
+    linkComponent?: LinkComponent;
+}
+/** Without `href`: a `<button>`, `type="button"` unless `type` says otherwise. */
+interface ButtonElementProps extends ButtonOwnProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> {
+    href?: undefined;
+    linkComponent?: undefined;
+}
+/**
+ * Every attribute Button does not own (`data-elb*` tagging, `aria-*`,
+ * `onClick`, ...) reaches the rendered element.
+ */
+type ButtonProps = ButtonLinkProps | ButtonElementProps;
+/**
+ * The walkerOS call-to-action: a `primary` fill with `on-primary` text, or a
+ * flat `surface` secondary. Renders a link with `href`, a button otherwise.
+ * Use at most one primary per group.
+ */
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+}
+/** Mono code token inside prose: attribute names, function calls, event names. */
+declare function InlineCode({ children, className, ...rest }: InlineCodeProps): react_jsx_runtime.JSX.Element;
+
+interface EventLegendProps extends HTMLAttributes<HTMLDivElement> {
+    parts?: Array<'entity' | 'action' | 'property' | 'context' | 'globals'>;
+}
+/**
+ * The fixed colour key for the five parts of a walkerOS event. Event colours
+ * only show on dark grounds, so the legend is a dark island in both themes.
+ * `parts` shows a subset, still in event order.
+ */
+declare function EventLegend({ parts, className, ...rest }: EventLegendProps): react_jsx_runtime.JSX.Element;
+
+type IconName = 'check' | 'copy' | 'lock' | 'reload' | 'bookmark' | 'warning';
+interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
+    name: IconName;
+    size?: number;
+}
+/** The design system's line glyphs, drawn in currentColor; a check is always primary. */
+declare function Icon({ name, size, className, ...rest }: IconProps): react_jsx_runtime.JSX.Element;
+
+interface EyebrowProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    variant?: 'eyebrow' | 'label';
+    tone?: 'link' | 'muted';
+}
+/** An uppercase line above a heading (`eyebrow`) or a card's tier label (`label`). */
+declare function Eyebrow({ children, variant, tone, className, ...rest }: EyebrowProps): react_jsx_runtime.JSX.Element;
+
+interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    value: ReactNode;
+    children: ReactNode;
+}
+/** One figure and its label, as a tile inside a case card. */
+declare function Stat({ value, children, className, ...rest }: StatProps): react_jsx_runtime.JSX.Element;
+
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    size?: 'body' | 'lg';
+    tone?: 'muted' | 'fg';
+}
+/** A paragraph of supporting copy, `fg-2` unless `tone="fg"`. */
+declare function Text({ children, size, tone, className, ...rest }: TextProps): react_jsx_runtime.JSX.Element;
+
+interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: string;
+    children: ReactNode;
+    tone?: 'link' | 'muted';
+    arrow?: boolean;
+    /** A router link rendered instead of `<a>`, with the same props. */
+    linkComponent?: LinkComponent;
+}
+/** An inline link in `link` (or `fg-2`) colour, underlined on hover. */
+declare function TextLink({ href, children, tone, arrow, linkComponent: Link, className, ...rest }: TextLinkProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** `sm` card-pad-sm (26px), `md` card-pad (28px), `lg` 32px. */
+    padding?: 'sm' | 'md' | 'lg';
+    radius?: 'lg' | 'xl';
+    /** Tints the border toward primary on hover. */
+    hover?: boolean;
+    /** The one recommended item: primary border and the plan-highlight ring. */
+    highlight?: boolean;
+    /** A glow halo in the top right corner. */
+    glow?: boolean;
+}
+/** The flat card frame: surface, 1px border, a column of children. */
+declare function Card({ children, padding, radius, hover, highlight, glow, className, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface InstallCommandProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type' | 'children'> {
+    /** The command shown and copied. */
+    command?: string;
+}
+/**
+ * A copy-to-clipboard chip for a CLI command. It confirms with a check only when
+ * the copy succeeded, and says "Copy failed" otherwise. The button's accessible
+ * name is the visible command, so speech input can target it; the action is its
+ * description. The live region sits beside the button: a button's content is
+ * presentational for assistive technology.
+ */
+declare function InstallCommand({ command, className, 'aria-describedby': describedBy, ...rest }: InstallCommandProps): react_jsx_runtime.JSX.Element;
+
+interface PhotoPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The word in the middle. */
+    label?: string;
+    /** `theme` follows dark and light; `viz` is the demos' look, dark in both. */
+    tone?: 'theme' | 'viz';
+}
+/** A striped stand-in for a photo, sized by the caller. */
+declare function PhotoPlaceholder({ label, tone, className, ...rest }: PhotoPlaceholderProps): react_jsx_runtime.JSX.Element;
+
+interface CheckListProps extends HTMLAttributes<HTMLUListElement> {
+    items: ReactNode[];
+    /** `inline` wraps in a row (16px checks); `stack` is a column (14px checks). */
+    layout?: 'inline' | 'stack';
+    align?: 'start' | 'center';
+}
+/** Short claims, each led by a primary check. */
+declare function CheckList({ items, layout, align, className, ...rest }: CheckListProps): react_jsx_runtime.JSX.Element;
+
+interface SectionHeadingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    eyebrow?: ReactNode;
+    lead?: ReactNode;
+    /** 1 is the page's hero heading: an h1, always centred. */
+    level?: 1 | 2;
+    /** The h2 size: `lg` for sections, `md` beside a demo. */
+    size?: 'lg' | 'md';
+    /** Hero only: a phrase after the title in primary. */
+    highlight?: ReactNode;
+    align?: 'start' | 'center';
+}
+/** Eyebrow, heading and lead: the opening of a section, or the hero. */
+declare function SectionHeading({ title, eyebrow, lead, level, size, highlight, align, className, ...rest }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+
+interface ProblemCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    number: string;
+    title: ReactNode;
+    children: ReactNode;
+}
+/** A numbered card naming one problem. */
+declare function ProblemCard({ number, title, children, className, ...rest }: ProblemCardProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    children: ReactNode;
+    href?: string;
+    linkLabel?: string;
+    /** A router link rendered instead of `<a>`. */
+    linkComponent?: LinkComponent;
+    /** Tagging for the link alone (the root takes the item's own). */
+    linkAttributes?: DataAttributes;
+}
+/** A checked feature with a title, one sentence and a docs link. */
+declare function FeatureItem({ title, children, href, linkLabel, linkComponent, linkAttributes, className, ...rest }: FeatureItemProps): react_jsx_runtime.JSX.Element;
+
+interface FaqItemProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'children'> {
+    question: ReactNode;
+    /** The answer; an array renders one block per entry, strings as paragraphs. */
+    children: ReactNode;
+}
+/** One FAQ question as a native disclosure; `open` sets the initial state. */
+declare function FaqItem({ question, children, className, ...rest }: FaqItemProps): react_jsx_runtime.JSX.Element;
+
+interface PlanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    label: string;
+    title: ReactNode;
+    children: ReactNode;
+    features?: ReactNode[];
+    cta?: CallToAction;
+    /** The one recommended plan: primary CTA, ring, link-coloured label. */
+    highlight?: boolean;
+    linkComponent?: LinkComponent;
+}
+/** A service tier: label, name, description, checked features and a CTA. */
+declare function PlanCard({ label, title, children, features, cta, highlight, linkComponent, className, ...rest }: PlanCardProps): react_jsx_runtime.JSX.Element;
+
+interface CaseStat {
+    value: ReactNode;
+    label: ReactNode;
+}
+interface CaseCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    label: string;
+    title: ReactNode;
+    children: ReactNode;
+    stats: CaseStat[];
+}
+/** A customer story: label, headline, text and a row of stat tiles. */
+declare function CaseCard({ label, title, children, stats, className, ...rest }: CaseCardProps): react_jsx_runtime.JSX.Element;
+
+interface HighlightCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    label: string;
+    title: ReactNode;
+    children: ReactNode;
+    /** A secondary button below the text; omit for a card without one. */
+    cta?: CallToAction;
+    linkComponent?: LinkComponent;
+}
+/** A large card with a corner glow and an optional secondary CTA: a direction to explore. */
+declare function HighlightCard({ label, title, children, cta, linkComponent, className, ...rest }: HighlightCardProps): react_jsx_runtime.JSX.Element;
+
+interface BrowserBookmark {
+    label: string;
+    url: string;
+}
+interface BrowserFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shown read-only in the address field. */
+    url: string;
+    /** A row of links under the address bar; the one whose `url` equals `url` is current. */
+    bookmarks?: ReadonlyArray<BrowserBookmark>;
+    /** Called with a bookmark's url on its click; without it the bookmarks are disabled. */
+    onNavigate?: (url: string) => void;
+    /** Adds a reload button. */
+    onReload?: () => void;
+    /** The caller's controls at the end of the address bar, after reload; a link or button there looks like reload. */
+    actions?: ReactNode;
+    /** The page: fills the viewport. An `iframe` takes its full size, borderless. */
+    children: ReactNode;
+}
+/**
+ * A browser window around a page, on the site theme. The caller sizes it: give
+ * the root a height (and a width where it does not fill its parent) through
+ * `className` or `style`; the viewport takes what the bars leave.
+ */
+declare function BrowserFrame({ url, bookmarks, onNavigate, onReload, actions, children, className, ...rest }: BrowserFrameProps): react_jsx_runtime.JSX.Element;
+
+interface QuickstartStep {
+    title: string;
+    text: string;
+}
+interface QuickstartStepsProps extends HTMLAttributes<HTMLDivElement> {
+    steps: ReadonlyArray<QuickstartStep>;
+    /** After the steps, aligned to their start: the link to the full guide. */
+    children?: ReactNode;
+}
+/**
+ * Numbered steps in a row joined by hand-drawn arrows, a column on narrow
+ * screens; the children follow below.
+ */
+declare function QuickstartSteps({ steps, children, className, ...rest }: QuickstartStepsProps): react_jsx_runtime.JSX.Element;
+
+interface SectionProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    /** `alt` grounds the band in bg-2. */
+    tone?: 'default' | 'alt';
+}
+/** A page band: section-y padding, a top rule, a container whose children stand heading-gap apart. */
+declare function Section({ children, tone, className, ...rest }: SectionProps): react_jsx_runtime.JSX.Element;
+
+interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** The minimum column width in px; columns auto-fit. */
+    min: 280 | 300 | 420 | 440;
+    /** `cards` gap space-5; `features` 44px rows and 48px columns. */
+    gap?: 'cards' | 'features';
+}
+/** An auto-fit grid of cards or feature items. */
+declare function CardGrid({ children, min, gap, className, ...rest }: CardGridProps): react_jsx_runtime.JSX.Element;
+
+interface SplitProps extends HTMLAttributes<HTMLDivElement> {
+    start: ReactNode;
+    end: ReactNode;
+    /** `even`: two equal columns from 420px; `aside`: a narrow heading column beside a wide one. */
+    variant?: 'even' | 'aside';
+}
+/** Two columns that stack when narrow. */
+declare function Split({ start, end, variant, className, ...rest }: SplitProps): react_jsx_runtime.JSX.Element;
+
+interface ClusterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** `actions` 12px apart; `links` 8px rows and 24px columns. */
+    gap?: 'actions' | 'links';
+    align?: 'start' | 'center';
+    /**
+     * Set apart from the content above by an extra heading gap, for a call to
+     * action below a section's content.
+     */
+    separated?: boolean;
+}
+/** A wrapping row of buttons or links. */
+declare function Cluster({ children, gap, align, separated, className, ...rest }: ClusterProps): react_jsx_runtime.JSX.Element;
+
+interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow: ReactNode;
+    title: ReactNode;
+    /** A phrase after the title in primary. */
+    highlight?: ReactNode;
+    lead: ReactNode;
+    /** The call-to-action row. */
+    actions: ReactNode;
+    /** A short proof line below the actions. */
+    proof?: ReactNode;
+    /** The demo below, left-aligned. */
+    children?: ReactNode;
+}
+/** The page's opening band: centred heading, actions, proof and a demo, on a glow. */
+declare function Hero({ eyebrow, title, highlight, lead, actions, proof, children, className, ...rest }: HeroProps): react_jsx_runtime.JSX.Element;
+
+interface DestinationMappingVizProps extends HTMLAttributes<HTMLDivElement> {
+    /** The event chosen first, on the server too. */
+    initialEvent?: 0 | 1 | 2;
+    /** Text below the cards; `''` hides it. */
+    caption?: string;
+}
+/**
+ * Mapping demo: pick one `elb()` event and see the mapping rule and the call it
+ * produces in GA4, Meta Pixel, TikTok Pixel and Amplitude. The calls are what
+ * the real destinations send for these rules; a fidelity test holds them to it.
+ */
+declare function DestinationMappingViz({ initialEvent, caption, ...rest }: DestinationMappingVizProps): react_jsx_runtime.JSX.Element;
+
+interface HeroTaggingVizProps extends HTMLAttributes<HTMLDivElement> {
+    playing?: boolean;
+    speed?: number;
+    /** The loop time (ms) of the first frame, on the server too. */
+    startAt?: number;
+}
+/**
+ * Hero demo: walkerOS attributes are typed into an article teaser, the card
+ * lights up as each part is tagged, a cursor clicks it, and the events land in
+ * a live table. Animates only while visible; still with reduced motion.
+ */
+declare function HeroTaggingViz({ playing, speed, startAt, ...rest }: HeroTaggingVizProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * The article teaser demo's script: one ArticleTeaser tagged once, walked from
+ * atom to page templates. The code pane, the cards, the page HTML and the
+ * expected events all come from the constants below, so a fidelity test that
+ * runs the page HTML through walkerOS checks what the cards show.
+ */
+
+type TeaserStep = 1 | 2 | 3 | 4 | 5;
+
+interface ArticleTeaserTrackingProps extends HTMLAttributes<HTMLDivElement> {
+    autoplay?: boolean;
+    speed?: number;
+    /** Start with this step shown in full (the server frame is step 0 otherwise). */
+    initialStep?: TeaserStep;
+}
+/**
+ * Tagging demo: one ArticleTeaser tagged once, walked through atom, molecule,
+ * organisms and pages, showing how every instance inherits entity, action,
+ * properties, context and globals. Autoplays while the code is in view; shows
+ * the finished walk-through with reduced motion. A clicked step plays from its
+ * start and stays there.
+ */
+declare function ArticleTeaserTracking({ autoplay, speed, initialStep, ...rest }: ArticleTeaserTrackingProps): react_jsx_runtime.JSX.Element;
+
+export { ArticleTeaserTracking, type ArticleTeaserTrackingProps, type BrowserBookmark, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, type CallToAction, Card, CardGrid, type CardGridProps, type CardProps, CaseCard, type CaseCardProps, type CaseStat, CheckList, type CheckListProps, Cluster, type ClusterProps, type DataAttributes, DestinationMappingViz, type DestinationMappingVizProps, EventLegend, type EventLegendProps, Eyebrow, type EyebrowProps, FaqItem, type FaqItemProps, FeatureItem, type FeatureItemProps, Hero, type HeroProps, HeroTaggingViz, type HeroTaggingVizProps, HighlightCard, type HighlightCardProps, Icon, type IconProps, InlineCode, type InlineCodeProps, InstallCommand, type InstallCommandProps, type LinkComponent, PhotoPlaceholder, type PhotoPlaceholderProps, PlanCard, type PlanCardProps, ProblemCard, type ProblemCardProps, type QuickstartStep, QuickstartSteps, type QuickstartStepsProps, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Split, type SplitProps, Stat, type StatProps, Text, TextLink, type TextLinkProps, type TextProps };