import * as react_jsx_runtime from 'react/jsx-runtime';
import { CentralIconName } from '@central-icons-react/round-outlined-radius-2-stroke-1.5';
export { CentralIconName } from '@central-icons-react/round-outlined-radius-2-stroke-1.5';
import React from 'react';

interface IconProps {
    /** Icon name from @central-icons-react (e.g. "IconHome", "IconChevronRight") */
    name: CentralIconName;
    /** Size in px — maps to --icon-size-* tokens. Defaults to 16. */
    size?: 16 | 20 | 28;
    /** Additional CSS classes */
    className?: string;
    /**
     * Accessible label for non-decorative icons.
     * Omit for decorative icons — aria-hidden is applied automatically.
     */
    'aria-label'?: string;
}
declare function Icon({ name, size, className, 'aria-label': ariaLabel, }: IconProps): react_jsx_runtime.JSX.Element | null;

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** Visual variant. Default: 'action' */
    variant?: 'action' | 'brand' | 'primary' | 'secondary' | 'ghost';
    /** Size. Default: 'md' */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Leading icon name. When provided without `children`, renders as icon-only.
     * Icon-only buttons MUST have an `aria-label` on the Button.
     */
    leadingIcon?: CentralIconName;
    /** Trailing icon name. Ignored when rendering icon-only. */
    trailingIcon?: CentralIconName;
}
declare function Button({ variant, size, leadingIcon, trailingIcon, className, children, disabled, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;

interface NavItemProps {
    /** Visible text label */
    label: string;
    /** Leading icon (root level only; ignored on child) */
    icon?: CentralIconName;
    /** Whether this item represents the current active route */
    isSelected?: boolean;
    /** Hierarchy level. Default: 'root' */
    level?: 'root' | 'child';
    /** Root only — shows an expand/collapse chevron */
    hasChevron?: boolean;
    /** Root + hasChevron — controls chevron direction (up = expanded) */
    isExpanded?: boolean;
    /** Root only — sidebar is in icon-only collapsed mode */
    isCollapsed?: boolean;
    /** Click handler */
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    /** Additional CSS classes */
    className?: string;
}
declare function NavItem({ label, icon, isSelected, level, hasChevron, isExpanded, isCollapsed, onClick, className, }: NavItemProps): react_jsx_runtime.JSX.Element;

interface SelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** Visual variant. Default: 'primary' */
    variant?: 'primary' | 'secondary';
    /** Size. Default: 'md' */
    size?: 'sm' | 'md' | 'lg';
    /** Error state — applies the error stroke. */
    error?: boolean;
    /**
     * Optional leading content rendered before the value text.
     * Pass any node — typically an `<Icon />`, avatar, or currency flag.
     */
    leading?: React.ReactNode;
    /** Placeholder text shown when there is no value (no children). */
    placeholder?: string;
}
declare function Select({ variant, size, error, leading, placeholder, className, children, disabled, type, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;

interface NavChildConfig {
    label: string;
}
interface NavItemConfig {
    label: string;
    icon: CentralIconName;
    children?: NavChildConfig[];
}
interface NavProps {
    /** Full items list. Defaults to the Figma catalog (Accounts → Approval). */
    items?: NavItemConfig[];
    /** Currently active page label (matches a root label or a child label). */
    activePage?: string;
    /** Sidebar collapsed (icon-only) mode. */
    isCollapsed?: boolean;
    /** Fires when a root or child item is clicked. */
    onPageChange?: (label: string) => void;
    /** Fires when the sidebar collapse-toggle button is clicked. */
    onToggleCollapse?: () => void;
    /** Account label shown at the top. */
    account?: string;
    /** Footer kebab menu click handler. */
    onMenuClick?: () => void;
    /** Additional CSS classes */
    className?: string;
}
/** Default navigation items, mirroring the Figma catalog (node 1885:5467). */
declare const DEFAULT_NAV_ITEMS: NavItemConfig[];
declare function Nav({ items, activePage, isCollapsed, onPageChange, onToggleCollapse, account, onMenuClick, className, }: NavProps): react_jsx_runtime.JSX.Element;

interface PageProps {
    /**
     * Sidebar element. Typically a `<Nav />`. Sits flush-left and keeps
     * its own intrinsic width; the content area fills the rest.
     */
    sidebar?: React.ReactNode;
    /**
     * Top action bar. Typically a `<PageActionBar />`. Rendered at the
     * top of the content area, above the title.
     */
    actionBar?: React.ReactNode;
    /**
     * Page title. Typically a `<PageTitle />`. Rendered below the action
     * bar with 72px of spacing between them.
     */
    title?: React.ReactNode;
    /** Main page content rendered below the header. */
    children?: React.ReactNode;
    /** Additional CSS classes on the outer container. */
    className?: string;
}
/**
 * Application shell. A horizontal flex row with a sidebar slot on the left
 * and a content area filling the remaining viewport width. The content
 * area provides chrome (padding, header layout) and named slots for the
 * standard page header sections — action bar and title — plus a `children`
 * slot for the body content below.
 */
declare function Page({ sidebar, actionBar, title, children, className, }: PageProps): react_jsx_runtime.JSX.Element;

interface PageActionBarProps {
    /** Actions rendered on the left side, in source order. Typically `<Button>`s. */
    left?: React.ReactNode;
    /** Actions rendered on the right side, in source order. Typically `<Button>`s. */
    right?: React.ReactNode;
    /** Additional CSS classes on the outer container. */
    className?: string;
}
/**
 * Page-level action bar. A full-width horizontal row with two slots:
 * `left` (start-aligned) and `right` (end-aligned), separated by `justify-content: space-between`.
 * Inside each slot, items are flowed with a 6px gap (`--sizing-6`).
 * Layout-only — has no styling beyond spacing; the action buttons own their own look.
 */
declare function PageActionBar({ left, right, className }: PageActionBarProps): react_jsx_runtime.JSX.Element;

interface PageTitleProps {
    /** Main heading text (or nodes). */
    title: React.ReactNode;
    /** Optional subtitle rendered below the heading, same type style in `--text-tertiary`. */
    subtitle?: React.ReactNode;
    /** Actions rendered to the right of the heading row. Typically `<Button>`s at size="sm". */
    actions?: React.ReactNode;
    /** Heading element for semantic HTML. Default: 'h1'. */
    as?: 'h1' | 'h2' | 'h3' | 'h4';
    /** Additional CSS classes on the outer container. */
    className?: string;
}
/**
 * Page-level header: heading on the left (with optional actions on the right),
 * and an optional subtitle below — same KMR Apparat 32px style in `--text-tertiary`.
 * Layout-only; pass any `<Button>`s into `actions` for the right slot.
 */
declare function PageTitle({ title, subtitle, actions, as: Heading, className, }: PageTitleProps): react_jsx_runtime.JSX.Element;

export { Button, type ButtonProps, DEFAULT_NAV_ITEMS, Icon, type IconProps, Nav, type NavChildConfig, NavItem, type NavItemConfig, type NavItemProps, type NavProps, Page, PageActionBar, type PageActionBarProps, type PageProps, PageTitle, type PageTitleProps, Select, type SelectProps };
