@classytic/fluid 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,88 +1,166 @@
 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';
+export { F as FilterConfig, S as SearchConfig, e as UseBaseSearchConfig, U as UseBaseSearchReturn, b as buildFilterParams, c as buildListingStatusParams, a as buildSearchParams, d as clearSearchAndFilterParams, g as getApiParams, u as useBaseSearch } from './use-base-search-AS5Z3SAy.js';
+import * as React from 'react';
+import React__default, { RefObject, ReactNode, ElementType, ComponentType, InputHTMLAttributes, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef } from '@tanstack/react-table';
 import { LucideIcon, LucideProps } from 'lucide-react';
+import { ColumnDef } from '@tanstack/react-table';
 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 { FieldValues, Control, FieldPath, FieldError } from 'react-hook-form';
+export { Container, ContainerProps, Section, SectionProps } from './layout.js';
 import 'clsx';
 
 /**
- * Filter utilities for building URL parameters
- * Simplified approach since backend handles all operator parsing
+ * A utility module for handling localStorage operations with error handling and SSR safety
  */
-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
+ * Gets an item from localStorage with parsing and expiry check
+ * @param {string} key - The key to retrieve from localStorage
+ * @param {any} defaultValue - Default value to return if key doesn't exist or on error
+ * @returns {any} The parsed value or defaultValue
  */
-declare function buildFilterParams(filters: Record<string, unknown>, filterConfig: Record<string, FilterConfig>): URLSearchParams;
+declare const getStorageItem: <T>(key: string, defaultValue?: T | null) => T | null;
 /**
- * Build search parameters from search state
+ * Sets an item in localStorage with serialization and optional expiry
+ * @param {string} key - The key to set in localStorage
+ * @param {any} value - The value to serialize and store
+ * @param {number} [ttl] - Time to live in milliseconds (optional)
+ * @returns {boolean} Success status
  */
-declare function buildSearchParams(searchType: string, searchValue: string, searchFields: Record<string, string>): URLSearchParams;
+declare const setStorageItem: <T>(key: string, value: T, ttl?: number | null) => boolean;
 /**
- * Build listing status parameters (inventory-specific)
+ * Removes an item from localStorage
+ * @param {string} key - The key to remove from localStorage
+ * @returns {boolean} Success status
  */
-declare function buildListingStatusParams(listingStatus: Record<string, boolean | undefined>): URLSearchParams;
+declare const removeStorageItem: (key: string) => boolean;
 /**
- * Clear specific parameter types from URLSearchParams
+ * Clears all items from localStorage
+ * @returns {boolean} Success status
  */
-declare function clearSearchAndFilterParams(params: URLSearchParams, config: SearchConfig): void;
+declare const clearStorage: () => boolean;
 /**
- * Get API-ready parameters from URL
+ * Checks if localStorage is empty for a specific key
+ * @param {string} key - The key to check in localStorage
+ * @returns {boolean} True if empty or doesn't exist
  */
-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;
-}
+declare const isStorageEmpty: (key: string) => boolean;
+/**
+ * Generates a UUID (v4)
+ * Uses crypto.randomUUID() when available, with a fallback for older environments.
+ * @returns {string} A random UUID
+ */
+declare const generateUUID: () => string;
+/**
+ * Common expiry durations in milliseconds
+ */
+declare const TTL: {
+    readonly MINUTE: number;
+    readonly HOUR: number;
+    readonly DAY: number;
+    readonly WEEK: number;
+    readonly MONTH: number;
+};
 /**
- * Base search hook that provides common search functionality
- * Can be extended by specific search hooks for different entities
- * Supports bracket syntax: field[operator]=value
+ * Shorthand object for all localStorage operations
  */
-declare function useBaseSearch(config: UseBaseSearchConfig): UseBaseSearchReturn;
+declare const storage: {
+    get: <T>(key: string, defaultValue?: T | null) => T | null;
+    set: <T>(key: string, value: T, ttl?: number | null) => boolean;
+    remove: (key: string) => boolean;
+    clear: () => boolean;
+    isEmpty: (key: string) => boolean;
+    generateUUID: () => string;
+    TTL: {
+        readonly MINUTE: number;
+        readonly HOUR: number;
+        readonly DAY: number;
+        readonly WEEK: number;
+        readonly MONTH: number;
+    };
+};
+
+declare function useIsMobile(): boolean;
 
 declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
 
 declare const useScrollDetection: (ref: RefObject<HTMLDivElement | null>, delay?: number) => {
-    checkScroll: () => () => void;
+    checkScroll: () => void;
     canScrollLeft: boolean;
     canScrollRight: boolean;
     isScrollable: boolean;
 };
 
+/**
+ * useDebounce — Returns a debounced version of the input value.
+ *
+ * @example
+ * ```tsx
+ * const [search, setSearch] = useState("");
+ * const debouncedSearch = useDebounce(search, 300);
+ *
+ * useEffect(() => {
+ *   fetchResults(debouncedSearch);
+ * }, [debouncedSearch]);
+ * ```
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+/**
+ * useDebouncedCallback — Returns a debounced version of a callback function.
+ *
+ * @example
+ * ```tsx
+ * const debouncedSave = useDebouncedCallback((value: string) => {
+ *   saveToApi(value);
+ * }, 500);
+ *
+ * <Input onChange={(e) => debouncedSave(e.target.value)} />
+ * ```
+ */
+declare function useDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): (...args: Parameters<T>) => void;
+
+interface UseCopyToClipboardReturn {
+    /** Copy text to clipboard */
+    copy: (text: string) => Promise<boolean>;
+    /** Whether text was recently copied (resets after timeout) */
+    copied: boolean;
+    /** Any error that occurred during copy */
+    error: Error | null;
+    /** Reset the copied state manually */
+    reset: () => void;
+}
+/**
+ * useCopyToClipboard — Copy text to clipboard with status tracking.
+ *
+ * @param resetDelay - How long (ms) the `copied` state stays true. Default: 2000
+ *
+ * @example
+ * ```tsx
+ * const { copy, copied } = useCopyToClipboard();
+ *
+ * <Button onClick={() => copy(apiKey)}>
+ *   {copied ? "Copied!" : "Copy API Key"}
+ * </Button>
+ * ```
+ */
+declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardReturn;
+
+/**
+ * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
+ *
+ * @param key - The localStorage key
+ * @param initialValue - Default value if no stored value exists
+ * @param ttl - Time to live in milliseconds (optional)
+ *
+ * @example
+ * ```tsx
+ * const [theme, setTheme] = useLocalStorage("theme", "light");
+ * const [cache, setCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
+ * ```
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T, ttl?: number): [T, (value: T | ((prev: T) => T)) => void, () => void];
+
 interface AccordionSectionProps {
     title: string;
     icon?: ReactNode;
@@ -101,7 +179,7 @@ interface AccordionSectionProps {
  * </AccordionSection>
  * ```
  */
-declare const AccordionSection: React$1.NamedExoticComponent<AccordionSectionProps>;
+declare const AccordionSection: React.NamedExoticComponent<AccordionSectionProps>;
 interface FaqItem {
     id: string;
     question: string;
@@ -112,7 +190,7 @@ interface FaqAccordionProps {
     defaultOpen?: string;
     className?: string;
     /** Allow multiple items to be open at once */
-    openMultiple?: boolean;
+    multiple?: boolean;
 }
 /**
  * FaqAccordion - FAQ-style accordion where only one item can be open by default
@@ -127,7 +205,7 @@ interface FaqAccordionProps {
  * />
  * ```
  */
-declare const FaqAccordion: React$1.NamedExoticComponent<FaqAccordionProps>;
+declare const FaqAccordion: React.NamedExoticComponent<FaqAccordionProps>;
 
 interface DisplayHeadingProps {
     children: ReactNode;
@@ -180,6 +258,23 @@ interface ApiPaginationProps extends Partial<ApiPaginationData> {
  */
 declare function ApiPagination({ total, limit, pages, page, hasNext, hasPrev, onPageChange, className, showInfo, infoPosition, }: ApiPaginationProps): react_jsx_runtime.JSX.Element;
 
+declare const CARD_VARIANTS: {
+    readonly default: "";
+    readonly outline: "border-2";
+    readonly ghost: "border-0 shadow-none bg-transparent";
+    readonly elevated: "shadow-lg border-0";
+    readonly primary: "border-primary/20 bg-primary/5";
+    readonly secondary: "border-secondary/20 bg-secondary/5";
+    readonly destructive: "border-destructive/20 bg-destructive/5";
+    readonly success: "border-green-500/20 bg-green-500/5";
+    readonly warning: "border-yellow-500/20 bg-yellow-500/5";
+};
+declare const CARD_SIZES: {
+    readonly sm: "p-3";
+    readonly default: "p-6";
+    readonly lg: "p-8";
+    readonly xl: "p-10";
+};
 interface CardWrapperProps {
     title?: ReactNode;
     description?: ReactNode;
@@ -189,12 +284,13 @@ interface CardWrapperProps {
     headerClassName?: string;
     contentClassName?: string;
     footerClassName?: string;
-    variant?: "default" | "outline" | "ghost" | "elevated" | "primary" | "secondary" | "destructive" | "success" | "warning";
-    size?: "sm" | "default" | "lg" | "xl";
+    variant?: keyof typeof CARD_VARIANTS;
+    size?: keyof typeof CARD_SIZES;
     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"> {
+    /** Each item's `color` should be a complete Tailwind class (e.g. "text-green-600") */
     data: Array<{
         label: string;
         value: ReactNode;
@@ -362,7 +458,7 @@ interface ConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Trigger element that opens the dialog */
-    trigger?: React$1.ReactElement;
+    trigger?: React.ReactElement;
     title?: string;
     description?: string;
     confirmText?: string;
@@ -453,6 +549,230 @@ interface ErrorStateInlineProps {
  */
 declare function ErrorStateInline({ error, onRetry, className, icon, }: ErrorStateInlineProps): react_jsx_runtime.JSX.Element;
 
+interface EmptyStateProps {
+    /** Title text */
+    title?: string;
+    /** Description / subtitle */
+    description?: string;
+    /** Icon to display — pass a LucideIcon or ReactNode */
+    icon?: LucideIcon | React.ReactNode;
+    /** Primary action button */
+    action?: React.ReactNode;
+    /** Secondary action button */
+    secondaryAction?: React.ReactNode;
+    /** Visual variant */
+    variant?: "default" | "compact" | "card";
+    /** Additional className */
+    className?: string;
+    /** Children rendered below the description */
+    children?: React.ReactNode;
+}
+/**
+ * EmptyState — Shown when content is empty, search has no results, etc.
+ *
+ * @example Default
+ * ```tsx
+ * <EmptyState
+ *   title="No projects yet"
+ *   description="Create your first project to get started."
+ *   icon={FolderPlus}
+ *   action={<Button>Create Project</Button>}
+ * />
+ * ```
+ *
+ * @example Compact (inline)
+ * ```tsx
+ * <EmptyState variant="compact" title="No items" />
+ * ```
+ *
+ * @example With preset
+ * ```tsx
+ * <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
+ * ```
+ */
+declare function EmptyState({ title, description, icon: IconProp, action, secondaryAction, variant, className, children, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+type EmptyStatePresetProps = Omit<EmptyStateProps, "icon" | "title" | "description"> & {
+    title?: string;
+    description?: string;
+};
+/** No search results — with search icon */
+declare function EmptyStateNoResults(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
+/** No data — with inbox icon */
+declare function EmptyStateNoData(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
+/** Not found — with file-x icon */
+declare function EmptyStateNotFound(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingStateProps {
+    /** Loading message text */
+    text?: string;
+    /** Visual variant */
+    variant?: "default" | "inline" | "overlay" | "minimal";
+    /** Spinner size */
+    size?: "sm" | "md" | "lg";
+    /** Additional className */
+    className?: string;
+}
+interface LoadingOverlayProps {
+    /** Loading message text */
+    text?: string;
+    /** Whether the overlay is visible */
+    visible?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Children to render behind the overlay */
+    children?: React.ReactNode;
+}
+/**
+ * LoadingState — Versatile loading indicator
+ *
+ * @example Default (centered, full area)
+ * ```tsx
+ * <LoadingState text="Loading projects..." />
+ * ```
+ *
+ * @example Inline (in a row)
+ * ```tsx
+ * <LoadingState variant="inline" text="Saving..." size="sm" />
+ * ```
+ *
+ * @example Minimal (just the spinner)
+ * ```tsx
+ * <LoadingState variant="minimal" />
+ * ```
+ */
+declare function LoadingState({ text, variant, size, className, }: LoadingStateProps): react_jsx_runtime.JSX.Element;
+/**
+ * LoadingOverlay — Renders children with an overlay spinner on top
+ *
+ * @example
+ * ```tsx
+ * <LoadingOverlay visible={isSaving} text="Saving changes...">
+ *   <MyFormContent />
+ * </LoadingOverlay>
+ * ```
+ */
+declare function LoadingOverlay({ text, visible, className, children, }: LoadingOverlayProps): react_jsx_runtime.JSX.Element;
+
+type StatusBannerVariant = "info" | "warning" | "success" | "error";
+interface StatusBannerProps {
+    /** The banner variant/severity */
+    variant?: StatusBannerVariant;
+    /** Main message text or node */
+    children: React.ReactNode;
+    /** Optional custom icon */
+    icon?: LucideIcon;
+    /** Whether the banner can be dismissed */
+    dismissible?: boolean;
+    /** Callback when dismissed */
+    onDismiss?: () => void;
+    /** Optional action element (e.g. a link or button) */
+    action?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * StatusBanner — A persistent info/warning/success/error banner.
+ *
+ * @example
+ * ```tsx
+ * <StatusBanner variant="warning" dismissible>
+ *   Your trial expires in 3 days. <a href="/pricing">Upgrade now</a>
+ * </StatusBanner>
+ *
+ * <StatusBanner variant="success" action={<Button size="sm">View</Button>}>
+ *   Your project was deployed successfully.
+ * </StatusBanner>
+ * ```
+ */
+declare function StatusBanner({ variant, children, icon: CustomIcon, dismissible, onDismiss, action, className, }: StatusBannerProps): react_jsx_runtime.JSX.Element | null;
+
+interface StepperStep {
+    /** Step label */
+    label: string;
+    /** Optional description shown below the label */
+    description?: string;
+    /** Optional icon for the step (replaces the number) */
+    icon?: React.ReactNode;
+    /** Whether this step is optional */
+    optional?: boolean;
+}
+interface StepperProps {
+    /** Array of step definitions */
+    steps: (string | StepperStep)[];
+    /** Active step index (0-based) */
+    currentStep: number;
+    /** Variant */
+    variant?: "default" | "compact";
+    /** Orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Additional className */
+    className?: string;
+    /** Callback when a completed step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Children (StepContent panels) */
+    children?: React.ReactNode;
+}
+interface StepContentProps {
+    /** Step index this content belongs to (0-based) */
+    step: number;
+    /** Currently active step */
+    currentStep: number;
+    /** Children to render */
+    children: React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Keep mounted when inactive (useful for forms) */
+    keepMounted?: boolean;
+}
+/**
+ * Stepper — Multi-step progress indicator
+ *
+ * Features:
+ * - Horizontal layout: circles in a row with labels below, proper connectors
+ * - Vertical layout: circles on the left with labels to the right
+ * - Compact variant for tight spaces
+ * - Handles many steps gracefully without scrollbars
+ * - Clickable completed steps for navigation
+ * - Accessible: role="list", aria-current="step"
+ *
+ * @example Basic
+ * ```tsx
+ * const [step, setStep] = useState(0);
+ *
+ * <Stepper steps={["Details", "Config", "Review"]} currentStep={step}>
+ *   <StepContent step={0} currentStep={step}>
+ *     <DetailsForm onNext={() => setStep(1)} />
+ *   </StepContent>
+ * </Stepper>
+ * ```
+ *
+ * @example With step objects
+ * ```tsx
+ * <Stepper
+ *   steps={[
+ *     { label: "Account", description: "Set up your account" },
+ *     { label: "Profile", description: "Add your details", optional: true },
+ *     { label: "Complete", description: "Review and submit" },
+ *   ]}
+ *   currentStep={1}
+ *   onStepClick={(i) => setStep(i)}
+ * />
+ * ```
+ */
+declare function Stepper({ steps, currentStep, variant, orientation, className, onStepClick, children, ...props }: StepperProps): react_jsx_runtime.JSX.Element;
+/**
+ * StepContent — Renders content for a specific step.
+ * Only visible when `step === currentStep`.
+ *
+ * @example
+ * ```tsx
+ * <StepContent step={0} currentStep={current}>
+ *   <MyForm />
+ * </StepContent>
+ * ```
+ */
+declare function StepContent({ step, currentStep, children, className, keepMounted, }: StepContentProps): react_jsx_runtime.JSX.Element | null;
+
 interface CopyButtonProps {
     value: string;
     className?: string;
@@ -510,16 +830,20 @@ interface DataTableProps<TData, TValue> {
     enableRowSelection?: boolean;
     onRowSelectionChange?: (selectedRows: TData[]) => void;
     className?: string;
+    /** Custom loading state renderer */
+    loadingState?: React__default.ReactNode;
+    /** Custom empty state renderer */
+    emptyState?: React__default.ReactNode;
 }
-declare function DataTable<TData, TValue>({ columns, data, isLoading, pagination, enableSorting, enableRowSelection, onRowSelectionChange, className, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, isLoading, pagination, enableSorting, enableRowSelection, onRowSelectionChange, className, loadingState: customLoadingState, emptyState: customEmptyState, }: 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]";
+    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 {
@@ -542,7 +866,7 @@ interface DialogWrapperProps {
 }
 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;
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     onCancel?: () => void;
     submitText?: string;
     cancelText?: string;
@@ -552,8 +876,8 @@ interface FormDialogProps extends Omit<DialogWrapperProps, "footer"> {
 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;
+    trigger: React.ReactNode;
+    children: React.ReactNode;
     align?: "start" | "center" | "end";
     side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
@@ -566,7 +890,7 @@ interface ActionDropdownItem {
     key?: string;
     label?: string | (() => string);
     icon?: LucideIcon;
-    onClick?: (e: React$1.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
     disabled?: boolean;
     hidden?: boolean;
     variant?: "default" | "destructive";
@@ -640,36 +964,68 @@ 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;
+interface IconItemMediaProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconItemMediaVariants> {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
 }
-declare const IconItemMedia: React$1.NamedExoticComponent<IconItemMediaProps>;
+declare const IconItemMedia: React.NamedExoticComponent<IconItemMediaProps>;
 interface FeatureItemProps {
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
     iconSize?: "sm" | "md" | "lg" | "xl";
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
     size?: "sm" | "default" | "lg";
     layout?: "vertical" | "horizontal";
-    titleAs?: React$1.ElementType;
+    titleAs?: React.ElementType;
     className?: string;
     titleClassName?: string;
     descriptionClassName?: string;
     iconClassName?: string;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
+}
+declare const FeatureItem: React.NamedExoticComponent<FeatureItemProps>;
+interface FeatureListItem {
+    id?: string;
+    icon?: React.ReactNode;
+    iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
+    iconSize?: "sm" | "md" | "lg" | "xl";
+    title: string;
+    description?: string;
+}
+interface FeatureListProps {
+    items?: FeatureListItem[];
+    columns?: 2 | 3 | 4;
+    variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
+    iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
+    iconSize?: "sm" | "md" | "lg" | "xl";
+    layout?: "vertical" | "horizontal";
+    className?: string;
+    itemClassName?: string;
+}
+declare function FeatureList({ items, columns, variant, iconBg, iconSize, layout, className, itemClassName, ...props }: FeatureListProps): react_jsx_runtime.JSX.Element;
+declare namespace FeatureList {
+    var displayName: string;
 }
-declare const FeatureItem: React$1.NamedExoticComponent<FeatureItemProps>;
 
 declare function ModeToggle(): react_jsx_runtime.JSX.Element;
 
-interface PhoneInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+interface PhoneCountry {
+    code: string;
+    name: string;
+    dialCode: string;
+    flag: string;
+}
+declare const DEFAULT_COUNTRIES: PhoneCountry[];
+interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     onChange?: (value: string) => void;
     defaultCountry?: string;
+    /** Custom list of countries to show. Defaults to a built-in list of ~50 countries. */
+    countries?: PhoneCountry[];
+    ref?: React.Ref<HTMLInputElement>;
 }
-declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare function PhoneInput({ className, onChange, value, defaultCountry, countries, disabled, placeholder, ref, ...props }: PhoneInputProps): react_jsx_runtime.JSX.Element;
 
 interface PillProps {
     variant?: "default" | "secondary" | "destructive" | "outline";
@@ -774,7 +1130,7 @@ interface SheetWrapperProps {
     hideCloseButton?: boolean;
     disableContentPadding?: boolean;
 }
-declare const SheetWrapper: React$1.NamedExoticComponent<SheetWrapperProps>;
+declare const SheetWrapper: React.NamedExoticComponent<SheetWrapperProps>;
 interface FormSheetProps extends Omit<SheetWrapperProps, "footer"> {
     onSubmit?: () => void;
     onCancel?: () => void;
@@ -784,7 +1140,7 @@ interface FormSheetProps extends Omit<SheetWrapperProps, "footer"> {
     submitLoading?: boolean;
     formId?: string;
 }
-declare const FormSheet: React$1.NamedExoticComponent<FormSheetProps>;
+declare const FormSheet: React.NamedExoticComponent<FormSheetProps>;
 interface ConfirmSheetProps extends Omit<SheetWrapperProps, "footer"> {
     onConfirm?: () => void;
     onCancel?: () => void;
@@ -794,7 +1150,7 @@ interface ConfirmSheetProps extends Omit<SheetWrapperProps, "footer"> {
     confirmDisabled?: boolean;
     confirmLoading?: boolean;
 }
-declare const ConfirmSheet: React$1.NamedExoticComponent<ConfirmSheetProps>;
+declare const ConfirmSheet: React.NamedExoticComponent<ConfirmSheetProps>;
 
 interface TableWrapperColumn {
     key?: string;
@@ -842,7 +1198,7 @@ interface TabsWrapperProps {
     withScrollArea?: boolean;
     scrollAreaClassName?: string;
 }
-declare const TabsWrapper: React$1.NamedExoticComponent<TabsWrapperProps>;
+declare const TabsWrapper: React.NamedExoticComponent<TabsWrapperProps>;
 interface TabTriggerProps {
     value: string;
     children: ReactNode;
@@ -852,7 +1208,7 @@ interface TabTriggerProps {
     hideTextOnMobile?: boolean;
     disabled?: boolean;
 }
-declare const TabTrigger: React$1.NamedExoticComponent<TabTriggerProps>;
+declare const TabTrigger: React.NamedExoticComponent<TabTriggerProps>;
 interface TabContentProps {
     value: string;
     children: ReactNode;
@@ -862,7 +1218,7 @@ interface TabContentProps {
     padding?: boolean;
     keepMounted?: boolean;
 }
-declare const TabContent: React$1.NamedExoticComponent<TabContentProps>;
+declare const TabContent: React.NamedExoticComponent<TabContentProps>;
 interface DynamicTabItem {
     value: string;
     label: ReactNode;
@@ -884,7 +1240,7 @@ interface DynamicTabsProps {
     contentClassName?: string;
     scrollable?: boolean;
 }
-declare const DynamicTabs: React$1.NamedExoticComponent<DynamicTabsProps>;
+declare const DynamicTabs: React.NamedExoticComponent<DynamicTabsProps>;
 
 interface TooltipWrapperProps {
     children: ReactNode;
@@ -943,10 +1299,6 @@ interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
     labelClassName?: string;
     inputClassName?: string;
     inputGroupClassName?: string;
-    IconLeft?: ReactNode;
-    IconRight?: ReactNode;
-    AddonLeft?: ReactNode;
-    AddonRight?: ReactNode;
     iconLeft?: ReactNode;
     iconRight?: ReactNode;
     addonLeft?: ReactNode;
@@ -991,12 +1343,12 @@ interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
  * <FormInput
  *   control={form.control}
  *   name="search"
- *   IconLeft={<SearchIcon />}
+ *   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;
+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, 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>;
@@ -1016,14 +1368,10 @@ interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
     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;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    addonLeft?: React.ReactNode;
+    addonRight?: React.ReactNode;
     minLength?: number;
     maxLength?: number;
     autoComplete?: string;
@@ -1043,16 +1391,16 @@ interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
  * />
  * ```
  */
-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;
+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, rows, minLength, maxLength, autoComplete, autoFocus, }: FormTextareaProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 
-interface SelectOption$1 {
+interface SelectOption {
     value: string | number;
     label: string;
     disabled?: boolean;
 }
 interface SelectOptionGroup {
     label: string;
-    items: SelectOption$1[];
+    items: SelectOption[];
 }
 interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
     control?: Control<TFieldValues>;
@@ -1063,9 +1411,9 @@ interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
     helperText?: string;
     required?: boolean;
     disabled?: boolean;
-    items?: SelectOption$1[];
+    items?: SelectOption[];
     groups?: SelectOptionGroup[];
-    allOption?: SelectOption$1;
+    allOption?: SelectOption;
     valueKey?: string;
     displayKey?: string;
     value?: string | number;
@@ -1075,7 +1423,7 @@ interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
     triggerClassName?: string;
     contentClassName?: string;
     itemClassName?: string;
-    Icon?: React$1.ComponentType<{
+    Icon?: React.ComponentType<{
         className?: string;
     }>;
     defaultOpen?: boolean;
@@ -1247,9 +1595,9 @@ interface SwitchInputProps<TFieldValues extends FieldValues = FieldValues> {
 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;
+interface DateInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
     label?: string;
     placeholder?: string;
     description?: string;
@@ -1264,7 +1612,7 @@ interface DateInputProps {
     className?: string;
     labelClassName?: string;
     inputClassName?: string;
-    Icon?: React$1.ComponentType<{
+    Icon?: React.ComponentType<{
         className?: string;
     }>;
     allowClear?: boolean;
@@ -1283,7 +1631,7 @@ interface DateInputProps {
  * />
  * ```
  */
-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;
+declare function DateInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, placeholder, required, disabled, className, labelClassName, inputClassName, minDate, maxDate, onValueChange, value: propValue, onChange: propOnChange, Icon, allowClear, }: DateInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 
 interface TagInputProps {
     control?: Control<FieldValues>;
@@ -1332,9 +1680,9 @@ interface TagChoiceItem {
     label: string;
     disabled?: boolean;
 }
-interface TagChoiceInputProps {
-    control?: Control<FieldValues>;
-    name?: string;
+interface TagChoiceInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
     label?: string;
     placeholder?: string;
     description?: string;
@@ -1362,7 +1710,7 @@ interface TagChoiceInputProps {
  * />
  * ```
  */
-declare function TagChoiceInput({ control, name, label, description, helperText, placeholder, required, disabled, className, items, value: propValue, onValueChange, }: TagChoiceInputProps): react_jsx_runtime.JSX.Element;
+declare function TagChoiceInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, placeholder, required, disabled, className, items, value: propValue, onValueChange, }: TagChoiceInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 declare namespace TagChoiceInput {
     var displayName: string;
 }
@@ -1372,12 +1720,11 @@ interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
-interface ComboboxInputProps {
-    control?: Control<FieldValues>;
-    name: string;
+interface ComboboxInputProps<TFieldValues extends FieldValues = FieldValues> {
+    control?: Control<TFieldValues>;
+    name: FieldPath<TFieldValues> | string;
     label?: string;
     placeholder?: string;
-    searchPlaceholder?: string;
     emptyText?: string;
     description?: string;
     helperText?: string;
@@ -1389,14 +1736,21 @@ interface ComboboxInputProps {
     onValueChange?: (value: string) => void;
     className?: string;
     labelClassName?: string;
-    triggerClassName?: string;
+    inputClassName?: string;
     renderOption?: (option: ComboboxOption) => ReactNode;
 }
 /**
- * ComboboxInput - Searchable select with react-hook-form integration
+ * ComboboxInput - Searchable select with react-hook-form integration using Base UI
+ *
+ * Features:
+ * - Works with react-hook-form Controller
+ * - Supports Base UI Combobox primitives
+ * - Custom option rendering
+ * - Can be used standalone without form
  *
  * @example
  * ```tsx
+ * // With react-hook-form
  * <ComboboxInput
  *   control={form.control}
  *   name="country"
@@ -1405,11 +1759,20 @@ interface ComboboxInputProps {
  *     { value: "us", label: "United States" },
  *     { value: "uk", label: "United Kingdom" },
  *   ]}
- *   searchPlaceholder="Search countries..."
+ *   placeholder="Select a country..."
+ * />
+ *
+ * // Standalone
+ * <ComboboxInput
+ *   name="country"
+ *   label="Country"
+ *   items={items}
+ *   value={selectedCountry}
+ *   onValueChange={setSelectedCountry}
  * />
  * ```
  */
-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;
+declare function ComboboxInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, placeholder, emptyText, description, helperText, required, disabled, items, className, labelClassName, inputClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange, }: ComboboxInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 
 interface SlugFieldProps {
     control?: Control<FieldValues>;
@@ -1433,11 +1796,12 @@ interface SlugFieldProps {
     labelClassName?: string;
     inputClassName?: string;
     error?: FieldError;
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * Generates a URL-friendly slug from a string
  */
-declare function generateSlug$1(text: string | undefined): string;
+declare function generateSlug(text: string | undefined): string;
 /**
  * SlugField - URL slug input with auto-generation
  *
@@ -1453,7 +1817,7 @@ declare function generateSlug$1(text: string | undefined): string;
  * />
  * ```
  */
-declare const SlugField: React$1.ForwardRefExoticComponent<SlugFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+declare function SlugField({ control, name, description, helperText, required, label, placeholder, disabled, sourceValue, onGenerate, className, inputClassName, labelClassName, onValueChange, value, onChange, error, ref, }: SlugFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FormErrorSummaryProps {
     /** Form errors object from react-hook-form */
@@ -1514,11 +1878,11 @@ interface DateRangeValue {
     from?: Date | string;
     to?: Date | string;
 }
-interface DateRangeInputProps {
+interface DateRangeInputProps<TFieldValues extends FieldValues = FieldValues> {
     /** React Hook Form control */
-    control?: Control<any>;
+    control?: Control<TFieldValues>;
     /** Field name for form registration */
-    name?: string;
+    name: FieldPath<TFieldValues> | string;
     /** Field label */
     label?: string;
     /** Description text below the input */
@@ -1578,399 +1942,7 @@ interface DateRangeInputProps {
  * />
  * ```
  */
-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>>;
+declare function DateRangeInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, placeholder, required, disabled, className, labelClassName, buttonClassName, calendarClassName, minDate, maxDate, disabledDates, disabledDays, onValueChange, validateDateRange, clearErrors, descriptionComponent, allowClear, showBadge, Icon, transform, }: DateRangeInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string;
@@ -2043,4 +2015,127 @@ interface CalendarWithDetailProps<T extends CalendarEvent> extends Omit<EventCal
 }
 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 };
+/** Available entrance animation types */
+type Animation = "fadeIn" | "fadeInUp" | "scaleIn" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
+/** Slide direction for SlideIn component */
+type SlideDirection = "left" | "right" | "up" | "down";
+/** Options for the useInView hook */
+interface UseInViewOptions {
+    /** IntersectionObserver rootMargin (default: "0px") */
+    margin?: string;
+    /** Trigger only once (default: true) */
+    once?: boolean;
+    /** Enable/disable observation (default: true) */
+    enabled?: boolean;
+}
+/** Shared base props for animation components */
+interface AnimateBaseProps {
+    children?: ReactNode;
+    /** Delay in ms before animation starts */
+    delay?: number;
+    /** Animation duration in ms */
+    duration?: number;
+    /** Only animate when element scrolls into viewport */
+    inView?: boolean;
+    /** IntersectionObserver rootMargin for inView trigger */
+    inViewMargin?: string;
+    /** Fire animation only once (default: true) */
+    once?: boolean;
+    /** Disable animation entirely — renders children immediately */
+    disabled?: boolean;
+    className?: string;
+    /** HTML element to render as (default: "div") */
+    as?: ElementType;
+}
+interface SlideInProps extends AnimateBaseProps {
+    /** Direction to slide from */
+    direction?: SlideDirection;
+}
+interface StaggerChildrenProps {
+    children?: ReactNode;
+    /** Animation type for each child */
+    animation?: Animation;
+    /** Delay between each child in ms */
+    staggerDelay?: number;
+    /** Initial delay before first child animates */
+    initialDelay?: number;
+    /** Duration per child animation */
+    duration?: number;
+    inView?: boolean;
+    inViewMargin?: string;
+    once?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Extra classes applied to each child wrapper div */
+    childClassName?: string;
+    as?: ElementType;
+}
+interface AnimatedTextProps {
+    /** The text string to animate */
+    text: string;
+    as?: ElementType;
+    animation?: Animation;
+    /** Split text by word or character */
+    splitBy?: "word" | "character";
+    /** Delay between each segment in ms */
+    staggerDelay?: number;
+    delay?: number;
+    duration?: number;
+    inView?: boolean;
+    inViewMargin?: string;
+    once?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Extra classes on each animated text segment */
+    segmentClassName?: string;
+}
+interface AnimatedCounterProps {
+    /** Start value (default: 0) */
+    from?: number;
+    /** Target value to count to */
+    to: number;
+    /** Count-up duration in ms (default: 2000) */
+    duration?: number;
+    /** Delay before counting starts in ms */
+    delay?: number;
+    /** Intl.NumberFormat locale for number formatting (e.g. "en-US") */
+    locale?: string;
+    /** Text rendered before the number */
+    prefix?: string;
+    /** Text rendered after the number */
+    suffix?: string;
+    /** Decimal places (default: 0) */
+    decimals?: number;
+    /** Custom number formatter — overrides locale/decimals */
+    formatter?: (value: number) => string;
+    inView?: boolean;
+    inViewMargin?: string;
+    once?: boolean;
+    disabled?: boolean;
+    className?: string;
+    as?: ElementType;
+}
+/**
+ * useInView — observe when an element enters the viewport.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * const isInView = useInView(ref, { once: true, margin: "-100px" });
+ * return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
+ * ```
+ */
+declare function useInView(ref: RefObject<Element | null>, options?: UseInViewOptions): boolean;
+/** Fade in with opacity transition */
+declare function FadeIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
+/** Fade in with upward motion */
+declare function FadeInUp(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
+/** Scale up into view */
+declare function ScaleIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
+/** Slide in from a specified direction */
+declare function SlideIn({ direction, ...props }: SlideInProps): react_jsx_runtime.JSX.Element;
+declare function StaggerChildren({ children, animation, staggerDelay, initialDelay, duration, inView, inViewMargin, once, disabled, className, childClassName, as, }: StaggerChildrenProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function AnimatedText({ text, as, animation, splitBy, staggerDelay, delay, duration, inView, inViewMargin, once, disabled, className, segmentClassName, }: AnimatedTextProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function AnimatedCounter({ from, to, duration, delay, locale, prefix, suffix, decimals, formatter, inView, inViewMargin, once, disabled, className, as, }: AnimatedCounterProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, 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, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, 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, EmptyState, EmptyStateNoData, EmptyStateNoResults, EmptyStateNotFound, type EmptyStatePresetProps, type EmptyStateProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, EventCalendar, type EventCalendarProps, FacebookIcon, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, 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, LoadingOverlay, type LoadingOverlayProps, LoadingState, type LoadingStateProps, ModeToggle, PaginationInfo, type PaginationInfoProps, type PhoneCountry, 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, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SelectInput, type SelectInputProps, type SelectOption, type SelectOptionGroup, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, SkeletonCard, type SkeletonCardProps, SkeletonGrid, type SkeletonGridProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, type SlideDirection, SlideIn, type SlideInProps, SlugField, type SlugFieldProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, SwitchInput, type SwitchInputProps, TTL, 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 UseCopyToClipboardReturn, type UseInViewOptions, WhatsAppIcon, clearStorage, generateSlug, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsMobile, useLocalStorage, useMediaQuery, useScrollDetection };