@jmruthers/pace-core 0.2.4

package/dist/PublicLoadingSpinner-DztrzuJr.d.ts

@@ -0,0 +1,3430 @@
+import * as React from 'react';
+import React__default, { Component, ReactNode, ErrorInfo } from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { FieldValues, DefaultValues, SubmitHandler, SubmitErrorHandler, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { User, SupabaseClient, createClient } from '@supabase/supabase-js';
+import { r as Event } from './unified-CM7T0aTK.js';
+import { O as Organisation } from './organisation-CO3Sh3_D.js';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant of the button */
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    /** Size of the button */
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+    /** Whether to render as a different element using Radix Slot */
+    asChild?: boolean;
+}
+/**
+ * Button Component
+ * A flexible, accessible button component with multiple variants and sizes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button>Click me</Button>
+ *
+ * // Button with variant and size
+ * <Button variant="destructive" size="lg">Delete</Button>
+ *
+ * // Button as child (composition)
+ * <Button asChild>
+ *   <Link href="/dashboard">Go to Dashboard</Link>
+ * </Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * @file Card Component Suite
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A flexible card component suite for displaying content with consistent styling.
+ * Includes Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardActions, and HoverCard variants.
+ * Uses semantic HTML elements for better accessibility and structure.
+ *
+ * Features:
+ * - Semantic HTML structure (article, header, main, footer, etc.)
+ * - Modular card structure (header, content, footer, actions, etc.)
+ * - CardContent uses main element for primary content (accessible when nested)
+ * - Consistent padding, border, and shadow
+ * - Responsive and accessible
+ * - HoverCard for popover-style cards
+ * - Proper heading hierarchy and semantic elements
+ *
+ * @example
+ * ```tsx
+ * // Basic card with semantic HTML structure
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Article Title</CardTitle>
+ *     <CardDescription>Brief description of the article content</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Main content goes here with proper semantic structure.</p>
+ *     <p>Additional paragraphs and content.</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <CardActions>
+ *       <Button>Primary Action</Button>
+ *       <Button variant="outline">Secondary Action</Button>
+ *     </CardActions>
+ *   </CardFooter>
+ * </Card>
+ *
+ * // Semantic HTML structure:
+ * // - Card: <article> element for self-contained content
+ * // - CardHeader: <header> element for card heading area
+ * // - CardContent: <main> element for primary card content
+ * // - CardFooter: <footer> element for card footer area
+ * // - CardActions: <nav> element for action buttons
+ *
+ * // HoverCard usage with semantic structure
+ * <HoverCard>
+ *   <HoverCardTrigger>Hover me</HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <p>Popover content with semantic elements</p>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ *
+ * @accessibility
+ * - Uses semantic HTML structure (article, header, main, footer, nav)
+ * - Focusable and keyboard accessible
+ * - Proper heading hierarchy for screen readers
+ * - HoverCard supports mouse and keyboard interaction
+ * - Screen reader friendly with semantic landmarks
+ */
+
+interface CardProps extends React.HTMLAttributes<HTMLElement> {
+    /** Visual variant of the card */
+    variant?: 'default' | 'outline' | 'ghost';
+    /** Size of the card */
+    size?: 'default' | 'sm' | 'lg';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const CardActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+type CardActionsProps = React.HTMLAttributes<HTMLElement>;
+
+/**
+ * @file Input Component Suite
+ * @package @jmruthers/pace-core
+ * @module Input
+ * @since 0.1.0
+ *
+ * A comprehensive input component suite including Input and InputGroup.
+ * Provides flexible, accessible input components with consistent styling and behavior.
+ *
+ * Features:
+ * - Multiple input variants (default, destructive)
+ * - Multiple input sizes (sm, md, lg)
+ * - Error state styling
+ * - Input grouping with consistent spacing
+ * - Horizontal and vertical orientation support
+ * - Forwarded ref support
+ * - Composition support
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text" />
+ *
+ * // Input with variants and sizes
+ * <Input
+ *   variant="destructive"
+ *   size="lg"
+ *   placeholder="Error input"
+ * />
+ *
+ * // Input group
+ * <InputGroup orientation="horizontal" spacing="md">
+ *   <Input placeholder="First name" />
+ *   <Input placeholder="Last name" />
+ * </InputGroup>
+ *
+ * // Vertical input group
+ * <InputGroup orientation="vertical" spacing="lg">
+ *   <Input placeholder="Email" type="email" />
+ *   <Input placeholder="Password" type="password" />
+ * </InputGroup>
+ * ```
+ *
+ * @accessibility
+ * - Proper ARIA attributes and roles
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management
+ */
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Input variant style
+     */
+    variant?: 'default' | 'destructive';
+    /**
+     * Input size
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Error state for styling
+     */
+    error?: boolean;
+}
+/**
+ * Input component
+ * A flexible, accessible input component with multiple variants and sizes
+ *
+ * @param props - Input configuration and styling
+ * @param ref - Forwarded ref to the input element
+ * @returns JSX.Element - The rendered input element
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter your name" />
+ *
+ * // Input with error state
+ * <Input
+ *   placeholder="Email"
+ *   type="email"
+ *   error={true}
+ * />
+ *
+ * // Large input with destructive variant
+ * <Input
+ *   variant="destructive"
+ *   size="lg"
+ *   placeholder="Error input"
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * @file Label Component
+ * @package @jmruthers/pace-core
+ * @module Components/Label
+ * @since 0.1.0
+ *
+ * An accessible label component built on top of Radix UI primitives.
+ * Provides form labels with helper text, error states, and required indicators.
+ *
+ * Features:
+ * - Proper label association with form controls
+ * - Required field indicators
+ * - Helper text support
+ * - Error state display
+ * - Customizable styling
+ * - Screen reader friendly
+ * - Keyboard accessible
+ *
+ * @example
+ * ```tsx
+ * // Basic label
+ * <Label htmlFor="email">Email Address</Label>
+ * <Input id="email" type="email" />
+ *
+ * // Label with required indicator
+ * <Label htmlFor="name" required>
+ *   Full Name
+ * </Label>
+ * <Input id="name" />
+ *
+ * // Label with helper text
+ * <Label
+ *   htmlFor="password"
+ *   required
+ *   helperText="Must be at least 8 characters"
+ * >
+ *   Password
+ * </Label>
+ * <Input id="password" type="password" />
+ *
+ * // Label with error state
+ * <Label
+ *   htmlFor="email"
+ *   error="Please enter a valid email address"
+ * >
+ *   Email Address
+ * </Label>
+ * <Input id="email" type="email" />
+ *
+ * // Custom required indicator
+ * <Label
+ *   htmlFor="terms"
+ *   required
+ *   requiredIndicator="(required)"
+ * >
+ *   Accept Terms
+ * </Label>
+ * <Checkbox id="terms" />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper label association with htmlFor
+ * - Screen reader announcements for errors
+ * - Required field indicators for screen readers
+ * - Error messages with role="alert"
+ * - High contrast support
+ *
+ * @dependencies
+ * - @radix-ui/react-label - Core label functionality
+ * - class-variance-authority - Variant styling
+ * - React 18+ - Hooks and refs
+ * - Tailwind CSS - Styling
+ */
+
+/**
+ * Props for the Label component
+ */
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    /** Whether the field is required */
+    required?: boolean;
+    /** Custom required indicator (default: '*') */
+    requiredIndicator?: React.ReactNode;
+    /** Whether to hide the required indicator visually */
+    hideRequiredIndicator?: boolean;
+    /** Helper text to display below the label */
+    helperText?: string;
+    /** CSS classes for helper text styling */
+    helperTextClassName?: string;
+    /** Error message to display */
+    error?: string;
+    /** CSS classes for error message styling */
+    errorClassName?: string;
+}
+/**
+ * Label component
+ * An accessible label with helper text and error state support
+ *
+ * @param props - Label configuration and styling
+ * @param ref - Forwarded ref to the label element
+ * @returns JSX.Element - The rendered label with optional helper text and errors
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" required helperText="We'll never share your email">
+ *   Email Address
+ * </Label>
+ * ```
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * @file Alert Component Suite
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A flexible and accessible alert component for displaying important messages.
+ * Includes Alert, AlertTitle, and AlertDescription subcomponents.
+ *
+ * Features:
+ * - Multiple visual variants (default, destructive, inline)
+ * - Title and description support
+ * - ARIA role="alert" for accessibility
+ * - Keyboard and screen reader accessible
+ * - Composable with icons and actions
+ * - Inline variant for lightweight text formatting
+ *
+ * @example
+ * ```tsx
+ * // Basic alert
+ * <Alert>
+ *   <AlertTitle>Success</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ *
+ * // Destructive alert with icon
+ * <Alert variant="destructive">
+ *   <ErrorIcon />
+ *   <div>
+ *     <AlertTitle>Error</AlertTitle>
+ *     <AlertDescription>Something went wrong.</AlertDescription>
+ *   </div>
+ * </Alert>
+ *
+ * // Inline alert (renders as fragment with strong/span)
+ * <Alert variant="inline">
+ *   <AlertTitle>Note:</AlertTitle>
+ *   <AlertDescription>This is an inline message.</AlertDescription>
+ * </Alert>
+ * ```
+ *
+ * @accessibility
+ * - Uses role="alert" for screen reader announcement
+ * - Title and description are semantically structured
+ * - Supports keyboard navigation and focus
+ */
+
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "destructive" | "inline";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * @file Avatar Component Suite
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A flexible and accessible avatar component for displaying user profile images or initials.
+ * Includes Avatar, AvatarImage, and AvatarFallback subcomponents.
+ *
+ * Features:
+ * - Circular avatar display
+ * - Image, fallback, and initials support
+ * - Customizable size and style
+ * - Keyboard and screen reader accessible
+ * - Graceful fallback for missing images
+ *
+ * @example
+ * ```tsx
+ * // Basic avatar with image
+ * <Avatar>
+ *   <AvatarImage src="/user.jpg" alt="User" />
+ *   <AvatarFallback>AB</AvatarFallback>
+ * </Avatar>
+ *
+ * // Avatar with fallback only
+ * <Avatar>
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @accessibility
+ * - Uses alt text for images
+ * - Fallback content is accessible to screen readers
+ * - Keyboard focusable and navigable
+ */
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * @file Checkbox Component
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * An accessible checkbox component built on top of Radix UI's Checkbox primitive.
+ * Provides a customizable checkbox input with proper keyboard and screen reader support.
+ *
+ * Features:
+ * - Customizable styling via className
+ * - Built-in focus and hover states
+ * - Disabled state support
+ * - Checked state indicator
+ * - Full keyboard navigation
+ * - Screen reader support
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Checkbox />
+ *
+ * // With label
+ * <div className="flex items-center space-x-2">
+ *   <Checkbox id="terms" />
+ *   <label htmlFor="terms">Accept terms and conditions</label>
+ * </div>
+ *
+ * // Disabled state
+ * <Checkbox disabled />
+ *
+ * // Controlled component
+ * const [checked, setChecked] = React.useState(false);
+ * <Checkbox
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Uses Radix UI's accessible checkbox primitive
+ * - Proper keyboard navigation (Space to toggle)
+ * - Screen reader announcements for state changes
+ * - Focus visible styles for keyboard users
+ * - ARIA attributes handled automatically
+ */
+
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * @file Progress Component
+ * @package @jmruthers/pace-core
+ * @module Components/Progress
+ * @since 0.1.0
+ *
+ * An accessible progress bar component built on top of Radix UI primitives.
+ * Provides smooth animations and proper ARIA attributes for screen readers.
+ *
+ * Features:
+ * - Smooth progress animations
+ * - Customizable value and max range
+ * - Proper ARIA attributes for accessibility
+ * - Customizable styling and appearance
+ * - Responsive design
+ * - Keyboard accessible
+ *
+ * @example
+ * ```tsx
+ * // Basic progress bar
+ * <Progress value={50} />
+ *
+ * // Progress with custom max value
+ * <Progress value={7} max={10} />
+ *
+ * // Progress with custom styling
+ * <Progress
+ *   value={75}
+ *   className="h-4 bg-sec-200"
+ * />
+ *
+ * // Animated progress (controlled)
+ * const [progress, setProgress] = useState(0);
+ *
+ * useEffect(() => {
+ *   const timer = setInterval(() => {
+ *     setProgress(prev => prev >= 100 ? 0 : prev + 10);
+ *   }, 1000);
+ *   return () => clearInterval(timer);
+ * }, []);
+ *
+ * <Progress value={progress} />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper ARIA attributes (aria-valuenow, aria-valuemax, aria-valuemin)
+ * - Screen reader announcements for progress changes
+ * - Keyboard navigation support
+ * - High contrast support
+ *
+ * @performance
+ * - CSS transitions for smooth animations
+ * - Efficient re-rendering
+ * - Minimal DOM structure
+ *
+ * @dependencies
+ * - @radix-ui/react-progress - Core progress functionality
+ * - React 18+ - Hooks and refs
+ * - Tailwind CSS - Styling
+ */
+
+/**
+ * Props for the Progress component
+ */
+interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+    /** Current progress value (0 to max) */
+    value?: number;
+    /** Maximum progress value (default: 100) */
+    max?: number;
+}
+/**
+ * Progress component
+ * An accessible progress bar with smooth animations
+ *
+ * @param props - Progress configuration and styling
+ * @param ref - Forwarded ref to the progress element
+ * @returns JSX.Element - The rendered progress bar
+ *
+ * @example
+ * ```tsx
+ * <Progress value={75} max={100} />
+ * ```
+ */
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Dialog size variants
+ * @public
+ */
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
+/**
+ * Props for the Dialog root component
+ * @public
+ */
+interface DialogProps extends DialogPrimitive.DialogProps {
+}
+/**
+ * Props for the DialogTrigger component
+ * @public
+ */
+interface DialogTriggerProps extends DialogPrimitive.DialogTriggerProps {
+}
+/**
+ * Enhanced props for the DialogContent component with size variants and customization
+ * Uses semantic HTML dialog element with Radix UI accessibility features
+ * @public
+ */
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Dialog size variant */
+    size?: DialogSize;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Custom className for the overlay */
+    overlayClassName?: string;
+    /** Whether to prevent closing on escape key */
+    preventCloseOnEscape?: boolean;
+    /** Whether to prevent closing on outside click */
+    preventCloseOnOutsideClick?: boolean;
+    /** Maximum height as percentage of viewport height (0-100) */
+    maxHeightPercent?: number;
+    /** Maximum width as percentage of viewport width (0-100) */
+    maxWidthPercent?: number;
+    /** Enable smart scrolling with sticky header/footer */
+    enableScrolling?: boolean;
+    /** Custom max height in CSS units (overrides maxHeightPercent) */
+    maxHeight?: string;
+    /** Custom max width in CSS units (overrides maxWidthPercent and size) */
+    maxWidth?: string;
+    /** Minimum height in CSS units */
+    minHeight?: string;
+    /** Minimum width in CSS units */
+    minWidth?: string;
+}
+/**
+ * Props for the DialogOverlay component
+ * @public
+ */
+interface DialogOverlayProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+}
+/**
+ * Props for the DialogHeader component (semantic header element)
+ * @public
+ */
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Whether this header should be sticky when scrolling is enabled */
+    sticky?: boolean;
+}
+/**
+ * Props for the DialogFooter component (semantic footer element)
+ * @public
+ */
+interface DialogFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** Whether this footer should be sticky when scrolling is enabled */
+    sticky?: boolean;
+}
+/**
+ * Props for the DialogBody component (semantic main element)
+ * @public
+ */
+interface DialogBodyProps extends React.HTMLAttributes<HTMLElement> {
+    /** Custom max height for the scrollable area */
+    maxHeight?: string;
+    /** HTML content to render (will be sanitized for security) */
+    htmlContent?: string;
+    /** Whether to allow HTML content rendering (default: true) */
+    allowHtml?: boolean;
+    /** Whether to use strict HTML sanitization (default: true) */
+    strictSanitization?: boolean;
+    /** Whether to log HTML sanitization warnings to console (default: false) */
+    logWarnings?: boolean;
+}
+/**
+ * Props for the DialogTitle component
+ * @public
+ */
+interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+    /** HTML content to render as title (will be sanitized for security) */
+    htmlContent?: string;
+    /** Whether to allow HTML content rendering (default: true) */
+    allowHtml?: boolean;
+}
+/**
+ * Props for the DialogDescription component
+ * @public
+ */
+interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+    /** HTML content to render as description (will be sanitized for security) */
+    htmlContent?: string;
+    /** Whether to allow HTML content rendering (default: true) */
+    allowHtml?: boolean;
+}
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogContent component
+ * The main content container using semantic HTML <dialog> element with enhanced features
+ * Built on Radix UI primitives for accessibility while providing semantic structure
+ *
+ * @param props - Content configuration and styling
+ * @param ref - Forwarded ref to the dialog element
+ * @returns JSX.Element - The semantic dialog content with overlay and optional close button
+ *
+ * @example
+ * ```tsx
+ * <DialogContent size="lg" enableScrolling={true} maxHeightPercent={80}>
+ *   <DialogHeader>
+ *     <DialogTitle>Scrollable Dialog</DialogTitle>
+ *     <DialogDescription>This dialog will scroll if content overflows.</DialogDescription>
+ *   </DialogHeader>
+ *   <DialogBody>
+ *     <section>Large amount of semantic content here...</section>
+ *   </DialogBody>
+ *   <DialogFooter>
+ *     <Button>Save</Button>
+ *   </DialogFooter>
+ * </DialogContent>
+ * ```
+ */
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogHeader component
+ * Semantic header container for dialog title and description with optional sticky behavior
+ *
+ * @param props - Header configuration and styling
+ * @returns JSX.Element - The dialog header container using semantic <header> element
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader sticky={true}>
+ *   <DialogTitle>Sticky Header</DialogTitle>
+ *   <DialogDescription>This header stays visible while scrolling.</DialogDescription>
+ * </DialogHeader>
+ * ```
+ */
+declare const DialogHeader: {
+    ({ className, sticky, ...props }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * DialogBody component
+ * Semantic main content area for dialog body content with scrollable functionality
+ * Supports both React children and safe HTML content rendering
+ *
+ * @param props - Body configuration and styling
+ * @returns JSX.Element - The scrollable dialog body container using semantic <main> element
+ *
+ * @example
+ * ```tsx
+ * // Using React children
+ * <DialogBody>
+ *   <section className="space-y-4">
+ *     <h4>Content Title</h4>
+ *     <p>Long content that will scroll...</p>
+ *   </section>
+ * </DialogBody>
+ *
+ * // Using HTML content
+ * <DialogBody
+ *   htmlContent="<h2>Import Instructions</h2><p>Upload a CSV file with the following format:</p><ul><li>Required columns: name, email</li><li>Optional columns: phone, address</li></ul>"
+ *   allowHtml={true}
+ * />
+ * ```
+ */
+declare const DialogBody: {
+    ({ className, maxHeight, style, htmlContent, allowHtml, strictSanitization, logWarnings, children, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * DialogFooter component
+ * Semantic footer container for dialog action buttons with optional sticky behavior
+ *
+ * @param props - Footer configuration and styling
+ * @returns JSX.Element - The dialog footer container using semantic <footer> element
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter sticky={true}>
+ *   <Button variant="outline">Cancel</Button>
+ *   <Button>Save changes</Button>
+ * </DialogFooter>
+ * ```
+ */
+declare const DialogFooter: {
+    ({ className, sticky, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * @file Select Component - Simple HTML Structure
+ * @package @jmruthers/pace-core
+ * @module Components/Select
+ * @since 0.3.0
+ *
+ * A simple select component using semantic HTML structure
+ * with proper DOM nesting and accessibility.
+ *
+ * Features:
+ * - Semantic HTML with <form> + <button> + <ul> + <li>
+ * - Proper DOM nesting (no button inside select)
+ * - Built on pace-core Button component for consistency
+ * - Simple positioning and styling
+ * - Better accessibility and SEO
+ * - Backward compatible API
+ */
+
+interface SelectProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onChange' | 'onKeyDown' | 'onFocus' | 'onBlur'> {
+    value?: string;
+    defaultValue?: string;
+    selectedText?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+interface SelectTriggerProps extends Omit<ButtonProps, 'onClick' | 'onKeyDown'> {
+    children: React.ReactNode;
+    asChild?: boolean;
+}
+interface SelectValueProps {
+    placeholder?: string;
+    children?: React.ReactNode;
+}
+interface SelectContentProps {
+    children: React.ReactNode;
+    className?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    maxHeight?: string;
+    style?: React.CSSProperties;
+}
+interface SelectItemProps {
+    value: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLFormElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLUListElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<{
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
+/**
+ * ToastViewport component
+ * Container for all toast notifications with customizable positioning
+ *
+ * @param props - Viewport configuration and styling
+ * @param ref - Forwarded ref to the viewport element
+ * @returns JSX.Element - The toast viewport container
+ */
+declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+/**
+ * Toast component
+ * The main toast notification component with animations and interactions
+ *
+ * @param props - Toast configuration and content
+ * @param ref - Forwarded ref to the toast element
+ * @returns JSX.Element - The rendered toast notification
+ *
+ * @example
+ * ```tsx
+ * <Toast>
+ *   <ToastTitle>Success!</ToastTitle>
+ *   <ToastDescription>Your changes have been saved.</ToastDescription>
+ *   <ToastClose />
+ * </Toast>
+ * ```
+ */
+declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+/**
+ * ToastAction component
+ * Action button within a toast notification
+ *
+ * @param props - Action button configuration
+ * @param ref - Forwarded ref to the action button
+ * @returns JSX.Element - The action button element
+ *
+ * @example
+ * ```tsx
+ * <ToastAction altText="Undo changes">Undo</ToastAction>
+ * ```
+ */
+declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * ToastClose component
+ * Close button for dismissing toast notifications
+ *
+ * @param props - Close button configuration
+ * @param ref - Forwarded ref to the close button
+ * @returns JSX.Element - The close button with X icon
+ *
+ * @example
+ * ```tsx
+ * <ToastClose />
+ * ```
+ */
+declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * ToastTitle component
+ * Title text for toast notifications
+ *
+ * @param props - Title configuration and styling
+ * @param ref - Forwarded ref to the title element
+ * @returns JSX.Element - The toast title
+ *
+ * @example
+ * ```tsx
+ * <ToastTitle>Success!</ToastTitle>
+ * ```
+ */
+declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ToastDescription component
+ * Description text for toast notifications
+ *
+ * @param props - Description configuration and styling
+ * @param ref - Forwarded ref to the description element
+ * @returns JSX.Element - The toast description
+ *
+ * @example
+ * ```tsx
+ * <ToastDescription>Your changes have been saved successfully.</ToastDescription>
+ * ```
+ */
+declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> {
+}
+interface ToastActionElement extends React.ReactElement<typeof ToastAction> {
+}
+/**
+ * useToast hook
+ * Hook for managing toast notifications
+ *
+ * @returns Object with toast and dismiss functions
+ *
+ * @example
+ * ```tsx
+ * const { toast, dismiss } = useToast();
+ *
+ * // Show a toast
+ * toast({
+ *   title: "Success!",
+ *   description: "Your changes have been saved."
+ * });
+ *
+ * // Dismiss all toasts
+ * dismiss();
+ * ```
+ */
+declare function useToast(): {
+    toast: (props: any) => void;
+    dismiss: () => void;
+};
+/**
+ * Toaster component
+ * Container component that provides the toast viewport
+ * Should be placed at the root of your application
+ *
+ * @returns JSX.Element - The toast provider with viewport
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <ToastProvider>
+ *       <YourApp />
+ *       <Toaster />
+ *     </ToastProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function Toaster(): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file Tooltip Component System
+ * @package @jmruthers/pace-core
+ * @module Components/Tooltip
+ * @since 0.1.0
+ *
+ * A comprehensive tooltip component system built on top of Radix UI primitives.
+ * Provides accessible tooltips with customizable positioning and animations.
+ *
+ * Features:
+ * - Multiple positioning options (top, bottom, left, right)
+ * - Customizable delay duration
+ * - Smooth animations and transitions
+ * - Keyboard and mouse interaction
+ * - Screen reader support
+ * - Responsive design
+ * - Customizable styling
+ * - Focus management
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip content="This is a helpful tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * // Tooltip with custom delay
+ * <Tooltip content="Custom delay" delayDuration={500}>
+ *   <IconButton icon={<Info />} />
+ * </Tooltip>
+ *
+ * // Advanced tooltip with custom content
+ * <TooltipProvider>
+ *   <TooltipRoot>
+ *     <TooltipTrigger asChild>
+ *       <Button>Advanced Tooltip</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent side="top" className="bg-main-500 text-main-50">
+ *       <div className="space-y-1">
+ *         <p className="font-semibold">Advanced Tooltip</p>
+ *         <p className="text-xs">With custom styling</p>
+ *       </div>
+ *     </TooltipContent>
+ *   </TooltipRoot>
+ * </TooltipProvider>
+ *
+ * // Tooltip on disabled element
+ * <Tooltip content="This feature is coming soon">
+ *   <Button disabled>Coming Soon</Button>
+ * </Tooltip>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper ARIA attributes and roles
+ * - Keyboard navigation support
+ * - Screen reader announcements
+ * - Focus management
+ * - High contrast support
+ * - Reduced motion support
+ *
+ * @performance
+ * - Efficient positioning calculations
+ * - Optimized animations
+ * - Memory leak prevention
+ * - Lazy rendering
+ *
+ * @dependencies
+ * - @radix-ui/react-tooltip - Core tooltip functionality
+ * - React 18+ - Hooks and refs
+ * - Tailwind CSS - Styling and animations
+ */
+
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const TooltipRoot: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * TooltipContent component
+ * The content container for tooltip information
+ *
+ * @param props - Content configuration and styling
+ * @param ref - Forwarded ref to the content element
+ * @returns JSX.Element - The tooltip content container
+ *
+ * @example
+ * ```tsx
+ * <TooltipContent side="top" className="bg-main-500">
+ *   Custom tooltip content
+ * </TooltipContent>
+ * ```
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the simplified Tooltip component
+ */
+interface TooltipProps {
+    /** The element that triggers the tooltip */
+    children: React.ReactNode;
+    /** The content to display in the tooltip */
+    content: React.ReactNode;
+    /** Delay before showing the tooltip (in milliseconds) */
+    delayDuration?: number;
+}
+/**
+ * Tooltip component
+ * A simplified tooltip component for easy usage
+ *
+ * @param props - Tooltip configuration
+ * @param ref - Forwarded ref to the trigger element
+ * @returns JSX.Element - The tooltip with trigger and content
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a helpful tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for the Form component
+ */
+interface FormProps<TFieldValues extends FieldValues = FieldValues> {
+    /**
+     * Form schema for validation
+     */
+    schema?: z.ZodType<TFieldValues>;
+    /**
+     * Default values for the form
+     */
+    defaultValues?: DefaultValues<TFieldValues>;
+    /**
+     * Handler called when form is submitted successfully
+     */
+    onSubmit: SubmitHandler<TFieldValues>;
+    /**
+     * Handler called when form submission has errors
+     */
+    onError?: SubmitErrorHandler<TFieldValues>;
+    /**
+     * Form mode for react-hook-form
+     * @default "onSubmit"
+     */
+    mode?: "onSubmit" | "onChange" | "onBlur" | "onTouched" | "all";
+    /**
+     * Children components or render function
+     */
+    children: React__default.ReactNode | ((methods: UseFormReturn<TFieldValues>) => React__default.ReactNode);
+    /**
+     * Class name for the form
+     */
+    className?: string;
+}
+/**
+ * Form component with validation and React Hook Form integration
+ *
+ * @template TFieldValues - The type of form field values
+ * @param props - Form configuration and handlers
+ * @returns JSX.Element - The rendered form with FormProvider context
+ *
+ * @example
+ * ```tsx
+ * <Form
+ *   schema={userSchema}
+ *   defaultValues={{ name: "", email: "" }}
+ *   onSubmit={handleSubmit}
+ *   mode="onBlur"
+ * >
+ *   <FormField name="name" label="Name" />
+ *   <FormField name="email" label="Email" />
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ */
+declare function Form<TFieldValues extends FieldValues = FieldValues>({ schema, defaultValues, onSubmit, onError, mode, children, className, }: FormProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file LoginForm Component
+ * @package @jmruthers/pace-core
+ * @module Components/LoginForm
+ * @since 0.1.0
+ *
+ * A comprehensive login form component with built-in validation, error handling,
+ * and loading states for user authentication.
+ *
+ * Features:
+ * - Email and password validation
+ * - Loading states with disabled form
+ * - Error handling and display
+ * - Customizable branding and messaging
+ * - Sign-up link integration
+ * - Performance optimized with React.memo
+ * - Accessibility compliant
+ * - Responsive design
+ * - Form validation
+ * - Success and error callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic login form
+ * <LoginForm
+ *   onSignIn={async (data) => {
+ *     await signIn(data.email, data.password);
+ *   }}
+ *   onSuccess={() => navigate('/dashboard')}
+ *   onError={(error) => console.error('Login failed:', error)}
+ * />
+ *
+ * // Login form with custom branding
+ * <LoginForm
+ *   appName="My Application"
+ *   title="Welcome Back"
+ *   subtitle="Please sign in to access your account"
+ *   onSignIn={handleSignIn}
+ *   onSuccess={handleSuccess}
+ *   onError={handleError}
+ * />
+ *
+ * // Login form with sign-up integration
+ * <LoginForm
+ *   appName="My App"
+ *   showSignUp={true}
+ *   onSignUp={() => navigate('/signup')}
+ *   onSignIn={handleSignIn}
+ *   isLoading={isAuthenticating}
+ * />
+ *
+ * // Login form with custom error handling
+ * <LoginForm
+ *   onSignIn={async (data) => {
+ *     try {
+ *       const result = await authService.signIn(data);
+ *       if (result.success) {
+ *         onSuccess();
+ *       } else {
+ *         throw new Error(result.error);
+ *       }
+ *     } catch (error) {
+ *       onError(error);
+ *     }
+ *   }}
+ *   onSuccess={() => {
+ *     toast.success('Successfully signed in!');
+ *     navigate('/dashboard');
+ *   }}
+ *   onError={(error) => {
+ *     toast.error(`Sign in failed: ${error.message}`);
+ *   }}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper form labels and associations
+ * - Screen reader friendly error messages
+ * - Keyboard navigation support
+ * - Focus management
+ * - High contrast support
+ * - Clear error identification
+ *
+ * @performance
+ * - React.memo for efficient re-rendering
+ * - useCallback for stable event handlers
+ * - useMemo for computed values
+ * - Minimal re-renders
+ *
+ * @dependencies
+ * - React 18+ - Hooks and memo
+ * - Button component
+ * - Input component
+ * - Label component
+ * - Card components
+ * - Alert component
+ * - Tailwind CSS - Styling
+ */
+
+interface LoginFormProps {
+    /** Callback invoked when the form is submitted */
+    onSignIn: (data: {
+        email: string;
+        password: string;
+    }) => Promise<void>;
+    /** Callback invoked on successful sign-in */
+    onSuccess?: () => void;
+    /** Callback invoked if sign-in fails */
+    onError?: (error: Error) => void;
+    /** Show loading spinner and disable form while true */
+    isLoading?: boolean;
+    /** Application name for display in the form */
+    appName?: string;
+    /** Custom title for the form */
+    title?: string;
+    /** Custom subtitle for the form */
+    subtitle?: string;
+    /** Show a sign-up link or button */
+    showSignUp?: boolean;
+    /** Optional callback for sign-up button */
+    onSignUp?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LoginForm component that provides a ready-to-use authentication form for user sign-in.
+ * It supports validation, loading state, error handling, and can be customized via props.
+ * Now includes performance optimizations and onSignUp support.
+ *
+ * @param props - Login form configuration and handlers
+ * @returns JSX.Element - The rendered login form
+ *
+ * @example
+ * ```tsx
+ * <LoginForm
+ *   onSignIn={handleSignIn}
+ *   onSuccess={() => navigate('/dashboard')}
+ *   onError={(error) => toast.error(error.message)}
+ *   isLoading={isAuthenticating}
+ * />
+ * ```
+ */
+declare const LoginForm: React__default.NamedExoticComponent<LoginFormProps>;
+
+/**
+ * @file NavigationMenu Types
+ * @package @jmruthers/pace-core
+ * @module NavigationMenu
+ * @since 0.1.0
+ */
+/**
+ * Navigation item configuration
+ * Supports both flat and hierarchical navigation structures
+ */
+interface NavigationItem {
+    /** Unique identifier for the navigation item */
+    id: string;
+    /** Display text for the navigation item */
+    label: string;
+    /** URL or path to navigate to (optional for parent items in hierarchical mode) */
+    href?: string;
+    /** Optional Lucide icon name for the navigation item */
+    icon?: string;
+    /** Child navigation items for hierarchical mode */
+    children?: NavigationItem[];
+    /** Whether this item is currently active (auto-detected if not provided) */
+    isActive?: boolean;
+    /** Permissions required for this navigation item */
+    permissions?: string[];
+    /** Roles that can access this navigation item */
+    roles?: string[];
+    /** Minimum access level required */
+    accessLevel?: string;
+    /** Page ID for permission checking */
+    pageId?: string;
+    /** Enable strict mode for this navigation item */
+    strictMode?: boolean;
+    /** Navigation item metadata */
+    meta?: {
+        title?: string;
+        description?: string;
+        hidden?: boolean;
+        order?: number;
+    };
+}
+/**
+ * Navigation mode configuration
+ */
+type NavigationMode = 'dropdown' | 'hierarchical';
+/**
+ * NavigationMenu component props
+ */
+interface NavigationMenuProps {
+    /** Array of navigation items to display */
+    items: NavigationItem[];
+    /** Navigation mode: 'dropdown' for menu button style, 'hierarchical' for expandable tree */
+    mode?: NavigationMode;
+    /** Current page path for highlighting active item */
+    currentPath?: string;
+    /** Optional callback when navigation item is clicked */
+    onNavigate?: (item: NavigationItem) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the menu is disabled (dropdown mode only) */
+    disabled?: boolean;
+    /** Custom button text for dropdown mode (defaults to "Menu") */
+    buttonText?: string;
+    /** Whether to show icons in the navigation (dropdown mode only) */
+    showIcons?: boolean;
+    /** Custom navigation label for screen readers */
+    navigationLabel?: string;
+    /** Enable strict mode to prevent bypassing navigation protection (default: true) */
+    strictMode?: boolean;
+    /** Enable audit logging for all navigation access attempts (default: true) */
+    auditLog?: boolean;
+    /** Callback when navigation access is denied */
+    onNavigationAccessDenied?: (itemId: string, reason: string) => void;
+    /** Callback when strict mode violation occurs */
+    onStrictModeViolation?: (itemId: string, reason: string) => void;
+    /** Enable automatic filtering of navigation items based on permissions */
+    filterByPermissions?: boolean;
+}
+
+/**
+ * @file Unified Navigation Menu Component
+ * @package @jmruthers/pace-core
+ * @module Navigation
+ * @since 0.1.0
+ *
+ * A flexible navigation menu component that supports both dropdown and hierarchical modes.
+ *
+ * Features:
+ * - Dropdown mode: Menu button that opens a dropdown list
+ * - Hierarchical mode: Expandable tree navigation with nested items
+ * - Icon support for navigation items
+ * - Current page highlighting
+ * - Keyboard navigation support
+ * - Accessible design with proper ARIA attributes
+ * - Click outside to close (dropdown mode)
+ * - Recursive rendering for nested items (hierarchical mode)
+ *
+ * @example
+ * Basic dropdown navigation (most common use case):
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ * import { useNavigate, useLocation } from 'react-router-dom';
+ *
+ * function AppNavigation() {
+ *   const navigate = useNavigate();
+ *   const location = useLocation();
+ *
+ *   const navItems = [
+ *     { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+ *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+ *     { id: 'reports', label: 'Reports', href: '/reports', icon: 'FileText' },
+ *     { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       currentPath={location.pathname}
+ *       onNavigate={(item) => navigate(item.href)}
+ *       buttonText="Main Menu"
+ *       showIcons={true}
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * Hierarchical navigation with nested items:
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ *
+ * function SidebarNavigation() {
+ *   const hierarchicalItems = [
+ *     {
+ *       id: 'user-management',
+ *       label: 'User Management',
+ *       icon: 'Users',
+ *       children: [
+ *         { id: 'users-list', label: 'All Users', href: '/users' },
+ *         { id: 'users-create', label: 'Create User', href: '/users/create' },
+ *         { id: 'user-roles', label: 'User Roles', href: '/users/roles' }
+ *       ]
+ *     },
+ *     {
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       icon: 'BarChart',
+ *       children: [
+ *         { id: 'sales-reports', label: 'Sales Reports', href: '/reports/sales' },
+ *         { id: 'user-reports', label: 'User Reports', href: '/reports/users' }
+ *       ]
+ *     },
+ *     { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={hierarchicalItems}
+ *       mode="hierarchical"
+ *       currentPath={window.location.pathname}
+ *       onNavigate={(item) => {
+ *         if (item.href) {
+ *           window.location.href = item.href;
+ *         }
+ *       }}
+ *       className="w-64 bg-sec-50 p-4"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Integration with React Router and authentication:
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ * import { useNavigate, useLocation } from 'react-router-dom';
+ * import { useUnifiedAuth } from '@jmruthers/pace-core/providers';
+ *
+ * function AuthenticatedNavigation() {
+ *   const navigate = useNavigate();
+ *   const location = useLocation();
+ *   const { hasRole, hasPermission } = useUnifiedAuth();
+ *
+ *   // Build navigation items based on user permissions
+ *   const navItems = [
+ *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+ *     ...(hasPermission('meals:read') ? [
+ *       { id: 'meals', label: 'Meals', href: '/meals', icon: 'UtensilsCrossed' }
+ *     ] : []),
+ *     ...(hasRole('admin') ? [
+ *       { id: 'admin', label: 'Admin Panel', href: '/admin', icon: 'Shield' }
+ *     ] : []),
+ *     { id: 'profile', label: 'Profile', href: '/profile', icon: 'User' }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       currentPath={location.pathname}
+ *       onNavigate={(item) => navigate(item.href)}
+ *       buttonText="Navigation"
+ *       navigationLabel="Main application navigation"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom navigation with external links and actions
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ *
+ * function CustomNavigation() {
+ *   const handleNavigation = (item) => {
+ *     if (item.id === 'logout') {
+ *       // Handle logout action
+ *       handleLogout();
+ *     } else if (item.href?.startsWith('http')) {
+ *       // Handle external links
+ *       window.open(item.href, '_blank');
+ *     } else if (item.href) {
+ *       // Handle internal navigation
+ *       navigate(item.href);
+ *     }
+ *   };
+ *
+ *   const navItems = [
+ *     { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+ *     { id: 'help', label: 'Help Center', href: 'https://help.example.com', icon: 'HelpCircle' },
+ *     { id: 'logout', label: 'Sign Out', icon: 'LogOut' } // No href for actions
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       onNavigate={handleNavigation}
+ *       buttonText="Menu"
+ *       disabled={false}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant navigation structure
+ * - Proper ARIA attributes for screen readers
+ * - Keyboard navigation with Enter, Space, and Escape keys
+ * - Focus management for dropdown menus
+ * - Semantic HTML structure with nav, menu, and menuitem roles
+ * - Clear visual indicators for active/current page
+ *
+ * @performance
+ * - Lightweight component with minimal re-renders
+ * - Efficient click outside detection
+ * - Optimized keyboard event handling
+ * - Memory cleanup for event listeners
+ *
+ * @styling
+ * - Uses Tailwind CSS for consistent styling
+ * - Supports custom className for additional styling
+ * - Responsive design considerations
+ *
+ * @dependencies
+ * - React 18+ - Component framework and hooks
+ * - Lucide React - Icon components
+ * - Radix UI - Dropdown menu primitives
+ * - React Router (optional) - For navigation handling
+ * - Tailwind CSS - Styling system
+ */
+
+/**
+ * Unified NavigationMenu component that supports both dropdown and hierarchical navigation modes.
+ *
+ * A flexible navigation menu component with support for icons, current page highlighting,
+ * keyboard navigation, and nested menu items.
+ *
+ * Features:
+ * - Dropdown mode: Menu button that opens a dropdown list
+ * - Hierarchical mode: Expandable tree navigation with nested items
+ * - Icon support for navigation items
+ * - Current page highlighting
+ * - Keyboard navigation support (Enter, Space, Escape)
+ * - Accessible design with proper ARIA attributes
+ * - Click outside to close (dropdown mode)
+ * - Recursive rendering for nested items (hierarchical mode)
+ *
+ * @example
+ * Basic dropdown navigation (most common use case):
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ * import { useNavigate, useLocation } from 'react-router-dom';
+ *
+ * function AppNavigation() {
+ *   const navigate = useNavigate();
+ *   const location = useLocation();
+ *
+ *   const navItems = [
+ *     { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+ *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+ *     { id: 'reports', label: 'Reports', href: '/reports', icon: 'FileText' },
+ *     { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       currentPath={location.pathname}
+ *       onNavigate={(item) => navigate(item.href)}
+ *       buttonText="Main Menu"
+ *       showIcons={true}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Hierarchical navigation with nested items:
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ *
+ * function SidebarNavigation() {
+ *   const hierarchicalItems = [
+ *     {
+ *       id: 'user-management',
+ *       label: 'User Management',
+ *       icon: 'Users',
+ *       children: [
+ *         { id: 'users-list', label: 'All Users', href: '/users' },
+ *         { id: 'users-create', label: 'Create User', href: '/users/create' },
+ *         { id: 'user-roles', label: 'User Roles', href: '/users/roles' }
+ *       ]
+ *     },
+ *     {
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       icon: 'BarChart',
+ *       children: [
+ *         { id: 'sales-reports', label: 'Sales Reports', href: '/reports/sales' },
+ *         { id: 'user-reports', label: 'User Reports', href: '/reports/users' }
+ *       ]
+ *     },
+ *     { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={hierarchicalItems}
+ *       mode="hierarchical"
+ *       currentPath={window.location.pathname}
+ *       onNavigate={(item) => {
+ *         if (item.href) {
+ *           window.location.href = item.href;
+ *         }
+ *       }}
+ *       className="w-64 bg-sec-50 p-4"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Integration with React Router and authentication:
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ * import { useNavigate, useLocation } from 'react-router-dom';
+ * import { useUnifiedAuth } from '@jmruthers/pace-core/providers';
+ *
+ * function AuthenticatedNavigation() {
+ *   const navigate = useNavigate();
+ *   const location = useLocation();
+ *   const { hasRole, hasPermission } = useUnifiedAuth();
+ *
+ *   // Build navigation items with permission requirements
+ *   const navItems = [
+ *     {
+ *       id: 'dashboard',
+ *       label: 'Dashboard',
+ *       href: '/dashboard',
+ *       icon: 'LayoutDashboard',
+ *       permissions: ['dashboard:read']
+ *     },
+ *     {
+ *       id: 'meals',
+ *       label: 'Meals',
+ *       href: '/meals',
+ *       icon: 'UtensilsCrossed',
+ *       permissions: ['meals:read']
+ *     },
+ *     {
+ *       id: 'admin',
+ *       label: 'Admin Panel',
+ *       href: '/admin',
+ *       icon: 'Shield',
+ *       roles: ['admin', 'super_admin']
+ *     },
+ *     {
+ *       id: 'profile',
+ *       label: 'Profile',
+ *       href: '/profile',
+ *       icon: 'User'
+ *     }
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       currentPath={location.pathname}
+ *       onNavigate={(item) => navigate(item.href)}
+ *       buttonText="Navigation"
+ *       navigationLabel="Main application navigation"
+ *       filterByPermissions={true}
+ *       auditLog={true}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Custom navigation with external links and actions:
+ * ```tsx
+ * import { NavigationMenu } from '@jmruthers/pace-core';
+ *
+ * function CustomNavigation() {
+ *   const handleNavigation = (item) => {
+ *     if (item.id === 'logout') {
+ *       // Handle logout action
+ *       handleLogout();
+ *     } else if (item.href?.startsWith('http')) {
+ *       // Handle external links
+ *       window.open(item.href, '_blank');
+ *     } else if (item.href) {
+ *       // Handle internal navigation
+ *       navigate(item.href);
+ *     }
+ *   };
+ *
+ *   const navItems = [
+ *     { id: 'home', label: 'Home', href: '/', icon: 'Home' },
+ *     { id: 'help', label: 'Help Center', href: 'https://help.example.com', icon: 'HelpCircle' },
+ *     { id: 'logout', label: 'Sign Out', icon: 'LogOut' } // No href for actions
+ *   ];
+ *
+ *   return (
+ *     <NavigationMenu
+ *       items={navItems}
+ *       mode="dropdown"
+ *       onNavigate={handleNavigation}
+ *       buttonText="Menu"
+ *       disabled={false}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - NavigationMenu component props including items, mode, navigation handlers, and styling options
+ * @returns React element with navigation menu functionality
+ *
+ * @since 0.1.0
+ */
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the Header component
+ */
+interface HeaderProps {
+    /** URL to the app logo image */
+    logoUrl?: string;
+    /** Alt text for the logo */
+    logoAlt?: string;
+    /** Custom logo component (overrides logoUrl) */
+    logo?: React__default.ReactNode;
+    /** Navigation items for the menu - uses NavigationItem interface */
+    navItems?: NavigationItem[];
+    /** Current user for the user menu */
+    user?: User | null;
+    /** Sign out handler for user menu */
+    onSignOut?: () => Promise<void>;
+    /** Password change handler for user menu */
+    onChangePassword?: (newPassword: string, confirmPassword: string) => Promise<{
+        error: any;
+    }>;
+    /** Additional actions to display (will be placed between event selector and user menu) */
+    actions?: React__default.ReactNode;
+    /** Custom user menu component (overrides default UserMenu) */
+    userMenu?: React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Show/hide event selector */
+    showEventSelector?: boolean;
+    /** Show/hide user menu */
+    showUserMenu?: boolean;
+    /** Current path for navigation highlighting */
+    currentPath?: string;
+    /** Custom navigation handler */
+    onNavigate?: (item: NavigationItem) => void;
+}
+/**
+ * Header component for application layouts with comprehensive navigation, user management,
+ * and customizable branding support.
+ *
+ * A flexible header component that supports various configurations including custom logos,
+ * navigation menus, user authentication, event selection, and custom actions.
+ *
+ * Features:
+ * - Customizable logo (URL or custom component)
+ * - Navigation menu integration with highlighting
+ * - User menu with authentication and password management
+ * - Event selector for multi-tenant applications
+ * - Custom actions support
+ * - Responsive design with mobile considerations
+ * - Accessibility compliant with proper ARIA attributes
+ * - Backdrop blur effects for modern UI
+ * - Flexible layout with configurable sections
+ *
+ * @example
+ * Basic header with logo and navigation:
+ * ```tsx
+ * import { Header } from '@jmruthers/pace-core';
+ * import { useNavigate, useLocation } from 'react-router-dom';
+ *
+ * function AppHeader() {
+ *   const navigate = useNavigate();
+ *   const location = useLocation();
+ *
+ *   const navItems = [
+ *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+ *     { id: 'meals', label: 'Meals', href: '/meals' },
+ *     { id: 'settings', label: 'Settings', href: '/settings' }
+ *   ];
+ *
+ *   return (
+ *     <Header
+ *       logoUrl="/company-logo.svg"
+ *       logoAlt="My Company"
+ *       navItems={navItems}
+ *       currentPath={location.pathname}
+ *       onNavigate={(item) => navigate(item.href)}
+ *       user={currentUser}
+ *       onSignOut={handleSignOut}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Header with custom actions:
+ * ```tsx
+ * import { Header, Button } from '@jmruthers/pace-core';
+ *
+ * function HeaderWithActions() {
+ *   const customActions = (
+ *     <div className="flex items-center gap-2">
+ *       <Button variant="outline" size="sm">Export</Button>
+ *       <Button size="sm">New Item</Button>
+ *     </div>
+ *   );
+ *
+ *   return (
+ *     <Header
+ *       logoUrl="/logo.svg"
+ *       navItems={navigationItems}
+ *       actions={customActions}
+ *       user={currentUser}
+ *       onSignOut={handleSignOut}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Minimal header configuration:
+ * ```tsx
+ * function MinimalHeader() {
+ *   return (
+ *     <Header
+ *       logoUrl="/simple-logo.svg"
+ *       logoAlt="Simple App"
+ *       showEventSelector={false}
+ *       user={currentUser}
+ *       onSignOut={handleSignOut}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Header configuration including logo, navigation, user settings, and custom content
+ * @returns React element with complete header functionality
+ *
+ * @since 0.1.0
+ */
+declare function Header({ logoUrl, logoAlt, logo, navItems, user, onSignOut, onChangePassword, actions, userMenu, className, showEventSelector, showUserMenu, currentPath, onNavigate }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file Footer Component
+ * @package @jmruthers/pace-core
+ * @module Components/Footer
+ * @since 0.1.0
+ *
+ * A flexible footer component for application layouts with copyright information,
+ * navigation links, and customizable content.
+ *
+ * Features:
+ * - Copyright information with automatic year generation
+ * - Customizable company name and branding
+ * - Optional navigation links
+ * - Logo display support
+ * - Custom footer content via children
+ * - Responsive design
+ * - Accessibility compliant
+ * - Flexible layout options
+ * - Consistent styling with design system
+ *
+ * @example
+ * ```tsx
+ * // Basic footer with default copyright
+ * <Footer />
+ *
+ * // Footer with custom company name and year
+ * <Footer
+ *   companyName="My Company Inc."
+ *   year={2024}
+ * />
+ *
+ * // Footer with navigation links
+ * <Footer
+ *   companyName="My Company"
+ *   links={[
+ *     { label: 'Privacy Policy', href: '/privacy' },
+ *     { label: 'Terms of Service', href: '/terms' },
+ *     { label: 'Contact', href: '/contact' }
+ *   ]}
+ * />
+ *
+ * // Footer with logo and custom copyright
+ * <Footer
+ *   logo="/logo.svg"
+ *   copyright="© 2024 My Company. All rights reserved."
+ * />
+ *
+ * // Footer with custom content
+ * <Footer companyName="My Company">
+ *   <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+ *     <div>
+ *       <h3 className="font-semibold mb-2">About Us</h3>
+ *       <p className="text-sm text-muted-foreground">
+ *         We provide innovative solutions for modern businesses.
+ *       </p>
+ *     </div>
+ *     <div>
+ *       <h3 className="font-semibold mb-2">Contact</h3>
+ *       <p className="text-sm text-muted-foreground">
+ *         Email: info@mycompany.com<br />
+ *         Phone: (555) 123-4567
+ *       </p>
+ *     </div>
+ *     <div>
+ *       <h3 className="font-semibold mb-2">Follow Us</h3>
+ *       <div className="flex gap-2">
+ *         <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
+ *         <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </Footer>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper semantic HTML with role="contentinfo"
+ * - Screen reader friendly navigation
+ * - Keyboard navigation support
+ * - High contrast support
+ * - Clear link identification
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - Tailwind CSS - Styling
+ */
+
+interface FooterProps {
+    /**
+     * Company or organization name
+     */
+    companyName?: string;
+    /**
+     * Current year or custom year for copyright
+     * @default current year
+     */
+    year?: number;
+    /**
+     * Optional array of navigation links to display
+     */
+    links?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Logo image URL (from UI version)
+     */
+    logo?: string;
+    /**
+     * Copyright text (from UI version)
+     */
+    copyright?: string;
+    /**
+     * Footer content - children to render inside footer
+     */
+    children?: React__default.ReactNode;
+}
+declare const Footer: React__default.NamedExoticComponent<FooterProps>;
+
+/**
+ * @file User Menu Component
+ * @package @jmruthers/pace-core
+ * @module Components/UserMenu
+ * @since 0.1.0
+ *
+ * A comprehensive user menu component that displays user information and provides
+ * access to user-specific actions like password changes and sign out.
+ *
+ * Features:
+ * - User avatar and display name
+ * - Dropdown menu with user actions
+ * - Password change functionality
+ * - Sign out capability
+ * - Loading state component
+ * - Responsive design
+ * - Accessibility compliant
+ * - Performance optimized with React.memo
+ * - Integration with Supabase User
+ * - Customizable styling
+ *
+ * @example
+ * ```tsx
+ * // Basic user menu
+ * <UserMenu
+ *   user={currentUser}
+ *   onSignOut={async () => {
+ *     await signOut();
+ *     navigate('/login');
+ *   }}
+ *   onChangePassword={async (newPassword, confirmPassword) => {
+ *     try {
+ *       await updatePassword(newPassword);
+ *       toast.success('Password updated successfully!');
+ *       return {};
+ *     } catch (error) {
+ *       return { error: { message: error.message } };
+ *     }
+ *   }}
+ * />
+ *
+ * // User menu without avatar
+ * <UserMenu
+ *   user={currentUser}
+ *   showAvatar={false}
+ *   onSignOut={handleSignOut}
+ *   onChangePassword={handlePasswordChange}
+ * />
+ *
+ * // User menu with loading state
+ * {isLoading ? (
+ *   <UserMenu.Loading />
+ * ) : (
+ *   <UserMenu
+ *     user={user}
+ *     onSignOut={handleSignOut}
+ *     onChangePassword={handlePasswordChange}
+ *   />
+ * )}
+ *
+ * // User menu in header
+ * <Header>
+ *   <div className="flex items-center gap-4">
+ *     <Navigation />
+ *     <UserMenu
+ *       user={user}
+ *       onSignOut={handleSignOut}
+ *       onChangePassword={handlePasswordChange}
+ *       className="ml-auto"
+ *     />
+ *   </div>
+ * </Header>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper ARIA labels and roles
+ * - Keyboard navigation support
+ * - Focus management
+ * - Screen reader friendly
+ * - High contrast support
+ * - Loading state announcements
+ * - Clear action identification
+ *
+ * @performance
+ * - React.memo for efficient re-rendering
+ * - useCallback for stable event handlers
+ * - useMemo for computed values
+ * - Minimal re-renders
+ * - Optimized avatar rendering
+ *
+ * @dependencies
+ * - React 18+ - Hooks and memo
+ * - @supabase/supabase-js - User type
+ * - lucide-react - Icons
+ * - DropdownMenu components
+ * - Dialog components
+ * - PasswordChangeForm component
+ * - Avatar component
+ * - Button component
+ * - Tailwind CSS - Styling
+ */
+
+interface UserMenuProps {
+    user: User | null;
+    onSignOut?: () => Promise<void>;
+    onChangePassword?: (newPassword: string, confirmPassword: string) => Promise<{
+        error: any;
+    }>;
+    className?: string;
+    showAvatar?: boolean;
+}
+declare const UserMenu: React__default.NamedExoticComponent<UserMenuProps>;
+
+type Operation = 'read' | 'create' | 'update' | 'delete' | 'manage';
+interface PaceAppLayoutProps {
+    /** The name of the application to be displayed in the header. */
+    appName: string;
+    /** Optional navigation items for the header menu. If not provided, uses default navigation. */
+    navItems?: NavigationItem[];
+    /** Show/hide event selector in the header */
+    showEventSelector?: boolean;
+    /** Custom actions to display in the header (between event selector and user menu) */
+    headerActions?: React__default.ReactNode;
+    /** Custom logo component (overrides default logo) */
+    customLogo?: React__default.ReactNode;
+    /** Custom user menu component (overrides default user menu) */
+    customUserMenu?: React__default.ReactNode;
+    /** Custom className for the header */
+    headerClassName?: string;
+    /** Show/hide user menu */
+    showUserMenu?: boolean;
+    /** Enable layout-level permission enforcement */
+    enforcePermissions?: boolean;
+    /** Default permission to check for all routes (when enforcePermissions is true) */
+    defaultPermission?: Operation;
+    /** Route-specific permissions mapping */
+    routePermissions?: Record<string, Operation>;
+    /** Fallback component to show when user lacks permission */
+    permissionFallback?: React__default.ReactNode;
+    /** Enable permission-based navigation filtering */
+    filterNavigationByPermissions?: boolean;
+    /** Custom permission page ID mapping */
+    pageIdMapping?: Record<string, string>;
+    /** Enable strict mode to prevent bypassing permission checks (default: true) */
+    strictMode?: boolean;
+    /** Enable page-level permission enforcement (default: false) */
+    enforcePagePermissions?: boolean;
+    /** Default page permission fallback component */
+    pagePermissionFallback?: React__default.ReactNode;
+    /** Enable audit logging for all permission checks (default: true) */
+    auditLog?: boolean;
+    /** Callback when page access is denied */
+    onPageAccessDenied?: (pageName: string, operation: string) => void;
+    /** Callback when strict mode violation occurs */
+    onStrictModeViolation?: (pageName: string, operation: string) => void;
+    /** Enable role-based routing (default: false) */
+    roleBasedRouting?: boolean;
+    /** Route configuration for role-based routing */
+    routeConfig?: Array<{
+        path: string;
+        component: React__default.ComponentType;
+        permissions: string[];
+        roles?: string[];
+        accessLevel?: string;
+        pageId?: string;
+        strictMode?: boolean;
+        meta?: {
+            title?: string;
+            description?: string;
+            requiresAuth?: boolean;
+            hidden?: boolean;
+        };
+    }>;
+    /** Fallback route for unauthorized access */
+    fallbackRoute?: string;
+    /** Callback when route access is denied */
+    onRouteAccessDenied?: (route: string, reason: string) => void;
+    /** Callback when route strict mode violation occurs */
+    onRouteStrictModeViolation?: (route: string, reason: string) => void;
+}
+/**
+ * A consistent layout component for all PACE suite applications that provides a standard
+ * structure with header, main content area, and footer.
+ *
+ * NEW: This component now includes layout-level permission enforcement to ensure
+ * consuming apps can't forget to implement permission checks on individual pages.
+ *
+ * This component is designed to work with React Router's nested routing pattern using
+ * Outlet to render child routes. It provides integrated authentication, navigation,
+ * and user management functionality.
+ *
+ * Features:
+ * - React Router v6 integration with nested routing
+ * - Unified authentication integration
+ * - Consistent header with navigation and user menu
+ * - Flexible main content area with Outlet
+ * - Footer with application branding
+ * - User sign-out and password change functionality
+ * - Responsive design and accessibility compliant
+ * - Layout-level permission enforcement
+ * - Permission-based navigation filtering
+ * - Automatic page permission validation
+ *
+ * @example
+ * Basic React Router setup with permission enforcement (RECOMMENDED):
+ * ```tsx
+ * import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+ * import { UnifiedAuthProvider } from '@jmruthers/pace-core/providers';
+ * import { PaceAppLayout, PaceLoginPage } from '@jmruthers/pace-core';
+ *
+ * function App() {
+ *   return (
+ *     <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
+ *       <Router>
+ *         <Routes>
+ *           <Route path="/login" element={<PaceLoginPage appName="My App" />} />
+ *           <Route path="/" element={
+ *             <PaceAppLayout
+ *               appName="My Application"
+ *               enforcePermissions={true}
+ *               defaultPermission="read"
+ *             />
+ *           }>
+ *             <Route index element={<HomePage />} />
+ *             <Route path="dashboard" element={<DashboardPage />} />
+ *             <Route path="meals" element={<MealsPage />} />
+ *           </Route>
+ *         </Routes>
+ *       </Router>
+ *     </UnifiedAuthProvider>
+ *   );
+ * }
+ * ```
+ *
+ *
+ * @example
+ * Custom navigation items with permission filtering:
+ * ```tsx
+ * import { NavigationItem } from '@jmruthers/pace-core';
+ *
+ * function App() {
+ *   const customNavItems: NavigationItem[] = [
+ *     { id: 'components', label: 'Components', href: '/components', icon: 'Component' },
+ *     { id: 'styles', label: 'Styles', href: '/styles', icon: 'Palette' },
+ *     { id: 'meals', label: 'Meals', href: '/meals', icon: 'UtensilsCrossed' }
+ *   ];
+ *
+ *   return (
+ *     <Router>
+ *       <Routes>
+ *         <Route path="/" element={
+ *           <PaceAppLayout
+ *             appName="My Custom App"
+ *             navItems={customNavItems}
+ *             enforcePermissions={true}
+ *             filterNavigationByPermissions={true}
+ *             routePermissions={{
+ *               '/components': 'read',
+ *               '/styles': 'read',
+ *               '/meals': 'read'
+ *             }}
+ *           />
+ *         }>
+ *           <Route path="components" element={<ComponentsPage />} />
+ *           <Route path="styles" element={<StylesPage />} />
+ *           <Route path="meals" element={<MealsPage />} />
+ *         </Route>
+ *       </Routes>
+ *     </Router>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Route-specific permissions with custom page IDs:
+ * ```tsx
+ * function AdminApp() {
+ *   return (
+ *     <Router>
+ *       <Routes>
+ *         <Route path="/" element={
+ *           <PaceAppLayout
+ *             appName="Admin Panel"
+ *             enforcePermissions={true}
+ *             routePermissions={{
+ *               '/dashboard': 'read',
+ *               '/user-management': 'read',
+ *               '/system-settings': 'update'
+ *             }}
+ *             pageIdMapping={{
+ *               '/dashboard': 'dashboard',
+ *               '/user-management': 'user-management',
+ *               '/system-settings': 'system-admin'
+ *             }}
+ *             permissionFallback={<AccessDeniedPage />}
+ *           />
+ *         }>
+ *           <Route path="dashboard" element={<DashboardPage />} />
+ *           <Route path="user-management" element={<UserManagementPage />} />
+ *           <Route path="system-settings" element={<SystemSettingsPage />} />
+ *         </Route>
+ *       </Routes>
+ *     </Router>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Layout configuration including app name for branding and permission settings
+ * @returns React element with complete application layout structure and permission enforcement
+ *
+ * @since 0.1.0
+ */
+declare function PaceAppLayout({ appName, navItems, showEventSelector, headerActions, customLogo, customUserMenu, headerClassName, showUserMenu, enforcePermissions, defaultPermission, routePermissions, permissionFallback, filterNavigationByPermissions, pageIdMapping, strictMode, enforcePagePermissions, pagePermissionFallback, auditLog, onPageAccessDenied, onStrictModeViolation, roleBasedRouting, routeConfig, fallbackRoute, onRouteAccessDenied, onRouteStrictModeViolation }: PaceAppLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file PACE Login Page Component
+ * @package @jmruthers/pace-core
+ * @module Components/PaceLoginPage
+ * @since 0.1.0
+ *
+ * A comprehensive login page component that provides a consistent authentication
+ * experience for all PACE suite applications with role-based redirection and
+ * enhanced error handling.
+ *
+ * Features:
+ * - Consistent login page layout
+ * - Unified authentication integration
+ * - Role-based automatic redirection (admin users)
+ * - Manual redirection for all successful logins
+ * - Customizable app branding
+ * - Configurable redirect paths
+ * - Enhanced error handling and display
+ * - Dual loading state management (auth + form)
+ * - Navigation error recovery
+ * - Responsive design
+ * - Accessibility compliant
+ * - Integration with LoginForm
+ * - React Router navigation
+ * - Centered layout design
+ * - Error persistence and display
+ *
+ * @example
+ * ```tsx
+ * // Basic login page
+ * <PaceLoginPage appName="My Application" />
+ *
+ * // Login page with custom redirect
+ * <PaceLoginPage
+ *   appName="Dashboard App"
+ *   onSuccessRedirectPath="/dashboard"
+ * />
+ *
+ * // Login page in router setup
+ * <Router>
+ *   <Routes>
+ *     <Route path="/login" element={
+ *       <PaceLoginPage
+ *         appName="My App"
+ *         onSuccessRedirectPath="/home"
+ *       />
+ *     } />
+ *     <Route path="/home" element={<HomePage />} />
+ *   </Routes>
+ * </Router>
+ *
+ * // Login page with authentication provider
+ * <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
+ *   <Router>
+ *     <Routes>
+ *       <Route path="/login" element={
+ *         <PaceLoginPage appName="My Application" />
+ *       } />
+ *       <Route path="/" element={<PaceAppLayout appName="My Application" />}>
+ *         <Route index element={<HomePage />} />
+ *       </Route>
+ *     </Routes>
+ *   </Router>
+ * </UnifiedAuthProvider>
+ *
+ * // Login page with role-based access control
+ * function App() {
+ *   return (
+ *     <UnifiedAuthProvider supabaseClient={supabase} appName="Admin Portal">
+ *       <Router>
+ *         <Routes>
+ *           <Route path="/login" element={
+ *             <PaceLoginPage
+ *               appName="Admin Portal"
+ *               onSuccessRedirectPath="/admin/dashboard"
+ *             />
+ *           } />
+ *           <Route path="/admin/*" element={<AdminRoutes />} />
+ *         </Routes>
+ *       </Router>
+ *     </UnifiedAuthProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper semantic HTML structure
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ * - Focus management
+ * - High contrast support
+ * - Clear page hierarchy
+ * - Accessible form elements
+ * - Error announcements
+ *
+ * @routing
+ * - React Router v6 integration
+ * - Automatic navigation on success
+ * - Role-based redirect logic (admin users)
+ * - Configurable redirect paths
+ * - Replace navigation for login flow
+ * - Navigation error handling
+ *
+ * @authentication
+ * - Integration with UnifiedAuthProvider
+ * - Role detection via hasRole('admin')
+ * - Loading state management
+ * - Error state handling
+ * - Session validation
+ * - Automatic redirect prevention loops
+ *
+ * @dependencies
+ * - React 18+ - Hooks and effects
+ * - React Router v6 - Navigation
+ * - UnifiedAuthProvider - Authentication
+ * - LoginForm component
+ * - Button component
+ * - Input component
+ * - Label component
+ * - Tailwind CSS - Styling
+ */
+
+interface PaceLoginPageProps {
+    /** The name of the application to be displayed on the login form. */
+    appName: string;
+    /** The path to redirect to upon successful login. Defaults to `/`. */
+    onSuccessRedirectPath?: string;
+}
+/**
+ * A consistent, reusable login page for all PACE suite applications.
+ * It handles the sign-in logic with role-based automatic redirection for admin users,
+ * enhanced error handling, and dual loading state management.
+ *
+ * Recent enhancements:
+ * - Role-based redirection: Admin users are automatically redirected
+ * - Enhanced error handling with navigation error recovery
+ * - Dual loading states: auth loading + form submission loading
+ * - Error persistence: Auth errors are displayed below the form
+ * - Navigation safety: Try-catch blocks prevent navigation errors
+ *
+ * @param props - Login page configuration including app name and redirect path
+ * @returns JSX.Element - The rendered login page with enhanced functionality
+ *
+ * @example
+ * ```tsx
+ * <PaceLoginPage
+ *   appName="My Application"
+ *   onSuccessRedirectPath="/dashboard"
+ * />
+ * ```
+ */
+declare const PaceLoginPage: React__default.FC<PaceLoginPageProps>;
+
+/**
+ * State interface for the ErrorBoundary component
+ * @public
+ */
+interface ErrorBoundaryState {
+    /** Whether an error has been caught */
+    hasError: boolean;
+    /** The error that was caught */
+    error?: Error;
+    /** Additional error information from React */
+    errorInfo?: React__default.ErrorInfo;
+    /** Unique identifier for the error */
+    errorId?: string;
+    /** Number of retry attempts made */
+    retryCount: number;
+}
+/**
+ * Props interface for the ErrorBoundary component
+ * @public
+ */
+interface ErrorBoundaryProps {
+    /** Child components to wrap with error boundary */
+    children: ReactNode;
+    /** Name of the component for error reporting */
+    componentName?: string;
+    /** Custom fallback UI to display when error occurs */
+    fallback?: ReactNode;
+    /** Callback function called when an error is caught */
+    onError?: (error: Error, errorInfo: React__default.ErrorInfo, errorId: string) => void;
+    /** Maximum number of retry attempts */
+    maxRetries?: number;
+    /** Whether to enable retry functionality */
+    enableRetry?: boolean;
+    /** Whether to enable error reporting */
+    enableReporting?: boolean;
+}
+/**
+ * ErrorBoundary component
+ * Catches JavaScript errors in child components and provides fallback UI
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   componentName="MyComponent"
+ *   maxRetries={3}
+ *   onError={(error, errorInfo, errorId) => {
+ *     console.log('Error caught:', errorId);
+ *   }}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    private retryTimeoutId;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
+    private reportError;
+    private handleRetry;
+    componentWillUnmount(): void;
+    render(): string | number | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+/**
+ * @file LoadingSpinner Component
+ * @package @jmruthers/pace-core
+ * @module Components/LoadingSpinner
+ * @since 0.1.0
+ *
+ * A simple, accessible loading spinner component for indicating loading states.
+ * Provides smooth animations with reduced motion support for accessibility.
+ *
+ * Features:
+ * - Multiple size variants (sm, md, lg)
+ * - Smooth CSS animations
+ * - Reduced motion support for accessibility
+ * - Screen reader friendly with proper ARIA attributes
+ * - Customizable styling
+ * - Lightweight and performant
+ *
+ * @example
+ * ```tsx
+ * // Basic loading spinner
+ * <LoadingSpinner />
+ *
+ * // Different sizes
+ * <LoadingSpinner size="sm" />
+ * <LoadingSpinner size="md" />
+ * <LoadingSpinner size="lg" />
+ *
+ * // With custom styling
+ * <LoadingSpinner
+ *   size="lg"
+ *   className="text-main-500"
+ * />
+ *
+ * // In a button
+ * <Button disabled>
+ *   <LoadingSpinner size="sm" className="mr-2" />
+ *   Loading...
+ * </Button>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper ARIA role="status"
+ * - Screen reader announcement with "Loading..." text
+ * - Reduced motion support for users with vestibular disorders
+ * - High contrast support
+ *
+ * @performance
+ * - CSS-only animations for optimal performance
+ * - No JavaScript dependencies
+ * - Minimal DOM structure
+ * - Efficient rendering
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - Tailwind CSS - Styling and animations
+ */
+
+/**
+ * Props for the LoadingSpinner component
+ */
+interface LoadingSpinnerProps {
+    /** Size variant of the spinner */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes for styling */
+    className?: string;
+}
+/**
+ * LoadingSpinner component
+ * A simple, accessible loading spinner for indicating loading states
+ *
+ * @param props - Spinner configuration and styling
+ * @returns JSX.Element - The rendered loading spinner
+ *
+ * @example
+ * ```tsx
+ * <LoadingSpinner size="lg" className="text-main-500" />
+ * ```
+ */
+declare const LoadingSpinner: React__default.FC<LoadingSpinnerProps>;
+
+interface EventSelectorProps {
+    /** Placeholder text for the dropdown */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback fired when an event changes, providing full event object */
+    onEventChange?: (event: Event | null) => void;
+    /** Show friendly message when no events available */
+    showNoEventsMessage?: boolean;
+    /** Show retry button on errors */
+    showRetryButton?: boolean;
+    /** Show event details in dropdown */
+    showEventDetails?: boolean;
+    /** Show indicator for next/upcoming events */
+    showNextEventIndicator?: boolean;
+}
+/**
+ * EventSelector component for selecting events with built-in access control
+ *
+ * This component provides secure event selection with:
+ * - Database integration via rbac_event_app_roles table
+ * - Auto-selection of next upcoming event by date
+ * - Cross-device sync via Supabase user session metadata
+ * - localStorage fallback for offline scenarios
+ * - Comprehensive error handling and user feedback
+ *
+ * @component
+ * @example
+ * <UnifiedAuthProvider supabaseClient={supabase} appName="PACE">
+ *   <EventSelector onEventChange={(event) => console.log(event)} />
+ * </UnifiedAuthProvider>
+ */
+declare function EventSelector({ placeholder, className, onEventChange, showNoEventsMessage, showRetryButton, showEventDetails, showNextEventIndicator }: EventSelectorProps): react_jsx_runtime.JSX.Element | null;
+
+interface OrganisationSelectorProps {
+    /** Placeholder text for the dropdown */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback fired when organisation changes, providing full organisation object */
+    onOrganisationChange?: (org: Organisation) => void;
+    /** Show friendly message when no organisations available */
+    showNoOrganisationsMessage?: boolean;
+    /** Show retry button on errors */
+    showRetryButton?: boolean;
+    /** Show user's role in each organisation */
+    showRole?: boolean;
+    /** Compact display mode */
+    compact?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * OrganisationSelector component for secure organisation switching
+ *
+ * This component provides secure organisation selection with:
+ * - User membership validation
+ * - Role-based access display
+ * - Security error handling
+ * - Real-time organisation switching
+ * - Accessible interface design
+ *
+ * Security: Only shows organisations the user has valid access to
+ */
+declare function OrganisationSelector({ placeholder, className, onOrganisationChange, showNoOrganisationsMessage, showRetryButton, showRole, compact, disabled }: OrganisationSelectorProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * @file Password Reset Form Component
+ * @package @jmruthers/pace-core
+ * @module Components/PasswordReset
+ * @since 0.1.0
+ *
+ * A comprehensive password reset form component that handles email-based password recovery
+ * with proper validation, loading states, and success feedback.
+ *
+ * Features:
+ * - Email validation and submission
+ * - Loading states with disabled form
+ * - Success state with confirmation message
+ * - Error handling and display
+ * - Resend functionality
+ * - Accessibility compliant
+ * - Responsive design
+ * - Integration with UnifiedAuthProvider
+ * - Form validation
+ * - Success and error callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic password reset form
+ * <PasswordResetForm
+ *   onSuccess={() => {
+ *     toast.success('Password reset email sent!');
+ *   }}
+ *   onError={(error) => {
+ *     toast.error(`Failed to send reset email: ${error.message}`);
+ *   }}
+ * />
+ *
+ * // Password reset form with custom styling
+ * <PasswordResetForm
+ *   className="max-w-md mx-auto p-6 bg-main-50 rounded-lg shadow-md"
+ *   onSuccess={() => {
+ *     console.log('Reset email sent successfully');
+ *     navigate('/check-email');
+ *   }}
+ *   onError={(error) => {
+ *     console.error('Password reset failed:', error);
+ *   }}
+ * />
+ *
+ * // Password reset form in a modal
+ * <Modal isOpen={showResetForm} onClose={() => setShowResetForm(false)}>
+ *   <ModalContent>
+ *     <PasswordResetForm
+ *       onSuccess={() => {
+ *         setShowResetForm(false);
+ *         toast.success('Check your email for reset instructions');
+ *       }}
+ *       onError={(error) => {
+ *         toast.error(error.message);
+ *       }}
+ *     />
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper form labels and associations
+ * - Screen reader friendly error messages
+ * - Keyboard navigation support
+ * - Focus management
+ * - High contrast support
+ * - Clear error identification
+ * - Role="alert" for error announcements
+ *
+ * @dependencies
+ * - React 18+ - Hooks and state
+ * - UnifiedAuthProvider - Authentication context
+ * - Button component
+ * - Input component
+ * - Label component
+ * - Tailwind CSS - Styling
+ */
+interface PasswordResetFormProps {
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    className?: string;
+}
+declare function PasswordResetForm({ onSuccess, onError, className }: PasswordResetFormProps): react_jsx_runtime.JSX.Element;
+
+interface FileUploadProps {
+    supabase: SupabaseClient;
+    appName: string;
+    orgId: string;
+    onUploadComplete?: (result: {
+        success: boolean;
+        path?: string;
+        error?: string;
+    }) => void;
+    onUploadStart?: () => void;
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children?: React__default.ReactNode;
+}
+declare function FileUpload({ supabase, appName, orgId, onUploadComplete, onUploadStart, accept, maxSize, multiple, disabled, className, children }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Storage utility types for pace-core
+ */
+interface StorageUploadOptions {
+    /** The app name from rbac_apps */
+    appName: string;
+    /** Organisation ID for scoping */
+    orgId: string;
+    /** Whether the file should be publicly accessible */
+    isPublic?: boolean;
+    /** Optional tags for categorisation */
+    tags?: string[];
+    /** Optional custom path within the app/org structure */
+    customPath?: string;
+    /** Optional metadata to store with the file */
+    metadata?: Record<string, any>;
+}
+interface StorageFileMetadata {
+    mimeType: string;
+    size: number;
+    width?: number;
+    height?: number;
+    hash?: string;
+    orgId: string;
+    appName: string;
+    uploadedBy: string;
+    uploadedAt: string;
+    tags?: string[];
+    isPublic: boolean;
+    customMetadata?: Record<string, any>;
+}
+interface StorageUploadResult {
+    success: boolean;
+    path?: string;
+    publicUrl?: string;
+    metadata?: StorageFileMetadata;
+    error?: string;
+}
+interface StorageUrlOptions {
+    /** The app name from rbac_apps */
+    appName: string;
+    /** Organisation ID for scoping */
+    orgId: string;
+    /** Expiry time in seconds for signed URLs (default: 3600) */
+    expiresIn?: number;
+}
+interface StorageListOptions {
+    /** The app name from rbac_apps */
+    appName: string;
+    /** Organisation ID for scoping */
+    orgId: string;
+    /** Optional path prefix to filter by */
+    pathPrefix?: string;
+    /** Optional tags to filter by */
+    tags?: string[];
+    /** Maximum number of files to return */
+    limit?: number;
+    /** Offset for pagination */
+    offset?: number;
+}
+interface StorageFileInfo {
+    name: string;
+    path: string;
+    size: number;
+    mimeType: string;
+    lastModified: string;
+    metadata: StorageFileMetadata;
+}
+interface StorageListResult {
+    files: StorageFileInfo[];
+    totalCount: number;
+    hasMore: boolean;
+}
+interface FileSizeLimits {
+    [mimeType: string]: number;
+}
+interface StorageConfig {
+    bucketName: string;
+    fileSizeLimits: FileSizeLimits;
+    defaultFileSizeLimit: number;
+}
+
+/**
+ * React hook for storage operations
+ */
+
+interface UseStorageOptions {
+    supabase: SupabaseClient;
+    appName: string;
+    orgId: string;
+}
+interface UseStorageReturn {
+    uploadFile: (file: File, options?: Partial<StorageUploadOptions>) => Promise<StorageUploadResult>;
+    isUploading: boolean;
+    uploadError: string | null;
+    getPublicUrl: (path: string) => string;
+    getSignedUrl: (path: string, expiresIn?: number) => Promise<string | null>;
+    getFileUrl: (path: string) => string;
+    deleteFile: (path: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    archiveFile: (path: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    listFiles: (options?: Partial<StorageListOptions>) => Promise<StorageListResult>;
+    isListing: boolean;
+    listError: string | null;
+    isLoading: boolean;
+    error: string | null;
+    files: StorageFileInfo[];
+    refreshFiles: () => Promise<void>;
+}
+/**
+ * Hook for storage operations with app and organisation context
+ */
+declare function useStorage({ supabase, appName, orgId }: UseStorageOptions): UseStorageReturn;
+/**
+ * Hook for file upload with progress tracking
+ */
+declare function useFileUpload({ supabase, appName, orgId }: UseStorageOptions): {
+    uploadWithProgress: (file: File, options?: Partial<StorageUploadOptions>) => Promise<StorageUploadResult>;
+    uploadProgress: number;
+    isUploading: boolean;
+    uploadError: string | null;
+};
+
+/**
+ * @file Table Component System
+ * @package @jmruthers/pace-core
+ * @module Components/Table
+ * @since 0.1.0
+ *
+ * A comprehensive table component system for displaying tabular data.
+ * Provides accessible table components with consistent styling and behavior.
+ *
+ * Features:
+ * - Semantic HTML table structure
+ * - Consistent styling and spacing
+ * - Hover states and transitions
+ * - Responsive design
+ * - Accessibility compliant
+ * - Customizable styling
+ * - Checkbox support
+ * - Caption support
+ *
+ * @example
+ * ```tsx
+ * // Basic table
+ * <Table>
+ *   <TableCaption>A list of your recent invoices.</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Invoice</TableHead>
+ *       <TableHead>Status</TableHead>
+ *       <TableHead>Method</TableHead>
+ *       <TableHead>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>INV001</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell>$250.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell>INV002</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell>$150.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colSpan={3}>Total</TableCell>
+ *       <TableCell>$400.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * // Table with checkboxes
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead className="w-12">
+ *         <Checkbox />
+ *       </TableHead>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Email</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>
+ *         <Checkbox />
+ *       </TableCell>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>john@example.com</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper table semantics
+ * - Screen reader support
+ * - Keyboard navigation
+ * - Focus management
+ * - High contrast support
+ * - Caption for table description
+ *
+ * @dependencies
+ * - React 18+ - Hooks and refs
+ * - Tailwind CSS - Styling
+ */
+
+/**
+ * Table component
+ * The main table container with semantic HTML structure
+ *
+ * @param props - Table configuration and styling
+ * @param ref - Forwarded ref to the table element
+ * @returns JSX.Element - The rendered table element
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader>...</TableHeader>
+ *   <TableBody>...</TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+interface PublicPageLayoutProps {
+    /** The event code for this public page */
+    eventCode: string;
+    /** Child components to render */
+    children: ReactNode;
+    /** Optional event data - if not provided, will be fetched by parent component */
+    event?: Event | null;
+    /** Whether to show the footer (default: true) */
+    showFooter?: boolean;
+    /** Custom CSS classes for the layout */
+    className?: string;
+    /** Custom error fallback component */
+    errorFallback?: React__default.ComponentType<{
+        error: Error;
+        retry: () => void;
+    }>;
+    /** Custom loading fallback component */
+    loadingFallback?: React__default.ComponentType;
+    /** Custom header component */
+    customHeader?: ReactNode;
+    /** Custom footer component */
+    customFooter?: ReactNode;
+    /** Whether to show event validation errors (default: true) */
+    showValidationErrors?: boolean;
+}
+/**
+ * Layout component for public pages that don't require authentication
+ *
+ * This component provides a consistent structure for public event pages
+ * with event-specific branding, error handling, and loading states.
+ *
+ * @param props - Layout configuration and content
+ * @returns React element with complete public page layout
+ */
+declare function PublicPageLayout({ eventCode, children, event, showFooter, className, errorFallback: ErrorFallback, loadingFallback: LoadingFallback, customHeader, customFooter, showValidationErrors }: PublicPageLayoutProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook for accessing public page context
+ * Provides access to event data and layout state within public pages
+ *
+ * @deprecated This hook is no longer needed as PublicPageLayout no longer
+ * automatically fetches event data. Use usePublicRouteParams and usePublicEvent
+ * directly in your components instead.
+ */
+declare function usePublicPageContext$1(): {
+    eventCode: null;
+    eventId: null;
+    event: null;
+    isLoading: boolean;
+    error: null;
+    refetch: () => Promise<void>;
+    isPublicPage: boolean;
+};
+
+interface PublicPageHeaderProps {
+    /** The event data for this public page */
+    event: Event;
+    /** The event code for this public page */
+    eventCode: string;
+    /** Optional page title */
+    title?: string;
+    /** Optional page description */
+    description?: string;
+    /** Whether to show the event logo (default: true) */
+    showEventLogo?: boolean;
+    /** Whether to show the app logo (default: true) */
+    showAppLogo?: boolean;
+    /** Custom CSS classes for the header */
+    className?: string;
+    /** Custom content to display in the header */
+    children?: ReactNode;
+    /** Custom app logo component */
+    customAppLogo?: ReactNode;
+    /** Custom event logo component */
+    customEventLogo?: ReactNode;
+}
+/**
+ * Header component for public pages with event-specific branding
+ *
+ * This component displays the app logo, event logo, and event information
+ * in a clean, accessible layout suitable for public pages.
+ *
+ * @param props - Header configuration and content
+ * @returns React element with public page header
+ */
+declare function PublicPageHeader({ event, eventCode, title, description, showEventLogo, showAppLogo, className, children, customAppLogo, customEventLogo }: PublicPageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface PublicPageContextType {
+    isPublicPage: true;
+    supabase: ReturnType<typeof createClient<Database>> | null;
+    environment: {
+        supabaseUrl: string | null;
+        supabaseKey: string | null;
+    };
+}
+interface PublicPageProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider for public pages that completely isolates them from authentication context
+ *
+ * This provider:
+ * - Does not initialize any authentication providers
+ * - Provides environment variables for public data access
+ * - Includes error boundary for graceful error handling
+ * - Is completely separate from the main app context
+ */
+declare function PublicPageProvider({ children }: PublicPageProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access public page context
+ *
+ * @returns Public page context with environment variables
+ */
+declare function usePublicPageContext(): PublicPageContextType;
+/**
+ * Hook to check if we're in a public page context
+ *
+ * @returns True if we're in a public page context
+ */
+declare function useIsPublicPage(): boolean;
+
+interface PublicPageFooterProps {
+    /** The event data for this public page */
+    event: Event;
+    /** Company or organization name */
+    companyName?: string;
+    /** Current year or custom year for copyright */
+    year?: number;
+    /** Optional array of navigation links to display */
+    links?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** Optional CSS class name */
+    className?: string;
+    /** Logo image URL */
+    logo?: string;
+    /** Copyright text */
+    copyright?: string;
+    /** Footer content - children to render inside footer */
+    children?: React__default.ReactNode;
+}
+/**
+ * Footer component for public pages that matches the normal Footer exactly
+ *
+ * This component uses the same styling and structure as the main Footer component
+ * to ensure consistency across the application.
+ *
+ * @param props - Footer configuration and content
+ * @returns React element with public page footer
+ */
+declare function PublicPageFooter({ event, companyName, year, links, className, logo, copyright, children }: PublicPageFooterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file Public Page Debugger
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A debugging component that helps identify why authentication context
+ * is being triggered in public pages.
+ */
+interface PublicPageDebuggerProps {
+    /** Whether to enable debugging */
+    enabled?: boolean;
+    /** Custom label for this debugger instance */
+    label?: string;
+}
+/**
+ * Debugger component that logs context information
+ *
+ * This component helps identify why authentication context
+ * is being triggered in public pages.
+ */
+declare function PublicPageDebugger({ enabled, label }: PublicPageDebuggerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * @file Public Page Diagnostic Component
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A diagnostic component that helps identify exactly where authentication
+ * context is being triggered in public pages.
+ */
+interface PublicPageDiagnosticProps {
+    /** Whether to enable diagnostics */
+    enabled?: boolean;
+    /** Custom label for this diagnostic instance */
+    label?: string;
+}
+/**
+ * Diagnostic component that identifies authentication context issues
+ *
+ * This component will help you identify exactly where the problem is
+ * in your public page implementation.
+ */
+declare function PublicPageDiagnostic({ enabled, label }: PublicPageDiagnosticProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * @file Public Page Context Checker
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A simple component that immediately identifies if a public page
+ * is being rendered inside authentication context.
+ */
+interface PublicPageContextCheckerProps {
+    /** Whether to enable checking */
+    enabled?: boolean;
+    /** Custom label for this checker instance */
+    label?: string;
+}
+/**
+ * Context checker component that immediately identifies authentication context issues
+ *
+ * This component will immediately log to console if authentication context
+ * is being triggered in a public page.
+ */
+declare function PublicPageContextChecker({ enabled, label }: PublicPageContextCheckerProps): react_jsx_runtime.JSX.Element | null;
+
+interface EventLogoProps {
+    /** The event ID to fetch logo for */
+    eventId: string;
+    /** The event name for fallback text generation */
+    eventName: string;
+    /** The organisation ID for storage path */
+    organisationId: string;
+    /** Logo size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Custom CSS classes */
+    className?: string;
+    /** Whether to show fallback text when no logo is available */
+    showFallback?: boolean;
+    /** Custom fallback text generator */
+    generateFallbackText?: (eventName: string) => string;
+    /** Whether to validate image existence */
+    validateImage?: boolean;
+    /** Custom loading component */
+    loadingComponent?: React__default.ComponentType;
+    /** Custom error component */
+    errorComponent?: React__default.ComponentType<{
+        error: Error;
+    }>;
+}
+/**
+ * Component for displaying event logos with fallback to initials
+ *
+ * This component is context-aware and automatically detects whether it's being used
+ * in a public or authenticated context. It fetches and displays event logos from storage,
+ * with automatic fallback to event initials if no logo is available.
+ *
+ * @param props - Logo configuration and styling
+ * @returns React element with event logo or fallback
+ */
+declare function EventLogo({ eventId, eventName, organisationId, size, className, showFallback, generateFallbackText, validateImage, loadingComponent: LoadingComponent, errorComponent: ErrorComponent }: EventLogoProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Compact event logo for small spaces
+ */
+declare function EventLogoCompact(props: EventLogoProps): react_jsx_runtime.JSX.Element;
+/**
+ * Large event logo for prominent display
+ */
+declare function EventLogoLarge(props: EventLogoProps): react_jsx_runtime.JSX.Element;
+
+interface PublicErrorBoundaryProps {
+    /** Child components to wrap */
+    children: ReactNode;
+    /** Custom error fallback component */
+    fallback?: React__default.ComponentType<PublicErrorBoundaryState>;
+    /** Custom CSS classes for error display */
+    className?: string;
+    /** Whether to show error details in development */
+    showErrorDetails?: boolean;
+    /** Custom error message */
+    customErrorMessage?: string;
+    /** Custom recovery action */
+    onRecover?: () => void;
+}
+interface PublicErrorBoundaryState {
+    /** Whether an error has occurred */
+    hasError: boolean;
+    /** The error that occurred */
+    error: Error | null;
+    /** Error information */
+    errorInfo: ErrorInfo | null;
+    /** Function to reset the error state */
+    resetError: () => void;
+}
+/**
+ * Error boundary component for public pages
+ *
+ * This component catches JavaScript errors anywhere in the child component tree,
+ * logs those errors, and displays a fallback UI instead of the component tree that crashed.
+ *
+ * @param props - Error boundary configuration
+ * @returns React element with error boundary wrapper
+ */
+declare class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, PublicErrorBoundaryState> {
+    constructor(props: PublicErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<PublicErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    resetError: () => void;
+    render(): string | number | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+/**
+ * Hook for accessing error boundary state
+ * Useful for components that need to know if they're inside an error boundary
+ */
+declare function useErrorBoundary(): {
+    captureError: (error: Error) => void;
+    resetError: () => void;
+};
+/**
+ * Default error fallback component
+ */
+declare function DefaultPublicErrorFallback({ error, resetError }: PublicErrorBoundaryState): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file Public Loading Spinner Component
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A loading spinner component specifically designed for public pages.
+ * Provides consistent loading states with event-specific branding.
+ *
+ * Features:
+ * - Consistent loading design
+ * - Event-specific branding
+ * - Multiple size options
+ * - Accessibility compliant
+ * - TypeScript support
+ *
+ * @example
+ * ```tsx
+ * import { PublicLoadingSpinner } from '@jmruthers/pace-core';
+ *
+ * function PublicEventPage() {
+ *   if (isLoading) {
+ *     return <PublicLoadingSpinner message="Loading event details..." />;
+ *   }
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Screen reader friendly
+ * - Proper ARIA labels
+ * - High contrast support
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - Tailwind CSS - Styling
+ */
+interface PublicLoadingSpinnerProps {
+    /** Loading message to display */
+    message?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Custom CSS classes */
+    className?: string;
+    /** Whether to show the app logo */
+    showLogo?: boolean;
+    /** Custom loading message */
+    customMessage?: string;
+    /** Whether to center the spinner */
+    centered?: boolean;
+}
+/**
+ * Loading spinner component for public pages
+ *
+ * This component displays a consistent loading state with optional
+ * branding and messaging for public pages.
+ *
+ * @param props - Spinner configuration and styling
+ * @returns React element with loading spinner
+ */
+declare function PublicLoadingSpinner({ message, size, className, showLogo, customMessage, centered }: PublicLoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+/**
+ * Full page loading spinner with event branding
+ */
+declare function PublicLoadingSpinnerFullPage({ message, eventName, className }: Pick<PublicLoadingSpinnerProps, 'message' | 'className'> & {
+    eventName?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Skeleton loading component for content placeholders
+ */
+declare function PublicLoadingSkeleton({ lines, className }: {
+    lines?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { ToastViewport as $, Alert as A, Button as B, Card as C, Dialog as D, DialogContent as E, type FileSizeLimits as F, DialogHeader as G, DialogBody as H, Input as I, DialogFooter as J, DialogTitle as K, Label as L, DialogDescription as M, Select as N, SelectGroup as O, Progress as P, SelectValue as Q, SelectTrigger as R, type StorageConfig as S, SelectContent as T, SelectLabel as U, SelectItem as V, SelectSeparator as W, Toast as X, Toaster as Y, ToastAction as Z, ToastProvider as _, type StorageUploadOptions as a, type PublicPageLayoutProps as a$, ToastTitle as a0, ToastDescription as a1, ToastClose as a2, useToast as a3, type ToastActionElement as a4, type ToastProps as a5, Tooltip as a6, TooltipTrigger as a7, TooltipContent as a8, TooltipProvider as a9, TableHeader as aA, TableBody as aB, TableCaption as aC, TableCell as aD, TableFooter as aE, TableHead as aF, TableRow as aG, type StorageFileInfo as aH, PublicPageLayout as aI, usePublicPageContext$1 as aJ, PublicPageHeader as aK, PublicPageProvider as aL, usePublicPageContext as aM, useIsPublicPage as aN, PublicPageFooter as aO, PublicPageDebugger as aP, PublicPageDiagnostic as aQ, PublicPageContextChecker as aR, EventLogo as aS, EventLogoCompact as aT, EventLogoLarge as aU, PublicErrorBoundary as aV, useErrorBoundary as aW, DefaultPublicErrorFallback as aX, PublicLoadingSpinner as aY, PublicLoadingSpinnerFullPage as aZ, PublicLoadingSkeleton as a_, TooltipRoot as aa, Form as ab, LoginForm as ac, type LoginFormProps as ad, Header as ae, Footer as af, type FooterProps as ag, NavigationMenu as ah, type NavigationMenuProps as ai, type NavigationItem as aj, UserMenu as ak, type UserMenuProps as al, PaceAppLayout as am, type PaceAppLayoutProps as an, PaceLoginPage as ao, type PaceLoginPageProps as ap, ErrorBoundary as aq, LoadingSpinner as ar, EventSelector as as, OrganisationSelector as at, PasswordResetForm as au, FileUpload as av, type FileUploadProps as aw, useStorage as ax, useFileUpload as ay, Table as az, type StorageUploadResult as b, type PublicPageHeaderProps as b0, type PublicPageFooterProps as b1, type EventLogoProps as b2, type PublicErrorBoundaryProps as b3, type PublicErrorBoundaryState as b4, type PublicLoadingSpinnerProps as b5, type CardActionsProps as b6, type DialogProps as b7, type DialogTriggerProps as b8, type DialogContentProps as b9, type DialogOverlayProps as ba, type DialogHeaderProps as bb, type DialogFooterProps as bc, type DialogTitleProps as bd, type DialogDescriptionProps as be, type DialogSize as bf, type FormProps as bg, type OrganisationSelectorProps as bh, type ErrorBoundaryProps as bi, type ErrorBoundaryState as bj, type UseStorageOptions as bk, type UseStorageReturn as bl, type StorageUrlOptions as c, type StorageListOptions as d, type StorageListResult as e, type StorageFileMetadata as f, type ButtonProps as g, CardHeader as h, CardFooter as i, CardTitle as j, CardDescription as k, CardContent as l, CardActions as m, type CardProps as n, type InputProps as o, type LabelProps as p, AlertTitle as q, AlertDescription as r, Avatar as s, AvatarImage as t, AvatarFallback as u, Checkbox as v, DialogPortal as w, DialogOverlay as x, DialogTrigger as y, DialogClose as z };