pelatform-ui 1.2.9 → 1.3.1

package/dist/components.d.ts

@@ -1,1311 +1,145 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ComponentProps, ReactNode, HTMLAttributes, FC, DragEvent, RefObject } from 'react';
-import { Alert, badgeVariants, Button } from '@pelatform/ui.components/radix';
-import { B as BaseComponentProps, L as LinkComponentProps, I as ImageComponentProps } from './components-B1rw2xzN.js';
+import React__default, { ReactNode, ComponentProps } from 'react';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
-import { VariantProps } from 'class-variance-authority';
-import { a as ThemeMode } from './colors-CUDWvz1g.js';
+import { A as Alert, B as Button } from './button-Bc3N6jWT.js';
+import { B as Badge } from './badge-Rr33PgV_.js';
+import { ThemeMode } from '@pelatform/utils';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 /**
- * 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;
-
-/**
- * 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;
-
-/**
- * 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;
-
-/**
- * LayoutAuth Component
- *
- * A centered authentication page layout that vertically and horizontally
- * centers its content. Optionally renders a `logo` above the card.
- *
- * @param props - Component props
- * @returns JSX element containing the authentication layout
- *
- * @example
- * ```tsx
- * <LayoutAuth logo={<MyLogo />}>
- *   <LoginForm />
- * </LayoutAuth>
- * ```
- */
-declare function LayoutAuth({ children, className, logo, }: BaseComponentProps & {
-    logo?: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the `LayoutBlank` component
- * Inherits `children` and `className` from `BaseProps`, and `Link` from `SharedLink`.
- */
-interface LayoutBlankProps extends BaseComponentProps {
-    /** Optional footer content displayed at the bottom */
-    footer?: ReactNode;
-    /** Optional logo element displayed at the top */
-    logo?: ReactNode;
-}
-/**
- * LayoutBlank Component
- *
- * A minimal full-screen layout with a subtle background grid and configurable
- * header logo and footer content. Useful for simple landing or blank pages.
- *
- * @param props - Component props
- * @returns JSX element containing the blank layout
- *
- * @example
- * ```tsx
- * <LayoutBlank logo={<Logo />} logoHref="/">
- *   <Content />
- * </LayoutBlank>
- * ```
- */
-declare function LayoutBlank({ children, footer, className, logo }: LayoutBlankProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Body Component
- *
- * A wrapper component for the HTML body element that applies dynamic
- * class names based on the provided slug. Useful for implementing
- * theme switching, page-specific styling, or mode-based layouts.
- *
- * @param props - Component props
- * @param props.children - Content to render inside the body
- * @param props.slug - Slug used to determine additional class names
- * @param props.className - Additional CSS classes to merge
- * @returns JSX body element with combined class names
- *
- * @example
- * ```tsx
- * // Basic usage with theme slug
- * <Body slug={['dark', 'compact']} className="font-sans">
- *   <div>Page content</div>
- * </Body>
- *
- * // With single slug
- * <Body slug="admin" className="bg-gray-100">
- *   <AdminPanel />
- * </Body>
- *
- * // Dynamic theme switching
- * function App() {
- *   const [theme, setTheme] = useState(['light']);
- *
- *   return (
- *     <Body slug={theme} className="transition-colors">
- *       <ThemeToggle onThemeChange={setTheme} />
- *       <MainContent />
- *     </Body>
- *   );
- * }
- * ```
- */
-declare function Body({ slug, children, className }: BaseComponentProps & {
-    slug: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * 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;
-
-/**
- * Props interface for the `ErrorComponents` component
- */
-interface ErrorComponentsProps {
-    /** Additional CSS classes for the container */
-    className?: string;
-    /** Error variant to display */
-    type?: "default" | "404" | "500" | "custom";
-    /** Optional title content */
-    textTitle?: ReactNode;
-    /** Optional subtitle content */
-    textSubtitle?: ReactNode;
-    /** Optional action button (e.g., retry) */
-    button?: ReactNode;
-    /** Function to generate asset URLs (e.g., for CDN integration) */
-    assetsUrl?: (path: string) => string;
-}
-/**
- * ErrorComponents Component
- *
- * A reusable error layout supporting multiple variants (404, 500, default, custom).
- * Displays illustrations and optional title, subtitle, and button.
- *
- * @param props - Component props
- * @returns JSX element containing the error layout
- *
- * @example
- * ```tsx
- * <ErrorComponents
- *   type="404"
- *   textTitle="Page not found"
- *   textSubtitle="The page you are looking for does not exist."
- * />
- * ```
- */
-declare function ErrorComponents({ className, type, textTitle, textSubtitle, button, assetsUrl, }: ErrorComponentsProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Grid Component
- * Renders an SVG grid pattern overlay for background decoration
- * Useful for creating grid-based layouts or visual guides
- */
-/**
- * Grid Component
- *
- * Renders an SVG-based grid pattern that can be used as a background
- * overlay. The grid is responsive and fills its container while
- * maintaining consistent cell sizes and stroke widths.
- *
- * @param props - Component props
- * @param props.cellSize - Size of each grid cell (default: 12px)
- * @param props.strokeWidth - Width of grid lines (default: 1px)
- * @param props.patternOffset - Grid offset position (default: [0, 0])
- * @param props.className - Additional CSS classes
- * @returns JSX SVG element with grid pattern
- *
- * @example
- * ```tsx
- * // Basic grid overlay
- * <div className="relative">
- *   <Grid />
- *   <div>Content over grid</div>
- * </div>
- *
- * // Custom grid with larger cells
- * <Grid
- *   cellSize={24}
- *   strokeWidth={2}
- *   className="text-blue-500/20"
- * />
- *
- * // Offset grid pattern
- * <Grid
- *   cellSize={16}
- *   patternOffset={[8, 8]}
- *   className="text-gray-300/30"
- * />
- *
- * // Fine grid for detailed layouts
- * <Grid
- *   cellSize={8}
- *   strokeWidth={0.5}
- *   className="text-slate-400/15"
- * />
- * ```
- */
-declare function Grid({ cellSize, strokeWidth, patternOffset, className, }: {
-    /** Size of each grid cell in pixels */
-    cellSize?: number;
-    /** Width of the grid lines in pixels */
-    strokeWidth?: number;
-    /** Offset position for the grid pattern [x, y] */
-    patternOffset?: [number, number];
-    /** Additional CSS classes to apply to the grid */
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the Section component
- */
-type SectionProps = {
-    /** Additional CSS classes to apply to the section element */
-    sectionClassName?: string;
-} & HTMLAttributes<HTMLDivElement>;
-/**
- * Section Component
- *
- * A layout component that creates structured sections with a grid background
- * and decorative corner elements. Provides consistent spacing and visual
- * hierarchy for page content sections.
- *
- * @param props - Component props extending HTMLDivElement attributes
- * @param props.children - Content to render inside the section
- * @param props.sectionClassName - CSS classes for the section element
- * @param props.className - CSS classes for the content container
- * @returns JSX section element with grid background and decorative elements
- *
- * @example
- * ```tsx
- * // Basic section
- * <Section>
- *   <h2>Section Title</h2>
- *   <p>Section content</p>
- * </Section>
- *
- * // With custom styling
- * <Section
- *   sectionClassName="py-16 bg-gray-50"
- *   className="text-center"
- * >
- *   <Hero />
- * </Section>
- *
- * // Multiple sections
- * <main>
- *   <Section sectionClassName="bg-white">
- *     <Introduction />
- *   </Section>
- *   <Section sectionClassName="bg-gray-100">
- *     <Features />
- *   </Section>
- *   <Section sectionClassName="bg-blue-50">
- *     <CallToAction />
- *   </Section>
- * </main>
- *
- * // With additional props
- * <Section
- *   id="about"
- *   sectionClassName="scroll-mt-16"
- *   className="space-y-8"
- * >
- *   <AboutContent />
- * </Section>
- * ```
- */
-declare const Section: ({ children, sectionClassName, className, ...props }: SectionProps) => 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 }: BaseComponentProps): 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({ className, children }: BaseComponentProps): react_jsx_runtime.JSX.Element;
-
-/**
- * MaxWidthWrapper Component
- *
- * A responsive container component that constrains content to a maximum
- * width while providing consistent padding and centering. Ideal for
- * creating readable layouts that work well across different screen sizes.
- *
- * @param props - Component props
- * @param props.className - Additional CSS classes to merge
- * @param props.children - Content to render inside the wrapper
- * @returns JSX div element with max-width constraints and responsive padding
- *
- * @example
- * ```tsx
- * // Basic content wrapper
- * <MaxWidthWrapper>
- *   <h1>Page Title</h1>
- *   <p>Content that won't exceed the maximum width</p>
- * </MaxWidthWrapper>
- *
- * // With custom styling
- * <MaxWidthWrapper className="bg-gray-50 rounded-lg">
- *   <Article />
- * </MaxWidthWrapper>
- *
- * // Multiple sections
- * <main>
- *   <MaxWidthWrapper>
- *     <Header />
- *   </MaxWidthWrapper>
- *   <MaxWidthWrapper className="py-8">
- *     <MainContent />
- *   </MaxWidthWrapper>
- *   <MaxWidthWrapper>
- *     <Footer />
- *   </MaxWidthWrapper>
- * </main>
- *
- * // Nested with other layout components
- * <Section>
- *   <MaxWidthWrapper>
- *     <Grid>
- *       <Card>Content</Card>
- *     </Grid>
- *   </MaxWidthWrapper>
- * </Section>
- * ```
- */
-declare function MaxWidthWrapper({ className, children }: BaseComponentProps): react_jsx_runtime.JSX.Element;
-
-/**
- * CodeDisplay Component
- *
- * A responsive layout component that displays code examples alongside
- * their rendered output. Features a two-column layout on desktop
- * and stacked layout on mobile devices.
- *
- * @param props - Component props
- * @param props.children - Code content (typically syntax-highlighted)
- * @param props.component - The rendered component to showcase
- * @returns JSX element with side-by-side code and component display
- *
- * @example
- * ```tsx
- * // Basic usage in MDX documentation
- * <CodeDisplay component={<Button>Click me</Button>}>
- *   ```tsx
- *   <Button>Click me</Button>
- *   ```
- * </CodeDisplay>
- *
- * // With complex component
- * <CodeDisplay
- *   component={
- *     <Card className="w-64">
- *       <CardHeader>
- *         <CardTitle>Example Card</CardTitle>
- *       </CardHeader>
- *       <CardContent>
- *         <p>Card content here</p>
- *       </CardContent>
- *     </Card>
- *   }
- * >
- *   ```tsx
- *   <Card className="w-64">
- *     <CardHeader>
- *       <CardTitle>Example Card</CardTitle>
- *     </CardHeader>
- *     <CardContent>
- *       <p>Card content here</p>
- *     </CardContent>
- *   </Card>
- *   ```
- * </CodeDisplay>
- *
- * // Interactive component showcase
- * <CodeDisplay component={<InteractiveDemo />}>
- *   ```tsx
- *   function InteractiveDemo() {
- *     const [count, setCount] = useState(0);
- *     return (
- *       <Button onClick={() => setCount(count + 1)}>
- *         Clicked {count} times
- *       </Button>
- *     );
- *   }
- *   ```
- * </CodeDisplay>
- * ```
- */
-declare function CodeDisplay({ children, component, }: {
-    children: ReactNode;
-    component: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * DownloadFile Component
- *
- * A styled download button component that opens files in a new tab
- * with proper security attributes. Features a download icon and
- * rounded button styling.
- *
- * @param props - Component props
- * @param props.children - Button label or content
- * @param props.href - URL of the file to download
- * @param props.className - Additional CSS classes
- * @returns JSX element with download button
- *
- * @example
- * ```tsx
- * // Basic file download
- * <DownloadFile href="/files/document.pdf">
- *   Download PDF
- * </DownloadFile>
- *
- * // Custom styling
- * <DownloadFile
- *   href="/assets/template.zip"
- *   className="bg-blue-600 hover:bg-blue-700"
- * >
- *   Download Template
- * </DownloadFile>
- *
- * // Multiple download options
- * <div className="flex gap-4">
- *   <DownloadFile href="/files/guide.pdf">
- *     User Guide (PDF)
- *   </DownloadFile>
- *   <DownloadFile href="/files/guide.docx">
- *     User Guide (Word)
- *   </DownloadFile>
- * </div>
- *
- * // In MDX content
- * Here's the latest version of our software:
- *
- * <DownloadFile href="/releases/app-v2.1.0.zip">
- *   Download v2.1.0
- * </DownloadFile>
- * ```
- */
-declare function DownloadFile({ children, className, href }: BaseComponentProps & {
-    href: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Shared Component Types and Default Implementations
- * Provides reusable component interfaces and default implementations
- * for common UI elements like images, links, and navigation
- */
-
-/**
- * Interface for components that accept a custom Image component
- * Allows injection of custom image implementations (e.g., Next.js Image)
- */
-interface SharedImage {
-    /** Custom Image component implementation */
-    Image?: ImageComponentProps;
-}
-/**
- * Interface for components that accept a custom Link component
- * Allows injection of custom link implementations (e.g., Next.js Link)
- */
-interface SharedLink {
-    /** Custom Link component implementation */
-    Link?: LinkComponentProps;
-}
-/**
- * Interface for components that accept a custom navigation function
- * Allows injection of custom navigation implementations (e.g., Next.js router)
- */
-interface SharedNavigate {
-    /** Custom navigation function */
-    navigate?: (href: string) => void;
-}
-/**
- * Default Image Component
- *
- * A basic HTML img element implementation that serves as the default
- * when no custom Image component is provided. Supports standard
- * image attributes and CSS classes.
- *
- * @param props - Image component props
- * @param props.src - Source URL of the image
- * @param props.alt - Alt text for accessibility
- * @param props.className - Additional CSS classes
- * @returns JSX element containing a standard img tag
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DefaultImage
- *   src="/images/logo.png"
- *   alt="Company Logo"
- *   className="w-32 h-auto"
- * />
- * ```
- */
-declare const DefaultImage: ImageComponentProps;
-/**
- * Default Link Component
- *
- * A basic HTML anchor element implementation that serves as the default
- * when no custom Link component is provided. Supports standard
- * link attributes and CSS classes.
- *
- * @param props - Link component props
- * @param props.href - Destination URL
- * @param props.className - Additional CSS classes
- * @param props.children - Link content
- * @returns JSX element containing a standard anchor tag
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DefaultLink
- *   href="/about"
- *   className="text-blue-600 hover:underline"
- * >
- *   About Us
- * </DefaultLink>
- * ```
+ * Props interface for icon components
+ * Extends standard HTML SVG element attributes for full customization
  */
-declare const DefaultLink: LinkComponentProps;
+type IconProps = React__default.HTMLAttributes<SVGElement>;
 /**
- * Default Navigation Function
+ * Collection of brand and service icons
  *
- * A basic navigation implementation using window.location.href
- * that serves as the default when no custom navigation function
- * is provided. Performs a full page navigation.
- *
- * @param href - Destination URL to navigate to
+ * This object contains SVG icons for popular brands, services, and technologies.
+ * All icons are designed to be scalable and themeable using CSS currentColor.
+ * Icon keys use PascalCase (capitalized first letter) for consistency.
  *
  * @example
  * ```tsx
  * // Basic usage
- * const handleNavigation = () => {
- *   DefaultNavigate('/dashboard');
- * };
- *
- * // In a component
- * <button onClick={() => DefaultNavigate('/contact')}>
- *   Contact Us
- * </button>
- * ```
- */
-declare const DefaultNavigate: (href: string) => void;
-
-/**
- * ExtraLink component for external and internal links in MDX content
- *
- * This component provides a consistent styled link experience across MDX documents
- * with support for custom Link implementations (e.g., Next.js Link, React Router Link)
- * and automatic styling with underline decoration.
- *
- * Features:
- * - Custom Link component support (defaults to standard anchor tag)
- * - Consistent underline styling with 4px offset
- * - Medium font weight for emphasis
- * - Customizable className for additional styling
- * - Full accessibility support via Link component
- *
- * @param props - Component props extending SharedLink and LinkComponent
- * @param props.Link - Custom Link component (defaults to DefaultLink/anchor)
- * @param props.href - Target URL for the link
- * @param props.target - Target attribute (_blank, _self, etc.)
- * @param props.className - Additional CSS classes to apply
- * @param props.children - Link text or child elements
- * @returns JSX element representing the styled link
- *
- * @example
- * ```tsx
- * // Basic usage in MDX
- * <ExtraLink href="https://example.com">
- *   Visit Example
- * </ExtraLink>
- *
- * // With custom Link component (Next.js)
- * import NextLink from 'next/link';
- *
- * <ExtraLink Link={NextLink} href="/about">
- *   About Us
- * </ExtraLink>
- *
- * // With target and custom styling
- * <ExtraLink
- *   href="https://external.com"
- *   target="_blank"
- *   className="text-primary hover:text-primary-dark"
- * >
- *   External Resource
- * </ExtraLink>
- * ```
- */
-declare function ExtraLink({ Link, href, target, className, children, }: SharedLink & ComponentProps<LinkComponentProps>): react_jsx_runtime.JSX.Element;
-
-/**
- * Video Component
- *
- * A styled video component that extends the native HTML video element
- * with consistent styling, responsive design, and automatic controls.
- * Perfect for embedding videos in MDX documentation or content.
+ * <Icons.Google className="w-6 h-6" />
  *
- * @param props - Standard HTML video element props
- * @param props.className - Additional CSS classes to merge
- * @returns JSX video element with enhanced styling
- *
- * @example
- * ```tsx
- * // Basic video with source
- * <Video src="/videos/demo.mp4" />
- *
- * // Video with multiple sources
- * <Video>
- *   <source src="/videos/demo.webm" type="video/webm" />
- *   <source src="/videos/demo.mp4" type="video/mp4" />
- *   Your browser does not support the video tag.
- * </Video>
- *
- * // Custom styling
- * <Video
- *   src="/videos/tutorial.mp4"
- *   className="max-w-md mx-auto"
- * />
- *
- * // With additional attributes
- * <Video
- *   src="/videos/background.mp4"
- *   autoPlay
- *   muted
- *   playsInline
- *   className="w-full h-64 object-cover"
+ * // With custom styling
+ * <Icons.Github
+ *   className="w-8 h-8 text-gray-600 hover:text-gray-900"
+ *   onClick={handleGitHubClick}
  * />
  *
- * // In MDX content
- * Here's a demonstration of the feature:
- *
- * <Video src="/demos/feature-walkthrough.mp4" />
- * ```
- */
-declare function Video({ className, ...props }: ComponentProps<"video">): react_jsx_runtime.JSX.Element;
-
-/**
- * Wrapper Component
- *
- * A decorative container component with gradient background and border styling.
- * Features a radial gradient from blue with transparency and responsive design.
- * Ideal for highlighting important content, callouts, or special sections in MDX.
- *
- * @param props - Component props
- * @param props.children - Content to render inside the wrapper
- * @param props.className - Additional CSS classes to merge
- * @returns JSX element with styled wrapper container
- *
- * @example
- * ```tsx
- * // Basic content wrapper
- * <Wrapper>
- *   <h3>Important Notice</h3>
- *   <p>This is highlighted content that stands out from the rest.</p>
- * </Wrapper>
- *
- * // Custom styling
- * <Wrapper className="my-8 text-center">
- *   <blockquote>
- *     "This is a featured quote or testimonial."
- *   </blockquote>
- * </Wrapper>
- *
- * // Code example highlight
- * <Wrapper>
- *   <h4>Pro Tip</h4>
- *   <p>Use this pattern for better performance:</p>
- *   <code>const memoizedValue = useMemo(() => expensiveCalculation(), [deps]);</code>
- * </Wrapper>
- *
- * // In MDX content for callouts
- * <Wrapper>
- *   **Warning:** This feature is experimental and may change in future versions.
- * </Wrapper>
- *
- * // Multiple wrappers for different content types
- * <div className="space-y-6">
- *   <Wrapper>
- *     <h3>Feature Highlight</h3>
- *     <p>New functionality description</p>
- *   </Wrapper>
- *   <Wrapper className="border-green-200 bg-green-50">
- *     <h3>Success Story</h3>
- *     <p>Customer testimonial</p>
- *   </Wrapper>
- * </div>
+ * // Colorful variants
+ * <Icons.GoogleColorful className="w-10 h-10" />
+ * <Icons.FacebookColorful className="w-10 h-10" />
  * ```
  */
-declare function Wrapper({ children, className }: BaseComponentProps): react_jsx_runtime.JSX.Element;
+declare const Icons: {
+    Anthropic: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Apple: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Aria: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Discord: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Dropbox: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Facebook: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    FacebookColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Github: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Gitlab: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Google: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    GoogleColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Huggingface: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Instagram: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Kick: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Linear: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Linkedin: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    LinkedinColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Microsoft: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Nextjs: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Notion: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Npm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Openai: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Paypal: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Pelatform: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Pnpm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Postgresql: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Prisma: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Radix: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Radixui: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    React: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Reddit: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Roblox: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Scira: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Scribble: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Slack: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Spotify: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Supabase: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Tailwind: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Telegram: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Tiktok: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Twitch: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Twitter: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Vk: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    WhatsApp: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    X: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Yarn: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Youtube: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    Zoom: (props: IconProps) => react_jsx_runtime.JSX.Element;
+};
 
 /**
- * Youtube Component
- * Embeds YouTube videos in MDX content with responsive design
- * Features 16:9 aspect ratio and rounded corners for consistent styling
+ * Logo Component
+ * Displays the application logo as an SVG icon
+ * Supports theming through currentColor and customizable sizing
  */
 /**
- * Youtube Component
+ * Logo Component
  *
- * Embeds YouTube videos using an iframe with responsive design and
- * consistent styling. Automatically maintains 16:9 aspect ratio
- * and includes proper accessibility attributes.
+ * Renders the application's logo as a scalable SVG icon.
+ * The logo uses currentColor for theming and can be customized
+ * with additional CSS classes for size and styling.
  *
  * @param props - Component props
- * @param props.id - YouTube video ID (the part after 'v=' in YouTube URLs)
- * @returns JSX iframe element for YouTube video embedding
+ * @param props.className - Additional CSS classes for styling
+ * @returns JSX element with the application logo
  *
  * @example
  * ```tsx
- * // Basic YouTube video embed
- * <Youtube id="dQw4w9WgXcQ" />
- *
- * // Extract ID from YouTube URL
- * // URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
- * // ID: dQw4w9WgXcQ
- * <Youtube id="dQw4w9WgXcQ" />
- *
- * // In MDX content
- * Here's a tutorial video:
- *
- * <Youtube id="ScMzIvxBSi4" />
- *
- * // Multiple videos in sequence
- * <div className="space-y-8">
- *   <div>
- *     <h3>Introduction</h3>
- *     <Youtube id="intro-video-id" />
- *   </div>
- *   <div>
- *     <h3>Advanced Tutorial</h3>
- *     <Youtube id="advanced-video-id" />
- *   </div>
- * </div>
- *
- * // With surrounding content
- * ## Video Tutorial
- *
- * Watch this comprehensive guide to get started:
- *
- * <Youtube id="tutorial-video-id" />
- *
- * After watching the video, you can proceed to the next section.
- * ```
- */
-declare function Youtube({ id }: {
-    id: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the BackLink component
- */
-interface BackLinkProps extends SharedLink, BaseComponentProps {
-    /** URL to navigate back to */
-    href: string;
-}
-/**
- * BackLink Component
- *
- * A navigation component that provides a styled back link with a chevron icon
- * and smooth hover animations. Features a secondary button with icon and
- * customizable link component support.
- *
- * @param props - Component props
- * @param props.Link - Custom link component (defaults to DefaultLink)
- * @param props.children - Text content for the back link
- * @param props.href - Destination URL for the back navigation
- * @param props.className - Additional CSS classes
- * @returns JSX element with back navigation link
+ * // Basic logo
+ * <Logo />
  *
- * @example
- * ```tsx
- * // Basic back link
- * <BackLink href="/dashboard">
- *   Back to Dashboard
- * </BackLink>
+ * // Custom sized logo
+ * <Logo className="w-12 h-12" />
  *
- * // With custom Link component (Next.js)
- * <BackLink Link={NextLink} href="/products">
- *   Back to Products
- * </BackLink>
+ * // Colored logo
+ * <Logo className="text-blue-600 w-16 h-16" />
  *
- * // Custom styling
- * <BackLink
- *   href="/settings"
- *   className="text-blue-600 hover:text-blue-800"
- * >
- *   Back to Settings
- * </BackLink>
- *
- * // In breadcrumb navigation
- * <nav className="flex items-center space-x-2">
- *   <BackLink href="/docs">
- *     Documentation
- *   </BackLink>
- *   <span>/</span>
- *   <span>Current Page</span>
+ * // Logo in navigation
+ * <nav className="flex items-center space-x-4">
+ *   <Logo className="w-8 h-8" />
+ *   <span className="font-bold">App Name</span>
  * </nav>
  *
- * // Dynamic back navigation
- * function ProductDetail({ productId }: { productId: string }) {
- *   return (
- *     <div>
- *       <BackLink href={`/category/${categoryId}`}>
- *         Back to Category
- *       </BackLink>
- *       <h1>Product Details</h1>
+ * // Logo in header
+ * <header className="bg-white shadow-sm">
+ *   <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+ *     <div className="flex justify-between items-center py-6">
+ *       <Logo className="w-10 h-10 text-primary" />
  *     </div>
- *   );
- * }
+ *   </div>
+ * </header>
  * ```
  */
-declare function BackLink({ Link, children, href, className }: BackLinkProps): react_jsx_runtime.JSX.Element;
+declare function Logo({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 /**
- * Props interface for the CommandMenu component
- * Extends DialogProps from Radix UI for full dialog customization
- */
-interface CommandMenuProps {
-    /** Child elements to render inside the command list (command items, groups, etc.) */
-    children: React$1.ReactNode;
-    /** Additional CSS classes for the trigger button */
-    classButton?: string;
-    /** Additional CSS classes for the command dialog */
-    classDialog?: string;
-    /** Text displayed on the search trigger button */
-    searchButtonText?: string;
-    /** Placeholder text for the command input field */
-    commandInputPlaceholder?: string;
-    /** Keyboard shortcut hint displayed on the button (e.g., "⌘K", "Ctrl+K") */
-    keyHint?: string;
-}
-/**
- * CommandMenu Component
- *
- * A comprehensive command palette that provides users with quick access to application
- * features through keyboard shortcuts and search. Automatically tracks user interactions
- * for analytics and provides a responsive, accessible interface.
- *
- * The component listens for keyboard shortcuts (Cmd+K, Ctrl+K, /) and opens a dialog
- * with a search input and command list. It intelligently avoids triggering when the
- * user is typing in form fields or content-editable areas.
- *
- * @param props - Component props extending DialogProps
- * @returns JSX element containing the command menu trigger and dialog
- *
- * @example
- * ```tsx
- * // Basic usage with command items
- * <CommandMenu>
- *   <CommandGroup heading="Navigation">
- *     <CommandItem onSelect={() => router.push('/')}>
- *       <IconHome className="mr-2 h-4 w-4" />
- *       <span>Home</span>
- *     </CommandItem>
- *     <CommandItem onSelect={() => router.push('/dashboard')}>
- *       <IconDashboard className="mr-2 h-4 w-4" />
- *       <span>Dashboard</span>
- *     </CommandItem>
- *   </CommandGroup>
- *
- *   <CommandGroup heading="Actions">
- *     <CommandItem onSelect={() => setTheme('dark')}>
- *       <IconMoon className="mr-2 h-4 w-4" />
- *       <span>Toggle Dark Mode</span>
- *     </CommandItem>
- *   </CommandGroup>
- * </CommandMenu>
- *
- * // Custom styling and text
- * <CommandMenu
- *   searchButtonText="Search commands..."
- *   commandInputPlaceholder="What would you like to do?"
- *   keyHint="⌘K"
- *   classButton="w-64 bg-gray-50"
- *   classDialog="max-w-2xl"
- * >
- *   <CommandEmpty>No results found.</CommandEmpty>
- *   <CommandGroup heading="Quick Actions">
- *     <CommandItem onSelect={handleCreateNew}>
- *       <IconPlus className="mr-2 h-4 w-4" />
- *       <span>Create New Project</span>
- *       <CommandShortcut>⌘N</CommandShortcut>
- *     </CommandItem>
- *   </CommandGroup>
- * </CommandMenu>
- *
- * // With search functionality
- * <CommandMenu
- *   searchButtonText="Search docs..."
- *   commandInputPlaceholder="Search documentation..."
- * >
- *   <CommandEmpty>No documentation found.</CommandEmpty>
- *   <CommandGroup heading="Documentation">
- *     {docs.map((doc) => (
- *       <CommandItem
- *         key={doc.id}
- *         onSelect={() => router.push(`/docs/${doc.slug}`)}
- *       >
- *         <IconBook className="mr-2 h-4 w-4" />
- *         <span>{doc.title}</span>
- *       </CommandItem>
- *     ))}
- *   </CommandGroup>
- * </CommandMenu>
- * ```
+ * Main Navigation Component
+ * Provides a responsive navigation menu with dropdown support, active state detection,
+ * and analytics tracking for user interactions
  */
-declare function CommandMenu({ children, classButton, classDialog, searchButtonText, commandInputPlaceholder, keyHint, ...props }: CommandMenuProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Interface defining the structure of a navigation item
  */
@@ -1324,7 +158,7 @@ interface NavItem {
 /**
  * Props interface for the MainNav component
  */
-interface NavigationProps extends SharedLink {
+interface NavigationProps {
     /** Current pathname */
     pathname: string;
     /** Array of navigation items to display */
@@ -1382,7 +216,7 @@ interface NavigationProps extends SharedLink {
  * <MainNav items={navItems} />
  * ```
  */
-declare function MainNav({ Link, pathname, items, className }: NavigationProps): react_jsx_runtime.JSX.Element;
+declare function MainNav({ pathname, items, className }: NavigationProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MobileNav Component
@@ -1433,17 +267,134 @@ declare function MainNav({ Link, pathname, items, className }: NavigationProps):
  *     <UserProfile />
  *     <ThemeToggle />
  *   </div>
- * </MobileNav>
+ * </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 MobileNav({ children, className }: BaseComponentProps): react_jsx_runtime.JSX.Element;
-interface MobileNavItemRendererProps extends SharedLink, SharedNavigate {
-    item: NavItem;
-    pathname: string | null;
-    level: number;
-    onOpenChange: (open: boolean) => void;
-}
-declare function MobileNavItemRenderer({ Link, navigate, item, pathname, level, onOpenChange, }: MobileNavItemRendererProps): react_jsx_runtime.JSX.Element;
+declare function SiteHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * React Query provider component with optimized configuration
@@ -1551,702 +502,234 @@ interface ThemeProviderProps extends React$1.ComponentProps<typeof ThemeProvider
 declare function ThemeProvider({ children, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Props interface for the Announcement component
+ * Configuration options for the alert toast notification
  */
-type AnnouncementProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants> & {
-    /** Whether to apply themed styling with special background treatment */
-    themed?: boolean;
-};
+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"];
+}
 /**
- * Announcement Component
- *
- * A styled badge component for displaying announcements, notifications,
- * and promotional content. Features rounded design with hover effects
- * and optional themed styling.
+ * Creates and displays a customizable alert toast notification
  *
- * @param props - Component props
- * @param props.variant - Badge variant style (default: 'outline')
- * @param props.themed - Whether to apply themed styling
- * @param props.className - Additional CSS classes
- * @returns JSX element with announcement badge
+ * @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
- * // Basic announcement
- * <Announcement>
- *   New feature available!
- * </Announcement>
- *
- * // Themed announcement with tag
- * <Announcement themed variant="secondary">
- *   <AnnouncementTag>NEW</AnnouncementTag>
- *   <AnnouncementTitle>
- *     Product Update v2.0
- *   </AnnouncementTitle>
- * </Announcement>
- *
- * // Custom styled announcement
- * <Announcement
- *   variant="destructive"
- *   className="border-red-500"
- * >
- *   Important Notice
- * </Announcement>
- * ```
- */
-declare const Announcement: ({ variant, themed, className, ...props }: AnnouncementProps) => react_jsx_runtime.JSX.Element;
-/**
- * Props interface for the AnnouncementTag component
- */
-type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>;
-/**
- * AnnouncementTag Component
- *
- * A small tag component designed to be used within announcements
- * to highlight categories, status, or importance levels.
- *
- * @param props - Component props
- * @param props.className - Additional CSS classes
- * @returns JSX element with announcement tag
+ * // Show a success message
+ * AlertToast({ message: 'Data saved successfully!' });
  *
- * @example
- * ```tsx
- * <Announcement>
- *   <AnnouncementTag>BETA</AnnouncementTag>
- *   <AnnouncementTitle>New Dashboard</AnnouncementTitle>
- * </Announcement>
+ * // Show an error message
+ * AlertToast({
+ *   message: 'Failed to save data',
+ *   icon: 'destructive',
+ *   variant: 'destructive'
+ * });
  * ```
  */
-declare const AnnouncementTag: ({ className, ...props }: AnnouncementTagProps) => react_jsx_runtime.JSX.Element;
-/**
- * Props interface for the AnnouncementTitle component
- */
-type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>;
+declare function AlertToast({ message, icon, variant, }: AlertToastOptions): void;
 /**
- * AnnouncementTitle Component
+ * Alert Notification Component
  *
- * A title component designed for use within announcements,
- * providing proper spacing and alignment for announcement content.
+ * 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.className - Additional CSS classes
- * @returns JSX element with announcement title
- *
- * @example
- * ```tsx
- * <Announcement>
- *   <AnnouncementTag>UPDATE</AnnouncementTag>
- *   <AnnouncementTitle>
- *     System Maintenance Scheduled
- *   </AnnouncementTitle>
- * </Announcement>
- * ```
- */
-declare const AnnouncementTitle: ({ className, ...props }: AnnouncementTitleProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Background Paths Components
- * Provides animated SVG path backgrounds with motion effects
- * Perfect for creating dynamic visual backgrounds and decorative elements
- */
-/**
- * FloatingPaths Component
- *
- * Creates animated floating SVG paths with customizable position and color.
- * Features smooth animations with varying opacity and path lengths for
- * a dynamic background effect.
+ * @param props.message - The message to display in the alert
+ * @param props.variant - The visual style variant (default: 'info')
  *
- * @param props - Component props
- * @param props.position - Position multiplier for path positioning (affects curve placement)
- * @param props.color - CSS color class for the paths (default: 'text-slate-950 dark:text-white')
- * @returns JSX element with animated SVG paths
+ * @returns JSX element or null if no message is provided
  *
  * @example
  * ```tsx
- * // Basic floating paths
- * <FloatingPaths position={1} />
+ * // Basic info alert
+ * <AlertNotification message="Please verify your email address" />
  *
- * // Custom colored paths
- * <FloatingPaths
- *   position={2}
- *   color="text-blue-500 dark:text-blue-300"
+ * // Error alert
+ * <AlertNotification
+ *   message="Failed to load data"
+ *   variant="destructive"
  * />
  *
- * // Multiple layers with different positions
- * <div className="relative">
- *   <FloatingPaths position={1} color="text-gray-300" />
- *   <FloatingPaths position={2} color="text-gray-400" />
- *   <FloatingPaths position={3} color="text-gray-500" />
- * </div>
- *
- * // In a hero section
- * <section className="relative min-h-screen">
- *   <FloatingPaths position={1.5} />
- *   <div className="relative z-10">
- *     <h1>Your Content Here</h1>
- *   </div>
- * </section>
- * ```
- */
-declare function FloatingPaths({ position, color, }: {
-    position: number;
-    color?: string;
-}): react_jsx_runtime.JSX.Element;
-/**
- * BackgroundPaths Component
- *
- * A simplified wrapper around FloatingPaths with a fixed position,
- * providing an easy way to add animated background paths to any container.
- *
- * @param props - Component props
- * @param props.color - CSS color class for the paths (default: 'text-slate-950 dark:text-white')
- * @returns JSX element with animated background paths
- *
- * @example
- * ```tsx
- * // Basic background paths
- * <div className="relative">
- *   <BackgroundPaths />
- *   <div className="relative z-10">
- *     Your content here
- *   </div>
- * </div>
- *
- * // Custom colored background
- * <BackgroundPaths color="text-purple-500 dark:text-purple-300" />
- *
- * // In a card component
- * <div className="relative p-6 bg-white rounded-lg shadow-lg">
- *   <BackgroundPaths color="text-gray-100" />
- *   <div className="relative z-10">
- *     <h2>Card Title</h2>
- *     <p>Card content...</p>
- *   </div>
- * </div>
- * ```
- */
-declare function BackgroundPaths({ color }: {
-    color?: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the Book component
- */
-interface BookProps {
-    /** Content to display inside the book */
-    children: React__default.ReactNode;
-    /** Book cover color (default: '#f50537') */
-    color?: string;
-    /** Text color for book content */
-    textColor?: string;
-    /** Whether to apply texture effects */
-    texture?: boolean;
-    /** Book depth in container query width units */
-    depth?: number;
-    /** Book variant style (default: 'default') */
-    variant?: "default" | "simple";
-    /** Optional illustration to display on the book */
-    illustration?: React__default.ReactNode;
-    /** Book width in pixels (default: 196) */
-    width?: number;
-}
-/**
- * Book Component
- *
- * A 3D book component with hover animations and customizable styling.
- * Features perspective transforms, shadow effects, and flexible content layout.
- *
- * @param props - Component props
- * @returns JSX element with 3D book appearance
- *
- * @example
- * ```tsx
- * // Basic book
- * <Book>
- *   <h3>Book Title</h3>
- *   <p>Book description...</p>
- * </Book>
- *
- * // Customized book
- * <Book
- *   color="#3b82f6"
- *   textColor="#ffffff"
- *   width={240}
- *   depth={6}
- * >
- *   <div className="p-4">
- *     <h2>Custom Book</h2>
- *     <p>Custom content</p>
- *   </div>
- * </Book>
- *
- * // Simple variant with illustration
- * <Book
- *   variant="simple"
- *   illustration={<BookIcon />}
- * >
- *   Simple book content
- * </Book>
- *
- * // Book gallery
- * <div className="flex gap-4">
- *   <Book color="#ef4444">Red Book</Book>
- *   <Book color="#10b981">Green Book</Book>
- *   <Book color="#8b5cf6">Purple Book</Book>
- * </div>
- * ```
- */
-declare function Book(props: BookProps): react_jsx_runtime.JSX.Element;
-type FlexAlignItems = "stretch" | "start" | "end" | "center";
-type FlexJustifyContent = "stretch" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "center";
-interface StackProps extends React__default.ComponentProps<"div"> {
-    children: React__default.ReactNode;
-    direction?: "column" | "row";
-    align?: FlexAlignItems;
-    justify?: FlexJustifyContent;
-    gap?: number;
-    padding?: number;
-    grow?: boolean;
-    shrink?: boolean;
-    wrap?: boolean;
-    className?: string;
-}
-declare function Stack(props: StackProps): react_jsx_runtime.JSX.Element;
-
-/**
- * DotsPattern Component
- * Creates a customizable dots pattern background using SVG
- * Perfect for adding subtle texture and visual interest to backgrounds
- */
-/**
- * DotsPattern Component
- *
- * Generates an SVG-based dots pattern that can be used as a background element.
- * Features customizable dot size, spacing, and positioning with automatic
- * pattern generation using unique IDs.
- *
- * @param props - Component props
- * @param props.dotSize - Size of each dot in pixels (default: 2)
- * @param props.gapSize - Space between dots in pixels (default: 10)
- * @param props.patternOffset - X and Y offset for pattern positioning (default: [0, 0])
- * @param props.className - Additional CSS classes
- * @returns JSX element with SVG dots pattern
- *
- * @example
- * ```tsx
- * // Basic dots pattern
- * <div className="relative h-64 bg-gray-50">
- *   <DotsPattern />
- *   <div className="relative z-10 p-4">
- *     Content over dots pattern
- *   </div>
- * </div>
- *
- * // Customized dots pattern
- * <DotsPattern
- *   dotSize={3}
- *   gapSize={15}
- *   className="text-blue-500/20"
+ * // Success alert
+ * <AlertNotification
+ *   message="Profile updated successfully"
+ *   variant="success"
  * />
  *
- * // Offset pattern
- * <DotsPattern
- *   patternOffset={[5, 5]}
- *   dotSize={1}
- *   gapSize={8}
+ * // Warning alert
+ * <AlertNotification
+ *   message="Your session will expire soon"
+ *   variant="warning"
  * />
- *
- * // Hero section with dots background
- * <section className="relative min-h-screen bg-white">
- *   <DotsPattern
- *     dotSize={2}
- *     gapSize={12}
- *     className="text-gray-300"
- *   />
- *   <div className="relative z-10 flex items-center justify-center min-h-screen">
- *     <h1>Hero Content</h1>
- *   </div>
- * </section>
- *
- * // Card with dots pattern
- * <div className="relative p-6 bg-white rounded-lg shadow-lg overflow-hidden">
- *   <DotsPattern
- *     dotSize={1}
- *     gapSize={6}
- *     className="text-gray-100"
- *   />
- *   <div className="relative z-10">
- *     <h3>Card Title</h3>
- *     <p>Card content...</p>
- *   </div>
- * </div>
  * ```
  */
-declare function DotsPattern({ dotSize, gapSize, patternOffset, className, }: {
-    dotSize?: number;
-    gapSize?: number;
-    patternOffset?: [number, number];
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Grid Background Component
- * Creates a customizable grid background with vertical lines and dots pattern
- * Perfect for adding structured visual backgrounds to layouts and sections
- */
-
-/**
- * Props interface for the GridBackground component
- */
-interface GridBackgroundProps {
-    /** Number of grid columns to display (default: 4) */
-    columns?: number;
-    /** Additional CSS classes for styling */
-    className?: string;
-    /** CSS class for maximum width container (default: 'grid-container') */
-    maxWidthClass?: string;
-}
+declare function AlertNotification({ message, variant }: AlertToastOptions): react_jsx_runtime.JSX.Element | null;
 /**
- * GridBackground Component
+ * Displays a standardized "coming soon" toast notification
  *
- * Creates a customizable grid background with vertical lines and dots pattern.
- * Features configurable column count and styling options for creating
- * structured visual backgrounds.
+ * 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 props - Component props
- * @param props.columns - Number of grid columns to display
- * @param props.className - Additional CSS classes for styling
- * @param props.maxWidthClass - CSS class for maximum width container
- * @returns JSX element with grid background pattern
+ * @param options - Configuration options for the toast appearance and message
  *
  * @example
  * ```tsx
- * // Basic grid background
- * <div className="relative">
- *   <GridBackground />
- *   <div className="relative z-10">Content over grid</div>
- * </div>
- *
- * // Custom column count
- * <GridBackground columns={6} />
- *
- * // With custom styling
- * <GridBackground
- *   columns={3}
- *   className="opacity-50"
- *   maxWidthClass="max-w-6xl"
- * />
- * ```
- */
-declare const GridBackground: FC<GridBackgroundProps>;
-
-/**
- * Props interface for HexagonBadge component
- */
-interface HexagonBadgeProps {
-    /** Content to be displayed inside the hexagon badge */
-    children?: ReactNode;
-    /** Custom class names for different parts of the component */
-    classNames?: {
-        /** Class name for the base container element */
-        base?: string;
-        /** Class name for the SVG hexagon shape */
-        svg?: string;
-        /** Class name for the content wrapper (note: typo 'wraper' kept for backward compatibility) */
-        wraper?: string;
-    };
-}
-/**
- * HexagonBadge component
- *
- * Creates a hexagon-shaped badge container using SVG for the border shape.
- * The hexagon provides a distinctive visual element for displaying icons,
- * status indicators, or small pieces of content.
- *
- * Features:
- * - SVG-based hexagon shape with fill and stroke
- * - Perfectly centered content using absolute positioning
- * - Customizable styling via classNames prop
- * - RTL (right-to-left) layout support
- * - Responsive sizing based on container
- *
- * The component uses a 44x48 viewBox for the SVG hexagon and automatically
- * centers the content within the hexagonal boundary.
+ * // Basic usage with default message
+ * AlertComingsoon();
  *
- * @param props - Component props
- * @param props.children - Content to display inside the hexagon (icons, text, etc.)
- * @param props.classNames - Object containing custom class names for styling
- * @param props.classNames.base - Classes for the outer container
- * @param props.classNames.svg - Classes for the SVG hexagon element
- * @param props.classNames.wraper - Classes for the content wrapper element
- * @returns JSX element representing the hexagon badge
+ * // Custom message with warning variant
+ * AlertComingsoon({
+ *   message: 'Advanced analytics coming in Q2 2024',
+ *   icon: 'warning',
+ *   variant: 'warning'
+ * });
  *
- * @example
- * ```tsx
- * // Basic usage with an icon
- * <HexagonBadge>
- *   <StarIcon className="w-6 h-6" />
- * </HexagonBadge>
+ * // Success variant for positive messaging
+ * AlertComingsoon({
+ *   message: 'New dashboard features are on the way!',
+ *   icon: 'success',
+ *   variant: 'success'
+ * });
  *
- * // With custom styling
- * <HexagonBadge
- *   classNames={{
- *     base: 'w-16 h-16',
- *     svg: 'text-primary fill-primary/10',
- *     wraper: 'text-white'
- *   }}
- * >
- *   <span className="font-bold">A</span>
- * </HexagonBadge>
- *
- * // As a status badge
- * <HexagonBadge
- *   classNames={{
- *     svg: 'text-green-500 fill-green-50'
- *   }}
- * >
- *   <CheckIcon />
- * </HexagonBadge>
+ * // Use in event handlers
+ * const handlePremiumFeature = () => {
+ *   AlertComingsoon({
+ *     message: 'Premium features available soon',
+ *     icon: 'info',
+ *     variant: 'info'
+ *   });
+ * };
  * ```
  */
-declare const HexagonBadge: ({ children, classNames }: HexagonBadgeProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Image Input Component
- * Provides a comprehensive image upload solution with drag-and-drop support,
- * multiple file selection, preview generation, and file management capabilities
- */
+declare const AlertComingsoon: ({ message, variant, }?: AlertToastOptions) => void;
 
 /**
- * Interface representing a single image file with metadata
- */
-interface ImageInputFile {
-    /** Base64 data URL of the image for preview */
-    dataURL?: string;
-    /** Original File object */
-    file?: File;
-    /** Additional custom properties */
-    [key: string]: unknown;
-}
-/**
- * Type representing an array of image files
- */
-type ImageInputFiles = ImageInputFile[];
-/**
- * Props interface for the ImageInput component
- */
-interface ImageInputProps {
-    /** Current array of image files */
-    value: ImageInputFiles;
-    /** Callback when files change, includes updated file indices */
-    onChange: (value: ImageInputFiles, addUpdatedIndex?: number[]) => void;
-    /** Render prop function that receives image input controls */
-    children?: (props: ImageInputExport) => ReactNode;
-    /** Whether to allow multiple file selection */
-    multiple?: boolean;
-    /** Maximum number of files allowed (not implemented in current version) */
-    maxNumber?: number;
-    /** Array of accepted file extensions (without dots) */
-    acceptType?: string[];
-    /** Key name for the data URL property in file objects */
-    dataURLKey?: string;
-    /** Additional props to pass to the hidden input element */
-    inputProps?: React__default.HTMLProps<HTMLInputElement>;
-}
-/**
- * Interface for the object passed to the children render prop
- * Contains all necessary functions and state for image management
- */
-interface ImageInputExport {
-    /** Current list of image files */
-    fileList: ImageInputFiles;
-    /** Function to trigger file selection dialog */
-    onImageUpload: () => void;
-    /** Function to remove all images */
-    onImageRemoveAll: () => void;
-    /** Function to update/replace an image at specific index */
-    onImageUpdate: (index: number) => void;
-    /** Function to remove an image at specific index */
-    onImageRemove: (index: number) => void;
-    /** Whether drag operation is currently active */
-    isDragging: boolean;
-    /** Drag and drop event handlers */
-    dragProps: {
-        onDrop: (e: DragEvent<HTMLDivElement>) => void;
-        onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
-        onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
-        onDragOver: (e: DragEvent<HTMLDivElement>) => void;
-        onDragStart: (e: DragEvent<HTMLDivElement>) => void;
-    };
-}
-/** Default index value indicating no selection */
-declare const DEFAULT_NULL_INDEX = -1;
-/** Default key name for storing data URL in file objects */
-declare const DEFAULT_DATA_URL_KEY = "dataURL";
-/**
- * Utility Functions for Image Input Component
- */
-/**
- * Programmatically opens the file selection dialog
- *
- * @param inputRef - Reference to the hidden input element
- *
- * @example
- * ```tsx
- * const inputRef = useRef<HTMLInputElement>(null);
- *
- * const handleUploadClick = () => {
- *   openFileDialog(inputRef);
- * };
- * ```
+ * 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.
  */
-declare const openFileDialog: (inputRef: RefObject<HTMLInputElement | null>) => void;
 /**
- * Generates the accept attribute string for file input
- *
- * @param acceptType - Array of file extensions without dots
- * @param allowNonImageType - Whether to allow non-image files
- * @returns Accept attribute string for input element
- *
- * @example
- * ```tsx
- * getAcceptTypeString(['jpg', 'png']); // '.jpg, .png'
- * getAcceptTypeString(); // 'image/*'
- * getAcceptTypeString([], true); // ''
- * ```
+ * Props interface for the `ComingSoon` component
  */
-declare const getAcceptTypeString: (acceptType?: string[], allowNonImageType?: boolean) => string;
+interface ComingSoonProps {
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Optional highlighted title text */
+    title?: string;
+    /** Optional descriptive text below the title */
+    description?: string;
+}
 /**
- * Converts a File object to a base64 data URL string
+ * ComingSoon Component
+ *
+ * Renders a full-height container with animated hover background objects
+ * and optional title/description content centered on the screen.
  *
- * @param file - The file to convert
- * @returns Promise resolving to base64 data URL
+ * @param props - Component props
+ * @returns JSX element containing the coming soon layout
  *
  * @example
  * ```tsx
- * const file = new File([''], 'image.jpg', { type: 'image/jpeg' });
- * const dataURL = await getBase64(file);
- * console.log(dataURL); // 'data:image/jpeg;base64,/9j/4AAQ...'
+ * <ComingSoon title="Coming Soon" description="We are cooking something nice." />
  * ```
  */
-declare const getBase64: (file: File) => Promise<string>;
+declare function ComingSoon({ className, title, description }: ComingSoonProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Creates an HTMLImageElement from a File object
- * Useful for getting image dimensions or other metadata
- *
- * @param file - The image file to load
- * @returns Promise resolving to HTMLImageElement
- *
- * @example
- * ```tsx
- * const file = new File([''], 'image.jpg', { type: 'image/jpeg' });
- * const image = await getImage(file);
- * console.log(`Dimensions: ${image.width}x${image.height}`);
- * ```
+ * 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
  */
-declare const getImage: (file: File) => Promise<HTMLImageElement>;
 /**
- * Converts a FileList to an array of ImageInputFile objects
- * Each file is converted to base64 for preview purposes
- *
- * @param files - FileList from input or drag event
- * @param dataURLKey - Key name for storing the data URL
- * @returns Promise resolving to array of ImageInputFile objects
- *
- * @example
- * ```tsx
- * const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
- *   if (e.target.files) {
- *     const imageFiles = await getListFiles(e.target.files, 'dataURL');
- *     setImages(imageFiles);
- *   }
- * };
- * ```
+ * Props interface for the ConfirmDismissDialog component
  */
-declare const getListFiles: (files: FileList, dataURLKey: string) => Promise<ImageInputFiles>;
+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;
+}
 /**
- * ImageInput Component
+ * Reusable confirmation dialog for destructive actions
  *
- * A comprehensive image upload component with drag-and-drop support,
- * multiple file selection, and file management capabilities.
- * Uses render props pattern for maximum flexibility in UI implementation.
+ * 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
- * @returns JSX element containing hidden input and render prop children
+ * @param props - Component props for dialog configuration
+ * @returns JSX element containing the confirmation dialog
  *
  * @example
  * ```tsx
- * // Basic single image upload
- * function SingleImageUpload() {
- *   const [images, setImages] = useState<ImageInputFiles>([]);
- *
- *   return (
- *     <ImageInput
- *       value={images}
- *       onChange={setImages}
- *       acceptType={['jpg', 'png', 'gif']}
- *     >
- *       {({ fileList, onImageUpload, onImageRemove, isDragging, dragProps }) => (
- *         <div
- *           {...dragProps}
- *           className={`border-2 border-dashed p-4 ${
- *             isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
- *           }`}
- *         >
- *           {fileList.length === 0 ? (
- *             <button onClick={onImageUpload}>
- *               Click or drag image here
- *             </button>
- *           ) : (
- *             <div>
- *               <img src={fileList[0].dataURL} alt="Preview" />
- *               <button onClick={() => onImageRemove(0)}>Remove</button>
- *             </div>
- *           )}
- *         </div>
- *       )}
- *     </ImageInput>
- *   );
- * }
+ * // Basic usage for form dismissal
+ * function FormComponent() {
+ *   const [showDialog, setShowDialog] = useState(false);
+ *   const [hasChanges, setHasChanges] = useState(false);
  *
- * // Multiple image upload with gallery
- * function ImageGallery() {
- *   const [images, setImages] = useState<ImageInputFiles>([]);
+ *   const handleClose = () => {
+ *     if (hasChanges) {
+ *       setShowDialog(true);
+ *     } else {
+ *       // Close form directly
+ *       onClose();
+ *     }
+ *   };
  *
  *   return (
- *     <ImageInput
- *       value={images}
- *       onChange={setImages}
- *       multiple
- *       acceptType={['jpg', 'png']}
- *     >
- *       {({ fileList, onImageUpload, onImageRemove, onImageRemoveAll }) => (
- *         <div>
- *           <button onClick={onImageUpload}>Add Images</button>
- *           {fileList.length > 0 && (
- *             <button onClick={onImageRemoveAll}>Remove All</button>
- *           )}
- *           <div className="grid grid-cols-3 gap-4">
- *             {fileList.map((image, index) => (
- *               <div key={index} className="relative">
- *                 <img src={image.dataURL} alt={`Preview ${index}`} />
- *                 <button
- *                   onClick={() => onImageRemove(index)}
- *                   className="absolute top-0 right-0"
- *                 >
- *                   ×
- *                 </button>
- *               </div>
- *             ))}
- *           </div>
- *         </div>
- *       )}
- *     </ImageInput>
+ *     <>
+ *       <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 ImageInput: FC<ImageInputProps>;
+declare const ConfirmDismissDialog: ({ open, onOpenChange, onConfirm, onCancel, title, description, confirmText, cancelText, maxWidth, }: ConfirmDismissDialogProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Locale option used by the LanguageSwitcher
@@ -2264,13 +747,13 @@ interface LocaleOption {
 /**
  * Props for the LanguageSwitcher component (prop-driven)
  */
-interface LanguageSwitcherProps extends SharedImage {
+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?: "ghost" | "outline" | "secondary";
+    variant?: ComponentProps<typeof Button>["variant"];
     /** Button size (for toggle type) */
     size?: ComponentProps<typeof Button>["size"];
     /** Whether to show language names */
@@ -2289,55 +772,10 @@ interface LanguageSwitcherProps extends SharedImage {
     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, Image, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element | null;
-
-/**
- * Logo Component
- * Displays the application logo as an SVG icon
- * Supports theming through currentColor and customizable sizing
- */
-/**
- * Logo Component
- *
- * Renders the application's logo as a scalable SVG icon.
- * The logo uses currentColor for theming and can be customized
- * with additional CSS classes for size and styling.
- *
- * @param props - Component props
- * @param props.className - Additional CSS classes for styling
- * @returns JSX element with the application logo
- *
- * @example
- * ```tsx
- * // Basic logo
- * <Logo />
- *
- * // Custom sized logo
- * <Logo className="w-12 h-12" />
- *
- * // Colored logo
- * <Logo className="text-blue-600 w-16 h-16" />
- *
- * // Logo in navigation
- * <nav className="flex items-center space-x-4">
- *   <Logo className="w-8 h-8" />
- *   <span className="font-bold">App Name</span>
- * </nav>
- *
- * // Logo in header
- * <header className="bg-white shadow-sm">
- *   <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- *     <div className="flex justify-between items-center py-6">
- *       <Logo className="w-10 h-10 text-primary" />
- *     </div>
- *   </div>
- * </header>
- * ```
- */
-declare function Logo({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+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
@@ -2346,7 +784,7 @@ interface ModeSwitcherProps {
     /** Additional CSS classes for the button */
     className?: string;
     /** Button variant style */
-    variant?: "ghost" | "outline" | "secondary";
+    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) */
@@ -2399,132 +837,82 @@ interface ModeSwitcherProps {
 declare function ModeSwitcher({ className, variant, size, cycleOrder, type, label, }: ModeSwitcherProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Props interface for MovingLabel component
+ * Screen Loader Component
+ * Provides a full-screen loading overlay with spinner and customizable text
+ * Perfect for page transitions, data loading, and async operations
  */
-interface MovingLabelProps {
-    /** Border radius for the component (CSS value) */
-    borderRadius?: string;
-    /** Child elements to render inside the label */
-    children: ReactNode;
-    /** HTML element type to render as (default: 'button') */
-    as?: React__default.ElementType;
+/**
+ * Props interface for the ScreenLoader component
+ */
+interface ScreenLoaderProps {
+    /** Loading text to display below the spinner */
+    loadingText?: string;
     /** Additional CSS classes for the container */
-    containerClassName?: string;
-    /** Additional CSS classes for the border element */
-    borderClassName?: string;
-    /** Animation duration in milliseconds */
-    duration?: number;
-    /** Additional CSS classes for the content area */
     className?: string;
-    /** Additional props to pass to the root element */
-    [key: string]: unknown;
+    /** Additional CSS classes for the spinner icon */
+    spinnerClassName?: string;
+    /** Additional CSS classes for the loading text */
+    textClassName?: string;
+    /** Display loader for content */
+    contentLoader?: boolean;
 }
 /**
- * MovingLabel Component
+ * ScreenLoader Component
  *
- * A button or label component with an animated moving border effect.
- * The border continuously moves around the perimeter of the element,
- * creating an eye-catching visual effect perfect for CTAs or highlights.
+ * 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 with animated border
+ * @returns JSX element containing the full-screen loader
  *
  * @example
  * ```tsx
- * // Basic button with moving border
- * <MovingLabel>
- *   Click me!
- * </MovingLabel>
- *
- * // Custom styling and duration
- * <MovingLabel
- *   borderRadius="0.5rem"
- *   duration={3000}
- *   className="px-6 py-3 text-lg"
- *   borderClassName="bg-gradient-to-r from-blue-500 to-purple-500"
- * >
- *   Premium Feature
- * </MovingLabel>
- *
- * // As a div instead of button
- * <MovingLabel
- *   as="div"
- *   containerClassName="w-64 h-32"
- *   className="flex items-center justify-center"
- * >
- *   <span>Animated Card</span>
- * </MovingLabel>
- *
- * // Custom border effect
- * <MovingLabel
- *   borderClassName="h-8 w-16 bg-[radial-gradient(#ff6b6b_20%,transparent_70%)]"
- *   duration={1500}
- * >
- *   Fast Animation
- * </MovingLabel>
- * ```
- */
-declare function MovingLabel({ borderRadius, children, as: Component, containerClassName, borderClassName, duration, className, ...otherProps }: MovingLabelProps): react_jsx_runtime.JSX.Element;
-/**
- * Props interface for MovingBorder component
- */
-interface MovingBorderProps {
-    /** Child elements to animate along the border path */
-    children: ReactNode;
-    /** Animation duration in milliseconds (default: 2000) */
-    duration?: number;
-    /** Horizontal border radius for the SVG path */
-    rx?: string;
-    /** Vertical border radius for the SVG path */
-    ry?: string;
-    /** Additional props to pass to the SVG element */
-    [key: string]: unknown;
-}
-/**
- * MovingBorder Component
+ * // Basic usage
+ * function App() {
+ *   const [isLoading, setIsLoading] = useState(true);
  *
- * Creates an animated border effect where child elements move along
- * the perimeter of a rectangular path. Uses SVG path calculations
- * and Framer Motion for smooth animations.
+ *   useEffect(() => {
+ *     // Simulate loading
+ *     setTimeout(() => setIsLoading(false), 2000);
+ *   }, []);
  *
- * This is typically used as a building block for other components
- * like MovingLabel, but can be used standalone for custom effects.
+ *   return (
+ *     <div>
+ *       {isLoading && <ScreenLoader />}
+ *       <main>Your app content</main>
+ *     </div>
+ *   );
+ * }
  *
- * @param props - Component props
- * @returns JSX element with SVG path and animated child
+ * // Custom loading text
+ * <ScreenLoader loadingText="Preparing your dashboard..." />
  *
- * @example
- * ```tsx
- * // Basic usage with a glowing dot
- * <div className="relative w-64 h-32 border border-gray-300">
- *   <MovingBorder duration={3000} rx="10%" ry="10%">
- *     <div className="w-4 h-4 bg-blue-500 rounded-full shadow-lg" />
- *   </MovingBorder>
- * </div>
+ * // 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"
+ * />
  *
- * // Multiple animated elements
- * <div className="relative w-48 h-48 rounded-lg border">
- *   <MovingBorder duration={2000}>
- *     <div className="w-3 h-3 bg-red-500 rounded-full" />
- *   </MovingBorder>
- *   <MovingBorder duration={3000}>
- *     <div className="w-2 h-2 bg-green-500 rounded-full" />
- *   </MovingBorder>
- * </div>
+ * // With conditional rendering
+ * {isSubmitting && (
+ *   <ScreenLoader
+ *     loadingText="Submitting form..."
+ *     className="bg-white/90"
+ *   />
+ * )}
  *
- * // Custom SVG styling
- * <MovingBorder
- *   duration={1500}
- *   rx="20%"
- *   ry="20%"
- *   stroke="blue"
- *   strokeWidth="2"
- * >
- *   <div className="w-6 h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded" />
- * </MovingBorder>
+ * // Different spinner sizes
+ * <ScreenLoader
+ *   spinnerClassName="size-12 animate-spin text-purple-600"
+ *   textClassName="text-purple-600 font-bold"
+ * />
  * ```
  */
-declare const MovingBorder: ({ children, duration, rx, ry, ...otherProps }: MovingBorderProps) => react_jsx_runtime.JSX.Element;
+declare function ScreenLoader({ loadingText, className, spinnerClassName, textClassName, contentLoader, }?: ScreenLoaderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Main Toolbar Component
@@ -2552,7 +940,9 @@ declare const MovingBorder: ({ children, duration, rx, ry, ...otherProps }: Movi
  * </Toolbar>
  * ```
  */
-declare const Toolbar: ({ children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 /**
  * ToolbarHeading Component
  *
@@ -2572,7 +962,10 @@ declare const Toolbar: ({ children }: BaseComponentProps) => react_jsx_runtime.J
  * </ToolbarHeading>
  * ```
  */
-declare const ToolbarHeading: ({ children, className }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
+declare const ToolbarHeading: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
 /**
  * ToolbarTitle Component
  *
@@ -2592,7 +985,10 @@ declare const ToolbarHeading: ({ children, className }: BaseComponentProps) => r
  * </ToolbarTitle>
  * ```
  */
-declare const ToolbarTitle: ({ className, children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
+declare const ToolbarTitle: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
 /**
  * ToolbarActions Component
  *
@@ -2630,7 +1026,9 @@ declare const ToolbarTitle: ({ className, children }: BaseComponentProps) => rea
  * </ToolbarActions>
  * ```
  */
-declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
+declare const ToolbarActions: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
  * User Avatar Component
@@ -2741,59 +1139,4 @@ declare function UserAvatar({ className, indicator, src, alt }: UserAvatarProps)
  */
 declare const getInitials: (name: string | null | undefined, count?: number) => string;
 
-/**
- * Satoshi Font Utilities
- * Provides Satoshi font loading and CSS generation utilities
- * Loads the variable font from Pelatform CDN with optimal display settings
- */
-/**
- * Satoshi font (local, variable), loaded from Pelatform CDN
- * Use for branding, headings, or special UI elements.
- * Supports weights 300–900, normal style, swap display.
- */
-declare const satoshiFontUrl = "https://assets.pelatform.com/fonts/satoshi/Satoshi-Variable.woff2";
-/**
- * CSS font-face declaration for Satoshi font
- * Defines the font family with variable weight support and optimal loading
- */
-declare const cssFontFace = "\n  @font-face {\n    font-family: 'Satoshi';\n    src: url('https://assets.pelatform.com/fonts/satoshi/Satoshi-Variable.woff2') format('woff2');\n    font-weight: 300 900;\n    font-style: normal;\n    font-display: swap;\n  }\n";
-/**
- * SatoshiFontCSS Component
- *
- * Injects the Satoshi font CSS into the document head.
- * Use this component in your app layout to load the Satoshi font.
- *
- * @returns JSX element containing the font CSS styles
- *
- * @example
- * ```tsx
- * // In your layout or app component
- * function Layout({ children }: { children: React.ReactNode }) {
- *   return (
- *     <html>
- *       <head>
- *         <SatoshiFontCSS />
- *       </head>
- *       <body className="font-satoshi">
- *         {children}
- *       </body>
- *     </html>
- *   );
- * }
- *
- * // Or use in a specific component
- * function BrandedSection() {
- *   return (
- *     <>
- *       <SatoshiFontCSS />
- *       <h1 style={{ fontFamily: 'Satoshi' }}>
- *         Branded Heading
- *       </h1>
- *     </>
- *   );
- * }
- * ```
- */
-declare function SatoshiFontCSS(): react_jsx_runtime.JSX.Element;
-
-export { AlertComingsoon, AlertNotification, AlertToast, type AlertToastOptions, Announcement, AnnouncementTag, AnnouncementTitle, BackLink, BackgroundPaths, Body, Book, CodeDisplay, ComingSoon, type ComingSoonProps, CommandMenu, type CommandMenuProps, ConfirmDismissDialog, type ConfirmDismissDialogProps, DEFAULT_DATA_URL_KEY, DEFAULT_NULL_INDEX, DefaultImage, DefaultLink, DefaultNavigate, DotsPattern, DownloadFile, ErrorComponents, type ErrorComponentsProps, ExtraLink, FloatingPaths, Grid, GridBackground, HexagonBadge, ImageInput, type ImageInputFile, type ImageInputFiles, type ImageInputProps, LanguageSwitcher, type LanguageSwitcherProps, LayoutAuth, LayoutBlank, type LayoutBlankProps, type LocaleOption, Logo, MainNav, MaxWidthWrapper, MobileNav, MobileNavItemRenderer, ModeSwitcher, type ModeSwitcherProps, MovingBorder, MovingLabel, type NavItem, type NavigationProps, QueryProvider, SatoshiFontCSS, ScreenLoader, type ScreenLoaderProps, Section, type SharedImage, type SharedLink, type SharedNavigate, SiteFooter, SiteHeader, Stack, ThemeProvider, Toolbar, ToolbarActions, ToolbarHeading, ToolbarTitle, UserAvatar, Video, Wrapper, Youtube, cssFontFace, getAcceptTypeString, getBase64, getImage, getInitials, getListFiles, openFileDialog, satoshiFontUrl };
+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 };