import type * as React from 'react';

/** The two colours of the checks, as 0 to 1 RGB. */
export interface Colourway { ink: readonly [number, number, number]; paper: readonly [number, number, number]; amounts?: boolean }

export interface PaperProps {
  /** "deli" (the portfolio), "ledger" (splitova), "hook" (mhook), or your own colours. Default "deli". */
  colourway?: 'deli' | 'ledger' | 'hook' | Colourway;
  /** Print + and − rupee amounts that count up. Default: on for "ledger" only. */
  amounts?: boolean;
  /** Fill the parent instead of the window. */
  contained?: boolean;
  className?: string;
}
export declare function Paper(props: PaperProps): React.ReactElement;

export interface CardProps { as?: keyof JSX.IntrinsicElements; className?: string; style?: React.CSSProperties; children?: React.ReactNode }
export declare function Card(props: CardProps): React.ReactElement;

export interface ColumnsProps { className?: string; children?: React.ReactNode }
export declare function Columns(props: ColumnsProps): React.ReactElement;

export interface MastheadLink { label: React.ReactNode; href: string }
export interface MastheadProps {
  /** The left stack: the app first (with its mark in `brand`), then one or two links. The brand also shows in the pinned strip. */
  lead?: (MastheadLink & { brand?: React.ReactNode })[];
  /** The right stack, which pins to the top as one row. Three or four links. */
  nav?: (MastheadLink & { current?: boolean })[];
  /** false keeps it static. Default true. */
  pin?: boolean;
  leadLabel?: string;
  navLabel?: string;
  className?: string;
}
export declare function Masthead(props: MastheadProps): React.ReactElement;

export interface SectionProps { title?: React.ReactNode; id?: string; className?: string; style?: React.CSSProperties; children?: React.ReactNode }
export declare function Section(props: SectionProps): React.ReactElement;

export interface HeroProps { title: React.ReactNode; lede?: React.ReactNode; actions?: React.ReactNode; className?: string; children?: React.ReactNode }
export declare function Hero(props: HeroProps): React.ReactElement;

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** ink: the one call to action. outline: the quiet second. text: a link beside them. Default "ink". */
  variant?: 'ink' | 'outline' | 'text';
  /** Renders an <a> instead of a <button>. */
  href?: string;
}
export declare function Button(props: ButtonProps): React.ReactElement;

export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}
export declare function TextLink(props: TextLinkProps): React.ReactElement;

export interface MarkerProps {
  /** Default "red". */
  tone?: 'red' | 'yellow' | 'blue' | 'hook' | 'ink';
  /** Tight padding for a word mid-sentence. */
  inline?: boolean;
  /** false shows it already drawn. Default true. */
  draw?: boolean;
  className?: string;
  children?: React.ReactNode;
}
export declare function Marker(props: MarkerProps): React.ReactElement;

export interface RowItem { title: React.ReactNode; detail?: React.ReactNode; href?: string; key?: React.Key }
export interface RowsProps { items: RowItem[]; /** Details are numbers: tabular, and kept on the right. */ figures?: boolean; className?: string }
export declare function Rows(props: RowsProps): React.ReactElement;

export interface PhonesProps { className?: string; children?: React.ReactNode }
export declare function Phones(props: PhonesProps): React.ReactElement;

export interface PhoneProps { src: string; alt: string; caption?: React.ReactNode; width?: number; height?: number; loading?: 'eager' | 'lazy'; className?: string }
export declare function Phone(props: PhoneProps): React.ReactElement;

export interface RevealProps { as?: keyof JSX.IntrinsicElements; className?: string; style?: React.CSSProperties; children?: React.ReactNode }
export declare function Reveal(props: RevealProps): React.ReactElement;

export interface AmountProps {
  /** Rupees; negative for money owed. */
  value: number;
  /** Grow from zero when it enters the window. */
  count?: boolean;
  /** Milliseconds. Default 1300. */
  duration?: number;
  /** false drops the ₹. */
  currency?: boolean;
  label?: string;
  className?: string;
}
export declare function Amount(props: AmountProps): React.ReactElement;

export declare function Code(props: { className?: string; children?: React.ReactNode }): React.ReactElement;
export declare function CodeBlock(props: { className?: string; children?: React.ReactNode }): React.ReactElement;

export interface BadgeProps { tone?: 'neutral' | 'credit' | 'debit'; className?: string; children?: React.ReactNode }
export declare function Badge(props: BadgeProps): React.ReactElement;

export interface FieldProps extends React.InputHTMLAttributes<HTMLInputElement> { id: string; label: React.ReactNode; hint?: React.ReactNode; error?: React.ReactNode }
export declare function Field(props: FieldProps): React.ReactElement;

/** Mounts the paper into any element without React. Returns a function that removes it. */
export declare function mountPaper(host: HTMLElement, colourway?: PaperProps['colourway'], options?: { amounts?: boolean }): () => void;
export declare const colourways: Record<'deli' | 'ledger' | 'hook', Colourway>;
/** The grid the checks are printed on, for anything that lines up with them. */
export declare const grid: { size: number; angle: number };
/** Durations in ms and easings, matching the duration-* and ease-* tokens. */
export declare const motion: Record<string, number | string>;

declare global {
  interface Window {
    DeliPaper: {
      Paper: typeof Paper; Card: typeof Card; Columns: typeof Columns; Masthead: typeof Masthead; Section: typeof Section;
      Hero: typeof Hero; Button: typeof Button; TextLink: typeof TextLink; Marker: typeof Marker; Rows: typeof Rows;
      Phones: typeof Phones; Phone: typeof Phone; Reveal: typeof Reveal; Amount: typeof Amount; Code: typeof Code;
      CodeBlock: typeof CodeBlock; Badge: typeof Badge; Field: typeof Field;
      mountPaper: typeof mountPaper; colourways: typeof colourways; grid: typeof grid; motion: typeof motion;
    };
  }
}