@geckoui/geckoui 0.0.1-beta0

package/dist/index.d.mts

@@ -0,0 +1,4067 @@
+import * as react from 'react';
+import react__default, { RefObject, SVGProps, ReactNode, FC, InputHTMLAttributes, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor } from 'react';
+import * as unified from 'unified';
+import * as hast from 'hast';
+import * as mdast from 'mdast';
+import { ControllerProps, Control, FieldValues, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { Placement, Strategy, useFloating } from '@floating-ui/react';
+import { TextareaAutosizeProps } from 'react-textarea-autosize';
+import * as _headlessui_react from '@headlessui/react';
+import { SwitchProps as SwitchProps$1, MenuItemsProps as MenuItemsProps$1, MenuButtonProps as MenuButtonProps$1, MenuItemProps as MenuItemProps$1 } from '@headlessui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToasterProps } from 'sonner';
+export { toast } from 'sonner';
+import { MermaidConfig } from 'mermaid';
+
+/**
+ * Reuseable hook to detect clicks outside of a ref element that is passed as an argument
+ * @param handler - Function to be called when a click is detected outside of the component
+ * @param refs - Ref objects to be checked for clicks outside
+ * @returns void
+ * @example
+ *
+ * ```js
+ * const ref = useRef(null);
+ *
+ * useClickOutside(() => {
+ *   console.log('Clicked outside');
+ * }, [ref]); // You can pass multiple refs
+ *
+ * return (
+ *  <div ref={ref}>
+ *     <h1>Click outside</h1>
+ *  </div>
+ * );
+ * ```
+ */
+declare const useClickOutside: <T extends HTMLElement>(handler?: (event: Event | MouseEvent | TouchEvent) => void, refs?: RefObject<T | null>[]) => void;
+
+interface FilePickerFile extends File {
+    /** Preview URL of the file */
+    preview: string;
+    /**
+     * Path of the file in the file system
+     * These fields will be derived from the `webkitRelativePath` property if it exists
+     * if not it will be generated based on `directory` and `name` properties from directory picker
+     * */
+    path: string;
+    /**
+     * Name of the file in the file system
+     * Due to the fact `File.name` is read-only, we provide a way to edit the name of the file
+     * in case you need to rename the file before uploading it
+     * */
+    editableName: string;
+}
+type FileSize = number | string;
+interface OpenFilePickerOptions {
+    /**
+     * If `directory` is false, whether to allow multiple files to be selected
+     *
+     * Default: true
+     * */
+    multiple?: boolean;
+    /**
+     * Open directory picker instead of file picker
+     * */
+    directory?: boolean;
+    /**
+     * Callback function that is called when the file picker changes
+     * */
+    onChangeStart?: () => void;
+}
+interface UseFilePickerOptions {
+    /**
+     * File types that can be accepted by the file picker
+     *
+     * Default: *
+     * */
+    accept?: string;
+    /**
+     * Function to transform files before returning them
+     * */
+    transform?: (files: FilePickerFile[]) => Promise<FilePickerFile[]> | FilePickerFile[];
+    /**
+     * Whether to keep old files when the file picker changes
+     * If true, the file picker will keep old files when new files are selected
+     * And return all files selected so far
+     *
+     * Default: false
+     * */
+    keepOldFiles?: boolean;
+    /**
+     * Whether to remove duplicated files if `keepOldFiles` is true
+     * If true, the file picker will remove duplicated files
+     *
+     * Default: false
+     * */
+    removeDuplicates?: boolean;
+    /**
+     * Callback function that is called when the file picker changes
+     * */
+    onChange?: (
+    /** All files selected so far if `keepOldFiles` is true */
+    files: FilePickerFile[], 
+    /** New files that are selected if */
+    newFiles: FilePickerFile[]) => Promise<void> | void;
+    /**
+     * Callback function that is called when the file picker starts
+     * */
+    onStart?: () => void;
+    /**
+     * Callback function that is called when the file picker encounters an error
+     * */
+    onError?: (error: Error) => void;
+    files?: FilePickerFile[];
+    setFiles?: (files: FilePickerFile[]) => void;
+}
+type OpenFilePickerFn = (options?: Omit<OpenFilePickerOptions, "onChangeStart">) => Promise<FilePickerFile[] | undefined>;
+interface UseFilePickerReturn<T extends HTMLElement> {
+    /**
+     * Ref to the element that should be used as the dropzone
+     * */
+    dropzoneRef: RefObject<T | null>;
+    /** Whether the user is currently dragging files over the dropzone */
+    dragging: boolean;
+    /** Whether the dropzone is currently processing files */
+    loading: boolean;
+    /** Function to open the file picker */
+    openFilePicker: OpenFilePickerFn;
+    /**
+     * Files selected so far
+     * */
+    files: FilePickerFile[];
+}
+
+type DataAttributeProps = Record<`data-${string}`, string>;
+
+/**
+ * A hook for handling file selection with drag-and-drop, file picker, and directory selection support.
+ *
+ * Selected files are enhanced with:
+ * - `preview`: Object URL for displaying file content
+ * - `path`: File system path (from directory picker)
+ * - `editableName`: Mutable name property
+ *
+ * @example
+ * ```tsx
+ * const ImageUploader = () => {
+ *   const [files, setFiles] = useState<FilePickerFile[]>([]);
+ *   const { dropzoneRef, dragging, loading, openFilePicker } = useFilePicker({
+ *     accept: "image/*",
+ *     files,
+ *     setFiles,
+ *     keepOldFiles: true,
+ *     onChange: (allFiles, newFiles) => console.log('Added:', newFiles.length),
+ *   });
+ *
+ *   const handleRemove = (preview: string) => {
+ *     setFiles(files.filter((f) => f.preview !== preview));
+ *   };
+ *
+ *   return (
+ *     <div className="flex flex-col gap-3">
+ *       <div
+ *         ref={dropzoneRef}
+ *         onClick={() => openFilePicker()}
+ *         className={`flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed p-4 ${
+ *           dragging ? 'border-primary-400 bg-primary-50' : 'border-gray-300'
+ *         }`}
+ *       >
+ *         <span>{dragging ? 'Drop images here' : 'Click to upload or drag and drop'}</span>
+ *         {loading && <Spinner />}
+ *       </div>
+ *
+ *       {!!files.length && (
+ *         <div className="grid grid-cols-4 gap-2">
+ *           {files.map((file) => (
+ *             <div key={file.preview} className="group relative aspect-square">
+ *               <img src={file.preview} className="h-full w-full rounded-lg object-cover" />
+ *               <button
+ *                 onClick={() => handleRemove(file.preview)}
+ *                 className="absolute -right-1 -top-1 rounded-full bg-red-500 p-1 text-white opacity-0 group-hover:opacity-100"
+ *               >
+ *                 ✕
+ *               </button>
+ *             </div>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * */
+declare function useFilePicker<T extends HTMLElement>(options?: UseFilePickerOptions): UseFilePickerReturn<T>;
+
+/**
+ * Prevents the default action of the function passed to it.
+ * It is useful when you want to prevent the default action of a function
+ * You can simply pass the function to `attachPreventDefault` and it will prevent running the function
+ * if you call `preventDefault` before it.
+ * Make sure you also expose the `preventDefault` function to the user so they can call it when needed.
+ *
+ * @example
+ * ```js
+ * const { preventDefault, attachPreventDefault } = usePreventDefault();
+ *
+ * const onChange = () => {
+ *   props.onChange({ preventDefault }); -> User can access preventDefault function
+ *
+ *   // You can attach whatever function you want to prevent here
+ *   attachPreventDefault(() => {
+ *    // Do something
+ *    console.log("Prevented");
+ *   });
+ * };
+ *
+ * <MyComponent onChange={(e) => {
+ *    e.preventDefault();
+ *    // console.log("Prevented"); will not be called
+ *    // because the function is attached to `attachPreventDefault`
+ * }} />
+ * ```
+ * */
+declare const usePreventDefault: () => {
+    preventDefault: () => boolean;
+    attachPreventDefault: (fn: () => Promise<void> | void) => Promise<void>;
+};
+
+/**
+ * Reuseable that listens to the `Escape` key press event on the document and calls the callback function when the event is triggered.
+ * This hooks won't trigger the callback if the focus is on an input or textarea element.
+ * This hooks will also take care of removing the event listener when the component is unmounted.
+ *
+ * Usage:
+ * ```js
+ * const MyDrawer = () => {
+ *  const closeDrawer = () => console.log("Drawer closed");
+ *
+ *  useDocumentEscListener(closeDrawer);
+ * }
+ * ```
+ * */
+declare const useEscListener: (callback?: () => void) => void;
+
+type MermaidDiagramBaseProps = Omit<SVGProps<SVGSVGElement>, "id" | "viewBox" | "dangerouslySetInnerHTML">;
+interface MermaidDiagramProps extends MermaidDiagramBaseProps {
+    /**
+     * Placeholder component to show when the diagram is loading.
+     * */
+    placeholder?: ReactNode | FC;
+    /**
+     * Error component to show when the diagram fails to render.
+     * If not provided, a simple error message will be shown.
+     *
+     * ```js
+     * <MermaidDiagram error={({ message }) => ...}>
+     *  ...
+     * </MermaidDiagram>
+     * ```
+     * */
+    renderError?: ReactNode | FC<{
+        message: string;
+    }>;
+    /**
+     * Mermaid template to render the diagram.
+     * */
+    children: string;
+}
+
+/**
+ * useMermaidDiagram is a hook that takes a mermaid template and returns a React component that renders the diagram.
+ * It also handle `loading` and `error` states. You rarely need to use this hook directly, use `MermaidDiagram` component instead.
+ *
+ * @example
+ *
+ * ```js
+ * const template = `
+ * graph TD;
+ *    A-->B;
+ *    A-->C;
+ *    B-->D;
+ *    C-->D;
+ * `;
+ *
+ * const { loading, error, Diagram } = useMermaidDiagram(template);
+ *
+ * if (loading) return <p>Loading...</p>;
+ *
+ * if (error) return <p>Error: {error}</p>;
+ *
+ * return <Diagram />;
+ * ```
+ * */
+declare const useMermaidDiagram: (template: string) => {
+    loading: boolean;
+    error: string;
+    Diagram: react.FC<MermaidDiagramBaseProps> | null;
+};
+
+interface MarkdownProcessorOptions {
+    /**
+     * Enable HTML sanitization to prevent XSS attacks.
+     * Only set to false when you 100% trust the source.
+     * @default true
+     */
+    sanitize?: boolean;
+}
+declare const createMarkdownProcessor: (options?: MarkdownProcessorOptions) => unified.Processor<mdast.Root, mdast.Root, hast.Root, hast.Root, string>;
+
+interface UseMarkdownOptions extends MarkdownProcessorOptions {
+    /**
+     * Render the markdown asynchronously for large markdown content.
+     * Not intended for network requests - use for processing large markdown strings.
+     * @default false
+     * */
+    async?: boolean;
+}
+declare const useMarkdown: (str: string, options?: UseMarkdownOptions) => {
+    content: string;
+    error?: undefined;
+    loading?: undefined;
+} | {
+    error: string;
+    content?: undefined;
+    loading?: undefined;
+} | {
+    loading: boolean;
+    error: string;
+    content: string;
+};
+
+interface RHFBaseProps {
+    /**
+     * Name of the input field.(required)
+     * This will injected into the RHF Controller.
+     * */
+    name: string;
+    rules?: ControllerProps["rules"];
+    /**
+     * React Hook Form control object.
+     * By default it will use the useFormContext() hook to get the control object.
+     * In case you want to use a custom control object, you can pass it here.
+     *
+     * Eg. You have multiple `FormProvider` in your app and you want to use a specific control object.
+     * */
+    control?: Control<any>;
+}
+interface RHFRenderArgs<T extends FieldValues> {
+    field: ControllerRenderProps<T>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<T>;
+}
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /**
+     * If true, the checkbox will be checked with a IndeterminateIcon.
+     * */
+    partial?: boolean;
+}
+
+/**
+ * A customizable checkbox component with support for indeterminate state.
+ *
+ * Renders a checkbox with custom styling and icons. By default, displays a check icon
+ * when checked. Use the `partial` prop to display an indeterminate icon, useful for
+ * "select all" scenarios where only some items are selected.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox
+ *   checked={checked}
+ *   onChange={(e) => setChecked(e.target.checked)}
+ * />
+ *
+ * // Indeterminate state
+ * <Checkbox
+ *   checked={someSelected}
+ *   partial={someSelected && !allSelected}
+ *   onChange={handleSelectAll}
+ * />
+ *
+ * // With label
+ * <label className="flex items-center gap-2">
+ *   <Checkbox
+ *     checked={agreed}
+ *     onChange={(e) => setAgreed(e.target.checked)}
+ *   />
+ *   <span>I agree to the terms</span>
+ * </label>
+ *
+ * // Disabled state
+ * <Checkbox checked disabled />
+ * ```
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+interface BaseDateInputProps {
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    onSubmit?: () => void;
+    onStateUpdate?: (state: {
+        day: string;
+        month: string;
+        year: string;
+    }) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    prefix?: FC | ReactNode;
+    suffix?: FC | ReactNode;
+    hasError?: boolean;
+    className?: string;
+    format?: DateFormat$2;
+    separator?: string;
+    placeholder?: string;
+    placeholderClassName?: string;
+    hideClearIcon?: boolean;
+    hideCalendarIcon?: boolean;
+    renderCalendarIcon?: ReactNode;
+    hasFocus?: boolean;
+}
+
+type DateFormat$1 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+interface DateInputProps extends Omit<BaseDateInputProps, "hasFocus" | "renderCalendarIcon"> {
+    /**
+     * Whether to hide the calendar popup. When false (default), calendar will be shown.
+     * @default false
+     */
+    hideCalendar?: boolean;
+    /**
+     * Additional CSS class name for the wrapper div that contains input field and calendar
+     */
+    wrapperClassName?: string;
+    /**
+     * Additional CSS class name for the calendar component
+     */
+    calendarClassName?: string;
+    /**
+     * Placement of the calendar popup relative to the input
+     * @default "bottom-start"
+     */
+    calendarPlacement?: Placement;
+    /**
+     * Floating strategy for the calendar positioning
+     * @default "absolute"
+     */
+    floatingStrategy?: Strategy;
+}
+
+/**
+ * DateInput is an accessible date picker component that provides an intuitive keyboard-driven
+ * interface for date entry. It features intelligent auto-completion, cross-field validation,
+ * and support for multiple date formats (DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD).
+ *
+ * The component emits ISO 8601 formatted dates (YYYY-MM-DD) while displaying dates in the
+ * user's preferred format. It automatically handles leap years, month-specific day limits,
+ * and validates date segments in real-time.
+ *
+ * @example
+ * Form integration with validation:
+ *
+ * ```tsx
+ * const [birthDate, setBirthDate] = useState<string | null>(null);
+ * const [error, setError] = useState(false);
+ *
+ * const handleDateChange = (isoDate: string | null) => {
+ *   setBirthDate(isoDate);
+ *
+ *   if (isoDate) {
+ *     const age = calculateAge(isoDate);
+ *     setError(age < 18);
+ *   }
+ * };
+ *
+ * <DateInput
+ *   value={birthDate}
+ *   onChange={handleDateChange}
+ *   hasError={error}
+ *   placeholder="Enter your birth date"
+ *   format="DD/MM/YYYY"
+ *   separator="/"
+ *   prefix={<CalendarIcon />}
+ * />
+ * ```
+ *
+ * @example
+ * European format with custom styling:
+ *
+ * ```tsx
+ * <DateInput
+ *   value="2024-12-25"
+ *   onChange={(date) => updateEvent({ startDate: date })}
+ *   format="DD/MM/YYYY"
+ *   separator="."
+ *   className="w-full border-2 rounded-lg"
+ *   placeholderClassName="text-gray-400"
+ *   disabled={isProcessing}
+ * />
+ * ```
+ *
+ * @example
+ * Date range picker with state synchronization:
+ *
+ * ```tsx
+ * const [startDate, setStartDate] = useState("");
+ * const [endDate, setEndDate] = useState("");
+ *
+ * <div className="flex gap-4">
+ *   <DateInput
+ *     value={startDate}
+ *     onChange={setStartDate}
+ *     placeholder="Start date"
+ *     onSubmit={() => endDateRef.current?.focus()}
+ *     hideClearIcon
+ *   />
+ *   <DateInput
+ *     ref={endDateRef}
+ *     value={endDate}
+ *     onChange={setEndDate}
+ *     placeholder="End date"
+ *     hasError={endDate < startDate}
+ *     hideCalendarIcon
+ *   />
+ * </div>
+ * ```
+ *
+ * @example
+ * Read-only display with custom icons:
+ *
+ * ```tsx
+ * <DateInput
+ *   value="2024-01-15"
+ *   readOnly
+ *   suffix={<LockIcon />}
+ *   className="bg-gray-100"
+ *   hideClearIcon
+ *   onStateUpdate={({ month, day, year }) => {
+ *     logDateSegmentInteraction({ month, day, year });
+ *   }}
+ * />
+ * ```
+ */
+declare const DateInput: FC<DateInputProps>;
+
+type SelectionMode = "single" | "range";
+interface DateRange {
+    from: string | null;
+    to?: string | null;
+}
+interface DayCellRenderProps {
+    day: number;
+    month: number;
+    year: number;
+    /** Date string in the format 'YYYY-MM-DD' */
+    date: string;
+    isDisabled: boolean;
+    isSelected: boolean;
+    /** Indicates if the date belongs to the currently focused month */
+    isFocusedMonth: boolean;
+}
+interface CalendarActiveProps {
+    /**
+     * Year value that is selected in the date picker
+     * */
+    activeYear: number;
+    /**
+     * Month value index that is selected in the date picker
+     * */
+    activeMonth: number;
+}
+interface BaseCalendarProps {
+    /**
+     * Ref object that is used to call the `moveTo` function
+     * */
+    calendarRef?: React.Ref<CalendarRef>;
+    /**
+     * Style object for the calendar container
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Style class name for the date picker container
+     * */
+    className?: string;
+    /**
+     * Callback function that determines whether a date is disabled or not
+     * */
+    disableDate?: (date: string) => boolean;
+    /**
+     * Custom day cell renderer function
+     * Use this to customize the appearance of individual day cells
+     * */
+    renderDayCell?: (props: DayCellRenderProps) => ReactNode;
+}
+interface CalendarSingleModeProps extends BaseCalendarProps {
+    /**
+     * Selection mode: 'single' for single date selection
+     * @default 'single'
+     * */
+    mode?: "single";
+    /**
+     * Selected date in the format YYYY-MM-DD
+     * */
+    selectedDate?: string | null;
+    /**
+     * Callback function that is called when a date is clicked
+     * */
+    onSelectDate?: (date: string) => void;
+}
+interface CalendarRangeModeProps extends BaseCalendarProps {
+    /**
+     * Selection mode: 'range' for date range selection
+     * */
+    mode: "range";
+    /**
+     * Selected date range with from and to dates
+     * */
+    selectedRange?: DateRange;
+    /**
+     * Callback function that is called when a date range is selected
+     * */
+    onSelectRange?: (range: DateRange | null) => void;
+    /**
+     * Number of months to display side by side
+     * @default 2
+     * */
+    numberOfMonths?: 1 | 2;
+}
+type CalendarProps = CalendarSingleModeProps | CalendarRangeModeProps;
+interface CalendarOverload {
+    (props: CalendarSingleModeProps): JSX.Element;
+    (props: CalendarRangeModeProps): JSX.Element;
+    (props: CalendarProps): JSX.Element;
+    displayName: string;
+}
+interface CalendarRef {
+    /**
+     * Moves the date picker to the specified month and year
+     * */
+    moveTo: (month: number, year: number) => void;
+    /**
+     * Clears the current selection
+     * */
+    clearSelection: () => void;
+}
+declare enum CalendarType {
+    Day = "day",
+    Month = "month",
+    Year = "year"
+}
+
+type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
+interface BaseDateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur" | "prefix" | "onSubmit"> {
+    value?: DateRange;
+    onChange?: (value: DateRange | null) => void;
+    onSubmit?: () => void;
+    onStateUpdate?: (state: {
+        startDay: string;
+        startMonth: string;
+        startYear: string;
+        endDay: string;
+        endMonth: string;
+        endYear: string;
+    }) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    prefix?: FC | ReactNode;
+    suffix?: FC | ReactNode;
+    hasError?: boolean;
+    className?: string;
+    format?: DateFormat;
+    separator?: string;
+    rangeSeparator?: string;
+    placeholder?: string;
+    placeholderClassName?: string;
+    hideClearIcon?: boolean;
+    hideCalendarIcon?: boolean;
+    renderCalendarIcon?: ReactNode;
+    hasFocus?: boolean;
+}
+
+declare const BaseDateRangeInput: FC<BaseDateRangeInputProps>;
+
+interface DateRangeInputProps extends Omit<BaseDateRangeInputProps, "hasFocus" | "renderCalendarIcon"> {
+    hideCalendar?: boolean;
+    wrapperClassName?: string;
+    calendarClassName?: string;
+    calendarPlacement?: Placement;
+    floatingStrategy?: Strategy;
+    numberOfMonths?: 1 | 2;
+}
+
+declare const DateRangeInput: FC<DateRangeInputProps>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+    /**
+     * Class name actual input element.
+     * `className` is used for the container div.
+     * So if you want to style the input element, eg. placeholder, or even the input itself, use this prop.
+     * */
+    inputClassName?: string;
+    /**
+     * Component to render before the input element.
+     */
+    prefix?: FC<{
+        inputRef: ForwardedRef<HTMLInputElement>;
+    }> | ReactNode;
+    /**
+     * Component to render after the input element.
+     */
+    suffix?: FC<{
+        inputRef: ForwardedRef<HTMLInputElement>;
+    }> | ReactNode;
+}
+
+/**
+ * A flexible input component with support for prefix and suffix elements.
+ *
+ * The prefix, suffix, and input elements automatically adjust their width based on content.
+ * Use `inputClassName` to style the input element itself (e.g., placeholder styles).
+ * Use `className` to style the container that wraps the prefix, input, and suffix.
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter your name" />
+ *
+ * // With prefix (icon or text)
+ * <Input
+ *   prefix={<SearchIcon />}
+ *   placeholder="Search..."
+ * />
+ *
+ * // With suffix
+ * <Input
+ *   type="email"
+ *   suffix="@example.com"
+ *   placeholder="username"
+ * />
+ *
+ * // With both prefix and suffix
+ * <Input
+ *   prefix="$"
+ *   suffix=".00"
+ *   type="number"
+ *   placeholder="0"
+ * />
+ *
+ * // Custom styling
+ * <Input
+ *   className="border-blue-500"
+ *   inputClassName="placeholder:text-gray-400"
+ *   placeholder="Custom styled input"
+ * />
+ *
+ * // Disabled state
+ * <Input disabled placeholder="Disabled input" />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * If true, adds a red asterisk to the label to indicate that the input is required
+     * ---
+     * **Note**: This is just a visual indicator and does not enforce any validation
+     * */
+    required?: boolean;
+    /**
+     * If you pass a string, exclamation icon will be displayed next to the label
+     * and the string will be displayed as a tooltip when hovered over the icon
+     * */
+    tooltip?: string;
+    /**
+     * Custom icon to display as a tooltip
+     * */
+    tooltipIcon?: FC | ReactNode;
+    /**
+     * Background color of the tooltip
+     * */
+    tooltipBackgroundColor?: string;
+    /**
+     * Class name for the tooltip
+     * */
+    tooltipClassName?: string;
+}
+
+/**
+ * A label component for input fields with support for required indicators and tooltips.
+ *
+ * When the `required` prop is true, displays a red asterisk (*) after the label text.
+ * When the `tooltip` prop is provided, displays a tooltip icon with the specified content.
+ * You can customize the tooltip icon using the `tooltipIcon` prop.
+ *
+ * @example
+ * ```tsx
+ * // Basic label
+ * <Label htmlFor="username">Username</Label>
+ *
+ * // Required field
+ * <Label htmlFor="email" required>
+ *   Email Address
+ * </Label>
+ *
+ * // With tooltip
+ * <Label
+ *   htmlFor="password"
+ *   tooltip="Password must be at least 8 characters long"
+ * >
+ *   Password
+ * </Label>
+ *
+ * // Required with tooltip
+ * <Label
+ *   htmlFor="apiKey"
+ *   required
+ *   tooltip="You can find your API key in the settings page"
+ * >
+ *   API Key
+ * </Label>
+ *
+ * // Custom tooltip icon and styling
+ * <Label
+ *   htmlFor="info"
+ *   tooltip="Additional information"
+ *   tooltipIcon={InfoIcon}
+ *   tooltipBackgroundColor="blue"
+ *   tooltipClassName="custom-tooltip"
+ * >
+ *   Information
+ * </Label>
+ * ```
+ */
+declare const Label: FC<LabelProps>;
+
+interface InputErrorProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+}
+
+/**
+ * A component for displaying error messages below input fields.
+ *
+ * This is a simple div with default error styling, typically used to show
+ * validation errors or other feedback related to form inputs.
+ *
+ * @example
+ * ```tsx
+ * // Basic error message
+ * <InputError>This field is required</InputError>
+ *
+ * // With form validation
+ * <div>
+ *   <Input type="email" />
+ *   {errors.email && (
+ *     <InputError>{errors.email.message}</InputError>
+ *   )}
+ * </div>
+ *
+ * // Multiple errors
+ * <div>
+ *   <Input type="password" />
+ *   {errors.password && (
+ *     <InputError>
+ *       {errors.password.type === 'required'
+ *         ? 'Password is required'
+ *         : 'Password must be at least 8 characters'
+ *       }
+ *     </InputError>
+ *   )}
+ * </div>
+ *
+ * // Custom styling
+ * <InputError className="text-red-600 font-semibold">
+ *   Custom styled error
+ * </InputError>
+ * ```
+ */
+declare const InputError: FC<InputErrorProps>;
+
+/** Extensible variant map - To allow module augmentation */
+interface ButtonVariantMap {
+    filled: unknown;
+    outlined: unknown;
+    ghost: unknown;
+    icon: unknown;
+}
+/** Extensible color map - To allow module augmentation */
+interface ButtonColorMap {
+    primary: unknown;
+}
+/** Extensible size map - To allow module augmentation */
+interface ButtonSizeMap {
+    xs: unknown;
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+    xl: unknown;
+}
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button variant to display.(Default: 'filled')
+     * */
+    variant?: keyof ButtonVariantMap;
+    /**
+     * Button color to display.(Default: 'primary')
+     * */
+    color?: keyof ButtonColorMap;
+    /**
+     * Button size to display.(Default: 'md')
+     * */
+    size?: keyof ButtonSizeMap;
+}
+
+/**
+ * A flexible button component that extends the native HTML button with customizable styles.
+ *
+ * Supports different variants (filled, outlined, ghost, icon), sizes (sm, md, lg), and colors.
+ * All styling is applied via TailwindCSS classes, which can be overridden using the `className` prop.
+ *
+ * By default, the button adds spacing between child elements. You can override this by
+ * passing custom gap classes.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button variant="outlined" size="md">
+ *   Add
+ * </Button>
+ *
+ * // With different variants
+ * <Button variant="filled">Save</Button>
+ * <Button variant="outlined">Cancel</Button>
+ * <Button variant="ghost">Learn More</Button>
+ *
+ * // Custom styling
+ * <Button
+ *   variant="filled"
+ *   size="sm"
+ *   className="bg-cyan-500 gap-4 px-4 py-2 disabled:text-red-500"
+ * >
+ *   <span>+</span>
+ *   <span>Add</span>
+ * </Button>
+ *
+ * // Disabled state
+ * <Button disabled>Disabled Button</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface LoadingButtonProps extends ButtonProps {
+    /**
+     * If `true`, the button will be displayed in a loading state.
+     * */
+    loading?: boolean;
+    /**
+     * The position of the loading spinner.
+     * */
+    spinnerPosition?: "start" | "end";
+    /**
+     * The text to display when the button is in the loading state.
+     * */
+    loadingText?: string;
+}
+
+/**
+ * LoadingButton extends the Button component with built-in loading state visualization.
+ * Automatically displays a spinner and optional loading text while preventing user interaction
+ * during asynchronous operations.
+ *
+ * @example
+ * Form submission with loading state:
+ *
+ * ```tsx
+ * const [isSubmitting, setIsSubmitting] = useState(false);
+ *
+ * const handleSubmit = async () => {
+ *   setIsSubmitting(true);
+ *   await saveFormData();
+ *   setIsSubmitting(false);
+ * };
+ *
+ * <LoadingButton
+ *   loading={isSubmitting}
+ *   loadingText="Saving..."
+ *   onClick={handleSubmit}
+ * >
+ *   Save Changes
+ * </LoadingButton>
+ * ```
+ *
+ * @example
+ * Spinner at end position:
+ *
+ * ```tsx
+ * <LoadingButton
+ *   loading={isProcessing}
+ *   spinnerPosition="end"
+ *   variant="outlined"
+ *   size="lg"
+ * >
+ *   Process Payment
+ * </LoadingButton>
+ * ```
+ *
+ * @example
+ * Without loading text (keeps original label):
+ *
+ * ```tsx
+ * <LoadingButton loading={isDeleting} color="danger">
+ *   Delete Account
+ * </LoadingButton>
+ * ```
+ */
+declare const LoadingButton: FC<LoadingButtonProps>;
+
+interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "value" | "onChange" | "partial"> {
+    /**
+     * Label that will be displayed next to the checkbox
+     * */
+    label?: string | FC | ReactNode;
+    /**
+     * Additional class name to be added to the label
+     * */
+    labelClassName?: string;
+    /**
+     * Value to set in the form data when the switch is toggled
+     * If value is not provided, value will be toggled between true and false
+     * */
+    value?: unknown;
+    /**
+     * Make the checkbox as single selection
+     * If single is true, form data will be set with the value provided
+     *
+     * Eg. If value is 'a', form data will be set with 'a' when checkbox is checked
+     *
+     * By default, form data will be set with an array of values
+     * */
+    single?: boolean;
+    /**
+     * Value to set in the form data when the checkbox is unchecked
+     * **Works only when `single` is true**
+     * */
+    uncheckedValue?: unknown;
+    /**
+     * Callback fired when the value changes
+     * */
+    onChange?: (value: unknown) => void;
+    /**
+     * Prop to check if the checkbox is partially checked
+     * You can pass boolean or a function that returns a boolean
+     * You can access the renderProps object from RHF to get the field, fieldState, and formState objects
+     *
+     * ---
+     * @example
+     * ```js
+     *  <>
+     *    <RHFCheckbox
+     *      name="checkbox"
+     *      value="js"
+     *      partial={({ field }) => field.value.length !== 2}
+     *      label="JavaScript"
+     *    />
+     *    <RHFCheckbox
+     *      name="checkbox"
+     *      value="ts"
+     *      partial={({ field }) => field.value.length !== 2}
+     *      label="TypeScript"
+     *    />
+     *  </>
+     * ```
+     * */
+    partial?: boolean | ((args: RHFRenderArgs<Record<string, unknown>>) => boolean);
+}
+
+/**
+ * A controlled checkbox component for React Hook Form that preserves value types.
+ *
+ * Unlike native checkboxes that convert values to strings, this component maintains
+ * the original data type. Supports both single-select (like a radio) and multi-select
+ * modes with optional indeterminate state.
+ *
+ * - **Single mode**: Acts like a radio button, stores one value or uncheckedValue
+ * - **Multi mode** (default): Stores an array of selected values
+ *
+ * @example
+ * ```tsx
+ * // Single checkbox - stores "single" or undefined
+ * <RHFCheckbox
+ *   name="agreement"
+ *   value="agreed"
+ *   label="I agree to terms"
+ *   single
+ * />
+ *
+ * // Single with custom unchecked value
+ * <RHFCheckbox
+ *   name="enabled"
+ *   value="yes"
+ *   uncheckedValue="no"
+ *   label="Enable feature"
+ *   single
+ * />
+ *
+ * // Multi-select checkboxes - stores array like ["multi1", "multi2"]
+ * <div>
+ *   <RHFCheckbox name="options" value="multi1" label="Option 1" />
+ *   <RHFCheckbox name="options" value="multi2" label="Option 2" />
+ *   <RHFCheckbox name="options" value="multi3" label="Option 3" />
+ * </div>
+ *
+ * // With indeterminate state
+ * <RHFCheckbox
+ *   name="languages"
+ *   value="js"
+ *   partial={({ field }) => field.value.length !== 2}
+ *   label="JavaScript"
+ * />
+ *
+ * // With objects or complex types
+ * <RHFCheckbox
+ *   name="settings"
+ *   value={{ feature: "advanced", enabled: true }}
+ *   label="Advanced Features"
+ *   single
+ * />
+ * ```
+ */
+declare const RHFCheckbox: FC<RHFCheckboxProps>;
+
+interface InputTransformer {
+    input?: (value: string) => string;
+    output?: (value: string) => string;
+}
+interface RHFInputProps extends RHFBaseProps, Omit<InputProps, "name" | "prefix" | "suffix" | "onChange" | "onBlur"> {
+    /**
+     * This transform object allows you to transform the input value before it is passed to the form.
+     * You can also transform the output value before it is passed to the input element.
+     *
+     * This is the recommended way of transforming in React Hook Form.
+     * See the documentation for more information: https://react-hook-form.com/advanced-usage#TransformandParse
+     * */
+    transform?: InputTransformer;
+    /**
+     * Component to render before the input element.
+     *
+     * You can pass a function that returns a ReactNode or a ReactNode.
+     * If you pass a Function, it will have access to the renderProps object.
+     * So that you can access the field, fieldState, and formState objects.
+     * You can build your prefix component based on these objects.
+     *
+     * @example
+     * ```js
+     * <RHFInput
+     *  name="name"
+     *  prefix={({ field }) => <span>{field.value}</span>}
+     * />
+     * ```
+     * */
+    prefix?: ControllerProps["render"] | ReactNode | string;
+    /**
+     * Component to render after the input element.
+     * You can pass a function that returns a ReactNode or a ReactNode.
+     * If you pass a Function, it will have access to the renderProps object.
+     * So that you can access the field, fieldState, and formState objects.
+     * You can build your suffix component based on these objects.
+     *
+     * @example
+     * ```js
+     * <RHFInput
+     *  name="name"
+     *  suffix={({ fieldState }) =>
+     *    fieldState.error ? <ErrorIcon /> : null
+     *  }
+     * />
+     * ```
+     * */
+    suffix?: ControllerProps["render"] | ReactNode | string;
+    /**
+     * Callback fired when the value changes
+     * This is the actual value of the input not the event object
+     * */
+    onChange?: (value: string | null) => void;
+    /**
+     * Callback fired when the input is blurred
+     * */
+    onBlur?: (value: string) => void;
+}
+
+/**
+ * An input component integrated with React Hook Form.
+ *
+ * Automatically displays error states with a red border when validation fails.
+ * Supports value transformation for input/output formatting.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RHFInput name="username" />
+ *
+ * // With prefix and suffix
+ * <RHFInput
+ *   name="amount"
+ *   prefix="$"
+ *   suffix="USD"
+ * />
+ *
+ * // Value transformation (e.g., formatting phone numbers)
+ * <RHFInput
+ *   name="phone"
+ *   transform={{
+ *     input: (value) => formatPhoneNumber(value),
+ *     output: (value) => sanitizePhoneNumber(value)
+ *   }}
+ * />
+ *
+ * // Custom error icon in suffix
+ * <RHFInput
+ *   name="email"
+ *   suffix={({ fieldState }) =>
+ *     fieldState.error ? <ErrorIcon /> : null
+ *   }
+ * />
+ * ```
+ */
+declare const RHFInput: FC<RHFInputProps>;
+
+type RHFErrorRenderProps = ControllerFieldState;
+interface RHFErrorProps extends RHFBaseProps {
+    /**
+     * Class name to be applied on the error message.
+     * Only applicable when `render` prop is not provided.
+     * */
+    className?: string;
+    /**
+     * To customize the error message.
+     * If not provided, default error message will be displayed.
+     *
+     * @example
+     * ```js
+     * <RHFError
+     *   name="email"
+     *   render={({ error }) => {
+     *     return (
+     *        <div className="flex items-center space-x-2">
+     *         <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
+     *         <span className="text-sm font-normal text-red-600">{error}</span>
+     *        </div>
+     *     );
+     *   }}
+     * />
+     * ```
+     * */
+    render?: ReactNode | ((props: RHFErrorRenderProps) => JSX.Element);
+    /**
+     * @deprecated - Use `render` prop instead
+     * */
+    children?: ReactNode;
+}
+
+/**
+ * A component for displaying form field error messages with React Hook Form.
+ *
+ * Automatically shows validation error messages for the specified field.
+ * Supports custom rendering and styling of error messages.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RHFError name="email" />
+ *
+ * // With custom styling
+ * <RHFError name="email" className="font-bold text-red-700" />
+ *
+ * // Custom error rendering with icon
+ * <RHFError
+ *   name="email"
+ *   render={({ error }) => {
+ *     return (
+ *       <div className="flex items-center space-x-2">
+ *         <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
+ *         <span className="text-sm font-normal text-red-600">
+ *           {error?.message}
+ *         </span>
+ *       </div>
+ *     );
+ *   }}
+ * />
+ *
+ * // Multiple fields with errors
+ * <div>
+ *   <Input name="username" />
+ *   <RHFError name="username" />
+ *
+ *   <Input name="email" />
+ *   <RHFError name="email" />
+ * </div>
+ * ```
+ */
+declare const RHFError: FC<RHFErrorProps>;
+
+interface RHFInputGroupProps extends LabelProps, PropsWithChildren {
+    /**
+     * Label for the input group
+     * */
+    label?: string;
+    /**
+     * Class name for the label element
+     * */
+    labelClassName?: string;
+    /**
+     * Class name for the input group that wraps the label, children, and error message
+     * */
+    className?: string;
+    /**
+     * Error message class name
+     * */
+    errorClassName?: string;
+}
+
+/**
+ * RHFInputGroup combines a form field label, input component, and error message into a cohesive unit.
+ * Automatically detects RHF input components in children (even nested) and extracts their name and control
+ * to display validation errors. Reduces boilerplate for standard form field layouts.
+ *
+ * **Note:** This is a layout convenience component. For custom layouts, use Label and RHFError separately.
+ *
+ * @example
+ * Standard form field:
+ *
+ * ```tsx
+ * <RHFInputGroup label="Email Address" required>
+ *   <RHFInput
+ *     name="email"
+ *     type="email"
+ *     placeholder="you@example.com"
+ *   />
+ * </RHFInputGroup>
+ * ```
+ *
+ * @example
+ * Field with helper text (nested structure):
+ *
+ * ```tsx
+ * <RHFInputGroup
+ *   label="Password"
+ *   required
+ *   tooltip="Must be at least 12 characters"
+ * >
+ *   <div className="space-y-2">
+ *     <RHFInput name="password" type="password" />
+ *     <ul className="text-sm text-gray-600">
+ *       <li>✓ At least 8 characters</li>
+ *       <li>✓ Include a number</li>
+ *       <li>✓ Include a special character</li>
+ *     </ul>
+ *   </div>
+ * </RHFInputGroup>
+ * ```
+ *
+ * @example
+ * Multiple inputs (only first input's errors shown):
+ *
+ * ```tsx
+ * <RHFInputGroup label="Phone Number">
+ *   <div className="flex gap-2">
+ *     <RHFInput name="countryCode" placeholder="+1" className="w-20" />
+ *     <RHFInput name="phoneNumber" placeholder="555-0100" />
+ *   </div>
+ * </RHFInputGroup>
+ * ```
+ */
+declare const RHFInputGroup: FC<RHFInputGroupProps>;
+
+interface RHFNumberInputProps extends RHFInputProps {
+    /**
+     * If true, the input will only accept positive numbers
+     * i.e numbers cannot start with a negative sign (-)
+     * Default: false
+     * */
+    positiveOnly?: boolean;
+    /**
+     * If true, the input will only accept valid numbers
+     * i.e numbers cannot start with zero except for zero and decimal numbers
+     *
+     * Example: 000123.45 is invalid
+     * Example: 123.45 or 0.45 is valid
+     * */
+    strict?: boolean;
+    /**
+     * Max number of decimal places
+     * Example: 123.45 has 2 decimal places
+     * */
+    maxFractionDigits?: number;
+    /**
+     * Max number of whole digit places
+     * Example: 123.45 has 3 whole digit places
+     * */
+    maxWholeDigitPlaces?: number;
+}
+
+/**
+ * React hook form controlled number input.
+ * This input only allows numbers and a single decimal point.
+ * You can specify the maximum number of decimal places and whole digit places.
+ * By default the input is strict, meaning it will remove leading zeros and convert into valid numbers.
+ * You can disable this behavior by setting the `strict` prop to `false`.
+ *
+ * @example
+ * ```tsx
+ * // Basic number input
+ * <RHFNumberInput name="balance" />
+ *
+ * // Integer only (no decimals)
+ * <RHFNumberInput
+ *   name="quantity"
+ *   maxFractionDigits={0}
+ * />
+ *
+ * // Room numbers with leading zeros allowed
+ * <RHFNumberInput
+ *   name="roomNumber"
+ *   strict={false}
+ *   maxWholeDigitPlaces={5}
+ *   maxFractionDigits={0}
+ * />
+ *
+ * // Precise decimal values
+ * <RHFNumberInput
+ *   name="price"
+ *   maxFractionDigits={2}
+ *   maxWholeDigitPlaces={10}
+ * />
+ *
+ * // Positive numbers only
+ * <RHFNumberInput
+ *   name="age"
+ *   positiveOnly
+ *   maxFractionDigits={0}
+ * />
+ * ```
+ */
+declare const RHFNumberInput: FC<RHFNumberInputProps>;
+
+interface Currency {
+    symbol: string;
+    code: string;
+}
+interface RHFCurrencyInputProps extends Omit<RHFNumberInputProps, "strict"> {
+    /**
+     * The currency to display with the input.
+     * The symbol and code are displayed as a prefix and suffix, respectively.
+     * */
+    currency?: Currency;
+}
+
+/**
+ * An enhanced number input component for currency values with React Hook Form.
+ *
+ * Displays currency symbols and codes, and automatically formats values with
+ * thousands separators (e.g., 1,234,567.89). Built on top of RHFNumberInput
+ * with strict mode enabled by default.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with currency symbol and code
+ * <RHFCurrencyInput
+ *   name="price"
+ *   currency={{ symbol: '$', code: 'USD' }}
+ * />
+ *
+ * // With only symbol
+ * <RHFCurrencyInput
+ *   name="amount"
+ *   currency={{ symbol: '€' }}
+ * />
+ *
+ * // With custom decimal places
+ * <RHFCurrencyInput
+ *   name="cost"
+ *   currency={{ symbol: '¥', code: 'JPY' }}
+ *   maxFractionDigits={0}
+ * />
+ *
+ * // Different currencies
+ * <RHFCurrencyInput
+ *   name="gbpAmount"
+ *   currency={{ symbol: '£', code: 'GBP' }}
+ * />
+ * ```
+ */
+declare const RHFCurrencyInput: FC<RHFCurrencyInputProps>;
+
+interface TextareaProps extends TextareaAutosizeProps {
+    /**
+     * Enable auto resizing of the textarea
+     * @default false
+     * */
+    autoResize?: boolean;
+}
+
+/**
+ * A textarea component with optional auto-resizing functionality.
+ *
+ * Built on top of react-textarea-autosize, this component can automatically
+ * adjust its height based on content. Control the minimum and maximum number
+ * of rows displayed.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Textarea placeholder="Type something..." />
+ *
+ * // Auto-resizing textarea
+ * <Textarea autoResize placeholder="Type something..." />
+ *
+ * // With row constraints
+ * <Textarea rows={3} placeholder="Minimum 3 rows" />
+ *
+ * // Auto-resize with max rows
+ * <Textarea
+ *   autoResize
+ *   rows={2}
+ *   maxRows={10}
+ *   placeholder="Grows from 2 to 10 rows"
+ * />
+ *
+ * // Controlled component
+ * <Textarea
+ *   value={text}
+ *   onChange={(e) => setText(e.target.value)}
+ *   placeholder="Enter description"
+ * />
+ * ```
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface RHFTextareaProps extends RHFBaseProps, Omit<TextareaProps, "name" | "onChange" | "onBlur"> {
+    /**
+     * Callback fired when the value changes
+     * This is the actual value of the textarea not the event object
+     * */
+    onChange?: (value: string | null) => void;
+    /**
+     * Callback fired when the input is blurred
+     * ```
+     * */
+    onBlur?: (value: string) => void;
+}
+
+/**
+ * A textarea component integrated with React Hook Form.
+ *
+ * Supports auto-resizing functionality and automatic error state display.
+ * Built on the Textarea component with full React Hook Form integration.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RHFTextarea name="description" />
+ *
+ * // Auto-resizing textarea
+ * <RHFTextarea
+ *   name="comments"
+ *   autoResize
+ * />
+ *
+ * // With row constraints
+ * <RHFTextarea
+ *   name="bio"
+ *   autoResize
+ *   rows={3}
+ *   maxRows={10}
+ *   placeholder="Tell us about yourself"
+ * />
+ *
+ * // With callbacks
+ * <RHFTextarea
+ *   name="notes"
+ *   onChange={(value) => console.log('Text changed:', value)}
+ *   onBlur={(value) => console.log('Final value:', value)}
+ * />
+ *
+ * // Disabled state
+ * <RHFTextarea
+ *   name="readonly"
+ *   disabled
+ * />
+ * ```
+ */
+declare const RHFTextarea: FC<RHFTextareaProps>;
+
+/** Extensible size map - To allow module augmentation */
+interface SwitchSizeMap {
+    sm: unknown;
+    md: unknown;
+}
+interface SwitchProps extends Omit<SwitchProps$1, "className"> {
+    /**
+     * The size of the switch.(default: 'md')
+     * */
+    size?: keyof SwitchSizeMap;
+    /**
+     * Class name for the switch.
+     * */
+    className?: string;
+    /**
+     * Style for the thumb of the switch.
+     * */
+    thumbClassName?: string;
+}
+
+/**
+ * Switch is a toggle component built on HeadlessUI that provides an accessible
+ * on/off control. It supports multiple sizes, controlled and uncontrolled modes,
+ * and integrates seamlessly with forms.
+ *
+ * @example
+ * Toggle feature in settings:
+ *
+ * ```tsx
+ * const [notificationsEnabled, setNotificationsEnabled] = useState(true);
+ *
+ * <div className="flex items-center gap-3">
+ *   <Switch
+ *     checked={notificationsEnabled}
+ *     onChange={setNotificationsEnabled}
+ *     size="md"
+ *   />
+ *   <span>Enable email notifications</span>
+ * </div>
+ * ```
+ *
+ * @example
+ * Uncontrolled with default value:
+ *
+ * ```tsx
+ * <Switch defaultChecked={true} size="lg" />
+ * ```
+ *
+ * @example
+ * Custom styling and sizes:
+ *
+ * ```tsx
+ * <Switch
+ *   checked={darkMode}
+ *   onChange={toggleDarkMode}
+ *   size="sm"
+ *   className="bg-blue-500 data-[checked]:bg-green-600"
+ *   thumbClassName="shadow-lg"
+ * />
+ * ```
+ *
+ * @see https://headlessui.com/react/switch for advanced usage
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<null>>;
+
+interface RHFSwitchProps extends RHFBaseProps, Omit<SwitchProps, "name" | "value"> {
+    /**
+     * Value to set in the form data when the switch is toggled
+     * If value is not provided, value will be toggled between true and false
+     * */
+    value?: unknown;
+    /**
+     * Value to set in the form data when the switch is toggled off
+     * **Works only when `value` is provided**
+     * */
+    uncheckedValue?: unknown;
+    /**
+     * Callback fired when the value changes
+     * */
+    onChange?: (value: unknown) => void;
+}
+
+/**
+ * A controlled switch component for React Hook Form.
+ *
+ * By default, the switch stores boolean values (true/false) in the form state.
+ * You can customize the checked and unchecked values using the `value` and `uncheckedValue` props.
+ * Unlike native radio inputs, values maintain their original data types and are not converted to strings.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - stores boolean (true or false)
+ * <RHFSwitch name="switch" />
+ *
+ * // Custom value when checked, undefined when unchecked
+ * <RHFSwitch name="switch" value="custom-value" />
+ *
+ * // Custom value with object
+ * <RHFSwitch name="switch2" value={{ key: 'value' }} />
+ *
+ * // Custom values for both checked and unchecked states
+ * <RHFSwitch name="switch" value={1} uncheckedValue={0} />
+ * <RHFSwitch name="enabled" value="yes" uncheckedValue="no" />
+ * ```
+ */
+declare const RHFSwitch: FC<RHFSwitchProps>;
+
+type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+
+/**
+ * A styled radio button input component that extends the native HTML radio input.
+ *
+ * This component provides consistent styling and focus states for radio buttons
+ * throughout your application. It accepts all standard input props.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Radio name="option" value="1" />
+ *
+ * // With label
+ * <label className="flex items-center gap-2">
+ *   <Radio name="choice" value="yes" />
+ *   <span>Yes</span>
+ * </label>
+ *
+ * // Radio group
+ * <div>
+ *   <label>
+ *     <Radio name="size" value="small" defaultChecked />
+ *     Small
+ *   </label>
+ *   <label>
+ *     <Radio name="size" value="medium" />
+ *     Medium
+ *   </label>
+ *   <label>
+ *     <Radio name="size" value="large" />
+ *     Large
+ *   </label>
+ * </div>
+ *
+ * // Controlled component
+ * <Radio
+ *   name="plan"
+ *   value="pro"
+ *   checked={selectedPlan === 'pro'}
+ *   onChange={(e) => setSelectedPlan(e.target.value)}
+ * />
+ * ```
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RHFRadioProps extends RHFBaseProps, Omit<RadioProps, "name" | "value" | "onChange"> {
+    /**
+     * Label to display next to the radio button
+     * */
+    label?: string | ReactNode | FC;
+    /**
+     * Style for the label of the radio button.
+     * */
+    labelClassName?: string;
+    /**
+     * Value to set in the form data when the radio button is selected
+     * Value can be any type and it will be set in the form data as it is without any transformation
+     * eg. In native radio input, the value is always a string but in RHFRadio it can be any type
+     * */
+    value?: unknown;
+    /**
+     * Callback fired when the value changes
+     * */
+    onChange?: (value: unknown) => void;
+}
+
+/**
+ * A controlled radio input component for React Hook Form.
+ *
+ * Unlike native radio inputs that convert values to strings, this component preserves
+ * the original data type of the value. You can use objects, arrays, booleans, strings,
+ * or any other value type (except undefined).
+ *
+ * @example
+ * ```tsx
+ * // With object value
+ * <RHFRadio name="radio" value={{ key: "value" }} label="Object" />
+ *
+ * // With array value
+ * <RHFRadio name="radio" value={[1, 2, 3, 4, 5]} label="Array" />
+ *
+ * // With boolean value
+ * <RHFRadio name="radio" value={true} label="Boolean" />
+ *
+ * // With string value
+ * <RHFRadio name="radio" value="string" label="String" />
+ *
+ * // Radio group example
+ * <div>
+ *   <RHFRadio name="plan" value="free" label="Free Plan" />
+ *   <RHFRadio name="plan" value="pro" label="Pro Plan" />
+ *   <RHFRadio name="plan" value="enterprise" label="Enterprise Plan" />
+ * </div>
+ *
+ * // With onChange callback
+ * <RHFRadio
+ *   name="radio"
+ *   value="option1"
+ *   label="Option 1"
+ *   onChange={(value) => console.log('Selected:', value)}
+ * />
+ * ```
+ */
+declare const RHFRadio: FC<RHFRadioProps>;
+
+interface RHFDateInputProps extends RHFBaseProps, Omit<DateInputProps, "hasError"> {
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback function when date changes (in addition to form field update)
+     */
+    onChange?: (date: string | null) => void;
+}
+
+/**
+ * React Hook Form wrapper for the DateInput component.
+ *
+ * Integrates DateInput with React Hook Form for seamless form management with
+ * automatic validation and error handling.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RHFDateInput name="birthDate" />
+ *
+ * // With callbacks
+ * <RHFDateInput
+ *   name="appointmentDate"
+ *   onBlur={(value) => console.log('Date changed:', value)}
+ * />
+ *
+ * // Disabled state
+ * <RHFDateInput
+ *   name="startDate"
+ *   disabled
+ * />
+ *
+ * // With custom styling
+ * <RHFDateInput
+ *   name="endDate"
+ *   className="custom-date-input"
+ * />
+ * ```
+ */
+declare const RHFDateInput: FC<RHFDateInputProps>;
+
+declare const _default: CalendarOverload;
+
+interface RHFDateRangeInputProps extends RHFBaseProps, Omit<DateRangeInputProps, "hasError" | "value" | "onChange"> {
+    disabled?: boolean;
+    onChange?: (value: DateRange | null) => void;
+}
+
+declare const RHFDateRangeInput: FC<RHFDateRangeInputProps>;
+
+type FileWithPreview = File & {
+    preview?: string;
+};
+interface RHFFileInputProps extends RHFBaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "multiple" | "children" | "name" | "type" | "onChange"> {
+    /**
+     * Class name actual input element.
+     * `className` is used for the container div.
+     * So if you want to style the input element, eg. placeholder, or even the input itself, use this prop.
+     * */
+    inputClassName?: string;
+    /**
+     * Callback fired when the value changes
+     * This is the actual value of the file input not the event object
+     * */
+    onChange?: (data?: FileWithPreview | FileWithPreview[] | null) => void;
+    /**
+     * If true, the user can select multiple files(Default: false)
+     * */
+    multiple?: boolean;
+    /**
+     * Render custom component instead of the default input element
+     * You also have access to the Controller renderProps object
+     * So that you can access the field, fieldState, and formState objects and use accordingly
+     *
+     * If you pass render, the input element will be hidden using the `hidden` class
+     * */
+    render?: ReactNode | ControllerProps["render"];
+}
+
+/**
+ * File input component that integrates with react-hook-form.
+ *
+ * You can pass `render` to render custom component instead of the default input element
+ *
+ * You have access to the Controller renderProps object in the `render` function
+ * So that you can access the field, fieldState, and formState objects and use them accordingly
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - single file selection
+ * // Automatically creates a preview URL for the selected file
+ * <RHFFileInput name="file" />
+ *
+ * // Multiple file selection
+ * <RHFFileInput name="files" multiple />
+ *
+ * // Restrict file types
+ * <RHFFileInput name="avatar" accept="image/*" />
+ *
+ * // With custom render
+ * <RHFFileInput
+ *   name="file"
+ *   accept="image/*"
+ *   render={({ field: { value } }) => {
+ *      return (
+ *        <div className="flex rounded overflow-hidden items-center justify-center cursor-pointer border-2 p-4 w-full border-dotted border-gray-300 h-[200px]">
+ *          {value ? (
+ *            <img
+ *              className="inline-block object-contain w-full h-full"
+ *              src={value.preview}
+ *              alt="Preview"
+ *            />
+ *          ) : (
+ *            <span>Upload File</span>
+ *          )}
+ *        </div>
+ *      );
+ *   }}
+ * />
+ * ```
+ */
+declare const RHFFileInput: FC<RHFFileInputProps>;
+
+interface OTPInputProps {
+    /**
+     * Value of the OTP input
+     * */
+    value: string;
+    /**
+     * Function to call when the OTP input value changes
+     * */
+    onChange: (value: string) => void;
+    /**
+     * Function to call when the OTP input is blurred
+     * */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Function to call when the OTP input completely filled
+     * i.e when the length of the OTP input is equal to the length prop
+     * */
+    onOTPComplete?: (value: string) => void;
+    /**
+     * If true, only numbers can be entered in the OTP input. (Default: true)
+     * */
+    numberOnly?: boolean;
+    /**
+     * Classname for the wrapper div that contains input fields
+     * */
+    className?: string;
+    /**
+     * Classname for the input fields
+     * */
+    inputClassName?: string;
+    /**
+     * Length of the OTP input(Default: 6)
+     * Inputs will be created based on this length
+     * */
+    length?: number;
+    /**
+     * Aspect ratio of the OTP input (Default: 0.94)
+     * */
+    aspectRatio?: string | number;
+    /**
+     * If true, the OTP input will be disabled
+     * */
+    disabled?: boolean;
+}
+
+/**
+ * OTPInput provides a segmented input field for entering one-time passwords or verification codes.
+ * Each digit is displayed in a separate box with automatic focus management and keyboard navigation.
+ * Supports both numeric-only mode (default) and alphanumeric input.
+ *
+ * @example
+ * Two-factor authentication:
+ *
+ * ```tsx
+ * const [verificationCode, setVerificationCode] = useState('');
+ *
+ * <OTPInput
+ *   value={verificationCode}
+ *   onChange={setVerificationCode}
+ *   length={6}
+ *   numberOnly
+ *   onOTPComplete={async (code) => {
+ *     await verifyTwoFactorCode(code);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Alphanumeric code with custom styling:
+ *
+ * ```tsx
+ * <OTPInput
+ *   value={activationCode}
+ *   onChange={setActivationCode}
+ *   length={8}
+ *   numberOnly={false}
+ *   className="gap-2"
+ *   inputClassName="border-2 rounded-md"
+ * />
+ * ```
+ *
+ * @example
+ * SMS verification with aspect ratio:
+ *
+ * ```tsx
+ * <OTPInput
+ *   value={smsCode}
+ *   onChange={setSmsCode}
+ *   length={4}
+ *   aspectRatio={1}
+ *   onOTPComplete={(code) => submitVerification(code)}
+ *   disabled={isVerifying}
+ * />
+ * ```
+ */
+declare const OTPInput: react__default.ForwardRefExoticComponent<OTPInputProps & react__default.RefAttributes<HTMLInputElement>>;
+
+interface RHFOTPInputProps extends RHFBaseProps, Omit<OTPInputProps, "value" | "onChange"> {
+}
+
+/**
+ * An OTP (One-Time Password) input component integrated with React Hook Form.
+ *
+ * By default, only numeric input is allowed. You can change this behavior
+ * by setting the `numberOnly` prop to false to allow alphanumeric input.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - numbers only, default 6 digits
+ * <RHFOTPInput name="otp" />
+ *
+ * // Custom length
+ * <RHFOTPInput name="code" length={4} />
+ *
+ * // Allow alphanumeric input
+ * <RHFOTPInput
+ *   name="verificationCode"
+ *   numberOnly={false}
+ *   length={8}
+ * />
+ *
+ * // With completion callback
+ * <RHFOTPInput
+ *   name="otp"
+ *   onOTPComplete={(value) => {
+ *     console.log('OTP entered:', value);
+ *     // Auto-submit or verify OTP
+ *   }}
+ * />
+ * ```
+ */
+declare const RHFOTPInput: FC<RHFOTPInputProps>;
+
+interface RHFFilePickerRenderProps<T extends HTMLElement = HTMLDivElement> extends UseFilePickerReturn<T>, RHFRenderArgs<Record<string, FilePickerFile[]>> {
+}
+type FilePickerOptions = Omit<UseFilePickerOptions, "onStart">;
+interface RHFFilePickerBaseProps<T extends HTMLElement = HTMLDivElement> extends FilePickerOptions {
+    render?: (
+    /** Additional props to be used on the dropzone element */
+    props: RHFFilePickerRenderProps<T>) => ReactNode;
+}
+interface RHFFilePickerProps<T extends HTMLElement = HTMLDivElement> extends RHFBaseProps, RHFFilePickerBaseProps<T> {
+}
+interface RHFFilePickerRendererProps<T extends HTMLElement = HTMLDivElement> extends RHFRenderArgs<Record<string, FilePickerFile[]>>, RHFFilePickerBaseProps<T> {
+}
+
+/**
+ * A file picker component with drag-and-drop support for React Hook Form.
+ *
+ * Features include:
+ * - File and directory selection
+ * - Drag-and-drop support
+ * - File preview URLs
+ * - Duplicate detection and optional removal
+ * - Custom UI via render prop
+ *
+ * Selected files have additional properties:
+ * - `preview`: URL for displaying file content
+ * - `duplicatedWith`: Array of files this file duplicates
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - accept all file types
+ * <RHFFilePicker name="files" />
+ *
+ * // Restrict to images only
+ * <RHFFilePicker name="images" accept="image/*" />
+ *
+ * // Remove duplicates automatically
+ * <RHFFilePicker
+ *   name="files"
+ *   accept="image/*"
+ *   removeDuplicates
+ * />
+ * ```
+ *
+ * Custom UI example (compact image grid):
+ * ```tsx
+ * <RHFFilePicker
+ *   name="customImages"
+ *   accept="image/*"
+ *   render={({
+ *     dropzoneRef,
+ *     dragging,
+ *     loading,
+ *     field: { value: files, onChange },
+ *     openFilePicker,
+ *   }) => {
+ *     const handleRemove = (preview: string) => {
+ *       onChange(files.filter((f) => f.preview !== preview));
+ *     };
+ *
+ *     return (
+ *       <div className="flex flex-col gap-3">
+ *         <div
+ *           ref={dropzoneRef}
+ *           onClick={() => openFilePicker()}
+ *           className={`relative flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors ${
+ *             dragging ? 'border-primary-400 bg-primary-50' : 'border-gray-300 hover:border-primary-300'
+ *           }`}
+ *         >
+ *           <div className="flex items-center gap-3 text-sm text-gray-500">
+ *             <UploadIcon className="h-5 w-5" />
+ *             <span>{dragging ? 'Drop images here' : 'Click to upload or drag and drop'}</span>
+ *           </div>
+ *           {loading && (
+ *             <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-white/50">
+ *               <Spinner className="h-5 w-5" />
+ *             </div>
+ *           )}
+ *         </div>
+ *
+ *         {!!files?.length && (
+ *           <div className="grid grid-cols-4 gap-2 sm:grid-cols-5 md:grid-cols-6">
+ *             {files.map((file) => (
+ *               <div key={file.preview} className="group relative aspect-square">
+ *                 <img
+ *                   src={file.preview}
+ *                   alt={file.name}
+ *                   className="h-full w-full rounded-lg border object-cover"
+ *                 />
+ *                 <button
+ *                   type="button"
+ *                   onClick={() => handleRemove(file.preview)}
+ *                   className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white opacity-0 shadow-sm hover:bg-red-600 group-hover:opacity-100"
+ *                 >
+ *                   <XIcon className="h-3 w-3" />
+ *                 </button>
+ *               </div>
+ *             ))}
+ *           </div>
+ *         )}
+ *       </div>
+ *     );
+ *   }}
+ * />
+ * ```
+ *
+ * */
+declare function RHFFilePicker<T extends HTMLElement = HTMLDivElement>(props: RHFFilePickerProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace RHFFilePicker {
+    var displayName: string;
+}
+
+/**
+ * A wrapper around React Hook Form's Controller component that auto-injects the control prop.
+ *
+ * Automatically retrieves the `control` prop from `useFormContext`, eliminating the need to
+ * pass it manually. This simplifies usage with FormProvider and reduces boilerplate code.
+ *
+ * **When to pass `control` explicitly:**
+ * Only pass the `control` prop when you have nested FormProviders and need to connect to a
+ * specific form instance. For example, when one form is rendered inside another FormProvider,
+ * you'll need to pass the parent form's control explicitly to avoid using the inner form's context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - control auto-injected from FormProvider
+ * <FormProvider {...methods}>
+ *   <RHFController
+ *     name="email"
+ *     render={({ field }) => (
+ *       <input
+ *         {...field}
+ *         type="email"
+ *         placeholder="Enter email"
+ *       />
+ *     )}
+ *   />
+ * </FormProvider>
+ *
+ * // With validation rules
+ * <RHFController
+ *   name="username"
+ *   rules={{ required: 'Username is required' }}
+ *   render={({ field, fieldState }) => (
+ *     <div>
+ *       <input {...field} />
+ *       {fieldState.error && <span>{fieldState.error.message}</span>}
+ *     </div>
+ *   )}
+ * />
+ *
+ * // Custom component integration
+ * <RHFController
+ *   name="customField"
+ *   render={({ field, fieldState, formState }) => (
+ *     <CustomComponent
+ *       value={field.value}
+ *       onChange={field.onChange}
+ *       error={fieldState.error}
+ *       isDirty={formState.isDirty}
+ *     />
+ *   )}
+ * />
+ *
+ * // Nested FormProviders - explicit control needed
+ * <FormProvider {...outerForm}>
+ *   <FormProvider {...innerForm}>
+ *     // This will use innerForm's control by default
+ *     <RHFController name="innerField" render={...} />
+ *
+ *     // Pass control explicitly to use outerForm
+ *     <RHFController
+ *       name="outerField"
+ *       control={outerForm.control}
+ *       render={({ field }) => <input {...field} />}
+ *     />
+ *   </FormProvider>
+ * </FormProvider>
+ * ```
+ */
+declare const RHFController: FC<ControllerProps>;
+
+interface SelectButtonProps {
+    /**
+     * Additional class name for the select button
+     * */
+    className?: string;
+    /**
+     * Prefix for the select button
+     * */
+    prefix?: FC | ReactNode;
+    /**
+     * Suffix for the select button
+     * */
+    suffix?: FC | ReactNode;
+}
+
+type HtmlButtonProps = DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+interface SelectOptionConfig<T> {
+    /**
+     * Value of the option
+     * */
+    value: T;
+    /**
+     * Used to identify the option in the list and filtering
+     * If you don't pass anything, children textContent will be used as label
+     * */
+    label: string;
+    visibility?: SelectOptionProps<T>["visibility"];
+    /**
+     * This is just a placeholder for the rest of the props in case we might need them in the future
+     * */
+    props: Omit<SelectOptionProps<T>, "children">;
+}
+interface CustomSelectOptionBaseArgs<T> extends Pick<SelectOptionConfig<T>, "value"> {
+    /**
+     * Whether the option is selected or not
+     * */
+    selected: boolean;
+    /**
+     * Whether the option has focus or not
+     * */
+    focused: boolean;
+}
+interface CustomSelectOptionArgs<T> extends CustomSelectOptionBaseArgs<T> {
+    /**
+     * Function to prevent the default onClick function
+     * If you call this function, You need to handle the onClick function yourself
+     * You can use `selectCurrentOption` to trigger the default onClick function
+     * or you can write your own onClick function according to your needs
+     * */
+    preventDefault: () => void;
+    /**
+     * Default onClick function that is called when the option is clicked
+     * It will select or deselect the option and close the menu if it's a single select
+     * */
+    selectCurrentOption: () => void;
+    /**
+     * Callback to close the select menu
+     * */
+    closeMenu: () => void;
+    /**
+     * Filtered keyword that is currently being used to filter the options
+     * */
+    filteredKeyword: string;
+}
+interface SelectOptionProps<T> extends Omit<SelectOptionConfig<T>, "props">, Omit<HtmlButtonProps, "children" | "value" | "className" | "onClick"> {
+    /**
+     * If you want to hide default check icon
+     * */
+    hideCheckIcon?: boolean;
+    className?: string | ((props: CustomSelectOptionBaseArgs<T>) => string);
+    children?: ReactNode | ((props: Omit<CustomSelectOptionArgs<T>, "preventDefault">) => ReactNode);
+    onClick?: (args: CustomSelectOptionArgs<T>) => void;
+    /**
+     * This will only be called when the option is selected and multiple is true
+     * */
+    onRemove?: (args: CustomSelectOptionArgs<T>) => void;
+    /**
+     * If you want to display the option always, even if it's empty
+     * i.e. when the user is filtering the options and no option is found
+     *
+     * if you want to display the option only when the options are empty
+     * then you can pass "empty" as value and if you want to display the option always
+     * then you can pass "always" as value
+     *
+     * If you want to display the option only when the options are empty and the user is filtering
+     * and that filter matches the option then you can pass "filtered-and-empty" as value
+     *
+     * Default: "default"
+     * */
+    visibility?: "default" | "always" | "empty" | "filtered-and-empty";
+}
+type SelectOptionElement<T = unknown> = ReactElement<SelectOptionProps<T>>;
+
+interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
+    inputRef?: RefCallback<HTMLInputElement | null> | RefObject<HTMLInputElement | null>;
+    /**
+     * Placeholder that will be shown when the select is empty
+     * */
+    placeholder?: string;
+    /**
+     * Additional class name for the placeholder
+     * */
+    placeholderClassName?: string;
+    wrapperClassName?: string;
+    /**
+     * Additional class name for the menu
+     * */
+    menuClassName?: string;
+    /**
+     * Select is disabled or not
+     * */
+    disabled?: boolean;
+    /**
+     * Whether to show the input for filtering the options
+     * Default is false
+     * */
+    filterable?: boolean | "inline" | "dropdown";
+    /**
+     * Whether to close the menu when an option is selected
+     * Default is true for single select and false for multi select
+     * */
+    closeMenuOnSelect?: boolean;
+    /**
+     * Placement of the menu
+     * Default is "bottom-start"
+     * */
+    placement?: Placement;
+    /**
+     * Floating strategy for the menu
+     * */
+    floatingStrategy?: Strategy;
+    /**
+     * Whether to hide the default empty UI when the select is empty
+     * If you pass `SelectEmpty` as children, this will set to true
+     * */
+    hideDefaultEmptyUI?: boolean;
+}
+interface SingleSelectProps<T> extends BaseSelectProps {
+    /**
+     * The value of the select
+     * */
+    value: T;
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange: (value: T) => void;
+    /**
+     * Disabling multiple select
+     * */
+    multiple?: false;
+}
+interface MultiSelectProps<T> extends BaseSelectProps {
+    /**
+     * The value of the select in array format
+     * */
+    value: T[];
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange: (value: T[]) => void;
+    /**
+     * For enabling multiple select
+     * */
+    multiple: true;
+}
+type SelectProps<T> = SingleSelectProps<T> | MultiSelectProps<T>;
+interface SelectOverload {
+    <T>(props: SingleSelectProps<T>): JSX.Element;
+    <T>(props: MultiSelectProps<T>): JSX.Element;
+    <T>(props: SelectProps<T>): JSX.Element;
+    displayName: string;
+}
+interface FocusedOption<T = unknown> extends SelectOptionConfig<T> {
+    focusType?: "keyboard" | "mouse";
+}
+interface SelectContextProps<T> extends Pick<BaseSelectProps, "disabled" | "prefix" | "suffix" | "placeholder" | "closeMenuOnSelect">, Omit<MultiSelectProps<T>, "value" | "onChange" | "multiple" | "renderDisplay"> {
+    /**
+     * The value of the select
+     * */
+    value: T | T[];
+    /**
+     * For checking if the select is multiple or single
+     * */
+    multiple?: boolean;
+    /**
+     * Input ref for the filter input
+     * Use this to work with keyword filter in custom select
+     * */
+    setInputRef: (_: any) => RefCallback<HTMLElement | null> | RefObject<HTMLElement | null> | undefined;
+    /**
+     * Ref for the input
+     * */
+    inputRef: RefObject<HTMLInputElement | null>;
+    /**
+     * For managing the open state of the menu
+     * */
+    open: boolean;
+    /**
+     * Setter for open state for the menu
+     * */
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Array of labels and values that are passed down as `SelectOption` to children
+     * */
+    options: SelectOptionConfig<T>[];
+    /**
+     * For filtering options that are binded to the input
+     * If you use custom `SelectButton` you should bind this to the input
+     * */
+    keyword: string;
+    /**
+     * Setter for filter keyword
+     * */
+    setKeyword: Dispatch<SetStateAction<string>>;
+    /**
+     * For managing the floating state of the menu
+     * *you rarely need to use this if you build custom select*
+     * */
+    floating: ReturnType<typeof useFloating>;
+    /**
+     * Open the select menu
+     * */
+    openMenu: () => void;
+    /**
+     * Close the select menu
+     * */
+    closeMenu: () => void;
+    /**
+     * Toggle the select menu
+     * */
+    toggleMenu: () => void;
+    /**
+     * Reusable function to check if the option is selected
+     * Usage:
+     * ```js
+     * isSelected("optionValue")
+     * ```
+     * */
+    isSelected: (optionValue: T) => boolean;
+    /**
+     * Reusable function to handle the change of the select
+     * This function handle the option value base on the select type(multiple or single)
+     * If multiple select, it will add or remove the value from the array
+     * and if single select, it will replace the value
+     *
+     * Usage:
+     * ```js
+     * handleChange("optionValue")
+     * ```
+     * */
+    handleChange: (optionValue: T) => void;
+    /**
+     * Current focused option that is selected by keyboard or mouse hover
+     * */
+    focusedOption: FocusedOption<T> | null;
+    /**
+     * Setter for focused option in case you want to update the focused option to a specific option
+     * */
+    setFocusedOption: Dispatch<SetStateAction<FocusedOption<T> | null>>;
+    /**
+     * Whether the select is empty when the filter is applied
+     * */
+    isEmpty: boolean;
+    /**
+     * Ref for the menu scroll container
+     * Used internally for scrolling focused options into view
+     * */
+    menuScrollContainerRef: RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * A customizable select dropdown component with support for single and multiple selections.
+ *
+ * Features include:
+ * - Single or multiple selection modes
+ * - Keyboard navigation and search
+ * - Custom positioning with floating-ui
+ * - Click-outside to close
+ * - Customizable trigger and menu components
+ *
+ * @example
+ * ```tsx
+ * // Basic single select
+ * <Select value={selectedValue} onChange={setSelectedValue}>
+ *   <SelectOption value="option1" label="Option 1" />
+ *   <SelectOption value="option2" label="Option 2" />
+ * </Select>
+ *
+ * // Multiple select
+ * <Select
+ *   multiple
+ *   value={selectedValues}
+ *   onChange={setSelectedValues}
+ * >
+ *   <SelectOption value="opt1" label="Option 1" />
+ *   <SelectOption value="opt2" label="Option 2" />
+ *   <SelectOption value="opt3" label="Option 3" />
+ * </Select>
+ *
+ * // With custom placement
+ * <Select
+ *   value={value}
+ *   onChange={setValue}
+ *   placement="top-start"
+ * >
+ *   <SelectOption value="a" label="Choice A" />
+ *   <SelectOption value="b" label="Choice B" />
+ * </Select>
+ * ```
+ */
+declare const Select: SelectOverload;
+
+/**
+ * An individual selectable option within a Select dropdown component.
+ *
+ * Features:
+ * - Automatic keyboard and mouse focus management
+ * - Custom content rendering via render props
+ * - Visibility control (default, always, empty, filtered-and-empty)
+ * - Custom click handlers with access to selection state
+ * - preventDefault support for complete custom click behavior control
+ * - Auto-scrolling when focused via keyboard
+ * - Support for both single and multiple selection modes
+ * - Optional check icon display
+ * - Disabled state support
+ *
+ * @example
+ * ```tsx
+ * // Basic option
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption value="react" label="React" />
+ *   <SelectOption value="vue" label="Vue" />
+ *   <SelectOption value="angular" label="Angular" />
+ * </Select>
+ *
+ * // Custom content with render function
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption value="user1" label="John Doe">
+ *     {({ selected, focused }) => (
+ *       <div className={focused ? 'font-bold' : ''}>
+ *         <Avatar src="/john.jpg" />
+ *         <span>John Doe</span>
+ *         {selected && <CheckIcon />}
+ *       </div>
+ *     )}
+ *   </SelectOption>
+ * </Select>
+ *
+ * // Hide check icon
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption value="opt1" label="Option 1" hideCheckIcon />
+ *   <SelectOption value="opt2" label="Option 2" hideCheckIcon />
+ * </Select>
+ *
+ * // Custom onClick handler (default behavior still runs)
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption
+ *     value="custom"
+ *     label="Custom Action"
+ *     onClick={({ selectCurrentOption, closeMenu }) => {
+ *       console.log('Custom action triggered');
+ *       selectCurrentOption(); // Manually trigger selection
+ *       closeMenu();
+ *     }}
+ *   />
+ * </Select>
+ *
+ * // Using preventDefault to completely override default behavior
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption
+ *     value="confirm"
+ *     label="Delete Item"
+ *     onClick={({ preventDefault, value, closeMenu }) => {
+ *       preventDefault(); // Prevents default selection behavior
+ *
+ *       // Implement completely custom logic
+ *       if (window.confirm('Are you sure you want to delete?')) {
+ *         handleDelete(value);
+ *         closeMenu();
+ *       }
+ *       // Note: Item is NOT selected unless you manually call selectCurrentOption
+ *     }}
+ *   />
+ * </Select>
+ *
+ * // preventDefault with conditional selection
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption
+ *     value="premium"
+ *     label="Premium Feature"
+ *     onClick={({ preventDefault, selectCurrentOption, value }) => {
+ *       preventDefault();
+ *
+ *       if (userHasPremium) {
+ *         selectCurrentOption(); // Allow selection for premium users
+ *       } else {
+ *         openUpgradeModal(); // Show upgrade prompt for free users
+ *       }
+ *     }}
+ *   />
+ * </Select>
+ *
+ * // preventDefault for custom async operations
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption
+ *     value="createNew"
+ *     label="+ Create New Category"
+ *     onClick={async ({ preventDefault, selectCurrentOption, closeMenu }) => {
+ *       preventDefault();
+ *
+ *       const newCategory = await openCreateDialog();
+ *       if (newCategory) {
+ *         await saveCategory(newCategory);
+ *         selectCurrentOption(); // Select after async operation
+ *         closeMenu();
+ *       }
+ *     }}
+ *   />
+ * </Select>
+ *
+ * // Visibility variants
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch />
+ *   <SelectOption value="opt1" label="Normal Option" visibility="default" />
+ *   <SelectOption value="add" label="+ Add New" visibility="always" />
+ *   <SelectOption value="create" label="Create New Item" visibility="empty" />
+ * </Select>
+ *
+ * // Disabled option
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption value="enabled" label="Enabled Option" />
+ *   <SelectOption value="disabled" label="Disabled Option" disabled />
+ * </Select>
+ *
+ * // Custom className based on state
+ * <Select value={value} onChange={setValue}>
+ *   <SelectOption
+ *     value="premium"
+ *     label="Premium Option"
+ *     className={({ selected, focused }) =>
+ *       `${selected ? 'bg-blue-500' : ''} ${focused ? 'ring-2' : ''}`
+ *     }
+ *   />
+ * </Select>
+ *
+ * // Multiple select with onRemove
+ * <Select multiple value={values} onChange={setValues}>
+ *   <SelectOption
+ *     value="tag1"
+ *     label="Tag 1"
+ *     onRemove={({ value }) => console.log('Removing', value)}
+ *   />
+ * </Select>
+ * ```
+ */
+declare const SelectOption: {
+    <T>({ children, ...props }: SelectOptionProps<T>): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+interface SelectEmptyProps extends PropsWithChildren, HtmlHTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Displays a placeholder message when no options match the search filter in a Select component.
+ *
+ * This component only renders when the Select is in an empty state (no matching options).
+ * Use it inside a Select component to provide feedback when search/filter returns no results.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default message
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch />
+ *   <SelectOption value="apple" label="Apple" />
+ *   <SelectOption value="banana" label="Banana" />
+ *   <SelectEmpty />
+ * </Select>
+ *
+ * // Custom empty message
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch />
+ *   <SelectOption value="react" label="React" />
+ *   <SelectOption value="vue" label="Vue" />
+ *   <SelectEmpty>
+ *     No frameworks found. Try a different search.
+ *   </SelectEmpty>
+ * </Select>
+ *
+ * // With custom styling
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch />
+ *   <SelectOption value="opt1" label="Option 1" />
+ *   <SelectEmpty className="text-red-500 italic">
+ *     ⚠️ No results found
+ *   </SelectEmpty>
+ * </Select>
+ * ```
+ */
+declare const SelectEmpty: {
+    ({ children, className, ...rest }: SelectEmptyProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * A search input component for filtering Select options with full keyboard navigation support.
+ *
+ * Features:
+ * - Real-time filtering of select options as you type
+ * - Keyboard navigation with Arrow Up/Down keys
+ * - Enter key to select focused option
+ * - Tab key support for navigation
+ * - Auto-focuses first matching option during search
+ * - Works seamlessly with single and multiple select modes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch />
+ *   <SelectOption value="apple" label="Apple" />
+ *   <SelectOption value="banana" label="Banana" />
+ *   <SelectOption value="cherry" label="Cherry" />
+ *   <SelectEmpty>No fruits found</SelectEmpty>
+ * </Select>
+ *
+ * // Custom placeholder
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch placeholder="Search countries..." />
+ *   <SelectOption value="us" label="United States" />
+ *   <SelectOption value="uk" label="United Kingdom" />
+ *   <SelectOption value="ca" label="Canada" />
+ * </Select>
+ *
+ * // With custom styling
+ * <Select value={value} onChange={setValue}>
+ *   <SelectDropdownSearch
+ *     placeholder="Find your option"
+ *     className="border-2 border-blue-500"
+ *   />
+ *   <SelectOption value="opt1" label="Option 1" />
+ *   <SelectOption value="opt2" label="Option 2" />
+ * </Select>
+ *
+ * // Multiple select with search
+ * <Select multiple value={values} onChange={setValues}>
+ *   <SelectDropdownSearch placeholder="Search tags..." />
+ *   <SelectOption value="react" label="React" />
+ *   <SelectOption value="vue" label="Vue" />
+ *   <SelectOption value="angular" label="Angular" />
+ * </Select>
+ * ```
+ */
+declare const SelectDropdownSearch: {
+    ({ placeholder, className, ...rest }: Omit<InputProps, "value" | "onChange" | "onKeyDown">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SelectTriggerBaseRenderProps<T> extends Pick<SelectContextProps<T>, "toggleMenu" | "open" | "openMenu" | "closeMenu" | "placeholder" | "handleChange" | "keyword"> {
+    /**
+     * Select has a value or not, use this prop to display placeholder or something.
+     * */
+    hasValue: boolean;
+    /**
+     * Filtered options
+     * */
+    filteredOptions: SelectOptionConfig<T>[];
+    /**
+     * All options that are available
+     * */
+    options: SelectOptionConfig<T>[];
+    /**
+     * Pre defined function to update the filtered options
+     * */
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Pre defined function to update the focused option or menu state
+     * like open or close,
+     * */
+    handleKeyboardInteraction: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+interface SingleSelectTriggerRenderProps<T> extends SelectTriggerBaseRenderProps<T> {
+    selectedOptions: Pick<SelectOptionConfig<T>, "label" | "value">;
+}
+interface MultiSelectTriggerRenderProps<T> extends SelectTriggerBaseRenderProps<T> {
+    selectedOptions: Pick<SelectOptionConfig<T>, "label" | "value">[];
+}
+interface SingleSelectTriggerProps<T> {
+    multiple?: false;
+    children: (childrenProps: SingleSelectTriggerRenderProps<T>) => ReactNode;
+}
+interface MultiSelectTriggerProps<T> {
+    multiple: true;
+    children: (childrenProps: MultiSelectTriggerRenderProps<T>) => ReactNode;
+}
+interface SelectTriggerProps<T> {
+    multiple?: boolean;
+    children: SingleSelectTriggerProps<T>["children"] | MultiSelectTriggerProps<T>["children"];
+}
+interface SelectTriggerOverload {
+    <T>(props: SingleSelectTriggerProps<T>): ReactNode;
+    <T>(props: MultiSelectTriggerProps<T>): ReactNode;
+    <T>(props: SelectTriggerProps<T>): ReactNode;
+    displayName: string;
+}
+
+/**
+ * Custom trigger component for the Select component.
+ *
+ * Example usage:
+ * ```js
+  <RHFSelect multiple name="select">
+    <SelectTrigger multiple>
+      {({
+        openMenu,
+        keyword,
+        selectedOptions,
+        handleChange,
+        handleInputChange,
+        handleKeyboardInteraction,
+      }) => {
+        return (
+          <div>
+            <Input
+              placeholder="Search......"
+              value={keyword}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyboardInteraction}
+              autoComplete="off"
+              autoCapitalize="off"
+              autoCorrect="off"
+              onFocus={openMenu}
+              spellCheck={false}
+            />
+
+            {!!selectedOptions.length && (
+              <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1">
+                {selectedOptions.map((option) => {
+                  return (
+                    <Button
+                      className="flex gap-2"
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleChange(option.value);
+                      }}>
+                      <span>{option.label}</span>
+                    </Button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </SelectTrigger>
+
+    {Array.from({ length: 12 }, (_, i) => (
+      <SelectOption
+        key={i}
+        value={i}
+        label={new Date(0, i).toLocaleString("default", { month: "long" })}
+      />
+    ))}
+  </RHFSelect>
+ *
+ * ---
+ * ```
+ * */
+declare const SelectTrigger: SelectTriggerOverload;
+
+interface SelectConsumerProps<T> {
+    render: (props: SelectContextProps<T>) => ReactNode;
+}
+
+declare const SelectConsumer: {
+    <T>({ render }: SelectConsumerProps<T>): ReactNode;
+    displayName: string;
+};
+
+declare const useSelect: <T = unknown>() => SelectContextProps<T>;
+
+interface RHFSingleSelectProps<T> extends Omit<SingleSelectProps<T>, "value" | "onChange">, RHFBaseProps {
+    onChange?: (value: T) => void;
+}
+interface RHFMultiSelectProps<T> extends Omit<MultiSelectProps<T>, "value" | "onChange">, RHFBaseProps {
+    onChange?: (value: T[]) => void;
+}
+type RHFSelectProps<T> = RHFSingleSelectProps<T> | RHFMultiSelectProps<T>;
+interface RHFSelectOverload {
+    displayName: string;
+    <T>(props: RHFSingleSelectProps<T>): JSX.Element;
+    <T>(props: RHFMultiSelectProps<T>): JSX.Element;
+}
+
+/**
+ * A select dropdown component integrated with React Hook Form.
+ *
+ * Supports both single and multiple selection modes with automatic error state display.
+ * Built on the Select component with full React Hook Form integration.
+ *
+ * @example
+ * ```tsx
+ * // Basic single select
+ * <RHFSelect name="country">
+ *   <SelectOption value="us" label="United States" />
+ *   <SelectOption value="uk" label="United Kingdom" />
+ *   <SelectOption value="ca" label="Canada" />
+ * </RHFSelect>
+ *
+ * // Multiple selection
+ * <RHFSelect name="skills" multiple>
+ *   <SelectOption value="js" label="JavaScript" />
+ *   <SelectOption value="ts" label="TypeScript" />
+ *   <SelectOption value="react" label="React" />
+ * </RHFSelect>
+ *
+ * // With custom option styling
+ * <RHFSelect name="priority">
+ *   {['low', 'medium', 'high'].map((priority) => (
+ *     <SelectOption
+ *       key={priority}
+ *       value={priority}
+ *       label={priority.charAt(0).toUpperCase() + priority.slice(1)}
+ *       className={({ selected }) =>
+ *         selected ? "text-blue-600 font-bold" : "text-gray-700"
+ *       }
+ *     />
+ *   ))}
+ * </RHFSelect>
+ *
+ * // With onChange callback
+ * <RHFSelect
+ *   name="category"
+ *   onChange={(value) => {
+ *     console.log('Selected:', value);
+ *     fetchSubcategories(value);
+ *   }}
+ * >
+ *   <SelectOption value="1" label="Category 1" />
+ *   <SelectOption value="2" label="Category 2" />
+ * </RHFSelect>
+ * ```
+ */
+declare const RHFSelect: RHFSelectOverload;
+
+interface TooltipProps extends PropsWithChildren {
+    /**
+     * The content of the tooltip
+     * */
+    content?: string | ReactNode | FC;
+    /**
+     * The duration of the delay before the tooltip appears
+     * */
+    delayDuration?: number;
+    /**
+     * Classname to apply to the tooltip
+     * */
+    className?: string;
+    /**
+     * Classname to apply to the tooltip trigger
+     * ie. the element that triggers the tooltip to appear
+     * @example
+     *
+     * ```js
+     * <Tooltip content="hello world">
+     *  <Button>Hover me</Button> // <-- This is the tooltip trigger
+     * </Tooltip>
+     * ```
+     * */
+    triggerClassName?: string;
+    /**
+     * Whether consider the trigger as a child
+     * Use this to avoid invalid button nesting errors when using a button as the trigger
+     * If you use custom components as the trigger, you might need to wrap with `forwardRef`
+     * */
+    triggerAsChild?: boolean;
+    /**
+     * The background color of the tooltip and the arrow pointing to the target
+     * */
+    backgroundColor?: string;
+    /**
+     * The side of the tooltip to display
+     * */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The offset of the tooltip from the trigger
+     * */
+    sideOffset?: number;
+}
+
+/**
+ * Tooltip displays contextual information in a floating overlay when users hover over or focus on an element.
+ * Built on Radix UI, it provides accessible tooltips with customizable positioning, delays, and styling.
+ * Returns children unchanged if no content is provided.
+ *
+ * @example
+ * Icon button with helpful hint:
+ *
+ * ```tsx
+ * <Tooltip content="Add new item" side="right" delayDuration={300}>
+ *   <button className="p-2">
+ *     <PlusIcon />
+ *   </button>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * Complex tooltip content:
+ *
+ * ```tsx
+ * <Tooltip
+ *   content={
+ *     <div>
+ *       <strong>Premium Feature</strong>
+ *       <p>Upgrade to access this feature</p>
+ *     </div>
+ *   }
+ *   backgroundColor="#1f2937"
+ *   sideOffset={10}
+ * >
+ *   <LockIcon />
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * Bottom-positioned with custom delay:
+ *
+ * ```tsx
+ * <Tooltip
+ *   content="Last updated: 2 hours ago"
+ *   side="bottom"
+ *   delayDuration={500}
+ * >
+ *   <span>Status: Active</span>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: FC<TooltipProps>;
+
+/** Extensible variant map - To allow module augmentation */
+interface AlertVariantMap {
+    error: unknown;
+    warning: unknown;
+    info: unknown;
+    success: unknown;
+    default: unknown;
+}
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Alert variant to display.(Default: 'error')
+     * */
+    variant?: keyof AlertVariantMap;
+    /**
+     * Determines if the alert should be condensed.(Default: false)
+     * */
+    condensed?: boolean;
+    /**
+     * Main message to display in the alert.
+     */
+    title: ReactNode | FC;
+    /**
+     * Extra description to display in the alert.
+     */
+    description?: ReactNode | FC;
+    /**
+     * Callback function to handle the remove event.
+     */
+    onRemove?: () => void;
+    /**
+     * Custom icon to display in the alert.
+     * If provided, iconClassName will be ignored.
+     */
+    icon?: ReactNode | FC;
+    /**
+     * Custom class name for the icon.
+     * Only used if icon is not provided.
+     */
+    iconClassName?: string;
+}
+
+/**
+ * An alert component for displaying important messages with different severity levels.
+ *
+ * Supports multiple variants (error, success, warning, info), optional descriptions,
+ * custom icons, and dismissal functionality. The `condensed` prop reduces vertical padding
+ * for a more compact appearance.
+ *
+ * @example
+ * ```tsx
+ * // Basic alert
+ * <Alert title="This is an alert message" />
+ *
+ * // Different variants
+ * <Alert variant="success" title="Success!" />
+ * <Alert variant="warning" title="Warning!" />
+ * <Alert variant="info" title="Information" />
+ *
+ * // Condensed style
+ * <Alert variant="success" condensed title="This is a success message" />
+ *
+ * // With description and remove button
+ * <Alert
+ *   variant="warning"
+ *   title="Warning!"
+ *   description="This is a detailed warning message with more context."
+ *   onRemove={() => console.log('Alert dismissed')}
+ * />
+ *
+ * // With custom icon
+ * <Alert
+ *   variant="info"
+ *   title="Custom Icon"
+ *   icon={<CustomIcon />}
+ * />
+ * ```
+ */
+declare const Alert: FC<AlertProps>;
+
+interface PaginationProps {
+    /**
+     * Current page number.
+     */
+    currentPage: number;
+    /**
+     * Total number of pages.
+     */
+    totalPages: number;
+    /**
+     * Callback function to handle the page change event.
+     */
+    onChange: (page: number) => void;
+    /**
+     * Custom styling(classname) to apply to the component.
+     */
+    className?: string;
+}
+
+/**
+ * A pagination component for navigating through multiple pages of content.
+ *
+ * Automatically handles ellipsis display for large page counts and hides itself
+ * when there is only one page. Features previous/next buttons and direct page
+ * number navigation.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [page, setPage] = useState(1);
+ * <Pagination
+ *   currentPage={page}
+ *   totalPages={10}
+ *   onChange={setPage}
+ * />
+ *
+ * // With API data fetching
+ * <Pagination
+ *   currentPage={currentPage}
+ *   totalPages={Math.ceil(totalItems / itemsPerPage)}
+ *   onChange={(newPage) => {
+ *     setCurrentPage(newPage);
+ *     fetchData(newPage);
+ *   }}
+ * />
+ *
+ * // Custom styling
+ * <Pagination
+ *   currentPage={page}
+ *   totalPages={20}
+ *   onChange={setPage}
+ *   className="justify-center mt-8"
+ * />
+ * ```
+ */
+declare const Pagination: FC<PaginationProps>;
+
+interface DialogContentProps extends DialogOptions {
+    /**
+     * Function to close the dialog.
+     * In case you want to close the dialog programmatically.
+     * */
+    dismiss: () => void;
+}
+interface ActionsArgs extends DialogContentProps {
+    /**
+     * Function to be prevented to close the dialog.
+     * By default, the dialog will be closed after the action is executed.
+     * You can prevent the dialog from closing by calling this function.
+     *
+     * @example
+     * ```tsx
+     * const handleConfirm = ({ preventDefault }) => {
+     *  // Do something
+     *  preventDefault();
+     * };
+     * */
+    preventDefault: () => void;
+}
+interface DialogOptions {
+    /**
+     * Content to be displayed in the confirm dialog.
+     * */
+    content?: ReactNode | FC<DialogContentProps>;
+    /**
+     * Additional class name for the confirm modal
+     * */
+    className?: string;
+    /**
+     * Dismiss the dialog on pressing the `Escape` key.
+     * Default is `true`.
+     * */
+    dismissOnEsc?: boolean;
+    /**
+     * Dismiss the dialog on clicking outside the dialog.
+     * Default is `true`.
+     * */
+    dismissOnOutsideClick?: boolean;
+    /** Data attributes to be added to the dialog */
+    [key: `data-${string}`]: string;
+}
+
+/**
+ * Dialog is a lightweight, imperative modal component that renders content in a centered overlay.
+ * It serves as the foundational layer for more complex dialog patterns like ConfirmDialog.
+ *
+ * The component automatically handles focus management, escape key dismissal, and click-outside
+ * behavior. Content can be provided as a React component or render function that receives
+ * a dismiss callback for programmatic control.
+ *
+ * @example
+ * Image lightbox with custom controls:
+ *
+ * ```tsx
+ * const openImageViewer = (imageUrl: string) => {
+ *   Dialog.show({
+ *     content: ({ dismiss }) => (
+ *       <div className="relative">
+ *         <img src={imageUrl} alt="Preview" className="max-w-4xl" />
+ *         <button
+ *           onClick={dismiss}
+ *           className="absolute top-4 right-4"
+ *         >
+ *           ✕
+ *         </button>
+ *       </div>
+ *     ),
+ *     className: "bg-transparent shadow-none",
+ *     dismissOnEsc: true,
+ *     dismissOnOutsideClick: true
+ *   });
+ * };
+ * ```
+ *
+ * @example
+ * Form modal with data submission:
+ *
+ * ```tsx
+ * const showUserForm = (userId?: string) => {
+ *   Dialog.show({
+ *     content: ({ dismiss }) => {
+ *       const [formData, setFormData] = useState({});
+ *
+ *       const handleSubmit = async () => {
+ *         await saveUser(userId, formData);
+ *         dismiss();
+ *         showSuccessToast("User saved");
+ *       };
+ *
+ *       return (
+ *         <UserForm
+ *           data={formData}
+ *           onChange={setFormData}
+ *           onSubmit={handleSubmit}
+ *           onCancel={dismiss}
+ *         />
+ *       );
+ *     },
+ *     className: "max-w-2xl p-6",
+ *     dismissOnEsc: false,
+ *     dismissOnOutsideClick: false
+ *   });
+ * };
+ * ```
+ *
+ * @example
+ * Video player modal with tracking:
+ *
+ * ```tsx
+ * Dialog.show({
+ *   content: () => (
+ *     <VideoPlayer
+ *       src="/tutorial.mp4"
+ *       autoPlay
+ *       onEnded={() => {
+ *         trackAnalytics("video_completed");
+ *         Dialog.dismiss();
+ *       }}
+ *     />
+ *   ),
+ *   className: "w-screen h-screen max-w-none",
+ *   dismissOnEsc: true,
+ *   "data-video-modal": "true"
+ * });
+ * ```
+ *
+ * @example
+ * Loading state with external dismissal:
+ *
+ * ```tsx
+ * // Show loading dialog
+ * Dialog.show({
+ *   content: () => <LoadingSpinner text="Processing payment..." />,
+ *   className: "w-64",
+ *   dismissOnEsc: false,
+ *   dismissOnOutsideClick: false
+ * });
+ *
+ * // Dismiss from anywhere after async operation
+ * await processPayment();
+ * Dialog.dismiss();
+ * ```
+ *
+ * @note
+ * For dialogs requiring user confirmation with standardized action buttons,
+ * consider using the `ConfirmDialog` component instead, which provides a
+ * more opinionated interface for confirmation workflows.
+ */
+declare const Dialog: {
+    show: (options: DialogOptions) => void;
+    dismiss: () => void;
+};
+
+interface ConfirmDialogContentProps extends ConfirmDialogOptions {
+    /**
+     * Function to close the dialog.
+     * In case you want to close the dialog programmatically.
+     * */
+    dismiss: () => void;
+}
+interface ConfirmDialogActionsArgs extends ConfirmDialogContentProps {
+    /**
+     * Function to be prevented to close the dialog.
+     * By default, the dialog will be closed after the action is executed.
+     * You can prevent the dialog from closing by calling this function.
+     *
+     * @example
+     * ```tsx
+     * const handleConfirm = ({ preventDefault }) => {
+     *  // Do something
+     *  preventDefault();
+     * };
+     * */
+    preventDefault: () => void;
+}
+interface ConfirmDialogOptions extends Omit<DialogOptions, "content" | "className"> {
+    /**
+     * Title of the confirm dialog
+     * */
+    title?: string;
+    /**
+     * Content to be displayed in the confirm dialog.
+     * */
+    content?: ReactNode | FC<ConfirmDialogContentProps>;
+    /**
+     * Label for the  confirm button.
+     * */
+    confirmButtonLabel?: string;
+    /**
+     * Label for the cancel button.
+     * */
+    cancelButtonLabel?: string;
+    /**
+     * Additional class name for the confirm modal
+     * */
+    className?: string;
+    /**
+     * Additional class name for the title
+     * */
+    titleClassName?: string;
+    /**
+     * Additional class name for the content
+     * */
+    contentClassName?: string;
+    /**
+     * Optional function to be called when the user confirms the action in the dialog.
+     * */
+    onConfirm?: (e: ConfirmDialogActionsArgs) => void;
+    /**
+     * Optional function to be called when the user cancel the action in the dialog.
+     * */
+    onCancel?: (e: ConfirmDialogActionsArgs) => void;
+}
+
+/**
+ * ConfirmDialog is a flexible confirmation modal component that prompts users for action validation.
+ * Built on top of the Dialog component, it provides a standardized interface for displaying
+ * confirmation prompts with customizable content, buttons, and behavior.
+ *
+ * @example
+ * Delete confirmation with simple text:
+ *
+ * ```tsx
+ * ConfirmDialog.show({
+ *   title: "Delete Account",
+ *   content: "Are you sure you want to permanently delete your account? This action cannot be undone.",
+ *   confirmButtonLabel: "Delete",
+ *   cancelButtonLabel: "Keep Account",
+ *   onConfirm: async () => {
+ *     showSuccessNotification("Account deleted successfully");
+ *   },
+ *   onCancel: () => {
+ *     trackAnalytics("account_deletion_cancelled");
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * By default, if you pass an async function to `onConfirm` or `onCancel`, the dialog
+ * will show a loading state on the respective button until the promise resolves.
+ *
+ * ```tsx
+ * ConfirmDialog.show({
+ *   title: "Save Changes",
+ *   content: "Would you like to save your changes before leaving?",
+ *   confirmButtonLabel: "Save & Exit",
+ *   cancelButtonLabel: "Discard",
+ *   className: "max-w-[500px]",
+ *   onConfirm: async () => {
+ *     try {
+ *       await saveFormData();
+ *       router.push("/dashboard");
+ *     } catch (error) {
+ *       showError("Failed to save changes");
+ *       dismiss();
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * Rich content with custom component:
+ *
+ * ```tsx
+ * ConfirmDialog.show({
+ *   title: "Transfer Ownership",
+ *   content: ({ dismiss }) => (
+ *     <div className="space-y-4">
+ *       <p>Transfer project ownership to:</p>
+ *       <UserSelector onSelect={setSelectedUser} />
+ *       <Button variant="link" onClick={dismiss}>
+ *         Cancel transfer
+ *       </Button>
+ *     </div>
+ *   ),
+ *   confirmButtonLabel: "Transfer Now",
+ *   cancelButtonLabel: "Go Back",
+ *   titleClassName: "text-warning",
+ *   contentClassName: "min-h-[200px]",
+ *   onConfirm: ({ dismiss }) => {
+ *     performTransfer();
+ *     dismiss();
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * Programmatic dismissal from external code:
+ *
+ * ```tsx
+ * // Show dialog
+ * ConfirmDialog.show({
+ *   title: "Processing",
+ *   content: "Please wait while we process your request..."
+ * });
+ *
+ * // Close from anywhere in your app
+ * ConfirmDialog.dismiss();
+ * ```
+ */
+declare const ConfirmDialog: {
+    show: (options: ConfirmDialogOptions) => void;
+    dismiss: () => void;
+};
+
+interface GeckoUIPortalProps {
+    mermaidConfig?: MermaidConfig;
+    toastOptions?: ToasterProps;
+}
+
+/**
+ * GeckoUIPortal is a container component that wraps the Toast, ConfirmDialog, and other components that need to mount at the top level of the application.
+ *
+ * Please refer to [MermaidOptions](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-schema) to see the available options for the `mermaidOptions` prop.
+ * @example
+ *
+ * ```js
+ * import { GeckoUIPortal } from '@geckoui/geckoui';
+ *
+ * renderApp(
+ *  <>
+ *   <App />
+ *   <GeckoUIPortal
+ *      toastOptions={{
+ *        position: 'bottom-right',
+ *        ... other options
+ *      }},
+ *      mermaidConfig={{
+ *        startOnLoad: true,
+ *      }}
+ *   />
+ *  </>
+ * )
+ * ```
+ * */
+declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
+
+/** Extensible placement map - To allow module augmentation */
+interface DrawerPlacementMap {
+    top: unknown;
+    bottom: unknown;
+    left: unknown;
+    right: unknown;
+}
+interface DrawerProps {
+    /**
+     * Open/Close the drawer
+     * */
+    open: boolean;
+    /**
+     * Allow clicking outside of drawer to close
+     * If true, you can click through backdrop to close the drawer
+     * If you pass `handleClose` prop, you can use it to close the drawer
+     * Use it with caution, it may cause bad UX in some cases
+     * Eg. let's say you have an `a` tag that points to another page,
+     * if you click on that element, it will close the drawer and navigate to the new page
+     *
+     * ---
+     * Default: false
+     * */
+    allowClickOutside?: boolean;
+    /**
+     * Callback fired when click on outside of drawer
+     * */
+    handleClose?: () => void;
+    /**
+     * Backdrop show/hide If true,
+     * This is just a visual effect just setting opacity to 0
+     * So, you can still click the backdrop to close the drawer if you pass `handleClose` prop to close the drawer
+     * */
+    hideBackdrop?: boolean;
+    /**
+     * Display the content of the drawer
+     * */
+    children?: ReactNode;
+    /**
+     * The placement of Drawer
+     *
+     * Default: 'right'
+     * */
+    placement?: keyof DrawerPlacementMap;
+    /**
+     * Additional class name for the backdrop
+     * */
+    backdropClassName?: string;
+    /**
+     * Additional class name for drawer
+     * */
+    className?: string;
+    /**
+     * If true, the drawer will dismiss when the escape key is pressed
+     * Default is true
+     * */
+    dismissOnEscape?: boolean;
+}
+
+/**
+ * Drawer is a slide-out panel component that displays auxiliary content from any edge of the viewport.
+ * It provides a less intrusive alternative to modals for navigation menus, settings panels, filters,
+ * and contextual information.
+ *
+ * The component supports four placement directions (top, right, bottom, left) with smooth transitions,
+ * optional backdrop overlay, and flexible dismissal behaviors including ESC key and click-outside handling.
+ *
+ * @example
+ * Mobile navigation menu:
+ *
+ * ```tsx
+ * const [menuOpen, setMenuOpen] = useState(false);
+ *
+ * <button onClick={() => setMenuOpen(true)}>
+ *   <MenuIcon />
+ * </button>
+ *
+ * <Drawer
+ *   open={menuOpen}
+ *   handleClose={() => setMenuOpen(false)}
+ *   placement="left"
+ *   allowClickOutside
+ *   dismissOnEscape
+ *   className="w-80 bg-white shadow-xl"
+ * >
+ *   <nav className="p-6">
+ *     <NavigationLinks />
+ *   </nav>
+ * </Drawer>
+ * ```
+ *
+ * @example
+ * Filter panel with backdrop:
+ *
+ * ```tsx
+ * const [filtersOpen, setFiltersOpen] = useState(false);
+ *
+ * <Drawer
+ *   open={filtersOpen}
+ *   handleClose={() => setFiltersOpen(false)}
+ *   placement="right"
+ *   allowClickOutside={true}
+ *   backdropClassName="bg-black/60"
+ *   className="w-96 p-6"
+ * >
+ *   <FilterPanel
+ *     onApply={(filters) => {
+ *       applyFilters(filters);
+ *       setFiltersOpen(false);
+ *     }}
+ *   />
+ * </Drawer>
+ * ```
+ *
+ * @example
+ * Notification center from top:
+ *
+ * ```tsx
+ * <Drawer
+ *   open={showNotifications}
+ *   handleClose={() => setShowNotifications(false)}
+ *   placement="top"
+ *   hideBackdrop={false}
+ *   allowClickOutside
+ *   className="h-96 border-b shadow-lg"
+ * >
+ *   <NotificationList
+ *     notifications={notifications}
+ *     onMarkAllRead={handleMarkAllRead}
+ *   />
+ * </Drawer>
+ * ```
+ *
+ * @example
+ * Bottom sheet for mobile actions:
+ *
+ * ```tsx
+ * <Drawer
+ *   open={isBottomSheetOpen}
+ *   handleClose={() => setBottomSheetOpen(false)}
+ *   placement="bottom"
+ *   allowClickOutside
+ *   dismissOnEscape={false}
+ *   backdropClassName="bg-black/40"
+ *   className="h-64 rounded-t-2xl"
+ * >
+ *   <ActionSheet
+ *     actions={mobileActions}
+ *     onSelect={handleActionSelect}
+ *   />
+ * </Drawer>
+ * ```
+ *
+ * @example
+ * Settings panel without backdrop:
+ *
+ * ```tsx
+ * <Drawer
+ *   open={settingsVisible}
+ *   handleClose={() => setSettingsVisible(false)}
+ *   placement="right"
+ *   hideBackdrop
+ *   allowClickOutside={false}
+ *   className="w-[600px] border-l"
+ * >
+ *   <SettingsPanel
+ *     sections={settingsSections}
+ *     onSave={saveSettings}
+ *   />
+ * </Drawer>
+ * ```
+ */
+declare function Drawer({ open, allowClickOutside, handleClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare namespace Drawer {
+    var show: (node: ReactNode, options?: Omit<DrawerProps, "open" | "children">) => void;
+    var dismiss: () => void;
+}
+
+type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+type MenuButtonProps<T extends ReactTag> = MenuButtonProps$1<T>;
+type MenuItemsProps<T extends ReactTag> = MenuItemsProps$1<T>;
+type MenuItemProps<T extends ReactTag> = MenuItemProps$1<T>;
+
+/**
+ * Menu is a styled wrapper around HeadlessUI's Menu for creating dropdown menus and action lists.
+ * Provides pre-styled components for building accessible, keyboard-navigable menus.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const Menu: _headlessui_react._internal_ComponentMenu & {
+    Button: _headlessui_react._internal_ComponentMenuButton;
+    Items: _headlessui_react._internal_ComponentMenuItems;
+    Item: _headlessui_react._internal_ComponentMenuItem;
+    Section: _headlessui_react._internal_ComponentMenuSection;
+    Heading: _headlessui_react._internal_ComponentMenuHeading;
+    Separator: _headlessui_react._internal_ComponentMenuSeparator;
+};
+/**
+ * MenuButton triggers the menu dropdown when clicked or activated.
+ * Supports polymorphic rendering via the `as` prop.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuButton: <T extends ReactTag>({ as, ...rest }: MenuButtonProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * MenuItems contains the dropdown panel with all menu options.
+ * Automatically handles positioning, animations, and focus management.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuItems: <T extends ReactTag>({ as, ...rest }: MenuItemsProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * MenuItem represents an individual selectable option within the menu.
+ * Receives active and disabled states for conditional styling.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuItem: <T extends ReactTag>({ children, as, ...rest }: MenuItemProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * MenuHeading displays a non-interactive header within menu sections.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuHeading: _headlessui_react._internal_ComponentMenuHeading;
+/**
+ * MenuSection groups related menu items together under a heading.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuSection: _headlessui_react._internal_ComponentMenuSection;
+/**
+ * MenuSeparator provides a visual divider between menu groups or items.
+ * @see https://headlessui.com/react/menu for complete API documentation
+ */
+declare const MenuSeparator: _headlessui_react._internal_ComponentMenuSeparator;
+
+type DropdownClassName<T> = string | ((item: T, index: number) => string | undefined);
+interface DropdownItem {
+    label: ReactNode | FC;
+    disabled?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
+interface DropdownProps extends PropsWithChildren {
+    anchor?: MenuItemsProps<"button">["anchor"];
+    /**
+     * Items to be displayed in the dropdown
+     * */
+    items: DropdownItem[];
+    /**
+     * Additional class name for the dropdown button
+     * */
+    className?: string;
+    /**
+     * Additional class name for the dropdown menu
+     * */
+    menuClassName?: string;
+    /**
+     * Icon to be displayed on the dropdown button
+     * If you want to hide the icon, pass `null`
+     * */
+    icon?: ReactNode | FC;
+    /**
+     * Hide the icon on the dropdown button
+     * */
+    iconClassName?: string;
+    /**
+     * Hide arrow icon on the dropdown button
+     * */
+    hideArrowIcon?: boolean;
+    [key: `data-${string}`]: string;
+}
+
+/**
+ * Fast and easy dropdown component extended from `Menu` and `Button` components.
+ * So this won't have much customization options like the `Menu` component.
+ * If you think this component is not enough for your use case, you can use the `Menu` component directly.
+ *
+ * @example
+ *
+ * ```js
+ * import { Dropdown } from "@geckoui/geckoui";
+ *
+ * const items = [
+ *  { label: "Item 1", onClick: () => console.log("Item 1 clicked") },
+ *  { label: "Item 2", onClick: () => console.log("Item 2 clicked") },
+ *  { label: "Item 3", onClick: () => console.log("Item 3 clicked") },
+ * ];
+ *
+ * <Dropdown items={items} />
+ * ```
+ * */
+declare function Dropdown({ items, anchor, icon, className, menuClassName, iconClassName, children, hideArrowIcon, ...rest }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare namespace Dropdown {
+    var displayName: string;
+}
+
+/**
+ * MermaidDiagram renders diagrams from Mermaid syntax with automatic loading and error state management.
+ * Supports flowcharts, sequence diagrams, class diagrams, and all other Mermaid diagram types.
+ * Provides custom placeholder and error rendering options.
+ *
+ * @example
+ * Flowchart for user workflow:
+ *
+ * ```tsx
+ * <MermaidDiagram>
+ *   {`
+ *     flowchart LR
+ *       Start[User Login] --> Auth{Authenticated?}
+ *       Auth -->|Yes| Dashboard[Show Dashboard]
+ *       Auth -->|No| Login[Login Page]
+ *       Login --> Auth
+ *   `}
+ * </MermaidDiagram>
+ * ```
+ *
+ * @example
+ * Sequence diagram with custom loading:
+ *
+ * ```tsx
+ * <MermaidDiagram
+ *   placeholder={<div className="animate-pulse">Loading diagram...</div>}
+ *   renderError={(props) => <ErrorBoundary message={props.message} />}
+ * >
+ *   {`
+ *     sequenceDiagram
+ *       participant Client
+ *       participant API
+ *       participant Database
+ *       Client->>API: Request Data
+ *       API->>Database: Query
+ *       Database-->>API: Results
+ *       API-->>Client: Response
+ *   `}
+ * </MermaidDiagram>
+ * ```
+ *
+ * @example
+ * Class diagram for documentation:
+ *
+ * ```tsx
+ * <MermaidDiagram className="border rounded-lg p-4">
+ *   {`
+ *     classDiagram
+ *       class User {
+ *         +String email
+ *         +String name
+ *         +login()
+ *         +logout()
+ *       }
+ *       class Admin {
+ *         +manageUsers()
+ *       }
+ *       User <|-- Admin
+ *   `}
+ * </MermaidDiagram>
+ * ```
+ *
+ * @see https://mermaid.js.org/ for diagram syntax reference
+ */
+declare const MermaidDiagram: FC<MermaidDiagramProps>;
+
+interface MarkdownBaseProps<T extends keyof JSX.IntrinsicElements> extends UseMarkdownOptions {
+    /**
+     * HTML tag to render the markdown content.
+     * @default "div"
+     */
+    as?: T;
+    /**
+     * Placeholder component to show while async rendering is in progress.
+     * Will be ignored if async is false.
+     */
+    renderPlaceholder?: ReactNode | FC;
+    /**
+     * Error component to show when the markdown fails to render.
+     * If not provided, a simple error message will be shown.
+     */
+    renderError?: ReactNode | FC<{
+        message: string;
+    }>;
+    /**
+     * Markdown content to render.
+     */
+    children: string;
+}
+type InferredProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] & {
+    className?: string;
+};
+type MarkdownProps<T extends keyof JSX.IntrinsicElements = "div"> = MarkdownBaseProps<T> & Omit<InferredProps<T>, "children">;
+
+/**
+ * Markdown renders formatted markdown text as HTML with support for both synchronous
+ * and asynchronous rendering. Includes built-in loading states, error handling, and
+ * HTML sanitization enabled by default for security.
+ *
+ * @example
+ * Basic usage (synchronous rendering with sanitization enabled by default):
+ *
+ * ```tsx
+ * <Markdown className="prose">{docs}</Markdown>
+ * ```
+ *
+ * @example
+ * Async rendering for large markdown content (not for network requests):
+ *
+ * ```tsx
+ * const [largeContent, setLargeContent] = useState('');
+ *
+ * <Markdown
+ *   async
+ *   renderPlaceholder={<Spinner />}
+ *   renderError={(props) => <Alert variant="error">{props.message}</Alert>}
+ * >
+ *   {largeContent}
+ * </Markdown>
+ * ```
+ *
+ * @example
+ * Disabling HTML sanitization (⚠️ WARNING: Only use when you 100% trust the source):
+ *
+ * ```tsx
+ * <Markdown sanitize={false} as="article">
+ *   {trustedMarkdown}
+ * </Markdown>
+ * ```
+ *
+ * @example
+ * Using with anchor tag and href prop:
+ *
+ * ```tsx
+ * <Markdown as="a" href="https://example.com" target="_blank">
+ *   {linkMarkdown}
+ * </Markdown>
+ * ```
+ */
+declare function Markdown<T extends keyof JSX.IntrinsicElements = "div">({ children, renderError, renderPlaceholder, as, async, className, sanitize, ...props }: MarkdownProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace Markdown {
+    var displayName: string;
+}
+
+type BaseIconProps = SVGProps<SVGSVGElement>;
+
+/**
+ * A loading spinner icon component that displays an animated circular indicator.
+ *
+ * The spinner uses the current text color (via `currentColor`) for its stroke,
+ * making it easy to theme by changing the text color of its parent element.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Spinner />
+ *
+ * // With custom color
+ * <Spinner className="stroke-red-500" />
+ * <Spinner stroke="green" />
+ *
+ * // Custom size
+ * <Spinner className="w-8 h-8" />
+ * ```
+ */
+declare const Spinner: FC<BaseIconProps>;
+
+/**
+ * Convert a number to a string with a thousands separator and a fixed number of decimal places.
+ * @param value - The number to convert.
+ * @param maxFractionDigits - The maximum number of decimal places.
+ *
+ * @example
+ * toThousandsSeparatorFormat(1234567.89, 2); // '1,234,567.89'
+ *
+ * */
+declare const toThousandsSeparatorFormat: (value?: string) => string;
+
+declare function fileToUInt8Array(file: File, start?: number, end?: number): Promise<Uint8Array<ArrayBuffer>>;
+
+declare function isTwoFileEqualByFileContent(file1: File, file2: File): Promise<boolean>;
+
+/**
+ * Check ReactNode is a valid element and has a specific displayName
+ * Usage:
+ * ```js
+ * const isMyElement = hasDisplayName("MyElement");
+ *
+ * nodeArray.filter(isMyElement) // filter out all elements that are not MyElement
+ * ```
+ * */
+declare const hasDisplayName: (displayName: string) => (e: ReactNode) => boolean;
+
+declare const getDataAttributes: (props: Record<string, any>) => Record<string, string>;
+
+declare function isAsyncFn(fn: unknown): boolean;
+
+declare class BaseFilePickerHandler {
+    accept: string;
+    removeDuplicates: boolean;
+    oldFiles: FilePickerFile[];
+    constructor(accept?: string, removeDuplicates?: boolean, opts?: {
+        oldFiles?: FilePickerFile[];
+    });
+    onDrop(_: DataTransferItemList | undefined): Promise<FilePickerFile[]>;
+    open(options?: OpenFilePickerOptions): Promise<FilePickerFile[]>;
+    protected addFileIfValid(file: FilePickerFile, data?: FilePickerFile[]): Promise<FilePickerFile[]>;
+}
+
+declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
+    onDrop(items?: DataTransferItemList): Promise<FilePickerFile[]>;
+}
+
+declare const FilePicker: typeof FileOnlyPickerHandler;
+
+export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, Dropdown, type DropdownClassName, type DropdownItem, type DropdownProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps, Markdown, type MarkdownBaseProps, type MarkdownProcessorOptions, type MarkdownProps, Menu, MenuButton, type MenuButtonProps, MenuHeading, MenuItem, type MenuItemProps, MenuItems, type MenuItemsProps, MenuSection, MenuSeparator, MermaidDiagram, type MermaidDiagramBaseProps, type MermaidDiagramProps, type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectTriggerRenderProps, OTPInput, type OTPInputProps, type OpenFilePickerFn, type OpenFilePickerOptions, Pagination, type PaginationProps, type RHFBaseProps, RHFCheckbox, type RHFCheckboxProps, RHFController, RHFCurrencyInput, type RHFCurrencyInputProps, RHFDateInput, type RHFDateInputProps, RHFDateRangeInput, type RHFDateRangeInputProps, RHFError, type RHFErrorProps, type RHFErrorRenderProps, RHFFileInput, type RHFFileInputProps, RHFFilePicker, type RHFFilePickerBaseProps, type RHFFilePickerProps, type RHFFilePickerRenderProps, type RHFFilePickerRendererProps, RHFInput, RHFInputGroup, type RHFInputGroupProps, type RHFInputProps, RHFNumberInput, type RHFNumberInputProps, RHFOTPInput, type RHFOTPInputProps, RHFRadio, type RHFRadioProps, type RHFRenderArgs, RHFSelect, type RHFSelectOverload, type RHFSelectProps, RHFSwitch, type RHFSwitchProps, RHFTextarea, type RHFTextareaProps, Radio, type RadioProps, type ReactTag, Select, SelectConsumer, type SelectConsumerProps, type SelectContextProps, SelectDropdownSearch, SelectEmpty, type SelectEmptyProps, SelectOption, type SelectOptionConfig, type SelectOptionElement, type SelectOptionProps, type SelectOverload, type SelectProps, SelectTrigger, type SelectTriggerBaseRenderProps, type SelectTriggerOverload, type SelectTriggerProps, type SelectionMode, type SingleSelectProps, type SingleSelectTriggerProps, type SingleSelectTriggerRenderProps, Spinner, Switch, type SwitchProps, type SwitchSizeMap, Textarea, type TextareaProps, Tooltip, type TooltipProps, type UseFilePickerOptions, type UseFilePickerReturn, createMarkdownProcessor, fileToUInt8Array, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, toThousandsSeparatorFormat, useClickOutside, useEscListener, useFilePicker, useMarkdown, useMermaidDiagram, usePreventDefault, useSelect };