pelatform-ui 1.3.0 → 1.4.0

package/dist/components.d.ts

@@ -1,5 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ComponentProps } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+import { A as Alert, B as Button } from './button-Bc3N6jWT.js';
+import { B as Badge } from './badge-CnQznr5B.js';
+import { ThemeMode } from '@pelatform/utils';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 /**
  * Props interface for icon components
@@ -127,4 +135,1008 @@ declare function Logo({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { Icons, Logo };
+/**
+ * Main Navigation Component
+ * Provides a responsive navigation menu with dropdown support, active state detection,
+ * and analytics tracking for user interactions
+ */
+/**
+ * Interface defining the structure of a navigation item
+ */
+interface NavItem {
+    /** Display text for the navigation item */
+    title: string;
+    /** URL path for the navigation item */
+    href?: string;
+    /** Whether the link opens in a new tab */
+    external?: boolean;
+    /** Optional icon to display alongside the title */
+    icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Child navigation items for dropdown menus */
+    children?: NavItem[];
+}
+/**
+ * Props interface for the MainNav component
+ */
+interface NavigationProps {
+    /** Current pathname */
+    pathname: string;
+    /** Array of navigation items to display */
+    items: NavItem[];
+    /** Additional CSS classes for the navigation container */
+    className?: string;
+}
+/**
+ * MainNav Component
+ *
+ * A responsive navigation component that supports multi-level dropdown menus,
+ * active state detection, and analytics tracking. Hidden on mobile devices
+ * and typically used in the site header.
+ *
+ * Features:
+ * - Multi-level dropdown menus (up to 3 levels)
+ * - Active state detection for current page
+ * - External link indicators
+ * - Analytics tracking for menu interactions
+ * - Responsive design (hidden on mobile)
+ * - Keyboard navigation support
+ *
+ * @param props - Component props
+ * @returns JSX element containing the navigation menu
+ *
+ * @example
+ * ```tsx
+ * const navItems: NavItem[] = [
+ *   {
+ *     title: 'Home',
+ *     href: '/',
+ *   },
+ *   {
+ *     title: 'Products',
+ *     children: [
+ *       { title: 'Web Apps', href: '/products/web' },
+ *       { title: 'Mobile Apps', href: '/products/mobile' },
+ *       {
+ *         title: 'Enterprise',
+ *         children: [
+ *           { title: 'SaaS Solutions', href: '/products/enterprise/saas' },
+ *           { title: 'Custom Development', href: '/products/enterprise/custom' }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     title: 'Documentation',
+ *     href: 'https://docs.example.com',
+ *     external: true,
+ *     icon: <IconBook className="w-4 h-4" />
+ *   }
+ * ];
+ *
+ * <MainNav items={navItems} />
+ * ```
+ */
+declare function MainNav({ pathname, items, className }: NavigationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MobileNav Component
+ *
+ * A mobile-optimized navigation component that uses a drawer interface
+ * for space-efficient menu display on small screens. Automatically
+ * manages meta theme color changes when the drawer opens/closes.
+ *
+ * Features:
+ * - Drawer-based interface for mobile screens
+ * - Meta theme color management
+ * - Responsive design (hidden on desktop)
+ * - Accessible with proper ARIA labels
+ * - Smooth open/close animations
+ * - Scrollable content area
+ *
+ * @param props - Component props
+ * @returns JSX element containing the mobile navigation drawer
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with navigation items
+ * <MobileNav>
+ *   <div className="space-y-4">
+ *     <MobileNavItemRenderer
+ *       item={{ title: 'Home', href: '/' }}
+ *       onOpenChange={setOpen}
+ *       level={1}
+ *     />
+ *     <MobileNavItemRenderer
+ *       item={{
+ *         title: 'Products',
+ *         children: [
+ *           { title: 'Web Apps', href: '/products/web' },
+ *           { title: 'Mobile Apps', href: '/products/mobile' }
+ *         ]
+ *       }}
+ *       onOpenChange={setOpen}
+ *       level={1}
+ *     />
+ *   </div>
+ * </MobileNav>
+ *
+ * // With custom content
+ * <MobileNav className="border-l border-gray-200">
+ *   <div className="space-y-6">
+ *     <NavigationItems />
+ *     <UserProfile />
+ *     <ThemeToggle />
+ *   </div>
+ * </MobileNav>
+ * ```
+ */
+declare function MobileNav({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface MobileNavItemRendererProps {
+    item: NavItem;
+    pathname: string | null;
+    level: number;
+    onOpenChange: (open: boolean) => void;
+}
+declare function MobileNavItemRenderer({ item, pathname, level, onOpenChange, }: MobileNavItemRendererProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SiteFooter Component
+ *
+ * A responsive footer component that provides consistent styling
+ * and layout for site-wide footer content. Features a top border,
+ * responsive padding, and flexible content arrangement.
+ *
+ * Features:
+ * - Responsive design (stacked on mobile, horizontal on desktop)
+ * - Consistent container width and padding
+ * - Top border for visual separation
+ * - Flexible content arrangement
+ * - Semantic footer element
+ *
+ * @param props - Component props
+ * @returns JSX element containing the site footer
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with copyright and links
+ * <SiteFooter>
+ *   <div className="flex flex-col items-center gap-4 md:flex-row">
+ *     <p className="text-sm text-muted-foreground">
+ *       © 2024 Your Company. All rights reserved.
+ *     </p>
+ *     <nav className="flex gap-4">
+ *       <Link href="/privacy" className="text-sm hover:underline">
+ *         Privacy Policy
+ *       </Link>
+ *       <Link href="/terms" className="text-sm hover:underline">
+ *         Terms of Service
+ *       </Link>
+ *     </nav>
+ *   </div>
+ * </SiteFooter>
+ *
+ * // With social links and newsletter
+ * <SiteFooter>
+ *   <div className="text-sm text-muted-foreground">
+ *     © 2024 Your Company
+ *   </div>
+ *   <div className="flex items-center gap-4">
+ *     <SocialLinks />
+ *     <NewsletterSignup />
+ *   </div>
+ * </SiteFooter>
+ *
+ * // Custom styling
+ * <SiteFooter className="bg-gray-50 dark:bg-gray-900">
+ *   <FooterContent />
+ * </SiteFooter>
+ * ```
+ */
+declare function SiteFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * SiteHeader Component
+ *
+ * A sticky header component with modern styling including backdrop blur,
+ * semi-transparent background, and responsive design. Positioned at the
+ * top of the viewport with high z-index for proper layering.
+ *
+ * Features:
+ * - Sticky positioning at top of viewport
+ * - Backdrop blur effect for modern appearance
+ * - Semi-transparent background with fallback
+ * - Bottom border for visual separation
+ * - Responsive container with consistent spacing
+ * - High z-index for proper layering
+ * - Dark mode support
+ *
+ * @param props - Component props
+ * @returns JSX element containing the site header
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with logo and navigation
+ * <SiteHeader>
+ *   <div className="flex items-center gap-4">
+ *     <Logo />
+ *     <MainNav items={navItems} />
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <ThemeToggle />
+ *     <UserMenu />
+ *   </div>
+ * </SiteHeader>
+ *
+ * // With mobile navigation
+ * <SiteHeader>
+ *   <div className="flex items-center gap-4">
+ *     <MobileNav>
+ *       <MobileNavItems />
+ *     </MobileNav>
+ *     <Logo />
+ *     <MainNav items={navItems} className="hidden md:flex" />
+ *   </div>
+ *   <HeaderActions />
+ * </SiteHeader>
+ *
+ * // Custom styling
+ * <SiteHeader className="bg-white/80 border-gray-200">
+ *   <HeaderContent />
+ * </SiteHeader>
+ * ```
+ */
+declare function SiteHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * React Query provider component with optimized configuration
+ *
+ * This provider sets up TanStack Query with:
+ * - Global error handling with toast notifications
+ * - Optimized caching and retry strategies
+ * - Background refetching configuration
+ * - Stale time and garbage collection settings
+ *
+ * @param props - Component props containing children
+ * @returns JSX element wrapping children with QueryClient context
+ *
+ * @example
+ * ```tsx
+ * // Wrap your app with QueryProvider
+ * function App() {
+ *   return (
+ *     <QueryProvider>
+ *       <YourAppComponents />
+ *     </QueryProvider>
+ *   );
+ * }
+ *
+ * // Use React Query hooks in child components
+ * function UserProfile() {
+ *   const { data, isLoading, error } = useQuery({
+ *     queryKey: ['user', userId],
+ *     queryFn: () => fetchUser(userId)
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error occurred</div>; // Error toast will show automatically
+ *
+ *   return <div>{data.name}</div>;
+ * }
+ * ```
+ */
+declare const QueryProvider: ({ client: clientProps, children, }: {
+    client?: QueryClient;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props interface for ThemeProvider component
+ * Extends NextThemesProvider props for full compatibility
+ */
+interface ThemeProviderProps extends React$1.ComponentProps<typeof ThemeProvider$1> {
+    /** Child components that will have access to theme context */
+    children: React$1.ReactNode;
+}
+/**
+ * Application theme provider component
+ *
+ * This provider sets up theme management with:
+ * - Light, dark, and system theme support
+ * - Automatic system preference detection
+ * - Smooth theme transitions
+ * - Integration with tooltip provider
+ * - CSS class-based theme switching
+ *
+ * The provider integrates with the application's theme configuration
+ * and provides a consistent theming experience across all components.
+ *
+ * @param props - Component props extending NextThemesProvider props
+ * @returns JSX element wrapping children with theme and tooltip context
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - wrap your app root
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourAppComponents />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // With custom configuration
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       defaultTheme="dark"
+ *       storageKey="custom-theme"
+ *     >
+ *       <YourAppComponents />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Use theme in child components
+ * function ThemeToggle() {
+ *   const { theme, setTheme } = useTheme();
+ *
+ *   return (
+ *     <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+ *       <option value="light">Light</option>
+ *       <option value="dark">Dark</option>
+ *       <option value="system">System</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+declare function ThemeProvider({ children, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Configuration options for the alert toast notification
+ */
+interface AlertToastOptions {
+    /** Custom message to display in the toast */
+    message?: string;
+    /** Icon variant to display in the alert - determines which icon is shown */
+    icon?: "primary" | "destructive" | "success" | "info" | "warning";
+    /** Visual variant of the alert component - affects styling and colors */
+    variant?: ComponentProps<typeof Alert>["variant"];
+}
+/**
+ * Creates and displays a customizable alert toast notification
+ *
+ * @param options - Configuration options for the toast
+ * @param options.message - The message to display (default: 'This is a toast')
+ * @param options.icon - The icon variant to show (default: 'success')
+ * @param options.variant - The visual style variant (default: 'default')
+ *
+ * @example
+ * ```tsx
+ * // Show a success message
+ * AlertToast({ message: 'Data saved successfully!' });
+ *
+ * // Show an error message
+ * AlertToast({
+ *   message: 'Failed to save data',
+ *   icon: 'destructive',
+ *   variant: 'destructive'
+ * });
+ * ```
+ */
+declare function AlertToast({ message, icon, variant, }: AlertToastOptions): void;
+/**
+ * Alert Notification Component
+ *
+ * Renders a static alert notification with appropriate icon and styling
+ * based on the variant. This component is used for displaying persistent
+ * alerts that don't auto-dismiss like toast notifications.
+ *
+ * @param props - Component props
+ * @param props.message - The message to display in the alert
+ * @param props.variant - The visual style variant (default: 'info')
+ *
+ * @returns JSX element or null if no message is provided
+ *
+ * @example
+ * ```tsx
+ * // Basic info alert
+ * <AlertNotification message="Please verify your email address" />
+ *
+ * // Error alert
+ * <AlertNotification
+ *   message="Failed to load data"
+ *   variant="destructive"
+ * />
+ *
+ * // Success alert
+ * <AlertNotification
+ *   message="Profile updated successfully"
+ *   variant="success"
+ * />
+ *
+ * // Warning alert
+ * <AlertNotification
+ *   message="Your session will expire soon"
+ *   variant="warning"
+ * />
+ * ```
+ */
+declare function AlertNotification({ message, variant }: AlertToastOptions): react_jsx_runtime.JSX.Element | null;
+/**
+ * Displays a standardized "coming soon" toast notification
+ *
+ * This function creates a consistent user experience for features that are
+ * not yet implemented. It uses a custom toast with alert styling to inform
+ * users that the feature they're trying to access is under development.
+ *
+ * @param options - Configuration options for the toast appearance and message
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default message
+ * AlertComingsoon();
+ *
+ * // Custom message with warning variant
+ * AlertComingsoon({
+ *   message: 'Advanced analytics coming in Q2 2024',
+ *   icon: 'warning',
+ *   variant: 'warning'
+ * });
+ *
+ * // Success variant for positive messaging
+ * AlertComingsoon({
+ *   message: 'New dashboard features are on the way!',
+ *   icon: 'success',
+ *   variant: 'success'
+ * });
+ *
+ * // Use in event handlers
+ * const handlePremiumFeature = () => {
+ *   AlertComingsoon({
+ *     message: 'Premium features available soon',
+ *     icon: 'info',
+ *     variant: 'info'
+ *   });
+ * };
+ * ```
+ */
+declare const AlertComingsoon: ({ message, variant, }?: AlertToastOptions) => void;
+
+/**
+ * Coming Soon Component
+ * Displays a full-height section with an animated hover background and
+ * optional title and description. Ideal for placeholder pages or upcoming
+ * feature announcements.
+ */
+/**
+ * Props interface for the `ComingSoon` component
+ */
+interface ComingSoonProps {
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Optional highlighted title text */
+    title?: string;
+    /** Optional descriptive text below the title */
+    description?: string;
+}
+/**
+ * ComingSoon Component
+ *
+ * Renders a full-height container with animated hover background objects
+ * and optional title/description content centered on the screen.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the coming soon layout
+ *
+ * @example
+ * ```tsx
+ * <ComingSoon title="Coming Soon" description="We are cooking something nice." />
+ * ```
+ */
+declare function ComingSoon({ className, title, description }: ComingSoonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Confirm Dismiss Dialog Component
+ * Provides a reusable confirmation dialog for destructive actions like discarding changes
+ * Built on top of AlertDialog with customizable content and actions
+ */
+/**
+ * Props interface for the ConfirmDismissDialog component
+ */
+interface ConfirmDismissDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback to handle dialog open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Callback executed when user confirms the action */
+    onConfirm: () => void;
+    /** Optional callback executed when user cancels (defaults to closing dialog) */
+    onCancel?: () => void;
+    /** Dialog title text (defaults to "Discard changes?") */
+    title?: string;
+    /** Dialog description text (defaults to unsaved changes message) */
+    description?: string;
+    /** Confirm button text (defaults to "Discard changes") */
+    confirmText?: string;
+    /** Cancel button text (defaults to "Cancel") */
+    cancelText?: string;
+    /** CSS class for maximum width (defaults to "md:max-w-[375px]") */
+    maxWidth?: string;
+}
+/**
+ * Reusable confirmation dialog for destructive actions
+ *
+ * This component provides a standardized way to confirm destructive actions
+ * like discarding unsaved changes, deleting items, or leaving forms.
+ * It includes customizable text and handles both confirm and cancel actions.
+ *
+ * @param props - Component props for dialog configuration
+ * @returns JSX element containing the confirmation dialog
+ *
+ * @example
+ * ```tsx
+ * // Basic usage for form dismissal
+ * function FormComponent() {
+ *   const [showDialog, setShowDialog] = useState(false);
+ *   const [hasChanges, setHasChanges] = useState(false);
+ *
+ *   const handleClose = () => {
+ *     if (hasChanges) {
+ *       setShowDialog(true);
+ *     } else {
+ *       // Close form directly
+ *       onClose();
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <form>
+ *         <button type="button" onClick={handleClose}>Close</button>
+ *       </form>
+ *
+ *       <ConfirmDismissDialog
+ *         open={showDialog}
+ *         onOpenChange={setShowDialog}
+ *         onConfirm={() => {
+ *           setShowDialog(false);
+ *           onClose(); // Actually close the form
+ *         }}
+ *       />
+ *     </>
+ *   );
+ * }
+ *
+ * // Custom dialog for deletion
+ * <ConfirmDismissDialog
+ *   open={showDeleteDialog}
+ *   onOpenChange={setShowDeleteDialog}
+ *   title="Delete item?"
+ *   description="This action cannot be undone. Are you sure you want to delete this item?"
+ *   confirmText="Delete"
+ *   cancelText="Keep"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+declare const ConfirmDismissDialog: ({ open, onOpenChange, onConfirm, onCancel, title, description, confirmText, cancelText, maxWidth, }: ConfirmDismissDialogProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Locale option used by the LanguageSwitcher
+ */
+interface LocaleOption {
+    /** Locale code, e.g. 'en', 'id' */
+    code: string;
+    /** Human readable language name */
+    name: string;
+    /** Optional flag code to render, e.g. 'us', 'id' */
+    flag?: string;
+    /** Optional currency code associated with the locale */
+    currency?: string;
+}
+/**
+ * Props for the LanguageSwitcher component (prop-driven)
+ */
+interface LanguageSwitcherProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** UI type: standalone dropdown or submenu dropdown */
+    type?: "dropdown" | "sub-dropdown";
+    /** Button variant style (for toggle type) */
+    variant?: ComponentProps<typeof Button>["variant"];
+    /** Button size (for toggle type) */
+    size?: ComponentProps<typeof Button>["size"];
+    /** Whether to show language names */
+    showNames?: boolean;
+    /** Whether to show flag icons */
+    showFlags?: boolean;
+    /** Label text for the dropdown trigger; defaults to 'Language' */
+    label?: string;
+    /** Whether i18n is enabled; if false and <=1 locales, render null */
+    i18nEnabled?: boolean;
+    /** Current active locale code */
+    currentLocale: string;
+    /** Available locales to render */
+    locales: LocaleOption[];
+    /** Handler called when a new locale is selected */
+    onLocaleChange: (newLocale: string) => void | Promise<void>;
+    /** Custom flags asset url */
+    customFlagUrl?: boolean;
+    /** Badge variant style */
+    badgeVariant?: ComponentProps<typeof Badge>["variant"];
+}
+declare function LanguageSwitcher({ className, type, variant, size, showNames, showFlags, label, i18nEnabled, currentLocale, locales, onLocaleChange, customFlagUrl, badgeVariant, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props interface for the ModeSwitcher component
+ */
+interface ModeSwitcherProps {
+    /** Additional CSS classes for the button */
+    className?: string;
+    /** Button variant style */
+    variant?: React$1.ComponentProps<typeof Button>["variant"];
+    /** Button size */
+    size?: React$1.ComponentProps<typeof Button>["size"];
+    /** Custom cycle order for themes (defaults to system -> light -> dark) */
+    cycleOrder?: ThemeMode[];
+    /** Button type: 'toggle' for a single button or 'dropdown' and 'sub-dropdown' for a menu with options */
+    type?: "toogle" | "dropdown" | "sub-dropdown";
+    /** Labels for each theme mode (optional) */
+    label?: {
+        system?: string;
+        dark?: string;
+        light?: string;
+    };
+}
+/**
+ * ModeSwitcher Component
+ *
+ * A button component that cycles through available theme modes (light, dark, system).
+ * Automatically updates the meta theme color and displays appropriate icons
+ * for each theme state. Integrates with next-themes for theme persistence.
+ *
+ * Features:
+ * - Cycles through light, dark, and system themes
+ * - Updates meta theme color automatically
+ * - Shows appropriate icons for each theme
+ * - Accessible with screen reader support
+ * - Customizable appearance and cycle order
+ * - Integrates with application color configuration
+ *
+ * @param props - Component props
+ * @returns JSX element containing the theme switcher button
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ModeSwitcher />
+ *
+ * // Custom styling
+ * <ModeSwitcher
+ *   className="border border-gray-300"
+ *   variant="outline"
+ *   size="lg"
+ * />
+ *
+ * // Custom cycle order
+ * <ModeSwitcher
+ *   cycleOrder={['light', 'dark']} // Skip system mode
+ * />
+ * ```
+ */
+declare function ModeSwitcher({ className, variant, size, cycleOrder, type, label, }: ModeSwitcherProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Screen Loader Component
+ * Provides a full-screen loading overlay with spinner and customizable text
+ * Perfect for page transitions, data loading, and async operations
+ */
+/**
+ * Props interface for the ScreenLoader component
+ */
+interface ScreenLoaderProps {
+    /** Loading text to display below the spinner */
+    loadingText?: string;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Additional CSS classes for the spinner icon */
+    spinnerClassName?: string;
+    /** Additional CSS classes for the loading text */
+    textClassName?: string;
+    /** Display loader for content */
+    contentLoader?: boolean;
+}
+/**
+ * ScreenLoader Component
+ *
+ * A full-screen loading overlay that covers the entire viewport.
+ * Features a spinning icon and customizable loading text with
+ * smooth fade transitions. Positioned with high z-index to
+ * appear above all other content.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the full-screen loader
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * function App() {
+ *   const [isLoading, setIsLoading] = useState(true);
+ *
+ *   useEffect(() => {
+ *     // Simulate loading
+ *     setTimeout(() => setIsLoading(false), 2000);
+ *   }, []);
+ *
+ *   return (
+ *     <div>
+ *       {isLoading && <ScreenLoader />}
+ *       <main>Your app content</main>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Custom loading text
+ * <ScreenLoader loadingText="Preparing your dashboard..." />
+ *
+ * // Custom styling
+ * <ScreenLoader
+ *   loadingText="Please wait"
+ *   className="bg-black/80 backdrop-blur-sm"
+ *   spinnerClassName="size-8 animate-spin text-blue-500"
+ *   textClassName="text-white text-lg font-semibold"
+ * />
+ *
+ * // With conditional rendering
+ * {isSubmitting && (
+ *   <ScreenLoader
+ *     loadingText="Submitting form..."
+ *     className="bg-white/90"
+ *   />
+ * )}
+ *
+ * // Different spinner sizes
+ * <ScreenLoader
+ *   spinnerClassName="size-12 animate-spin text-purple-600"
+ *   textClassName="text-purple-600 font-bold"
+ * />
+ * ```
+ */
+declare function ScreenLoader({ loadingText, className, spinnerClassName, textClassName, contentLoader, }?: ScreenLoaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Main Toolbar Component
+ *
+ * Creates a horizontal layout with space between heading and actions.
+ * Typically used at the top of pages or sections to display titles
+ * and related action buttons.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the toolbar layout
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <ToolbarHeading>
+ *     <ToolbarTitle>Dashboard</ToolbarTitle>
+ *     <p className="text-sm text-muted-foreground">
+ *       Welcome back! Here's what's happening.
+ *     </p>
+ *   </ToolbarHeading>
+ *   <ToolbarActions>
+ *     <Button variant="outline">Export</Button>
+ *     <Button>Create New</Button>
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ */
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * ToolbarHeading Component
+ *
+ * Container for the left side of the toolbar, typically containing
+ * the title and optional subtitle or description text.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the heading section
+ *
+ * @example
+ * ```tsx
+ * <ToolbarHeading>
+ *   <ToolbarTitle>User Management</ToolbarTitle>
+ *   <p className="text-sm text-muted-foreground">
+ *     Manage user accounts and permissions
+ *   </p>
+ * </ToolbarHeading>
+ * ```
+ */
+declare const ToolbarHeading: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * ToolbarTitle Component
+ *
+ * Displays the main title text with consistent typography.
+ * Renders as an h1 element for proper semantic structure.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the title
+ *
+ * @example
+ * ```tsx
+ * <ToolbarTitle>Analytics Dashboard</ToolbarTitle>
+ *
+ * // With custom styling
+ * <ToolbarTitle className="text-2xl text-blue-600">
+ *   Premium Features
+ * </ToolbarTitle>
+ * ```
+ */
+declare const ToolbarTitle: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * ToolbarActions Component
+ *
+ * Container for the right side of the toolbar, typically containing
+ * action buttons, dropdowns, or other interactive elements.
+ * Responsive design with different gaps on mobile vs desktop.
+ *
+ * @param props - Component props
+ * @returns JSX element containing the actions section
+ *
+ * @example
+ * ```tsx
+ * <ToolbarActions>
+ *   <Button variant="outline" size="sm">
+ *     <IconDownload className="w-4 h-4 mr-2" />
+ *     Export
+ *   </Button>
+ *   <Button size="sm">
+ *     <IconPlus className="w-4 h-4 mr-2" />
+ *     Add Item
+ *   </Button>
+ * </ToolbarActions>
+ *
+ * // With dropdown menu
+ * <ToolbarActions>
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger asChild>
+ *       <Button variant="outline">Options</Button>
+ *     </DropdownMenuTrigger>
+ *     <DropdownMenuContent>
+ *       <DropdownMenuItem>Edit</DropdownMenuItem>
+ *       <DropdownMenuItem>Delete</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ * </ToolbarActions>
+ * ```
+ */
+declare const ToolbarActions: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * User Avatar Component
+ * Displays user profile pictures with fallback initials and optional status indicators
+ * Built on top of the base Avatar component with enhanced user-specific features
+ */
+/**
+ * Props interface for the UserAvatar component
+ */
+interface UserAvatarProps {
+    /** Additional CSS classes for styling */
+    className?: string;
+    /** Whether to show online status indicator */
+    indicator?: boolean;
+    /** Source URL for the user's profile image */
+    src?: string | null | undefined;
+    /** Alt text for the image, also used to generate initials */
+    alt?: string | null;
+}
+/**
+ * UserAvatar Component
+ *
+ * Displays a user's profile picture with automatic fallback to initials
+ * when no image is available. Supports optional online status indicators
+ * and follows accessibility best practices.
+ *
+ * Features:
+ * - Automatic initials generation from name
+ * - Fallback handling for missing images
+ * - Optional online status indicator
+ * - Accessible alt text support
+ * - Customizable styling
+ *
+ * @param props - Component props
+ * @param props.className - Additional CSS classes for styling
+ * @param props.indicator - Whether to show online status indicator (default: false)
+ * @param props.src - Source URL for the user's profile image
+ * @param props.alt - Alt text for the image, also used to generate initials
+ * @returns JSX element containing the user avatar
+ *
+ * @example
+ * ```tsx
+ * // Basic user avatar with image
+ * <UserAvatar
+ *   src="https://example.com/avatar.jpg"
+ *   alt="John Doe"
+ * />
+ *
+ * // Avatar with online indicator
+ * <UserAvatar
+ *   src="https://example.com/avatar.jpg"
+ *   alt="Jane Smith"
+ *   indicator={true}
+ * />
+ *
+ * // Avatar with fallback initials (no image)
+ * <UserAvatar
+ *   alt="Bob Johnson"
+ *   className="w-12 h-12"
+ * />
+ *
+ * // User list with avatars
+ * <div className="flex space-x-2">
+ *   {users.map(user => (
+ *     <UserAvatar
+ *       key={user.id}
+ *       src={user.avatar}
+ *       alt={user.name}
+ *       indicator={user.isOnline}
+ *       className="w-8 h-8"
+ *     />
+ *   ))}
+ * </div>
+ *
+ * // Profile header
+ * <div className="flex items-center space-x-4">
+ *   <UserAvatar
+ *     src={currentUser.avatar}
+ *     alt={currentUser.name}
+ *     indicator={true}
+ *     className="w-16 h-16"
+ *   />
+ *   <div>
+ *     <h2>{currentUser.name}</h2>
+ *     <p className="text-gray-600">{currentUser.email}</p>
+ *   </div>
+ * </div>
+ * ```
+ */
+declare function UserAvatar({ className, indicator, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Utility function to generate initials from a name
+ *
+ * Extracts the first letter of each word in a name and converts
+ * them to uppercase to create user initials for avatar fallbacks.
+ *
+ * @param name - The full name to extract initials from
+ * @param count - Maximum number of initials to return (optional)
+ * @returns String containing the initials
+ *
+ * @example
+ * ```tsx
+ * getInitials("John Doe") // Returns "JD"
+ * getInitials("Jane Mary Smith", 2) // Returns "JM"
+ * getInitials("") // Returns ""
+ * getInitials(null) // Returns ""
+ * ```
+ */
+declare const getInitials: (name: string | null | undefined, count?: number) => string;
+
+export { AlertComingsoon, AlertNotification, AlertToast, type AlertToastOptions, ComingSoon, type ComingSoonProps, ConfirmDismissDialog, type ConfirmDismissDialogProps, Icons, LanguageSwitcher, type LanguageSwitcherProps, type LocaleOption, Logo, MainNav, MobileNav, MobileNavItemRenderer, ModeSwitcher, type ModeSwitcherProps, type NavItem, type NavigationProps, QueryProvider, ScreenLoader, type ScreenLoaderProps, SiteFooter, SiteHeader, ThemeProvider, Toolbar, ToolbarActions, ToolbarHeading, ToolbarTitle, UserAvatar, getInitials };