@classytic/fluid 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,2046 @@
+export { c as cn } from './utils-Cbsgs0XP.js';
+import * as React$1 from 'react';
+import React__default, { RefObject, ReactNode, ElementType, ComponentType, InputHTMLAttributes, KeyboardEvent, ChangeEvent, TextareaHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef } from '@tanstack/react-table';
+import { LucideIcon, LucideProps } from 'lucide-react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { FieldValues, Control, FieldPath, FieldError, Path } from 'react-hook-form';
+import 'clsx';
+
+/**
+ * Filter utilities for building URL parameters
+ * Simplified approach since backend handles all operator parsing
+ */
+interface FilterConfig {
+    paramName: string;
+    type?: "array" | "string" | "number" | "boolean";
+    defaultValue?: unknown;
+}
+interface SearchConfig {
+    basePath: string;
+    searchFields?: Record<string, string>;
+    filterFields?: Record<string, FilterConfig>;
+    defaultSearchType?: string;
+}
+/**
+ * Build URL parameters from filters object
+ */
+declare function buildFilterParams(filters: Record<string, unknown>, filterConfig: Record<string, FilterConfig>): URLSearchParams;
+/**
+ * Build search parameters from search state
+ */
+declare function buildSearchParams(searchType: string, searchValue: string, searchFields: Record<string, string>): URLSearchParams;
+/**
+ * Build listing status parameters (inventory-specific)
+ */
+declare function buildListingStatusParams(listingStatus: Record<string, boolean | undefined>): URLSearchParams;
+/**
+ * Clear specific parameter types from URLSearchParams
+ */
+declare function clearSearchAndFilterParams(params: URLSearchParams, config: SearchConfig): void;
+/**
+ * Get API-ready parameters from URL
+ */
+declare function getApiParams(searchParams: URLSearchParams): Record<string, string>;
+
+declare function useIsMobile(): boolean;
+
+interface UseBaseSearchConfig {
+    basePath: string;
+    searchFields?: Record<string, string>;
+    filterFields?: Record<string, FilterConfig>;
+    defaultSearchType?: string;
+}
+interface UseBaseSearchReturn {
+    searchType: string;
+    setSearchType: (type: string) => void;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+    filters: Record<string, unknown>;
+    setFilters: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    updateFilter: (key: string, value: unknown) => void;
+    handleSearch: () => void;
+    clearSearch: () => void;
+    getSearchParams: () => Record<string, string>;
+    hasActiveSearch: boolean;
+    hasActiveFilters: boolean;
+}
+/**
+ * Base search hook that provides common search functionality
+ * Can be extended by specific search hooks for different entities
+ * Supports bracket syntax: field[operator]=value
+ */
+declare function useBaseSearch(config: UseBaseSearchConfig): UseBaseSearchReturn;
+
+declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
+
+declare const useScrollDetection: (ref: RefObject<HTMLDivElement | null>, delay?: number) => {
+    checkScroll: () => () => void;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    isScrollable: boolean;
+};
+
+interface AccordionSectionProps {
+    title: string;
+    icon?: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    badge?: ReactNode;
+}
+/**
+ * AccordionSection - Single collapsible section with smooth animation
+ *
+ * @example
+ * ```tsx
+ * <AccordionSection title="Settings" icon={<Settings className="h-4 w-4" />}>
+ *   <div>Content here</div>
+ * </AccordionSection>
+ * ```
+ */
+declare const AccordionSection: React$1.NamedExoticComponent<AccordionSectionProps>;
+interface FaqItem {
+    id: string;
+    question: string;
+    answer: ReactNode;
+}
+interface FaqAccordionProps {
+    items: FaqItem[];
+    defaultOpen?: string;
+    className?: string;
+    /** Allow multiple items to be open at once */
+    openMultiple?: boolean;
+}
+/**
+ * FaqAccordion - FAQ-style accordion where only one item can be open by default
+ *
+ * @example
+ * ```tsx
+ * <FaqAccordion
+ *   items={[
+ *     { id: "1", question: "What is this?", answer: "A FAQ accordion" },
+ *     { id: "2", question: "How does it work?", answer: "Click to expand" },
+ *   ]}
+ * />
+ * ```
+ */
+declare const FaqAccordion: React$1.NamedExoticComponent<FaqAccordionProps>;
+
+interface DisplayHeadingProps {
+    children: ReactNode;
+    size?: "lg" | "xl" | "2xl";
+    align?: "left" | "center" | "right";
+    className?: string;
+    highlightText?: string;
+    highlightColor?: "primary" | "secondary" | "accent" | "gradient";
+    as?: ElementType;
+}
+/**
+ * DisplayHeading - Reusable component for hero/display headings
+ * Provides consistent typography across the platform
+ */
+declare function DisplayHeading({ children, size, align, className, highlightText, highlightColor, as: Component, ...props }: DisplayHeadingProps): react_jsx_runtime.JSX.Element;
+
+declare const FacebookIcon: () => react_jsx_runtime.JSX.Element;
+declare const GoogleIcon: () => react_jsx_runtime.JSX.Element;
+declare const TwitterXIcon: () => react_jsx_runtime.JSX.Element;
+declare const InstagramIcon: () => react_jsx_runtime.JSX.Element;
+declare const WhatsAppIcon: () => react_jsx_runtime.JSX.Element;
+
+interface ThumbnailProps {
+    src?: string;
+    alt?: string;
+    aspect?: "square" | "video" | "portrait";
+    size?: "small" | "medium" | "large" | "full";
+    className?: string;
+    fallback?: string;
+    onClick?: () => void;
+}
+declare function Thumbnail({ src, alt, aspect, size, className, fallback, onClick, }: ThumbnailProps): react_jsx_runtime.JSX.Element;
+
+interface ApiPaginationData {
+    total: number;
+    pages: number;
+    page: number;
+    limit: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+}
+interface ApiPaginationProps extends Partial<ApiPaginationData> {
+    onPageChange?: (page: number) => void;
+    className?: string;
+    showInfo?: boolean;
+    infoPosition?: "left" | "right";
+}
+/**
+ * ApiPagination - A reusable pagination component for API-driven data
+ */
+declare function ApiPagination({ total, limit, pages, page, hasNext, hasPrev, onPageChange, className, showInfo, infoPosition, }: ApiPaginationProps): react_jsx_runtime.JSX.Element;
+
+interface CardWrapperProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    variant?: "default" | "outline" | "ghost" | "elevated" | "primary" | "secondary" | "destructive" | "success" | "warning";
+    size?: "sm" | "default" | "lg" | "xl";
+    hideHeader?: boolean;
+}
+declare function CardWrapper({ title, description, children, footer, className, headerClassName, contentClassName, footerClassName, variant, size, hideHeader, ...props }: CardWrapperProps): react_jsx_runtime.JSX.Element;
+interface DataCardProps extends Omit<CardWrapperProps, "children"> {
+    data: Array<{
+        label: string;
+        value: ReactNode;
+        color?: string;
+    }>;
+}
+declare function DataCard({ title, data, className, ...props }: DataCardProps): react_jsx_runtime.JSX.Element;
+interface LoadingCardProps extends Omit<CardWrapperProps, "children"> {
+}
+declare function LoadingCard({ title, description, className, ...props }: LoadingCardProps): react_jsx_runtime.JSX.Element;
+interface StatsCardProps extends Omit<CardWrapperProps, "children" | "variant"> {
+    value: ReactNode;
+    icon?: ReactNode;
+    trend?: {
+        type: "up" | "down" | "neutral";
+        value: string;
+    };
+    /** Visual variant for the card and icon styling */
+    statsVariant?: "default" | "success" | "warning" | "danger" | "info";
+    /** Additional class for the icon wrapper */
+    iconClassName?: string;
+}
+declare function StatsCard({ title, value, description, icon, trend, className, statsVariant, iconClassName, ...props }: StatsCardProps): react_jsx_runtime.JSX.Element;
+interface DraggableCardProps extends Omit<CardWrapperProps, "children"> {
+    subtitle?: ReactNode;
+    badges?: ReactNode;
+    actions?: ReactNode;
+    details?: ReactNode;
+    dragHandleProps?: any;
+    isDragging?: boolean;
+    isHidden?: boolean;
+    children?: ReactNode;
+}
+declare function DraggableCard({ title, subtitle, badges, actions, details, dragHandleProps, className, isDragging, isHidden, children, ...props }: DraggableCardProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonTableProps {
+    /** Number of skeleton rows */
+    rows?: number;
+    /** Number of skeleton columns */
+    columns?: number;
+    /** Optional column headers - if provided, shows text instead of skeleton */
+    headers?: string[];
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SkeletonTable - Loading skeleton for tables
+ * Matches DataTable structure for consistent loading states
+ *
+ * @example
+ * ```tsx
+ * <SkeletonTable rows={5} columns={4} />
+ * <SkeletonTable headers={["Name", "Email", "Status"]} rows={10} />
+ * ```
+ */
+declare function SkeletonTable({ rows, columns, headers, className, }: SkeletonTableProps): react_jsx_runtime.JSX.Element;
+interface SkeletonListProps {
+    /** Number of skeleton items */
+    items?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show avatar placeholder */
+    showAvatar?: boolean;
+    /** Avatar shape */
+    avatarShape?: "circle" | "square";
+}
+/**
+ * SkeletonList - Compact skeleton for lists with avatars
+ *
+ * @example
+ * ```tsx
+ * <SkeletonList items={5} />
+ * <SkeletonList items={3} showAvatar={false} />
+ * ```
+ */
+declare function SkeletonList({ items, className, showAvatar, avatarShape, }: SkeletonListProps): react_jsx_runtime.JSX.Element;
+interface SkeletonCardProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Show action buttons placeholder */
+    showActions?: boolean;
+    /** Number of text lines */
+    lines?: number;
+}
+/**
+ * SkeletonCard - Card skeleton for grid layouts
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCard />
+ * <SkeletonCard showActions={false} lines={2} />
+ * ```
+ */
+declare function SkeletonCard({ className, showActions, lines, }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
+interface SkeletonGridProps {
+    /** Number of skeleton cards */
+    cards?: number;
+    /** Grid columns configuration */
+    columns?: 1 | 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+    /** Props passed to each SkeletonCard */
+    cardProps?: Omit<SkeletonCardProps, "className">;
+}
+/**
+ * SkeletonGrid - Grid of skeleton cards
+ *
+ * @example
+ * ```tsx
+ * <SkeletonGrid cards={6} columns={3} />
+ * ```
+ */
+declare function SkeletonGrid({ cards, columns, className, cardProps, }: SkeletonGridProps): react_jsx_runtime.JSX.Element;
+
+interface ClientSubmitButtonProps {
+    children: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    className?: string;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    form?: string;
+}
+declare function ClientSubmitButton({ children, disabled, loading, loadingText, className, variant, size, form, ...props }: ClientSubmitButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleWrapperProps {
+    children: ReactNode;
+    trigger: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @deprecated Use render prop pattern with trigger element instead */
+    triggerAsChild?: boolean;
+    triggerVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    triggerSize?: "default" | "sm" | "lg" | "icon";
+    triggerClassName?: string;
+    contentClassName?: string;
+    className?: string;
+    showChevron?: boolean;
+    chevronPosition?: "left" | "right";
+    disabled?: boolean;
+}
+declare function CollapsibleWrapper({ children, trigger, defaultOpen, open, onOpenChange, triggerAsChild, triggerVariant, triggerSize, triggerClassName, contentClassName, className, showChevron, chevronPosition, disabled, ...props }: CollapsibleWrapperProps): react_jsx_runtime.JSX.Element;
+interface CollapsibleCardProps {
+    title: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+declare function CollapsibleCard({ title, children, defaultOpen, className, headerClassName, contentClassName, ...props }: CollapsibleCardProps): react_jsx_runtime.JSX.Element;
+interface CollapsibleSectionProps {
+    label: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    labelClassName?: string;
+    contentClassName?: string;
+}
+declare function CollapsibleSection({ label, children, defaultOpen, className, labelClassName, contentClassName, ...props }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Trigger element that opens the dialog */
+    trigger?: React$1.ReactElement;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    isLoading?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    icon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    /** Header className */
+    headerClassName?: string;
+    /** Description className */
+    descriptionClassName?: string;
+    /** Footer className */
+    footerClassName?: string;
+    /** Whether to show the cancel button (default: true) */
+    showCancel?: boolean;
+}
+declare function ConfirmDialog({ open, onOpenChange, trigger, title, description, confirmText, cancelText, variant, isLoading, onConfirm, onCancel, icon, children, className, headerClassName, descriptionClassName, footerClassName, showCancel, ...props }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+interface DeleteConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm?: () => void;
+    isLoading?: boolean;
+    itemName?: string;
+    itemDetails?: ReactNode;
+}
+declare function DeleteConfirmDialog({ open, onOpenChange, onConfirm, isLoading, itemName, itemDetails, ...props }: DeleteConfirmDialogProps): react_jsx_runtime.JSX.Element;
+interface InfoAlertProps extends Omit<ConfirmDialogProps, "showCancel" | "variant"> {
+    confirmText?: string;
+}
+/**
+ * InfoAlert - Information/warning alert with only confirm button (no cancel)
+ *
+ * @example
+ * ```tsx
+ * <InfoAlert
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Session expired"
+ *   description="Please log in again"
+ *   confirmText="OK"
+ *   onConfirm={() => setOpen(false)}
+ * />
+ * ```
+ */
+declare function InfoAlert({ title, description, confirmText, onConfirm, onOpenChange, ...props }: InfoAlertProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorStateProps {
+    /** Error title */
+    title?: string;
+    /** Error message or Error object */
+    error: string | Error | {
+        message?: string;
+    } | null | undefined;
+    /** Optional retry callback */
+    onRetry?: () => void;
+    /** Alert variant */
+    variant?: "default" | "destructive";
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+}
+/**
+ * ErrorState Component
+ *
+ * Reusable error display component with retry functionality
+ * Used for consistent error handling across pages
+ */
+declare function ErrorState({ title, error, onRetry, variant, className, icon, }: ErrorStateProps): react_jsx_runtime.JSX.Element;
+interface ErrorStateInlineProps {
+    /** Error message or Error object */
+    error: string | Error | {
+        message?: string;
+    } | null | undefined;
+    /** Optional retry callback */
+    onRetry?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+}
+/**
+ * Inline ErrorState variant - more compact for table cells
+ */
+declare function ErrorStateInline({ error, onRetry, className, icon, }: ErrorStateInlineProps): react_jsx_runtime.JSX.Element;
+
+interface CopyButtonProps {
+    value: string;
+    className?: string;
+    size?: "default" | "sm" | "lg" | "icon";
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    showToast?: boolean;
+    toastMessage?: string;
+    errorMessage?: string;
+    timeout?: number;
+    children?: ReactNode;
+}
+declare function CopyButton({ value, className, size, variant, showToast, toastMessage, errorMessage, timeout, children, ...props }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+interface CopyTextProps {
+    value: string;
+    displayValue?: string;
+    className?: string;
+    textClassName?: string;
+    buttonClassName?: string;
+    maxLength?: number;
+    showButton?: boolean;
+}
+declare function CopyText({ value, displayValue, className, textClassName, buttonClassName, maxLength, showButton, ...buttonProps }: CopyTextProps): react_jsx_runtime.JSX.Element;
+interface CopyCodeBlockProps {
+    value: string;
+    className?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+}
+declare function CopyCodeBlock({ value, className, language, showLineNumbers, ...buttonProps }: CopyCodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface CustomPaginationProps {
+    page: number;
+    pages: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    onPageChange: (page: number) => void;
+}
+declare function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext, }: CustomPaginationProps): react_jsx_runtime.JSX.Element | null;
+interface PaginationInfoProps {
+    page: number;
+    total: number;
+    limit?: number;
+}
+declare function PaginationInfo({ page, total, limit }: PaginationInfoProps): react_jsx_runtime.JSX.Element;
+
+interface DataTablePaginationProps extends Partial<ApiPaginationData> {
+    onPageChange?: (page: number) => void;
+}
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    isLoading?: boolean;
+    pagination?: DataTablePaginationProps;
+    enableSorting?: boolean;
+    enableRowSelection?: boolean;
+    onRowSelectionChange?: (selectedRows: TData[]) => void;
+    className?: string;
+}
+declare function DataTable<TData, TValue>({ columns, data, isLoading, pagination, enableSorting, enableRowSelection, onRowSelectionChange, className, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+declare const SIZE_VARIANTS$1: {
+    readonly sm: "sm:!max-w-sm";
+    readonly default: "sm:!max-w-md";
+    readonly lg: "sm:!max-w-lg md:!max-w-2xl";
+    readonly xl: "sm:!max-w-2xl md:!max-w-4xl";
+    readonly "2xl": "sm:!max-w-4xl md:!max-w-6xl";
+    readonly full: "!max-w-[95vw] !h-[95vh]";
+};
+type SizeVariant$1 = keyof typeof SIZE_VARIANTS$1;
+interface DialogWrapperProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    trigger?: ReactNode;
+    size?: SizeVariant$1;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    hideHeader?: boolean;
+    hideTitle?: boolean;
+    hideDescription?: boolean;
+    hideCloseButton?: boolean;
+}
+declare function DialogWrapper({ open, onOpenChange, title, description, children, footer, trigger, size, className, headerClassName, contentClassName, footerClassName, hideHeader, hideTitle, hideDescription, hideCloseButton, ...props }: DialogWrapperProps): react_jsx_runtime.JSX.Element;
+interface FormDialogProps extends Omit<DialogWrapperProps, "footer"> {
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    submitText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    submitDisabled?: boolean;
+}
+declare function FormDialog({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitText, cancelText, isLoading, submitDisabled, ...props }: FormDialogProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownWrapperProps {
+    trigger: React$1.ReactNode;
+    children: React$1.ReactNode;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    className?: string;
+    contentClassName?: string;
+}
+declare function DropdownWrapper({ trigger, children, align, side, sideOffset, className, contentClassName, ...props }: DropdownWrapperProps): react_jsx_runtime.JSX.Element;
+interface ActionDropdownItem {
+    type?: "item" | "separator" | "label" | "group";
+    key?: string;
+    label?: string | (() => string);
+    icon?: LucideIcon;
+    onClick?: (e: React$1.MouseEvent) => void;
+    disabled?: boolean;
+    hidden?: boolean;
+    variant?: "default" | "destructive";
+    shortcut?: string;
+    className?: string;
+    items?: ActionDropdownItem[];
+}
+interface ActionDropdownProps {
+    items?: ActionDropdownItem[];
+    triggerIcon?: LucideIcon;
+    triggerVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    triggerSize?: "default" | "sm" | "lg" | "icon";
+    triggerClassName?: string;
+    triggerLabel?: string;
+    showOnHover?: boolean;
+    align?: "start" | "center" | "end";
+    contentClassName?: string;
+    onOpenChange?: (open: boolean) => void;
+    stopPropagation?: boolean;
+}
+declare function ActionDropdown({ items, triggerIcon: TriggerIcon, triggerVariant, triggerSize, triggerClassName, triggerLabel, showOnHover, align, contentClassName, onOpenChange, stopPropagation, ...props }: ActionDropdownProps): react_jsx_runtime.JSX.Element;
+interface SelectDropdownOption {
+    value: string;
+    label: string;
+    icon?: LucideIcon;
+}
+interface SelectDropdownProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    options?: SelectDropdownOption[];
+    triggerClassName?: string;
+    contentClassName?: string;
+    disabled?: boolean;
+}
+declare function SelectDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: SelectDropdownProps): react_jsx_runtime.JSX.Element;
+interface CheckboxDropdownProps {
+    values?: string[];
+    onValuesChange?: (values: string[]) => void;
+    placeholder?: string;
+    options?: SelectDropdownOption[];
+    triggerClassName?: string;
+    contentClassName?: string;
+    disabled?: boolean;
+    showSelectedCount?: boolean;
+}
+declare function CheckboxDropdown({ values, onValuesChange, placeholder, options, triggerClassName, contentClassName, disabled, showSelectedCount, ...props }: CheckboxDropdownProps): react_jsx_runtime.JSX.Element;
+interface RadioDropdownProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    options?: SelectDropdownOption[];
+    triggerClassName?: string;
+    contentClassName?: string;
+    disabled?: boolean;
+}
+declare function RadioDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: RadioDropdownProps): react_jsx_runtime.JSX.Element;
+
+interface InfoRowProps {
+    label: string;
+    value: ReactNode;
+    copyable?: boolean;
+    icon?: ComponentType<LucideProps>;
+}
+declare function InfoRow({ label, value, copyable, icon: Icon }: InfoRowProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Item Component Helpers
+ */
+declare const iconItemMediaVariants: (props?: ({
+    iconBg?: "primary" | "gradient" | "none" | "gold" | "muted" | null | undefined;
+    iconSize?: "lg" | "xl" | "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconItemMediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconItemMediaVariants> {
+    icon?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+}
+declare const IconItemMedia: React$1.NamedExoticComponent<IconItemMediaProps>;
+interface FeatureItemProps {
+    icon?: React$1.ReactNode;
+    iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
+    iconSize?: "sm" | "md" | "lg" | "xl";
+    title?: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
+    size?: "sm" | "default" | "lg";
+    layout?: "vertical" | "horizontal";
+    titleAs?: React$1.ElementType;
+    className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    iconClassName?: string;
+    children?: React$1.ReactNode;
+}
+declare const FeatureItem: React$1.NamedExoticComponent<FeatureItemProps>;
+
+declare function ModeToggle(): react_jsx_runtime.JSX.Element;
+
+interface PhoneInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    onChange?: (value: string) => void;
+    defaultCountry?: string;
+}
+declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface PillProps {
+    variant?: "default" | "secondary" | "destructive" | "outline";
+    themed?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare function Pill({ variant, themed, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
+interface PillAvatarProps {
+    fallback?: string;
+    className?: string;
+    src?: string;
+    alt?: string;
+}
+declare function PillAvatar({ fallback, className, src, alt, ...props }: PillAvatarProps): react_jsx_runtime.JSX.Element;
+interface PillButtonProps {
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+}
+declare function PillButton({ className, ...props }: PillButtonProps): react_jsx_runtime.JSX.Element;
+interface PillStatusProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function PillStatus({ children, className, ...props }: PillStatusProps): react_jsx_runtime.JSX.Element;
+interface PillIndicatorProps {
+    variant?: "success" | "error" | "warning" | "info";
+    pulse?: boolean;
+}
+declare function PillIndicator({ variant, pulse }: PillIndicatorProps): react_jsx_runtime.JSX.Element;
+interface PillDeltaProps {
+    className?: string;
+    delta?: number;
+}
+declare function PillDelta({ className, delta }: PillDeltaProps): react_jsx_runtime.JSX.Element;
+interface PillIconProps extends LucideProps {
+    icon: ComponentType<LucideProps>;
+    className?: string;
+}
+declare function PillIcon({ icon: Icon, className, ...props }: PillIconProps): react_jsx_runtime.JSX.Element;
+interface PillAvatarGroupProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function PillAvatarGroup({ children, className, ...props }: PillAvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+interface PanelConfig {
+    title?: string;
+    icon?: ReactNode;
+    content: ReactNode;
+    badge?: ReactNode;
+}
+interface ResponsiveSplitLayoutProps {
+    leftPanel: PanelConfig;
+    rightPanel: PanelConfig;
+    className?: string;
+    leftPanelClassName?: string;
+    rightPanelClassName?: string;
+    variant?: "default" | "tabs" | "fixed";
+    desktopVariant?: "default" | "tabs" | "fixed";
+    mobileVariant?: "default" | "tabs" | "fixed";
+    defaultLayout?: [number, number];
+    minSizes?: [number, number];
+    rightPanelWidth?: number;
+    persistLayoutKey?: string;
+    mobileBreakpoint?: "sm" | "md" | "lg" | "xl";
+    forceMobile?: boolean;
+    forceDesktop?: boolean;
+}
+declare function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClassName, rightPanelClassName, variant, desktopVariant, mobileVariant, defaultLayout, minSizes, rightPanelWidth, persistLayoutKey, mobileBreakpoint, forceMobile, forceDesktop, }: ResponsiveSplitLayoutProps): react_jsx_runtime.JSX.Element;
+
+declare const SIZE_VARIANTS: {
+    readonly sm: "sm:!max-w-md";
+    readonly default: "w-full sm:!max-w-md md:!max-w-lg";
+    readonly lg: "w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl";
+    readonly xl: "w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl";
+    readonly full: "w-full !max-w-full";
+    readonly mobile: "w-[85%] !max-w-sm";
+    readonly "mobile-nav": "!w-[300px] sm:!w-[350px]";
+};
+type SizeVariant = keyof typeof SIZE_VARIANTS;
+interface SheetWrapperProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    header?: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    size?: SizeVariant;
+    modal?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    innerClassName?: string;
+    hideHeader?: boolean;
+    hideTitle?: boolean;
+    hideDescription?: boolean;
+    hideCloseButton?: boolean;
+    disableContentPadding?: boolean;
+}
+declare const SheetWrapper: React$1.NamedExoticComponent<SheetWrapperProps>;
+interface FormSheetProps extends Omit<SheetWrapperProps, "footer"> {
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    submitDisabled?: boolean;
+    submitLoading?: boolean;
+    formId?: string;
+}
+declare const FormSheet: React$1.NamedExoticComponent<FormSheetProps>;
+interface ConfirmSheetProps extends Omit<SheetWrapperProps, "footer"> {
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
+}
+declare const ConfirmSheet: React$1.NamedExoticComponent<ConfirmSheetProps>;
+
+interface TableWrapperColumn {
+    key?: string;
+    header: ReactNode;
+    className?: string;
+    cellClassName?: string;
+    render?: (item: any, index: number) => ReactNode;
+}
+interface TableWrapperEmptyState {
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+}
+interface TableWrapperProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    children?: ReactNode;
+    columns?: TableWrapperColumn[];
+    data?: any[];
+    renderRow?: (item: any, index: number) => ReactNode;
+    emptyState?: TableWrapperEmptyState;
+    className?: string;
+    tableClassName?: string;
+    maxHeight?: string;
+}
+declare function TableWrapper({ title, description, icon, children, columns, data, renderRow, emptyState, className, tableClassName, maxHeight, ...props }: TableWrapperProps): react_jsx_runtime.JSX.Element;
+interface SimpleTableProps extends Omit<TableWrapperProps, "renderRow" | "children"> {
+    columns: TableWrapperColumn[];
+    data: any[];
+}
+declare function SimpleTable({ title, data, columns, emptyState, className, ...props }: SimpleTableProps): react_jsx_runtime.JSX.Element;
+
+interface TabsWrapperProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+    listClassName?: string;
+    contentClassName?: string;
+    variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+    orientation?: "horizontal" | "vertical";
+    layout?: "default" | "flex" | "sidebar";
+    withScrollArea?: boolean;
+    scrollAreaClassName?: string;
+}
+declare const TabsWrapper: React$1.NamedExoticComponent<TabsWrapperProps>;
+interface TabTriggerProps {
+    value: string;
+    children: ReactNode;
+    className?: string;
+    variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+    icon?: ReactNode;
+    hideTextOnMobile?: boolean;
+    disabled?: boolean;
+}
+declare const TabTrigger: React$1.NamedExoticComponent<TabTriggerProps>;
+interface TabContentProps {
+    value: string;
+    children: ReactNode;
+    className?: string;
+    withScrollArea?: boolean;
+    scrollAreaClassName?: string;
+    padding?: boolean;
+    keepMounted?: boolean;
+}
+declare const TabContent: React$1.NamedExoticComponent<TabContentProps>;
+interface DynamicTabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    hideTextOnMobile?: boolean;
+}
+interface DynamicTabsProps {
+    tabs?: DynamicTabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+    layout?: "default" | "flex" | "sidebar";
+    className?: string;
+    listClassName?: string;
+    listWrapperClassName?: string;
+    contentClassName?: string;
+    scrollable?: boolean;
+}
+declare const DynamicTabs: React$1.NamedExoticComponent<DynamicTabsProps>;
+
+interface TooltipWrapperProps {
+    children: ReactNode;
+    content: ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    delay?: number;
+    sideOffset?: number;
+    className?: string;
+    contentClassName?: string;
+    disabled?: boolean;
+}
+declare function TooltipWrapper({ children, content, side, align, delay, sideOffset, className, contentClassName, disabled, ...props }: TooltipWrapperProps): react_jsx_runtime.JSX.Element;
+interface ButtonTooltipProps extends Omit<TooltipWrapperProps, "content"> {
+    tooltip: ReactNode;
+    variant?: "default" | "outline" | "ghost";
+    size?: "default" | "sm" | "lg" | "icon";
+}
+declare function ButtonTooltip({ children, tooltip, variant, size, className, ...props }: ButtonTooltipProps): react_jsx_runtime.JSX.Element;
+interface IconTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
+    icon: ReactNode;
+    tooltip: ReactNode;
+    iconClassName?: string;
+    size?: number;
+}
+declare function IconTooltip({ icon, tooltip, className, iconClassName, size, ...props }: IconTooltipProps): react_jsx_runtime.JSX.Element;
+interface InfoTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
+    tooltip: ReactNode;
+    size?: number;
+}
+declare function InfoTooltip({ tooltip, className, size, ...props }: InfoTooltipProps): react_jsx_runtime.JSX.Element;
+interface ActionTooltipProps extends Omit<TooltipWrapperProps, "content"> {
+    tooltip: ReactNode;
+    action?: () => void;
+    variant?: "ghost" | "outline";
+    size?: "sm" | "icon";
+}
+declare function ActionTooltip({ children, tooltip, action, variant, size, className, ...props }: ActionTooltipProps): react_jsx_runtime.JSX.Element;
+
+interface TransformFunctions {
+    input?: (value: unknown) => string;
+    output?: (value: string) => unknown;
+}
+interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    type?: string;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    inputGroupClassName?: string;
+    IconLeft?: ReactNode;
+    IconRight?: ReactNode;
+    AddonLeft?: ReactNode;
+    AddonRight?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    addonLeft?: ReactNode;
+    addonRight?: ReactNode;
+    transform?: TransformFunctions;
+    onValueChange?: (value: unknown) => void;
+    value?: string | number;
+    onChange?: (value: unknown) => void;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    enterKeyHint?: InputHTMLAttributes<HTMLInputElement>["enterKeyHint"];
+}
+/**
+ * FormInput - Text input with react-hook-form integration
+ *
+ * Features:
+ * - Works with react-hook-form Controller
+ * - Supports input groups with icons/addons
+ * - Value transformation (input/output)
+ * - Can be used standalone without form
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <FormInput
+ *   control={form.control}
+ *   name="email"
+ *   type="email"
+ *   label="Email"
+ *   placeholder="user@example.com"
+ *   required
+ * />
+ *
+ * // With icon
+ * <FormInput
+ *   control={form.control}
+ *   name="search"
+ *   IconLeft={<SearchIcon />}
+ *   placeholder="Search..."
+ * />
+ * ```
+ */
+declare function FormInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, placeholder, description, helperText, required, disabled, readOnly, type, className, labelClassName, inputClassName, inputGroupClassName, IconLeft, IconRight, AddonLeft, AddonRight, iconLeft, iconRight, addonLeft, addonRight, onValueChange, transform, value, onChange, min, max, step, minLength, maxLength, pattern, autoComplete, autoFocus, inputMode, enterKeyHint, }: FormInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rows?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    labelClassName?: string;
+    textareaClassName?: string;
+    inputGroupClassName?: string;
+    IconLeft?: React$1.ReactNode;
+    IconRight?: React$1.ReactNode;
+    AddonLeft?: React$1.ReactNode;
+    AddonRight?: React$1.ReactNode;
+    iconLeft?: React$1.ReactNode;
+    iconRight?: React$1.ReactNode;
+    addonLeft?: React$1.ReactNode;
+    addonRight?: React$1.ReactNode;
+    minLength?: number;
+    maxLength?: number;
+    autoComplete?: string;
+    autoFocus?: boolean;
+}
+/**
+ * FormTextarea - Textarea with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <FormTextarea
+ *   control={form.control}
+ *   name="bio"
+ *   label="Biography"
+ *   placeholder="Tell us about yourself..."
+ *   rows={5}
+ * />
+ * ```
+ */
+declare function FormTextarea<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, readOnly, placeholder, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, textareaClassName, inputGroupClassName, IconLeft, IconRight, AddonLeft, AddonRight, iconLeft, iconRight, addonLeft, addonRight, rows, minLength, maxLength, autoComplete, autoFocus, }: FormTextareaProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface SelectOption$1 {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: string;
+    items: SelectOption$1[];
+}
+interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    items?: SelectOption$1[];
+    groups?: SelectOptionGroup[];
+    allOption?: SelectOption$1;
+    valueKey?: string;
+    displayKey?: string;
+    value?: string | number;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    labelClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    itemClassName?: string;
+    Icon?: React$1.ComponentType<{
+        className?: string;
+    }>;
+    defaultOpen?: boolean;
+    side?: "top" | "bottom" | "left" | "right";
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+}
+/**
+ * SelectInput - Select dropdown with react-hook-form integration
+ *
+ * Features:
+ * - Flat and grouped options
+ * - Custom placeholder
+ * - Optional "All" option (use placeholder text to match)
+ * - Custom styling
+ *
+ * Note: For "All" options with value="", the placeholder will be shown when selected.
+ * Make sure your placeholder text matches what you want to display for "All".
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SelectInput
+ *   control={form.control}
+ *   name="role"
+ *   label="Role"
+ *   items={[
+ *     { value: "admin", label: "Admin" },
+ *     { value: "user", label: "User" },
+ *   ]}
+ * />
+ *
+ * // With "All" option - placeholder shows when "All" is selected
+ * <SelectInput
+ *   name="status"
+ *   label="Status"
+ *   items={[
+ *     { value: "", label: "All" },  // This will show placeholder when selected
+ *     { value: "active", label: "Active" },
+ *   ]}
+ *   placeholder="All"  // Make sure this matches the "All" label
+ * />
+ * ```
+ */
+declare function SelectInput<TFieldValues extends FieldValues = FieldValues>({ control, items, groups, name, label, placeholder, allOption, description, helperText, required, disabled, className, labelClassName, triggerClassName, contentClassName, itemClassName, Icon, onValueChange, value: propValue, defaultOpen, side, sideOffset, align, alignOffset, }: SelectInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    items?: CheckboxItem[];
+    value?: string[];
+    onChange?: (values: string[]) => void;
+    onValueChange?: (values: string[]) => void;
+    className?: string;
+    labelClassName?: string;
+    checkboxClassName?: string;
+    itemClassName?: string;
+    itemLabelClassName?: string;
+}
+/**
+ * CheckboxInput - Checkbox group with react-hook-form integration
+ *
+ * Features:
+ * - Multiple checkbox items
+ * - Array value support
+ * - Can be used standalone
+ *
+ * @example
+ * ```tsx
+ * <CheckboxInput
+ *   control={form.control}
+ *   name="features"
+ *   label="Features"
+ *   items={[
+ *     { id: "wifi", label: "WiFi" },
+ *     { id: "parking", label: "Parking" },
+ *     { id: "pool", label: "Pool" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function CheckboxInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, items, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, checkboxClassName, itemClassName, itemLabelClassName, }: CheckboxInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface RadioChoice {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    choices?: RadioChoice[];
+    items?: RadioChoice[];
+    orientation?: "vertical" | "horizontal";
+    value?: string;
+    onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    labelClassName?: string;
+    radioGroupClassName?: string;
+    radioItemClassName?: string;
+    radioLabelClassName?: string;
+}
+/**
+ * RadioInput - Radio group with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <RadioInput
+ *   control={form.control}
+ *   name="plan"
+ *   label="Select Plan"
+ *   choices={[
+ *     { value: "free", label: "Free" },
+ *     { value: "pro", label: "Pro" },
+ *     { value: "enterprise", label: "Enterprise" },
+ *   ]}
+ *   orientation="horizontal"
+ * />
+ * ```
+ */
+declare function RadioInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, choices, items, orientation, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, radioGroupClassName, radioItemClassName, radioLabelClassName, }: RadioInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface SwitchInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
+    label?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    onValueChange?: (value: boolean) => void;
+    className?: string;
+    labelClassName?: string;
+    switchClassName?: string;
+}
+/**
+ * SwitchInput - Toggle switch with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <SwitchInput
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive email updates"
+ * />
+ * ```
+ */
+declare function SwitchInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, orientation, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, switchClassName, }: SwitchInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+type DateValue = Date | string | null | undefined;
+interface DateInputProps {
+    control?: Control<FieldValues>;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    minDate?: DateValue;
+    maxDate?: DateValue;
+    value?: DateValue;
+    onChange?: (date: Date | undefined) => void;
+    onValueChange?: (date: Date | undefined) => void;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    Icon?: React$1.ComponentType<{
+        className?: string;
+    }>;
+    allowClear?: boolean;
+}
+/**
+ * DateInput - Date picker with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <DateInput
+ *   control={form.control}
+ *   name="birthDate"
+ *   label="Date of Birth"
+ *   minDate="1900-01-01"
+ *   maxDate={new Date()}
+ * />
+ * ```
+ */
+declare function DateInput({ control, name, label, description, helperText, placeholder, required, disabled, className, labelClassName, inputClassName, minDate, maxDate, onValueChange, value: propValue, onChange: propOnChange, Icon, allowClear, }: DateInputProps): react_jsx_runtime.JSX.Element;
+
+interface TagInputProps {
+    control?: Control<FieldValues>;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    delimiter?: string;
+    suggestions?: string[];
+    suggestionLimit?: number;
+    value?: string[];
+    onChange?: (tags: string[]) => void;
+    onValueChange?: (tags: string[]) => void;
+    validateTag?: (tag: string) => boolean;
+    transformTag?: (tag: string) => string;
+    formatTag?: (tag: string) => string;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    [key: string]: unknown;
+}
+/**
+ * TagInput - Tag/chip input with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   control={form.control}
+ *   name="tags"
+ *   label="Tags"
+ *   placeholder="Add tags..."
+ *   maxTags={10}
+ *   suggestions={["react", "typescript", "nextjs"]}
+ * />
+ * ```
+ */
+declare function TagInput({ control, name, label, description, helperText, placeholder, required, disabled, className, labelClassName, inputClassName, maxTags, allowDuplicates, suggestions, suggestionLimit, value: propValue, onChange: propOnChange, onValueChange, delimiter, validateTag, transformTag, formatTag, ...props }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+interface TagChoiceItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface TagChoiceInputProps {
+    control?: Control<FieldValues>;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    items?: TagChoiceItem[];
+    value?: string[];
+    onValueChange?: (values: string[]) => void;
+    className?: string;
+}
+/**
+ * TagChoiceInput - Multi-select with tags display
+ *
+ * @example
+ * ```tsx
+ * <TagChoiceInput
+ *   control={form.control}
+ *   name="categories"
+ *   label="Categories"
+ *   items={[
+ *     { value: "tech", label: "Technology" },
+ *     { value: "design", label: "Design" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function TagChoiceInput({ control, name, label, description, helperText, placeholder, required, disabled, className, items, value: propValue, onValueChange, }: TagChoiceInputProps): react_jsx_runtime.JSX.Element;
+declare namespace TagChoiceInput {
+    var displayName: string;
+}
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxInputProps {
+    control?: Control<FieldValues>;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    items?: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    labelClassName?: string;
+    triggerClassName?: string;
+    renderOption?: (option: ComboboxOption) => ReactNode;
+}
+/**
+ * ComboboxInput - Searchable select with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <ComboboxInput
+ *   control={form.control}
+ *   name="country"
+ *   label="Country"
+ *   items={[
+ *     { value: "us", label: "United States" },
+ *     { value: "uk", label: "United Kingdom" },
+ *   ]}
+ *   searchPlaceholder="Search countries..."
+ * />
+ * ```
+ */
+declare function ComboboxInput({ control, name, label, placeholder, searchPlaceholder, emptyText, description, helperText, required, disabled, items, className, labelClassName, triggerClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange, }: ComboboxInputProps): react_jsx_runtime.JSX.Element;
+
+interface SlugFieldProps {
+    control?: Control<FieldValues>;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    sourceValue?: string;
+    onGenerate?: (sourceValue: string) => string;
+    value?: string;
+    onChange?: (e: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    error?: FieldError;
+}
+/**
+ * Generates a URL-friendly slug from a string
+ */
+declare function generateSlug$1(text: string | undefined): string;
+/**
+ * SlugField - URL slug input with auto-generation
+ *
+ * @example
+ * ```tsx
+ * <SlugField
+ *   control={form.control}
+ *   name="slug"
+ *   label="URL Slug"
+ *   sourceValue={form.watch("title")}
+ *   description="This will be used in the page URL"
+ *   required
+ * />
+ * ```
+ */
+declare const SlugField: React$1.ForwardRefExoticComponent<SlugFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface FormErrorSummaryProps {
+    /** Form errors object from react-hook-form */
+    errors?: Record<string, unknown>;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom title text */
+    title?: string;
+}
+/**
+ * FormErrorSummary - Displays a summary of form validation errors
+ *
+ * Takes react-hook-form errors object and displays all errors in a list.
+ * Automatically flattens nested errors for complex form structures.
+ */
+declare function FormErrorSummary({ errors, className, title, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
+
+interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+interface DateRangeFilterProps {
+    /** Initial start date */
+    initialStartDate?: Date;
+    /** Initial end date */
+    initialEndDate?: Date;
+    /** Callback when filter is applied (receives startDate, endDate) */
+    onFilter?: (startDate: Date | null, endDate: Date | null) => void;
+    /** Callback when filter is cleared */
+    onClear?: () => void;
+    /** Additional classes for the container */
+    className?: string;
+    /** Additional classes for trigger button */
+    buttonClassName?: string;
+    /** Placeholder text when no date selected */
+    placeholder?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Align popover to the right */
+    alignRight?: boolean;
+    /** Number of months to display */
+    numberOfMonths?: number;
+}
+/**
+ * DateRangeFilter - A date range picker for filtering
+ *
+ * Features:
+ * - Only applies filter when explicitly submitted
+ * - Supports clearing filters
+ * - Uses Popover to show calendar on click
+ * - Configurable min/max dates
+ */
+declare function DateRangeFilter({ initialStartDate, initialEndDate, onFilter, onClear, className, buttonClassName, placeholder, minDate, maxDate, alignRight, numberOfMonths, }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
+
+interface DateRangeValue {
+    from?: Date | string;
+    to?: Date | string;
+}
+interface DateRangeInputProps {
+    /** React Hook Form control */
+    control?: Control<any>;
+    /** Field name for form registration */
+    name?: string;
+    /** Field label */
+    label?: string;
+    /** Description text below the input */
+    description?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Additional className for the wrapper */
+    className?: string;
+    /** Additional className for the label */
+    labelClassName?: string;
+    /** Additional className for the button */
+    buttonClassName?: string;
+    /** Additional className for the calendar popover */
+    calendarClassName?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Array of disabled dates */
+    disabledDates?: Date[];
+    /** Array of disabled days (0-6, where 0 is Sunday) */
+    disabledDays?: number[];
+    /** Callback when value changes */
+    onValueChange?: (range: DateRangeValue) => void;
+    /** Custom validation function for date range */
+    validateDateRange?: (range: DateRangeValue) => boolean;
+    /** Function to clear form errors */
+    clearErrors?: (name: string) => void;
+    /** Custom description component */
+    descriptionComponent?: ReactNode;
+    /** Whether to show clear button */
+    allowClear?: boolean;
+    /** Whether to show badge with date range */
+    showBadge?: boolean;
+    /** Custom icon component */
+    Icon?: LucideIcon;
+    /** Transform functions for input/output */
+    transform?: {
+        input: (value: any) => DateRangeValue;
+        output: (range: DateRangeValue) => any;
+    };
+}
+/**
+ * DateRangeInput - Date range picker with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <DateRangeInput
+ *   control={control}
+ *   name="dateRange"
+ *   label="Select Dates"
+ *   placeholder="Pick a date range"
+ * />
+ * ```
+ */
+declare function DateRangeInput({ control, name, label, description, placeholder, required, disabled, className, labelClassName, buttonClassName, calendarClassName, minDate, maxDate, disabledDates, disabledDays, onValueChange, validateDateRange, clearErrors, descriptionComponent, allowClear, showBadge, Icon, transform, }: DateRangeInputProps): react_jsx_runtime.JSX.Element;
+
+interface SearchRootProps {
+    children: ReactNode;
+    hook: UseBaseSearchReturn;
+    className?: string;
+}
+/**
+ * Root search component that provides context to all child components
+ *
+ * @example
+ * <Search.Root hook={useMySearch()}>
+ *   <Search.Input />
+ *   <Search.Filters />
+ *   <Search.Actions />
+ * </Search.Root>
+ */
+declare function SearchRoot({ children, hook, className }: SearchRootProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showClearButton?: boolean;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Search input component using modern shadcn InputGroup pattern
+ *
+ * @example
+ * <Search.Input placeholder="Search..." />
+ */
+declare function SearchInput({ placeholder, className, disabled, showIcon, showClearButton, onKeyDown, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
+interface SearchTypeOption {
+    value: string;
+    label: string;
+}
+interface SearchTypeInputProps {
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showClearButton?: boolean;
+    searchTypeOptions?: SearchTypeOption[];
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Search input component with type selector using InputGroup pattern
+ *
+ * @example
+ * <Search.TypeInput
+ *   placeholder="Search..."
+ *   searchTypeOptions={[
+ *     { value: "_id", label: "ID" },
+ *     { value: "customerPhone", label: "Phone" },
+ *     { value: "customerEmail", label: "Email" },
+ *   ]}
+ * />
+ */
+declare function SearchTypeInput({ placeholder, className, disabled, showIcon, showClearButton, searchTypeOptions, onKeyDown, ...props }: SearchTypeInputProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFiltersProps {
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Search filters component with mobile sheet support
+ *
+ * @example
+ * <Search.Filters>
+ *   <TagChoiceInput label="Category" ... />
+ *   <SelectInput label="Status" ... />
+ * </Search.Filters>
+ */
+declare function SearchFilters({ children, title, description, disabled, className, }: SearchFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface SearchActionsProps {
+    showSearchButton?: boolean;
+    showClearButton?: boolean;
+    searchButtonText?: string;
+    clearButtonText?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Search action buttons
+ */
+declare function SearchActions({ showSearchButton, showClearButton, searchButtonText, clearButtonText, disabled, className, }: SearchActionsProps): react_jsx_runtime.JSX.Element;
+
+interface SearchContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Container for search input and action buttons
+ * Provides responsive layout
+ *
+ * @example
+ * <Search.Container>
+ *   <Search.Input />
+ *   <Search.Filters />
+ *   <Search.Actions />
+ * </Search.Container>
+ */
+declare function SearchContainer({ children, className }: SearchContainerProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFilterActionsProps {
+    onClose?: () => void;
+    disabled?: boolean;
+}
+/**
+ * Filter actions component (Reset/Apply buttons)
+ * Used inside filter popovers/sheets
+ */
+declare function SearchFilterActions({ onClose, disabled }: SearchFilterActionsProps): react_jsx_runtime.JSX.Element;
+
+interface SearchProviderProps {
+    children: ReactNode;
+    value: UseBaseSearchReturn;
+}
+declare function SearchProvider({ children, value }: SearchProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSearch(): UseBaseSearchReturn;
+
+/**
+ * Composable Search Component System
+ *
+ * @example
+ * ```tsx
+ * import { Search } from "@classytic/fluid";
+ *
+ * function MySearch() {
+ *   const searchHook = useMySearch();
+ *
+ *   return (
+ *     <Search.Root hook={searchHook}>
+ *       <Search.Container>
+ *         <Search.Input placeholder="Search..." />
+ *         <Search.Filters>
+ *           <SelectInput ... />
+ *           <TagChoiceInput ... />
+ *         </Search.Filters>
+ *         <Search.Actions />
+ *       </Search.Container>
+ *     </Search.Root>
+ *   );
+ * }
+ * ```
+ */
+
+type index_SearchActionsProps = SearchActionsProps;
+type index_SearchContainerProps = SearchContainerProps;
+type index_SearchFilterActionsProps = SearchFilterActionsProps;
+type index_SearchFiltersProps = SearchFiltersProps;
+type index_SearchInputProps = SearchInputProps;
+declare const index_SearchProvider: typeof SearchProvider;
+type index_SearchProviderProps = SearchProviderProps;
+type index_SearchRootProps = SearchRootProps;
+type index_SearchTypeInputProps = SearchTypeInputProps;
+type index_SearchTypeOption = SearchTypeOption;
+declare const index_useSearch: typeof useSearch;
+declare namespace index {
+  export { SearchActions as Actions, SearchContainer as Container, SearchFilterActions as FilterActions, SearchFilters as Filters, SearchInput as Input, SearchRoot as Root, type index_SearchActionsProps as SearchActionsProps, type index_SearchContainerProps as SearchContainerProps, type index_SearchFilterActionsProps as SearchFilterActionsProps, type index_SearchFiltersProps as SearchFiltersProps, type index_SearchInputProps as SearchInputProps, index_SearchProvider as SearchProvider, type index_SearchProviderProps as SearchProviderProps, type index_SearchRootProps as SearchRootProps, type index_SearchTypeInputProps as SearchTypeInputProps, type index_SearchTypeOption as SearchTypeOption, SearchTypeInput as TypeInput, index_useSearch as useSearch };
+}
+
+interface FieldRootProps {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+interface FieldLabelProps {
+    children: ReactNode;
+    className?: string;
+}
+interface FieldErrorProps {
+    children?: ReactNode;
+    className?: string;
+}
+interface FieldIconProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const Field: {
+    Root: React__default.NamedExoticComponent<FieldRootProps>;
+    Label: React__default.NamedExoticComponent<FieldLabelProps>;
+    Error: React__default.NamedExoticComponent<FieldErrorProps>;
+    Icon: React__default.NamedExoticComponent<FieldIconProps>;
+};
+
+interface CompactInputProps<T extends FieldValues = FieldValues> extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    control?: Control<T>;
+    name?: Path<T>;
+    description?: string;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    type?: string;
+    AddonLeft?: ReactNode;
+    AddonRight?: ReactNode;
+    inputClassName?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    error?: string;
+}
+/**
+ * CompactInput - Enhanced form input with InputGroup support
+ *
+ * Features:
+ * - Floating label design
+ * - InputGroup support with icons, buttons, and text addons
+ * - Controller integration for react-hook-form
+ * - Direct usage without form
+ */
+declare const CompactInput: React$1.ForwardRefExoticComponent<CompactInputProps<FieldValues> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface CompactTextareaProps<T extends FieldValues = FieldValues> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    control?: Control<T>;
+    name?: Path<T>;
+    description?: string;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    AddonLeft?: ReactNode;
+    AddonRight?: ReactNode;
+    inputClassName?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    error?: string;
+}
+/**
+ * CompactTextarea - Enhanced textarea with InputGroup support
+ *
+ * Features:
+ * - Floating label design
+ * - InputGroup support with addons
+ * - Character counter with maxLength
+ * - Controller integration for react-hook-form
+ * - Direct usage without form
+ */
+declare const CompactTextarea: React$1.ForwardRefExoticComponent<CompactTextareaProps<FieldValues> & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface CompactSelectProps<T extends FieldValues = FieldValues> {
+    control?: Control<T>;
+    name?: Path<T>;
+    description?: string;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    items?: SelectOption[];
+    className?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    error?: string;
+}
+/**
+ * CompactSelect - Simple, clean select dropdown
+ *
+ * @example
+ * <CompactSelect
+ *   label="Status"
+ *   items={[
+ *     { value: "active", label: "Active" },
+ *     { value: "inactive", label: "Inactive" }
+ *   ]}
+ * />
+ */
+declare const CompactSelect: React$1.ForwardRefExoticComponent<CompactSelectProps<FieldValues> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CompactNumberInputProps<T extends FieldValues = FieldValues> {
+    control?: Control<T>;
+    name?: Path<T>;
+    description?: string;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    showButtons?: boolean;
+    buttonVariant?: "ghost" | "outline" | "default";
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
+    onValueChange?: (value: number | string) => void;
+    value?: number | string;
+    defaultValue?: number | string;
+    onChange?: (value: number | string) => void;
+    error?: string;
+}
+/**
+ * CompactNumberInput - A space-efficient number input with optional increment/decrement buttons
+ *
+ * Features:
+ * - Floating label design
+ * - Optional increment/decrement buttons
+ * - Support for min/max/step values
+ * - Prefix/suffix support
+ * - Form integration via control prop
+ * - Direct usage without form
+ */
+declare const CompactNumberInput: React$1.ForwardRefExoticComponent<CompactNumberInputProps<FieldValues> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface Choice {
+    value: string;
+    label: string;
+}
+interface CompactTagChoiceProps<T extends FieldValues = FieldValues> {
+    control?: Control<T>;
+    name?: Path<T>;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    choices?: Choice[];
+    maxSelections?: number;
+    className?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    onValueChange?: (value: string[]) => void;
+    error?: string;
+}
+/**
+ * CompactTagChoice - A compact tag selection input
+ *
+ * Features:
+ * - Multi-select tag interface
+ * - Maximum selection limit
+ * - Popover for selecting options
+ * - Form integration via control prop
+ * - Direct usage without form
+ */
+declare const CompactTagChoice: React$1.ForwardRefExoticComponent<CompactTagChoiceProps<FieldValues> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Generates a URL-friendly slug from a string
+ */
+declare function generateSlug(text: string): string;
+interface CompactSlugFieldProps<T extends FieldValues = FieldValues> {
+    control?: Control<T>;
+    name?: Path<T>;
+    description?: string;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+    sourceValue?: string;
+    onGenerate?: (source: string) => string;
+    className?: string;
+    inputClassName?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement> | {
+        target: {
+            value: string;
+        };
+    }) => void;
+    error?: string;
+}
+/**
+ * CompactSlugField - Compact slug input with auto-generation
+ *
+ * Features:
+ * - Compact design with floating label
+ * - Auto-generate slug from source field
+ * - Manual editing support
+ * - InputGroup with generate button
+ * - Form integration via control prop
+ */
+declare const CompactSlugField: React$1.ForwardRefExoticComponent<CompactSlugFieldProps<FieldValues> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface CalendarEvent {
+    id: string;
+    date: Date | string;
+    [key: string]: any;
+}
+interface EventCalendarProps<T extends CalendarEvent> {
+    /** Events to display on the calendar */
+    events?: T[];
+    /** Currently selected date */
+    selectedDate?: Date | null;
+    /** Callback when a date is selected */
+    onDateSelect?: (date: Date, events: T[]) => void;
+    /** Callback when month changes */
+    onMonthChange?: (date: Date) => void;
+    /** Initial month to display */
+    initialMonth?: Date;
+    /** Custom render for day cell content */
+    renderDayContent?: (date: Date, events: T[], isSelected: boolean) => ReactNode;
+    /** Custom render for event indicators */
+    renderEventIndicators?: (events: T[]) => ReactNode;
+    /** Get events for a specific date (custom filtering) */
+    getEventsForDate?: (date: Date, events: T[]) => T[];
+    /** Additional class names */
+    className?: string;
+    /** Header content (left side) */
+    headerLeft?: ReactNode;
+    /** Header content (right side, before navigation) */
+    headerRight?: ReactNode;
+    /** Minimum cell height */
+    minCellHeight?: string;
+    /** Show week numbers */
+    showWeekNumbers?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * EventCalendar - A reusable calendar component for displaying events
+ *
+ * Can be used for attendance tracking, scheduling, etc.
+ */
+declare function EventCalendar<T extends CalendarEvent>({ events, selectedDate: controlledSelectedDate, onDateSelect, onMonthChange, initialMonth, renderDayContent, renderEventIndicators, getEventsForDate, className, headerLeft, headerRight, minCellHeight, showWeekNumbers, isLoading, }: EventCalendarProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * CalendarDayDetail - Side panel component for showing selected day details
+ */
+interface CalendarDayDetailProps {
+    date: Date | null;
+    title?: string;
+    emptyMessage?: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function CalendarDayDetail({ date, title, emptyMessage, children, className, }: CalendarDayDetailProps): react_jsx_runtime.JSX.Element;
+/**
+ * CalendarWithDetail - Calendar with integrated detail panel
+ */
+interface CalendarWithDetailProps<T extends CalendarEvent> extends Omit<EventCalendarProps<T>, "onDateSelect"> {
+    /** Render detail panel content */
+    renderDetail?: (date: Date, events: T[]) => ReactNode;
+    /** Detail panel title when no date selected */
+    detailTitle?: string;
+    /** Detail panel empty message */
+    detailEmptyMessage?: string;
+    /** Layout direction */
+    layout?: "horizontal" | "vertical";
+    /** Detail panel position */
+    detailPosition?: "left" | "right" | "top" | "bottom";
+    /** Callback when date is selected */
+    onDateSelect?: (date: Date, events: T[]) => void;
+}
+declare function CalendarWithDetail<T extends CalendarEvent>({ renderDetail, detailTitle, detailEmptyMessage, layout, detailPosition, onDateSelect, ...calendarProps }: CalendarWithDetailProps<T>): react_jsx_runtime.JSX.Element;
+
+export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CalendarDayDetail, type CalendarDayDetailProps, type CalendarEvent, CalendarWithDetail, type CalendarWithDetailProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, CheckboxInput, type CheckboxInputProps, type CheckboxItem, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ComboboxInput, type ComboboxInputProps, type ComboboxOption, CompactInput, type CompactInputProps, CompactNumberInput, type CompactNumberInputProps, CompactSelect, type CompactSelectProps, CompactSlugField, type CompactSlugFieldProps, CompactTagChoice, type CompactTagChoiceProps, CompactTextarea, type CompactTextareaProps, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DataCard, type DataCardProps, DataTable, type DataTablePaginationProps, type DataTableProps, DateInput, type DateInputProps, type DateRange, DateRangeFilter, type DateRangeFilterProps, DateRangeInput, type DateRangeInputProps, type DateRangeValue, DeleteConfirmDialog, type DeleteConfirmDialogProps, DialogWrapper, type DialogWrapperProps, DisplayHeading, type DisplayHeadingProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, EventCalendar, type EventCalendarProps, FacebookIcon, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, Field, type FilterConfig, FormDialog, type FormDialogProps, FormErrorSummary, type FormErrorSummaryProps, FormInput, type FormInputProps, FormSheet, type FormSheetProps, FormTextarea, type FormTextareaProps, GoogleIcon, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, InstagramIcon, LoadingCard, type LoadingCardProps, ModeToggle, PaginationInfo, type PaginationInfoProps, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, type RadioChoice, RadioDropdown, type RadioDropdownProps, RadioInput, type RadioInputProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, index as Search, type SearchActionsProps, type SearchConfig, type SearchContainerProps, type SearchFilterActionsProps, type SearchFiltersProps, type SearchInputProps, SearchProvider, type SearchProviderProps, type SearchRootProps, type SearchTypeInputProps, type SearchTypeOption, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SelectInput, type SelectInputProps, type SelectOption$1 as SelectOption, type SelectOptionGroup, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, SkeletonCard, type SkeletonCardProps, SkeletonGrid, type SkeletonGridProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SlugField, type SlugFieldProps, StatsCard, type StatsCardProps, SwitchInput, type SwitchInputProps, TabContent, type TabContentProps, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, TagChoiceInput, type TagChoiceInputProps, type TagChoiceItem, TagInput, type TagInputProps, Thumbnail, type ThumbnailProps, TooltipWrapper, type TooltipWrapperProps, TwitterXIcon, type UseBaseSearchConfig, type UseBaseSearchReturn, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, generateSlug$1 as generateSlug, generateSlug as generateSlugCompact, getApiParams, useBaseSearch, useIsMobile, useMediaQuery, useScrollDetection, useSearch };