import { type ComponentProps, type ReactNode } from "react";
/**
 * Navigation items for the main rail and the settings rail.
 *
 * NavItem: 32px, radius 10, 16px icon, 14/500 muted. Hover is the `hover` wash; active is the
 * stronger `selection` fill, full-strength text and a 2x16px brand bar on the left edge. Every
 * destination appears once, with one name and one icon. Coarse pointers get a
 * 44px target.
 *
 * SettingsNav variants:
 * - `rail`: the 240px settings rail that replaces the main rail in settings
 *   mode (back link and scope switcher as header). This is what the app uses.
 * - `column` (default): a 200px column inside the content area, kept for the
 *   kit's history.
 */
export type NavItemSize = "default" | "comfortable";
export interface NavItemProps extends Omit<ComponentProps<"a">, "children"> {
    /** Render your router's link as the only child (`<Link to="..." />`). */
    asChild?: boolean | undefined;
    children?: ReactNode | undefined;
    /** Same name as the page title and the route noun. */
    label: ReactNode;
    /** A 16px lucide icon. One icon per destination. */
    icon?: ReactNode | undefined;
    active?: boolean | undefined;
    /** Trailing count or text, 11px: "3". */
    badge?: ReactNode | undefined;
    /** A purple dot for "needs you" (for example pending reviews). */
    attention?: boolean | undefined;
    /** Read after the label when `attention` is set. */
    attentionLabel?: string | undefined;
    /** Trailing icon for links that leave this area ("Organization →"). */
    trailingIcon?: ReactNode | undefined;
    /** Icon-only, with the label in a tooltip (collapsed rail). */
    collapsed?: boolean | undefined;
    /** `default` 32px; `comfortable` 36px (a rail with few items). */
    size?: NavItemSize | undefined;
    /**
     * Blocks the destination and explains why in a tooltip. Prefer hiding
     * destinations the viewer can never use.
     */
    disabledReason?: string | undefined;
}
export declare function NavItem({ asChild, children, label, icon, active, badge, attention, attentionLabel, trailingIcon, collapsed, size, disabledReason, className, ...props }: NavItemProps): import("react").JSX.Element;
/** A placeholder item while the list of destinations loads. */
export declare function NavItemSkeleton({ collapsed, width, }: {
    collapsed?: boolean | undefined;
    /** Tailwind width class for the label bar. */
    width?: string | undefined;
}): import("react").JSX.Element;
/**
 * A list of NavItems with an optional 12px sentence-case label. Each child is
 * wrapped in a list item.
 */
export declare function NavGroup({ label, collapsed, className, children, }: {
    label?: ReactNode | undefined;
    /** Hides the label (collapsed rail); a hairline marks the group instead. */
    collapsed?: boolean | undefined;
    className?: string | undefined;
    children: ReactNode;
}): import("react").JSX.Element;
export type SettingsNavVariant = "column" | "rail";
export interface SettingsNavProps extends ComponentProps<"nav"> {
    variant?: SettingsNavVariant | undefined;
    /** Top slot: the workspace switcher (rail) or a small title (column). */
    header?: ReactNode | undefined;
    /** Bottom slot: the link to organization settings. */
    footer?: ReactNode | undefined;
}
/** The settings navigation. Label it: `aria-label="Workspace settings"`. */
export declare function SettingsNav({ variant, header, footer, className, children, ...props }: SettingsNavProps): import("react").JSX.Element;