@pelatform/ui 2.0.0 → 2.1.0

package/dist/components.d.ts

@@ -1,2987 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { ReactNode, HTMLAttributes, ComponentProps, FC, DragEvent, RefObject } from 'react';
-import { BaseComponentProps, LinkComponent, ImageComponent, VariantProps, ThemeMode } from '@pelatform/ui.core';
-import { DialogProps, ThemeProvider as ThemeProvider$1 } from '@pelatform/ui.default/dep';
-import { QueryClient } from '@tanstack/react-query';
-import { badgeVariants } from '@pelatform/ui.default';
-export { Icons } from './index.js';
-
-/**
- * Alert Toast Component
- *
- * This module provides a customizable toast notification system using Sonner
- * with integrated Alert components for consistent UI styling.
- *
- * Features:
- * - Multiple icon variants (primary, destructive, success, info, warning)
- * - Customizable alert variants for different visual styles
- * - Auto-dismiss after 4 seconds
- * - Unique ID generation for each toast
- */
-/**
- * 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?: 'secondary' | 'primary' | 'destructive' | 'mono' | 'success' | 'info' | 'warning';
-}
-/**
- * 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: 'mono')
- *
- * @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, icon, 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;
-    /** Destination URL for the logo link */
-    logoHref?: string;
-}
-/**
- * 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, logoHref }: 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;
-}
-/**
- * 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, }: 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?: ImageComponent;
-}
-/**
- * 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?: LinkComponent;
-}
-/**
- * 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: ImageComponent;
-/**
- * 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>
- * ```
- */
-declare const DefaultLink: LinkComponent;
-/**
- * Default Navigation Function
- *
- * 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
- *
- * @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<LinkComponent>): 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.
- *
- * @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"
- * />
- *
- * // 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>
- * ```
- */
-declare function Wrapper({ children, className }: BaseComponentProps): 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
- */
-/**
- * Youtube Component
- *
- * Embeds YouTube videos using an iframe with responsive design and
- * consistent styling. Automatically maintains 16:9 aspect ratio
- * and includes proper accessibility attributes.
- *
- * @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
- *
- * @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
- *
- * @example
- * ```tsx
- * // Basic back link
- * <BackLink href="/dashboard">
- *   Back to Dashboard
- * </BackLink>
- *
- * // With custom Link component (Next.js)
- * <BackLink Link={NextLink} href="/products">
- *   Back to Products
- * </BackLink>
- *
- * // 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>
- * </nav>
- *
- * // Dynamic back navigation
- * function ProductDetail({ productId }: { productId: string }) {
- *   return (
- *     <div>
- *       <BackLink href={`/category/${categoryId}`}>
- *         Back to Category
- *       </BackLink>
- *       <h1>Product Details</h1>
- *     </div>
- *   );
- * }
- * ```
- */
-declare function BackLink({ Link, children, href, className }: BackLinkProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the CommandMenu component
- * Extends DialogProps from Radix UI for full dialog customization
- */
-interface CommandMenuProps extends DialogProps {
-    /** 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>
- * ```
- */
-declare function CommandMenu({ children, classButton, classDialog, searchButtonText, commandInputPlaceholder, keyHint, ...props }: CommandMenuProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Interface defining the structure of a navigation item
- */
-interface NavItem {
-    /** Display text for the navigation item */
-    title: string;
-    /** URL path for the navigation item */
-    href?: string;
-    /** Whether the link opens in a new tab */
-    external?: boolean;
-    /** Optional icon to display alongside the title */
-    icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-    /** Child navigation items for dropdown menus */
-    children?: NavItem[];
-}
-/**
- * Props interface for the MainNav component
- */
-interface NavigationProps extends SharedLink {
-    /** Current pathname */
-    pathname: string;
-    /** Array of navigation items to display */
-    items: NavItem[];
-    /** Additional CSS classes for the navigation container */
-    className?: string;
-}
-/**
- * MainNav Component
- *
- * A responsive navigation component that supports multi-level dropdown menus,
- * active state detection, and analytics tracking. Hidden on mobile devices
- * and typically used in the site header.
- *
- * Features:
- * - Multi-level dropdown menus (up to 3 levels)
- * - Active state detection for current page
- * - External link indicators
- * - Analytics tracking for menu interactions
- * - Responsive design (hidden on mobile)
- * - Keyboard navigation support
- *
- * @param props - Component props
- * @returns JSX element containing the navigation menu
- *
- * @example
- * ```tsx
- * const navItems: NavItem[] = [
- *   {
- *     title: 'Home',
- *     href: '/',
- *   },
- *   {
- *     title: 'Products',
- *     children: [
- *       { title: 'Web Apps', href: '/products/web' },
- *       { title: 'Mobile Apps', href: '/products/mobile' },
- *       {
- *         title: 'Enterprise',
- *         children: [
- *           { title: 'SaaS Solutions', href: '/products/enterprise/saas' },
- *           { title: 'Custom Development', href: '/products/enterprise/custom' }
- *         ]
- *       }
- *     ]
- *   },
- *   {
- *     title: 'Documentation',
- *     href: 'https://docs.example.com',
- *     external: true,
- *     icon: <IconBook className="w-4 h-4" />
- *   }
- * ];
- *
- * <MainNav items={navItems} />
- * ```
- */
-declare function MainNav({ Link, pathname, items, className }: NavigationProps): react_jsx_runtime.JSX.Element;
-declare function handleMenuClick(item: NavItem): void;
-
-/**
- * MobileNav Component
- *
- * A mobile-optimized navigation component that uses a drawer interface
- * for space-efficient menu display on small screens. Automatically
- * manages meta theme color changes when the drawer opens/closes.
- *
- * Features:
- * - Drawer-based interface for mobile screens
- * - Meta theme color management
- * - Responsive design (hidden on desktop)
- * - Accessible with proper ARIA labels
- * - Smooth open/close animations
- * - Scrollable content area
- *
- * @param props - Component props
- * @returns JSX element containing the mobile navigation drawer
- *
- * @example
- * ```tsx
- * // Basic usage with navigation items
- * <MobileNav>
- *   <div className="space-y-4">
- *     <MobileNavItemRenderer
- *       item={{ title: 'Home', href: '/' }}
- *       onOpenChange={setOpen}
- *       level={1}
- *     />
- *     <MobileNavItemRenderer
- *       item={{
- *         title: 'Products',
- *         children: [
- *           { title: 'Web Apps', href: '/products/web' },
- *           { title: 'Mobile Apps', href: '/products/mobile' }
- *         ]
- *       }}
- *       onOpenChange={setOpen}
- *       level={1}
- *     />
- *   </div>
- * </MobileNav>
- *
- * // With custom content
- * <MobileNav className="border-l border-gray-200">
- *   <div className="space-y-6">
- *     <NavigationItems />
- *     <UserProfile />
- *     <ThemeToggle />
- *   </div>
- * </MobileNav>
- * ```
- */
-declare function MobileNav({ children, className }: 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;
-
-/**
- * React Query provider component with optimized configuration
- *
- * This provider sets up TanStack Query with:
- * - Global error handling with toast notifications
- * - Optimized caching and retry strategies
- * - Background refetching configuration
- * - Stale time and garbage collection settings
- *
- * @param props - Component props containing children
- * @returns JSX element wrapping children with QueryClient context
- *
- * @example
- * ```tsx
- * // Wrap your app with QueryProvider
- * function App() {
- *   return (
- *     <QueryProvider>
- *       <YourAppComponents />
- *     </QueryProvider>
- *   );
- * }
- *
- * // Use React Query hooks in child components
- * function UserProfile() {
- *   const { data, isLoading, error } = useQuery({
- *     queryKey: ['user', userId],
- *     queryFn: () => fetchUser(userId)
- *   });
- *
- *   if (isLoading) return <div>Loading...</div>;
- *   if (error) return <div>Error occurred</div>; // Error toast will show automatically
- *
- *   return <div>{data.name}</div>;
- * }
- * ```
- */
-declare const QueryProvider: ({ client: clientProps, children, }: {
-    client?: QueryClient;
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for ThemeProvider component
- * Extends NextThemesProvider props for full compatibility
- */
-interface ThemeProviderProps extends React$1.ComponentProps<typeof ThemeProvider$1> {
-    /** Child components that will have access to theme context */
-    children: React$1.ReactNode;
-}
-/**
- * Application theme provider component
- *
- * This provider sets up theme management with:
- * - Light, dark, and system theme support
- * - Automatic system preference detection
- * - Smooth theme transitions
- * - Integration with tooltip provider
- * - CSS class-based theme switching
- *
- * The provider integrates with the application's theme configuration
- * and provides a consistent theming experience across all components.
- *
- * @param props - Component props extending NextThemesProvider props
- * @returns JSX element wrapping children with theme and tooltip context
- *
- * @example
- * ```tsx
- * // Basic usage - wrap your app root
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourAppComponents />
- *     </ThemeProvider>
- *   );
- * }
- *
- * // With custom configuration
- * function App() {
- *   return (
- *     <ThemeProvider
- *       defaultTheme="dark"
- *       storageKey="custom-theme"
- *     >
- *       <YourAppComponents />
- *     </ThemeProvider>
- *   );
- * }
- *
- * // Use theme in child components
- * function ThemeToggle() {
- *   const { theme, setTheme } = useTheme();
- *
- *   return (
- *     <select value={theme} onChange={(e) => setTheme(e.target.value)}>
- *       <option value="light">Light</option>
- *       <option value="dark">Dark</option>
- *       <option value="system">System</option>
- *     </select>
- *   );
- * }
- * ```
- */
-declare function ThemeProvider({ children, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for the Announcement component
- */
-type AnnouncementProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants> & {
-    /** Whether to apply themed styling with special background treatment */
-    themed?: boolean;
-};
-/**
- * Announcement Component
- *
- * A styled badge component for displaying announcements, notifications,
- * and promotional content. Features rounded design with hover effects
- * and optional themed styling.
- *
- * @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
- *
- * @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
- *
- * @example
- * ```tsx
- * <Announcement>
- *   <AnnouncementTag>BETA</AnnouncementTag>
- *   <AnnouncementTitle>New Dashboard</AnnouncementTitle>
- * </Announcement>
- * ```
- */
-declare const AnnouncementTag: ({ className, ...props }: AnnouncementTagProps) => react_jsx_runtime.JSX.Element;
-/**
- * Props interface for the AnnouncementTitle component
- */
-type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>;
-/**
- * AnnouncementTitle Component
- *
- * A title component designed for use within announcements,
- * providing proper spacing and alignment for announcement content.
- *
- * @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 - 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
- *
- * @example
- * ```tsx
- * // Basic floating paths
- * <FloatingPaths position={1} />
- *
- * // Custom colored paths
- * <FloatingPaths
- *   position={2}
- *   color="text-blue-500 dark:text-blue-300"
- * />
- *
- * // 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"
- * />
- *
- * // Offset pattern
- * <DotsPattern
- *   patternOffset={[5, 5]}
- *   dotSize={1}
- *   gapSize={8}
- * />
- *
- * // 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;
-}
-/**
- * GridBackground Component
- *
- * Creates a customizable grid background with vertical lines and dots pattern.
- * Features configurable column count and styling options for creating
- * structured visual backgrounds.
- *
- * @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
- *
- * @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.
- *
- * @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
- *
- * @example
- * ```tsx
- * // Basic usage with an icon
- * import { StarIcon } from '@pelatform/ui.core';
- *
- * <HexagonBadge>
- *   <StarIcon className="w-6 h-6" />
- * </HexagonBadge>
- *
- * // 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>
- * ```
- */
-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
- */
-
-/**
- * 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);
- * };
- * ```
- */
-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); // ''
- * ```
- */
-declare const getAcceptTypeString: (acceptType?: string[], allowNonImageType?: boolean) => string;
-/**
- * Converts a File object to a base64 data URL string
- *
- * @param file - The file to convert
- * @returns Promise resolving to base64 data URL
- *
- * @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...'
- * ```
- */
-declare const getBase64: (file: File) => Promise<string>;
-/**
- * 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}`);
- * ```
- */
-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);
- *   }
- * };
- * ```
- */
-declare const getListFiles: (files: FileList, dataURLKey: string) => Promise<ImageInputFiles>;
-/**
- * ImageInput Component
- *
- * 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.
- *
- * @param props - Component props
- * @returns JSX element containing hidden input and render prop children
- *
- * @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>
- *   );
- * }
- *
- * // Multiple image upload with gallery
- * function ImageGallery() {
- *   const [images, setImages] = useState<ImageInputFiles>([]);
- *
- *   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>
- *   );
- * }
- * ```
- */
-declare const ImageInput: FC<ImageInputProps>;
-
-/**
- * Locale option used by the LanguageSwitcher
- */
-interface LocaleOption {
-    /** Locale code, e.g. 'en', 'id' */
-    code: string;
-    /** Human readable language name */
-    name: string;
-    /** Optional flag code to render, e.g. 'us', 'id' */
-    flag?: string;
-    /** Optional currency code associated with the locale */
-    currency?: string;
-}
-/**
- * Props for the LanguageSwitcher component (prop-driven)
- */
-interface LanguageSwitcherProps extends SharedImage {
-    /** 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';
-    /** Button size (for toggle type) */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether to show language names */
-    showNames?: boolean;
-    /** Whether to show flag icons */
-    showFlags?: boolean;
-    /** Label text for the dropdown trigger; defaults to 'Language' */
-    label?: string;
-    /** Whether i18n is enabled; if false and <=1 locales, render null */
-    i18nEnabled?: boolean;
-    /** Current active locale code */
-    currentLocale: string;
-    /** Available locales to render */
-    locales: LocaleOption[];
-    /** Handler called when a new locale is selected */
-    onLocaleChange: (newLocale: string) => void | Promise<void>;
-    /** Custom flags asset url */
-    customFlagUrl?: boolean;
-}
-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;
-
-/**
- * Props interface for the ModeSwitcher component
- */
-interface ModeSwitcherProps {
-    /** Additional CSS classes for the button */
-    className?: string;
-    /** Button variant style */
-    variant?: 'ghost' | 'outline' | 'secondary';
-    /** Button size */
-    size?: 'sm' | 'md' | 'lg';
-    /** Custom cycle order for themes (defaults to system -> light -> dark) */
-    cycleOrder?: ThemeMode[];
-    /** Button type: 'toggle' for a single button or 'dropdown' and 'sub-dropdown' for a menu with options */
-    type?: 'toogle' | 'dropdown' | 'sub-dropdown';
-    /** Labels for each theme mode (optional) */
-    label?: {
-        system?: string;
-        dark?: string;
-        light?: string;
-    };
-}
-/**
- * ModeSwitcher Component
- *
- * A button component that cycles through available theme modes (light, dark, system).
- * Automatically updates the meta theme color and displays appropriate icons
- * for each theme state. Integrates with next-themes for theme persistence.
- *
- * Features:
- * - Cycles through light, dark, and system themes
- * - Updates meta theme color automatically
- * - Shows appropriate icons for each theme
- * - Accessible with screen reader support
- * - Customizable appearance and cycle order
- * - Integrates with application color configuration
- *
- * @param props - Component props
- * @returns JSX element containing the theme switcher button
- *
- * @example
- * ```tsx
- * // Basic usage
- * <ModeSwitcher />
- *
- * // Custom styling
- * <ModeSwitcher
- *   className="border border-gray-300"
- *   variant="outline"
- *   size="lg"
- * />
- *
- * // Custom cycle order
- * <ModeSwitcher
- *   cycleOrder={['light', 'dark']} // Skip system mode
- * />
- * ```
- */
-declare function ModeSwitcher({ className, variant, size, cycleOrder, type, label, }: ModeSwitcherProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Props interface for MovingLabel component
- */
-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;
-    /** 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;
-}
-/**
- * MovingLabel 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.
- *
- * @param props - Component props
- * @returns JSX element with animated border
- *
- * @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
- *
- * 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.
- *
- * This is typically used as a building block for other components
- * like MovingLabel, but can be used standalone for custom effects.
- *
- * @param props - Component props
- * @returns JSX element with SVG path and animated child
- *
- * @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>
- *
- * // 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>
- *
- * // 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>
- * ```
- */
-declare const MovingBorder: ({ children, duration, rx, ry, ...otherProps }: MovingBorderProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Newsletter Subscribe Component
- * Provides a complete newsletter subscription form with reCAPTCHA verification,
- * email validation, analytics tracking, and customizable messaging
- */
-/**
- * Props interface for the Subscribe component
- */
-interface SubscribeProps {
-    /** Main heading text for the subscription section */
-    heading?: string;
-    /** Subheading or description text */
-    subheading?: string;
-    /** Button text when not loading */
-    buttonText?: string;
-    /** Button text when loading/submitting */
-    loadingButtonText?: string;
-    /** Placeholder text for email input */
-    inputPlaceholder?: string;
-    /** Success message shown after successful subscription */
-    successMessage?: string;
-    /** Error message for invalid email format */
-    invalidEmailMessage?: string;
-    /** Error message for reCAPTCHA verification failure */
-    recaptchaMessage?: string;
-    /** Generic error message for API failures */
-    errorMessage?: string;
-    /** API endpoint for subscription requests */
-    apiEndpoint?: string;
-    /** Text for the verify button in reCAPTCHA popover */
-    verifyButtonText?: string;
-    /** Additional CSS classes for the container */
-    className?: string;
-}
-/**
- * Subscribe Component
- *
- * A complete newsletter subscription form with the following features:
- * - Email validation with regex pattern matching
- * - reCAPTCHA v2 verification for bot protection
- * - Analytics tracking for conversion metrics
- * - Customizable messaging and styling
- * - Toast notifications for user feedback
- * - Loading states and error handling
- *
- * The component automatically tracks subscription events for analytics
- * and provides a seamless user experience with proper accessibility.
- *
- * @param props - Component props
- * @returns JSX element containing the subscription form
- *
- * @example
- * ```tsx
- * // Basic usage with default settings
- * <Subscribe />
- *
- * // Custom messaging and endpoint
- * <Subscribe
- *   heading="Join Our Community"
- *   subheading="Get exclusive updates and early access"
- *   buttonText="Join Now"
- *   apiEndpoint="/api/newsletter/subscribe"
- *   successMessage="Welcome to our community!"
- * />
- *
- * // Multilingual support
- * <Subscribe
- *   heading="Tetap terinformasi dengan rilis terbaru"
- *   subheading="Hanya update yang layak diketahui"
- *   buttonText="Berlangganan"
- *   loadingButtonText="Berlangganan..."
- *   inputPlaceholder="Alamat email Anda"
- *   successMessage="Terima kasih atas langganan Anda!"
- *   invalidEmailMessage="Alamat email tidak valid. Silakan periksa dan coba lagi."
- * />
- *
- * // Custom styling
- * <Subscribe
- *   className="bg-gradient-to-r from-blue-600 to-purple-600"
- * />
- * ```
- */
-declare function Subscribe({ heading, subheading, buttonText, loadingButtonText, inputPlaceholder, successMessage, invalidEmailMessage, recaptchaMessage, errorMessage, apiEndpoint, verifyButtonText, className, }?: SubscribeProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Main Toolbar Component
- *
- * Creates a horizontal layout with space between heading and actions.
- * Typically used at the top of pages or sections to display titles
- * and related action buttons.
- *
- * @param props - Component props
- * @returns JSX element containing the toolbar layout
- *
- * @example
- * ```tsx
- * <Toolbar>
- *   <ToolbarHeading>
- *     <ToolbarTitle>Dashboard</ToolbarTitle>
- *     <p className="text-sm text-muted-foreground">
- *       Welcome back! Here's what's happening.
- *     </p>
- *   </ToolbarHeading>
- *   <ToolbarActions>
- *     <Button variant="outline">Export</Button>
- *     <Button>Create New</Button>
- *   </ToolbarActions>
- * </Toolbar>
- * ```
- */
-declare const Toolbar: ({ children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
-/**
- * ToolbarHeading Component
- *
- * Container for the left side of the toolbar, typically containing
- * the title and optional subtitle or description text.
- *
- * @param props - Component props
- * @returns JSX element containing the heading section
- *
- * @example
- * ```tsx
- * <ToolbarHeading>
- *   <ToolbarTitle>User Management</ToolbarTitle>
- *   <p className="text-sm text-muted-foreground">
- *     Manage user accounts and permissions
- *   </p>
- * </ToolbarHeading>
- * ```
- */
-declare const ToolbarHeading: ({ children, className }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
-/**
- * ToolbarTitle Component
- *
- * Displays the main title text with consistent typography.
- * Renders as an h1 element for proper semantic structure.
- *
- * @param props - Component props
- * @returns JSX element containing the title
- *
- * @example
- * ```tsx
- * <ToolbarTitle>Analytics Dashboard</ToolbarTitle>
- *
- * // With custom styling
- * <ToolbarTitle className="text-2xl text-blue-600">
- *   Premium Features
- * </ToolbarTitle>
- * ```
- */
-declare const ToolbarTitle: ({ className, children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
-/**
- * ToolbarActions Component
- *
- * Container for the right side of the toolbar, typically containing
- * action buttons, dropdowns, or other interactive elements.
- * Responsive design with different gaps on mobile vs desktop.
- *
- * @param props - Component props
- * @returns JSX element containing the actions section
- *
- * @example
- * ```tsx
- * <ToolbarActions>
- *   <Button variant="outline" size="sm">
- *     <IconDownload className="w-4 h-4 mr-2" />
- *     Export
- *   </Button>
- *   <Button size="sm">
- *     <IconPlus className="w-4 h-4 mr-2" />
- *     Add Item
- *   </Button>
- * </ToolbarActions>
- *
- * // With dropdown menu
- * <ToolbarActions>
- *   <DropdownMenu>
- *     <DropdownMenuTrigger asChild>
- *       <Button variant="outline">Options</Button>
- *     </DropdownMenuTrigger>
- *     <DropdownMenuContent>
- *       <DropdownMenuItem>Edit</DropdownMenuItem>
- *       <DropdownMenuItem>Delete</DropdownMenuItem>
- *     </DropdownMenuContent>
- *   </DropdownMenu>
- * </ToolbarActions>
- * ```
- */
-declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * User Avatar Component
- * Displays user profile pictures with fallback initials and optional status indicators
- * Built on top of the base Avatar component with enhanced user-specific features
- */
-/**
- * Props interface for the UserAvatar component
- */
-interface UserAvatarProps {
-    /** Additional CSS classes for styling */
-    className?: string;
-    /** Whether to show online status indicator */
-    indicator?: boolean;
-    /** Source URL for the user's profile image */
-    src?: string | null | undefined;
-    /** Alt text for the image, also used to generate initials */
-    alt?: string | null;
-}
-/**
- * UserAvatar Component
- *
- * Displays a user's profile picture with automatic fallback to initials
- * when no image is available. Supports optional online status indicators
- * and follows accessibility best practices.
- *
- * Features:
- * - Automatic initials generation from name
- * - Fallback handling for missing images
- * - Optional online status indicator
- * - Accessible alt text support
- * - Customizable styling
- *
- * @param props - Component props
- * @param props.className - Additional CSS classes for styling
- * @param props.indicator - Whether to show online status indicator (default: false)
- * @param props.src - Source URL for the user's profile image
- * @param props.alt - Alt text for the image, also used to generate initials
- * @returns JSX element containing the user avatar
- *
- * @example
- * ```tsx
- * // Basic user avatar with image
- * <UserAvatar
- *   src="https://example.com/avatar.jpg"
- *   alt="John Doe"
- * />
- *
- * // Avatar with online indicator
- * <UserAvatar
- *   src="https://example.com/avatar.jpg"
- *   alt="Jane Smith"
- *   indicator={true}
- * />
- *
- * // Avatar with fallback initials (no image)
- * <UserAvatar
- *   alt="Bob Johnson"
- *   className="w-12 h-12"
- * />
- *
- * // User list with avatars
- * <div className="flex space-x-2">
- *   {users.map(user => (
- *     <UserAvatar
- *       key={user.id}
- *       src={user.avatar}
- *       alt={user.name}
- *       indicator={user.isOnline}
- *       className="w-8 h-8"
- *     />
- *   ))}
- * </div>
- *
- * // Profile header
- * <div className="flex items-center space-x-4">
- *   <UserAvatar
- *     src={currentUser.avatar}
- *     alt={currentUser.name}
- *     indicator={true}
- *     className="w-16 h-16"
- *   />
- *   <div>
- *     <h2>{currentUser.name}</h2>
- *     <p className="text-gray-600">{currentUser.email}</p>
- *   </div>
- * </div>
- * ```
- */
-declare function UserAvatar({ className, indicator, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
-/**
- * Utility function to generate initials from a name
- *
- * Extracts the first letter of each word in a name and converts
- * them to uppercase to create user initials for avatar fallbacks.
- *
- * @param name - The full name to extract initials from
- * @param count - Maximum number of initials to return (optional)
- * @returns String containing the initials
- *
- * @example
- * ```tsx
- * getInitials("John Doe") // Returns "JD"
- * getInitials("Jane Mary Smith", 2) // Returns "JM"
- * getInitials("") // Returns ""
- * getInitials(null) // Returns ""
- * ```
- */
-declare const getInitials: (name: string | null | undefined, count?: number) => string;
-
-/**
- * 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;
-
-/**
- * Props interface for the RecaptchaPopover component
- */
-interface RecaptchaPopoverProps {
-    /** Whether the popover is open */
-    open: boolean;
-    /** Callback when popover open state changes */
-    onOpenChange: (open: boolean) => void;
-    /** Callback when reCAPTCHA verification succeeds */
-    onVerify: (token: string) => void;
-    /** Trigger element that opens the popover */
-    trigger: ReactNode;
-    /** Custom text for the verify button (default: "Verify & Submit") */
-    verifyButtonText?: string;
-}
-/**
- * RecaptchaPopover Component
- *
- * A popover component that displays Google reCAPTCHA v2 verification.
- * Provides a clean, accessible interface for bot protection without
- * disrupting the main page flow. Automatically handles reCAPTCHA
- * initialization, token retrieval, and error states.
- *
- * @param props - Component props
- * @returns JSX element containing the popover with reCAPTCHA
- *
- * @example
- * ```tsx
- * // Basic usage with form submission
- * function ContactForm() {
- *   const [showRecaptcha, setShowRecaptcha] = useState(false);
- *   const [formData, setFormData] = useState({ email: '', message: '' });
- *
- *   const handleSubmit = (e: FormEvent) => {
- *     e.preventDefault();
- *     setShowRecaptcha(true);
- *   };
- *
- *   const handleRecaptchaVerify = async (token: string) => {
- *     try {
- *       await submitForm({ ...formData, recaptchaToken: token });
- *       setShowRecaptcha(false);
- *       toast.success('Form submitted successfully!');
- *     } catch (error) {
- *       toast.error('Submission failed. Please try again.');
- *     }
- *   };
- *
- *   return (
- *     <form onSubmit={handleSubmit}>
- *       <input
- *         type="email"
- *         value={formData.email}
- *         onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
- *         placeholder="Email"
- *         required
- *       />
- *       <textarea
- *         value={formData.message}
- *         onChange={(e) => setFormData(prev => ({ ...prev, message: e.target.value }))}
- *         placeholder="Message"
- *         required
- *       />
- *
- *       <RecaptchaPopover
- *         open={showRecaptcha}
- *         onOpenChange={setShowRecaptcha}
- *         onVerify={handleRecaptchaVerify}
- *         trigger={
- *           <Button type="submit">
- *             Send Message
- *           </Button>
- *         }
- *       />
- *     </form>
- *   );
- * }
- *
- * // Custom verification button text
- * <RecaptchaPopover
- *   open={showVerification}
- *   onOpenChange={setShowVerification}
- *   onVerify={handleVerification}
- *   verifyButtonText="Complete Verification"
- *   trigger={<Button>Verify Account</Button>}
- * />
- * ```
- */
-declare function RecaptchaPopover({ open, onOpenChange, onVerify, trigger, verifyButtonText, }: RecaptchaPopoverProps): 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, RecaptchaPopover, SatoshiFontCSS, ScreenLoader, type ScreenLoaderProps, Section, type SharedImage, type SharedLink, type SharedNavigate, SiteFooter, SiteHeader, Stack, Subscribe, type SubscribeProps, ThemeProvider, Toolbar, ToolbarActions, ToolbarHeading, ToolbarTitle, UserAvatar, Video, Wrapper, Youtube, cssFontFace, getAcceptTypeString, getBase64, getImage, getInitials, getListFiles, handleMenuClick, openFileDialog, satoshiFontUrl };
+export * from 'pelatform-ui/components';