@seplan/diti-ds
Version:
Reusable UI component library developed by DITI (Technology and Innovation Directorate of SEPLAN PI) based on Mantine and Tailwind CSS
53 lines • 2.01 kB
TypeScript
import React from 'react';
interface NavigationTabsContextValue {
activeTab: string;
handleTabChange: (value: string | null) => void;
}
export declare function useNavigationTabsContext(): NavigationTabsContextValue;
export interface NavigationTabsContainerProps {
children: React.ReactNode;
className?: string;
basePath: string;
}
export declare function NavigationTabsContainer(props: NavigationTabsContainerProps): import("react/jsx-runtime").JSX.Element;
export interface NavigationTabsProps {
children?: React.ReactNode;
className?: string;
tabs?: Array<{
label: string;
value: string;
count?: number;
}>;
activeTab?: string;
onTabChange?: (tab: string) => void;
}
/**
* Navigation tabs component using Mantine Tabs
* Gets state and handlers from context
*/
export declare function NavigationTabs({ children, className, tabs, activeTab: externalActiveTab, onTabChange }: NavigationTabsProps): import("react/jsx-runtime").JSX.Element;
export interface NavigationTabsItemProps {
children: React.ReactNode;
value: string;
leftSection?: React.ReactNode;
rightSection?: React.ReactNode;
className?: string;
}
/**
* Individual navigation tab item
* Uses Mantine TabsTab behind the hood with automatic active detection
* Supports leftSection and rightSection for icons or other content
*/
export declare function NavigationTabsItem({ children, value, leftSection, rightSection, className }: NavigationTabsItemProps): import("react/jsx-runtime").JSX.Element;
export interface NavigationTabsActionsProps {
children: React.ReactNode;
value: string;
className?: string;
}
/**
* Actions panel that renders only when its value matches the active tab
* Sibling to NavigationTabs, not nested inside
*/
export declare function NavigationTabsActions({ children, value, className }: NavigationTabsActionsProps): import("react/jsx-runtime").JSX.Element | null;
export {};
//# sourceMappingURL=navigation-tabs.d.ts.map