import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
/**
 * NeoPop primitives mirrored from the OttoRouter dashboard
 * (`setu/apps/web/src/components/neopop`) but re-expressed with Tailwind
 * arbitrary values so they work inside the product's shadcn-style theme
 * without adding global stylesheet rules to every app shell.
 *
 * The palette lives on {@link NEO_SCOPE}: put that class on the root of any
 * NeoPop surface and every descendant inherits the `--np-*` custom properties.
 */
export type NeoTone = 'surface' | 'card' | 'bg' | 'ink';
/** The four brand colours. Blue is primary, lime positive, yellow caution,
 * coral danger — the same semantics the OttoRouter dashboard uses. */
export type NeoAccent = 'blue' | 'lime' | 'yellow' | 'coral';
export type NeoElevation = 'none' | 'sm' | 'md' | 'lg';
export declare function cn(...parts: Array<string | false | null | undefined>): string;
/** Near-square corners keep the boxy silhouette while avoiding hard pixels. */
export declare const NEO_RADIUS = "rounded-[3px]";
/** 11px / 0.18em / 600 uppercase — the NeoPop micro-label. */
export declare const NEO_EYEBROW = "text-[11px] font-semibold uppercase leading-none tracking-[0.18em]";
/**
 * Declares the whole NeoPop palette as inherited custom properties. The four
 * accents hold the same value in both themes so the dashboard reads
 * identically light or dark; only the structural edge/shadow neutrals flip,
 * because a hard offset shadow has to invert to stay visible.
 */
export declare const NEO_SCOPE: string;
export declare const NEO_EDGE = "border-2 border-[rgb(var(--np-edge))]";
export declare const ELEVATION: Record<NeoElevation, string>;
/** Background + foreground pair for each neutral tone. */
export declare const TONE_SURFACE: Record<NeoTone, string>;
/** Solid accent fill, for chart bars, meters, and active controls. */
export declare const ACCENT_FILL: Record<NeoAccent, string>;
/** Readable foreground on top of the matching {@link ACCENT_FILL}. */
export declare const ACCENT_ON: Record<NeoAccent, string>;
/** Foreground-only accent colour, for values and icons on neutral surfaces. */
export declare const ACCENT_TEXT: Record<NeoAccent, string>;
/**
 * Deep shade of each accent. A filled accent surface takes this for its border
 * and hard drop, so the extrusion reads as the fill in shadow rather than ink.
 */
export declare const ACCENT_CAST_BORDER: Record<NeoAccent, string>;
export declare const ACCENT_CAST_SHADOW: Record<NeoAccent, string>;
/**
 * Colours the edge and hard shadow in the accent itself while the fill stays
 * neutral — an outlined-and-dropped card.
 */
export declare const ACCENT_TINT: Record<NeoAccent, string>;
export declare const ACCENT_ORDER: NeoAccent[];
export interface NeoPanelProps extends HTMLAttributes<HTMLElement> {
    as?: 'div' | 'section' | 'article' | 'header' | 'aside' | 'li';
    tone?: NeoTone;
    /** Draws the edge and drop in a brand colour while the fill stays neutral. */
    accent?: NeoAccent;
    elevation?: NeoElevation;
    children?: ReactNode;
}
/**
 * Bordered dashboard surface. Elevation is opt-in: only hero-level panels and
 * stat tiles carry the hard drop, so a page of panels does not read as noise.
 */
export declare function NeoPanel({ as: Tag, tone, accent, elevation, className, children, ...rest }: NeoPanelProps): import("react/jsx-runtime").JSX.Element;
/** Mono uppercase micro-label that opens each panel and stat. */
export declare function NeoEyebrow({ children, className, }: {
    children: ReactNode;
    className?: string;
}): import("react/jsx-runtime").JSX.Element;
export interface NeoBadgeProps {
    children: ReactNode;
    accent?: NeoAccent;
    /** Outline-only rendering for lower-emphasis metadata. */
    outline?: boolean;
    title?: string;
    className?: string;
}
/** Compact boxy label used for status chips and deltas. */
export declare function NeoBadge({ children, accent, outline, title, className, }: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
export interface NeoTabOption<T extends string> {
    value: T;
    label: ReactNode;
    title?: string;
}
export interface NeoTabsProps<T extends string> {
    options: ReadonlyArray<NeoTabOption<T>>;
    value: T;
    onChange: (value: T) => void;
    /** Fill colour of the active cell. */
    accent?: NeoAccent;
    'aria-label': string;
    className?: string;
}
/**
 * Segmented control: a bordered tray of flat cells where the selected cell
 * lifts out as a filled accent block with its own cast shadow.
 */
export declare function NeoTabs<T extends string>({ options, value, onChange, accent, className, 'aria-label': ariaLabel, }: NeoTabsProps<T>): import("react/jsx-runtime").JSX.Element;
export interface NeoIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    label: string;
    children: ReactNode;
}
/** Square hard-edged action; translates into its shadow on press. */
export declare function NeoIconButton({ label, children, className, ...rest }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
/** Legend swatch: a small hard square in the accent colour. */
export declare function NeoSwatch({ accent, label, }: {
    accent: NeoAccent;
    label: string;
}): import("react/jsx-runtime").JSX.Element;
/** Faint 44px NeoPop grid, used behind empty states. */
export declare const NEO_GRID_BG = "bg-[linear-gradient(to_right,rgb(var(--np-edge)/0.09)_1px,transparent_1px),linear-gradient(to_bottom,rgb(var(--np-edge)/0.09)_1px,transparent_1px)] bg-[length:44px_44px]";
export declare function NeoEmptyState({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=neopop.d.ts.map