@furystack/shades-common-components/esm/components/breadcrumb.d.ts

Common UI components for FuryStack Shades

import type { ExtractRouteParams, ExtractRoutePaths, NestedRoute, PartialElement } from '@furystack/shades';
/**
 * Individual breadcrumb item configuration.
 * When the path contains parameters (e.g. `:id`), the `params` prop becomes required.
 * @typeParam TPath - A specific route path string
 */
export type BreadcrumbItem<TPath extends string = string> = {
    path: TPath;
    label: string | JSX.Element;
    render?: (item: BreadcrumbItem<TPath>, isActive: boolean) => JSX.Element;
} & (string extends keyof ExtractRouteParams<TPath> ? {
    params?: Record<string, string>;
} : {
    params: ExtractRouteParams<TPath>;
});
/**
 * Props for the Breadcrumb component.
 */
export type BreadcrumbProps = {
    items: BreadcrumbItem[];
    separator?: string | JSX.Element;
    homeItem?: BreadcrumbItem;
    lastItemClickable?: boolean;
} & PartialElement<HTMLElement>;
/**
 * Type-safe props constrained to a specific route tree.
 * @typeParam TRoutes - The route tree type (use `typeof yourRoutes`)
 */
export type TypedBreadcrumbProps<TRoutes extends Record<string, NestedRoute<any, any, any>>> = {
    items: Array<BreadcrumbItem<ExtractRoutePaths<TRoutes>>>;
    separator?: string | JSX.Element;
    homeItem?: BreadcrumbItem<ExtractRoutePaths<TRoutes>>;
    lastItemClickable?: boolean;
} & PartialElement<HTMLElement>;
/**
 * A breadcrumb navigation component that works with NestedRouter to provide
 * navigation through route hierarchies.
 *
 * Supports:
 * - Dynamic route parameters (e.g. `/users/:id`)
 * - Custom labels and rendering
 * - Configurable separators
 * - Active item detection
 * - Optional home/root link
 *
 * Route parameters are automatically inferred from the path pattern:
 * - `path="/buttons"` — `params` is optional
 * - `path="/users/:id"` — `params: { id: string }` is required
 *
 * For additional URL validation against a route tree, use {@link createBreadcrumb}.
 *
 * @example
 * ```typescript
 * <Breadcrumb
 *   homeItem={{ path: '/', label: 'Home' }}
 *   items={[
 *     { path: '/users', label: 'Users' },
 *     { path: '/users/:id', label: 'User Details', params: { id: '123' } },
 *   ]}
 *   separator=" > "
 * />
 * ```
 */
export declare const Breadcrumb: (props: {
    items: BreadcrumbItem[];
    separator?: string | JSX.Element;
    homeItem?: BreadcrumbItem;
    lastItemClickable?: boolean;
} & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * Creates a type-safe wrapper around Breadcrumb constrained to a specific route tree.
 * The returned component has the same runtime behavior but narrows paths to only accept
 * valid route paths, and requires `params` when the route has parameters.
 *
 * @typeParam TRoutes - The route tree type (use `typeof yourRoutes`)
 * @returns A narrowed Breadcrumb component
 *
 * @example
 * ```typescript
 * const AppBreadcrumb = createBreadcrumb<typeof appRoutes>()
 *
 * // Type-safe: only valid paths accepted
 * <AppBreadcrumb
 *   items={[{ path: '/buttons', label: 'Buttons' }]}
 * />
 *
 * // TypeScript error: invalid path
 * <AppBreadcrumb items={[{ path: '/nonexistent', label: 'Error' }]} />
 *
 * // Params required for parameterized routes
 * <AppBreadcrumb
 *   items={[{ path: '/users/:id', label: 'User', params: { id: '123' } }]}
 * />
 * ```
 */
export declare const createBreadcrumb: <TRoutes extends Record<string, NestedRoute<any, any, any>>>() => typeof Breadcrumb & {
    (props: TypedBreadcrumbProps<TRoutes>): JSX.Element;
};
//# sourceMappingURL=breadcrumb.d.ts.map