@buun_group/brutalist-ui/dist/react/navigation/Navigation.d.ts

A brutalist-styled component library

/**
 * @module Navigation
 * @description A flexible navigation component system that supports vertical and horizontal layouts with keyboard navigation and accessibility features. Includes list, item, link, and separator sub-components.
 */
import React, { HTMLAttributes, CSSProperties } from 'react';
/**
 * Props for the Navigation component
 */
export interface NavigationProps extends HTMLAttributes<HTMLElement> {
    /**
     * Whether the navigation should be laid out vertically
     * @default false
     */
    vertical?: boolean;
    /**
     * Size variant for the navigation
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Additional CSS classes to apply to the navigation
     */
    className?: string;
    /**
     * Custom styles to apply to the navigation
     */
    style?: CSSProperties;
}
/**
 * Props for the NavigationList component
 */
export interface NavigationListProps extends HTMLAttributes<HTMLUListElement> {
    /**
     * Additional CSS classes to apply to the navigation list
     */
    className?: string;
    /**
     * Custom styles to apply to the navigation list
     */
    style?: CSSProperties;
}
/**
 * Props for the NavigationItem component
 */
export interface NavigationItemProps extends HTMLAttributes<HTMLLIElement> {
    /**
     * Whether this navigation item is currently active
     * @default false
     */
    isActive?: boolean;
    /**
     * Whether this navigation item is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional CSS classes to apply to the navigation item
     */
    className?: string;
    /**
     * Custom styles to apply to the navigation item
     */
    style?: CSSProperties;
}
/**
 * Props for the NavigationLink component
 */
export interface NavigationLinkProps extends HTMLAttributes<HTMLAnchorElement> {
    /**
     * The URL that the link points to
     */
    href?: string;
    /**
     * Whether this navigation link is currently active
     * @default false
     */
    isActive?: boolean;
    /**
     * Whether this navigation link is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Icon element to display alongside the link text
     */
    icon?: React.ReactNode;
    /**
     * Additional CSS classes to apply to the navigation link
     */
    className?: string;
    /**
     * Custom styles to apply to the navigation link
     */
    style?: CSSProperties;
}
/**
 * Props for the NavigationSeparator component
 */
export interface NavigationSeparatorProps extends HTMLAttributes<HTMLHRElement> {
    /**
     * Additional CSS classes to apply to the navigation separator
     */
    className?: string;
    /**
     * Custom styles to apply to the navigation separator
     */
    style?: CSSProperties;
}
interface NavigationComponent extends React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLElement>> {
    List: typeof NavigationList;
    Item: typeof NavigationItem;
    Link: typeof NavigationLink;
    Separator: typeof NavigationSeparator;
}
export declare const Navigation: NavigationComponent;
export declare const NavigationList: React.ForwardRefExoticComponent<NavigationListProps & React.RefAttributes<HTMLUListElement>>;
export declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLLIElement>>;
export declare const NavigationLink: React.ForwardRefExoticComponent<NavigationLinkProps & React.RefAttributes<HTMLAnchorElement>>;
export declare const NavigationSeparator: React.ForwardRefExoticComponent<NavigationSeparatorProps & React.RefAttributes<HTMLHRElement>>;
export {};