aurcare-ui

import * as react_jsx_runtime from 'react/jsx-runtime'; import { ReactNode } from 'react'; import { LucideIcon } from 'lucide-react'; /** * Navigation item interface for sidebar */ interface NavItem { /** Unique identifier for the navigation item */ id: string; /** Display label for the navigation item */ label: string; /** Optional href for navigation */ href?: string; /** Icon component (from lucide-react or any React component) */ icon: React.ElementType; /** Optional sub-items for nested navigation */ subItems?: NavItem[]; /** Optional badge content */ badge?: string | number; /** Optional badge color */ badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger'; /** Optional custom render function */ render?: (item: NavItem, isActive: boolean) => ReactNode; /** Optional custom Tailwind classes for this specific item (e.g., 'bg-blue-50 text-blue-700') */ className?: string; } /** * Navigation section interface for grouping nav items */ interface NavSection { /** Section identifier */ id: string; /** Optional section title */ title?: string; /** Navigation items in this section */ items: NavItem[]; } /** * Sidebar component props */ interface SidebarProps { /** Navigation sections to display */ sections: NavSection[]; /** Whether the sidebar is collapsed */ isCollapsed?: boolean; /** Callback when collapse state changes */ onCollapse?: (collapsed: boolean) => void; /** Current active path */ currentPath?: string; /** Locale for RTL support */ locale?: 'en' | 'ar' | string; /** App name to display in header */ appName?: string; /** App subtitle to display in header */ appSubtitle?: string; /** App logo component */ appLogo?: React.ElementType; /** Additional CSS classes */ className?: string; /** Width when expanded (default: 288px / w-72) */ expandedWidth?: string; /** Width when collapsed (default: 80px / w-20) */ collapsedWidth?: string; /** Hide the collapse toggle button */ hideCollapseButton?: boolean; /** Custom header component */ customHeader?: ReactNode; /** Custom footer component */ customFooter?: ReactNode; /** Callback when navigation item is clicked */ onNavigate?: (item: NavItem) => void; /** Custom Tailwind classes for logo section (e.g., 'mb-4 px-6') */ logoClassName?: string; /** Custom Tailwind classes for logo container (e.g., 'w-14 h-14') */ logoContainerClassName?: string; /** Custom Tailwind classes for logo icon (e.g., 'w-8 h-8') */ logoIconClassName?: string; /** Custom Tailwind classes for navigation items (e.g., 'px-4 py-3') */ navItemClassName?: string; /** Custom Tailwind classes for navigation section titles (e.g., 'mb-4 px-4') */ navSectionClassName?: string; /** Custom Tailwind classes for sidebar background (e.g., 'bg-slate-50 dark:bg-slate-950') */ backgroundClassName?: string; } /** * Notification interface for navbar */ interface Notification { /** Unique identifier */ id: string; /** Notification type */ type: 'info' | 'success' | 'warning' | 'error'; /** Notification title */ title: string; /** Notification message */ message: string; /** Time string (e.g., "5 minutes ago") */ time: string; /** Whether the notification has been read */ read: boolean; /** Optional click handler */ onClick?: () => void; } /** * User profile interface for navbar */ interface UserProfile { /** User's display name */ name: string; /** User's email or role */ email?: string; /** User's avatar URL */ avatarUrl?: string; /** User's role or title */ role?: string; } /** * Language option interface */ interface LanguageOption { /** Language code */ code: string; /** Display label */ label: string; /** Display flag or icon */ icon?: React.ElementType; } /** * Navbar component props */ interface NavbarProps { /** User profile information */ user?: UserProfile; /** Notifications array */ notifications?: Notification[]; /** Callback when notification is clicked */ onNotificationClick?: (notification: Notification) => void; /** Callback when mark all as read is clicked */ onMarkAllAsRead?: () => void; /** Callback when logout is clicked */ onLogout?: () => void; /** Callback when profile is clicked */ onProfileClick?: () => void; /** Callback when settings is clicked */ onSettingsClick?: () => void; /** Available language options */ languages?: LanguageOption[]; /** Current language code */ currentLanguage?: string; /** Callback when language changes */ onLanguageChange?: (languageCode: string) => void; /** Show theme toggle */ showThemeToggle?: boolean; /** Show notifications */ showNotifications?: boolean; /** Show language switcher */ showLanguageSwitcher?: boolean; /** Custom left content */ leftContent?: ReactNode; /** Custom right content */ rightContent?: ReactNode; /** Additional CSS classes */ className?: string; /** Translation function */ t?: (key: string) => string; /** Custom Tailwind classes for navbar container (e.g., 'px-8 py-4 h-20') */ containerClassName?: string; /** Custom Tailwind classes for notifications dropdown (e.g., 'w-[600px]') */ notificationsClassName?: string; /** Custom Tailwind classes for user menu dropdown (e.g., 'w-96') */ userMenuClassName?: string; /** Custom Tailwind classes for navbar background (e.g., 'bg-gray-50 dark:bg-gray-950') */ backgroundClassName?: string; } /** * Theme type */ type Theme = 'light' | 'dark' | 'system'; /** * Direction type for RTL support */ type Direction = 'ltr' | 'rtl'; /** * Dynamic Sidebar Component * * A flexible and customizable sidebar navigation component with support for: * - Dynamic navigation items via props * - Collapsible design * - RTL support * - Nested navigation (sub-items) * - Active state detection * - Badges for notification counts * - Custom header and footer * - Dark mode support * * @example * ```tsx * <Sidebar * sections={[ * { * id: 'main', * title: 'Main', * items: [ * { id: 'home', label: 'Home', href: '/', icon: Home } * ] * } * ]} * appName="My App" * appSubtitle="Dashboard" * /> * ``` */ declare function Sidebar({ sections, isCollapsed: controlledCollapsed, onCollapse, currentPath, locale, appName, appSubtitle, appLogo: AppLogo, className, expandedWidth, collapsedWidth, hideCollapseButton, customHeader, customFooter, onNavigate, logoClassName, logoContainerClassName, logoIconClassName, navItemClassName, navSectionClassName, backgroundClassName, }: SidebarProps): react_jsx_runtime.JSX.Element; /** * Dynamic Navbar Component * * A flexible and customizable navbar component with support for: * - User profile dropdown * - Notifications system * - Theme switcher * - Language switcher * - Custom left and right content * - Dark mode support * * @example * ```tsx * <Navbar * user={{ name: 'John Doe', email: 'john@example.com' }} * notifications={[...]} * onLogout={() => console.log('Logout')} * showThemeToggle * /> * ``` */ declare function Navbar({ user, notifications, onNotificationClick, onMarkAllAsRead, onLogout, onProfileClick, onSettingsClick, languages, currentLanguage, onLanguageChange, showThemeToggle, showNotifications, showLanguageSwitcher, leftContent, rightContent, className, t, containerClassName, notificationsClassName, userMenuClassName, backgroundClassName, }: NavbarProps): react_jsx_runtime.JSX.Element; type StatColorType = 'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'default'; interface StatsCardProps { label: string; value: string | number; icon: LucideIcon; color?: StatColorType; subtitle?: string; trend?: { value: number; isPositive: boolean; }; } declare function StatsCard({ label, value, icon: Icon, color, subtitle, trend }: StatsCardProps): react_jsx_runtime.JSX.Element; interface StatsGridProps { children: React.ReactNode; columns?: 2 | 3 | 4 | 5; } declare function StatsGrid({ children, columns }: StatsGridProps): react_jsx_runtime.JSX.Element; /** * Class name utility function (similar to clsx) * Combines multiple class names into a single string */ declare function cn(...classes: (string | undefined | null | false)[]): string; /** * Check if a path is active based on current path * @param itemPath - The path of the navigation item * @param currentPath - The current active path * @returns Whether the path is active */ declare function isPathActive(itemPath: string, currentPath: string): boolean; /** * Check if locale is RTL * @param locale - The locale code * @returns Whether the locale is RTL */ declare function isRTL(locale?: string): boolean; /** * Get text direction based on locale * @param locale - The locale code * @returns The text direction */ declare function getDirection(locale?: string): Direction; /** * Default translation function * @param key - Translation key * @returns The key itself (fallback when no translation function is provided) */ declare function defaultTranslate(key: string): string; /** * Truncate text to specified length * @param text - Text to truncate * @param maxLength - Maximum length * @returns Truncated text with ellipsis */ declare function truncate(text: string, maxLength: number): string; /** * Format time ago string * @param date - Date object or timestamp * @returns Formatted time ago string */ declare function timeAgo(date: Date | number | string): string; export { type Direction, type LanguageOption, type NavItem, type NavSection, Navbar, type NavbarProps, type Notification, Sidebar, type SidebarProps, type StatColorType, StatsCard, StatsGrid, type Theme, type UserProfile, cn, defaultTranslate, getDirection, isPathActive, isRTL, timeAgo, truncate };