@cchiragjain/clear.ui/dist/index.d.ts

React UI Components Library

import React from 'react';

interface AccordionItem {
    id: string;
    title: string;
    content: React.ReactNode;
}
interface AccordionProps {
    /** Array of items to display in the accordion */
    items: AccordionItem[];
    /** Whether multiple sections can be expanded at once */
    multiple?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * A collapsible content panel with support for multiple or single panel expansion.
 * Provides smooth animations and keyboard navigation.
 *
 * @param {AccordionProps} props - The props for the Accordion component.
 * @param {AccordionItem[]} props.items - Array of items to display in the accordion.
 * @param {boolean} [props.multiple=false] - Whether multiple sections can be expanded at once.
 * @param {string} [props.className=""] - Additional CSS classes for the accordion container.
 *
 * @example
 * ```tsx
 * <Accordion
 *   items={[
 *     { id: '1', title: 'Section 1', content: 'Content 1' },
 *     { id: '2', title: 'Section 2', content: 'Content 2' }
 *   ]}
 *   multiple={false}
 * />
 * ```
 */
declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** The visual style variant of the button */
    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
    /** The size of the button */
    size?: "sm" | "md" | "lg";
    /** Whether the button is in a loading state */
    isLoading?: boolean;
}
/**
 * A versatile button component with multiple variants, sizes, and states.
 * Supports loading states and keyboard interactions.
 *
 * @param {ButtonProps} props - The props for the Button component.
 * @param {string} [props.variant="primary"] - The visual style variant of the button.
 * @param {string} [props.size="md"] - The size of the button.
 * @param {boolean} [props.isLoading=false] - Whether the button is in a loading state.
 *
 * @example
 * ```tsx
 * <Button variant="primary" size="md" onClick={() => console.log('clicked')}>
 *   Click me
 * </Button>
 * ```
 */
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
    label: string;
    error?: boolean;
}
/**
 * A customizable checkbox component with support for error states and accessibility.
 *
 * @param {CheckboxProps} props - The props for the Checkbox component.
 * @param {string} props.label - Label text for the checkbox.
 * @param {boolean} [props.error=false] - Whether the checkbox has an error state.
 * @param {string} [props.className=""] - Additional CSS classes for the checkbox input.
 *
 * @example
 * ```tsx
 * <Checkbox
 *   label="Accept terms and conditions"
 *   error={false}
 *   onChange={(e) => console.log(e.target.checked)}
 * />
 * ```
 */
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

interface DialogProps {
    /** Whether the dialog is currently open */
    isOpen: boolean;
    /** Callback fired when the dialog should close */
    onClose: () => void;
    /** The title of the dialog */
    title?: React.ReactNode;
    /** The content of the dialog */
    children: React.ReactNode;
    /** Additional CSS classes */
    className?: string;
}
/**
 * A modal dialog component with focus management and keyboard interactions.
 * Provides a backdrop and smooth animations for modal content.
 *
 * @param {DialogProps} props - The props for the Dialog component.
 * @param {boolean} props.isOpen - Whether the dialog is open.
 * @param {() => void} props.onClose - Callback fired when the dialog should close.
 * @param {React.ReactNode} [props.title] - The title of the dialog.
 * @param {React.ReactNode} props.children - The content to be displayed inside the dialog.
 * @param {string} [props.className=""] - Additional CSS classes for styling the dialog.
 * @param {React.Ref<HTMLDivElement>} ref - Ref for the dialog element.
 *
 * @example
 * ```tsx
 * <Dialog
 *   isOpen={isOpen}
 *   onClose={() => setIsOpen(false)}
 *   title="Confirmation"
 * >
 *   <p>Are you sure you want to proceed?</p>
 * </Dialog>
 * ```
 */
declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;

interface HoverCardProps {
    trigger: React.ReactNode;
    content: React.ReactNode;
    openDelay?: number;
    closeDelay?: number;
    className?: string;
}
/**
 * A hover card component that displays content when the trigger element is hovered over.
 * The card appears with a smooth animation and can be customized with delay times and positioning.
 *
 * @param {HoverCardProps} props - The props for the HoverCard component.
 * @param {React.ReactNode} props.trigger - The element that triggers the hover card.
 * @param {React.ReactNode} props.content - The content to be displayed inside the hover card.
 * @param {number} [props.openDelay=200] - The delay before the hover card opens.
 * @param {number} [props.closeDelay=200] - The delay before the hover card closes.
 * @param {string} [props.className=""] - Additional CSS classes for styling the hover card.
 * @returns {JSX.Element} The HoverCard component.
 *
 * @example
 * ```tsx
 * <HoverCard
 *   trigger={<button>Hover me</button>}
 *   content={<div>Some content to display</div>}
 * />
 * ```
 */
declare const HoverCard: React.FC<HoverCardProps>;

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    error?: boolean;
}
/**
 * A reusable input component that extends the native HTML input element with additional styling
 * and error state handling.
 *
 * @param {InputProps} props - The props for the Input component.
 * @param {boolean} [props.error=false] - Indicates whether the input is in an error state.
 * @param {string} [props.className=""] - Additional CSS classes for styling the input.
 * @returns {JSX.Element} The Input component.
 *
 * @example
 * ```tsx
 * <Input
 *   type="text"
 *   placeholder="Enter your name"
 *   error={!!errors.name}
 * />
 * ```
 */
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
    /** Whether the associated field is in an error state */
    error?: boolean;
    /** Whether to show a required indicator (*) */
    required?: boolean;
}
/**
 * A label component for form inputs with support for required and error states.
 * It displays an optional asterisk for required fields and adjusts the text color
 * based on the error state.
 *
 * @param {LabelProps} props - The props for the Label component.
 * @param {boolean} [props.error=false] - Indicates whether the associated field is in an error state.
 * @param {boolean} [props.required=false] - Indicates whether the field is required.
 * @param {string} [props.className=""] - Additional CSS classes for styling the label.
 * @param {React.ReactNode} props.children - The content to be displayed within the label.
 * @returns {JSX.Element} The Label component.
 *
 * @example
 * ```tsx
 * <Label htmlFor="email" required error={!!errors.email}>
 *   Email Address
 * </Label>
 * ```
 */
declare const Label: React.FC<LabelProps>;

interface LoadingSpinnerProps {
    size?: "sm" | "md" | "lg";
    className?: string;
}
/**
 * A loading spinner component with configurable size.
 * It renders a spinner with a circular animation to indicate a loading state.
 *
 * @param {LoadingSpinnerProps} props - The props for the LoadingSpinner component.
 * @param {string} [props.size="md"] - The size of the spinner, can be "sm", "md", or "lg".
 * @param {string} [props.className=""] - Additional CSS classes for styling the spinner.
 * @returns {JSX.Element} The LoadingSpinner component.
 *
 * @example
 * ```tsx
 * <LoadingSpinner size="lg" />
 * ```
 */
declare const LoadingSpinner: React.ForwardRefExoticComponent<LoadingSpinnerProps & React.RefAttributes<HTMLDivElement>>;

interface MultiSelectOption {
    value: string;
    label: string;
    image?: string;
}
interface MultiSelectProps {
    options: MultiSelectOption[];
    value?: string[];
    onChange?: (value: string[]) => void;
    placeholder?: string;
    disabled?: boolean;
    error?: boolean;
    className?: string;
}
/**
 * A multi-select dropdown component that allows users to select multiple options from a list.
 * Includes search functionality, custom styling, and support for error and disabled states.
 *
 * @param {MultiSelectProps} props - The props for the MultiSelect component.
 * @param {MultiSelectOption[]} props.options - The list of options to display.
 * @param {string[]} [props.value=[]] - The selected values.
 * @param {(value: string[]) => void} [props.onChange] - Callback fired when the selected values change.
 * @param {string} [props.placeholder="Select options"] - Placeholder text when no options are selected.
 * @param {boolean} [props.disabled=false] - Whether the component is disabled.
 * @param {boolean} [props.error=false] - Whether the component is in an error state.
 * @param {string} [props.className=""] - Additional CSS classes to style the component.
 * @returns {JSX.Element} The MultiSelect component.
 *
 * @example
 * ```tsx
 * <MultiSelect
 *   options={options}
 *   value={selectedValues}
 *   onChange={handleChange}
 *   placeholder="Choose your options"
 * />
 * ```
 */
declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;

interface RadioOption {
    value: string;
    label: string;
    description?: string;
    disabled?: boolean;
}
interface RadioGroupProps {
    options: RadioOption[];
    value?: string;
    onChange?: (value: string) => void;
    name: string;
    className?: string;
    orientation?: "horizontal" | "vertical";
}
/**
 * A group of radio buttons that allows the user to select one option from a list.
 * The group supports custom orientations (horizontal or vertical), and includes accessibility features.
 *
 * @param {RadioGroupProps} props - The props for the RadioGroup component.
 * @param {RadioOption[]} props.options - The list of radio options to display.
 * @param {string} [props.value] - The currently selected value.
 * @param {(value: string) => void} [props.onChange] - Callback fired when the selected value changes.
 * @param {string} props.name - The name attribute of the radio group.
 * @param {string} [props.className] - Additional CSS classes to style the component.
 * @param {"horizontal" | "vertical"} [props.orientation="vertical"] - The orientation of the radio group.
 * @returns {JSX.Element} The RadioGroup component.
 *
 * @example
 * ```tsx
 * <RadioGroup
 *   name="example"
 *   options={radioOptions}
 *   value={selectedOption}
 *   onChange={handleRadioChange}
 * />
 * ```
 */
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

interface RangeSliderProps {
    /** Minimum value of the slider */
    min: number;
    /** Maximum value of the slider */
    max: number;
    /** Current value of the slider */
    value?: number;
    /** Callback fired when the value changes */
    onChange?: (value: number) => void;
    /** Step increment value */
    step?: number;
    /** Whether the slider is disabled */
    disabled?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * A slider component for selecting numeric values within a range.
 * Features smooth dragging, keyboard controls, and value tooltips.
 *
 * @param {RangeSliderProps} props - The props for the RangeSlider component.
 * @param {number} props.min - The minimum value of the slider.
 * @param {number} props.max - The maximum value of the slider.
 * @param {number} [props.value] - The current value of the slider.
 * @param {(value: number) => void} [props.onChange] - Callback fired when the value changes.
 * @param {number} [props.step=1] - The step increment value.
 * @param {boolean} [props.disabled=false] - Whether the slider is disabled.
 * @param {string} [props.className] - Additional CSS classes.
 * @returns {JSX.Element} The RangeSlider component.
 *
 * @example
 * ```tsx
 * <RangeSlider
 *   min={0}
 *   max={100}
 *   value={volume}
 *   onChange={setVolume}
 * />
 * ```
 */
declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;

interface SelectOption {
    /** The value to be used when the option is selected */
    value: string;
    /** The text to display for the option */
    label: string;
}
/**
 * A customizable select component with support for keyboard navigation and search.
 * Provides a dropdown interface for selecting a single option from a list.
 *
 * @param {SelectProps} props - The props for the Select component.
 * @param {SelectOption[]} props.options - The options to display in the dropdown.
 * @param {string} [props.value] - The currently selected value.
 * @param {(value: string) => void} [props.onChange] - Callback fired when the selection changes.
 * @param {string} [props.placeholder="Select an option"] - Placeholder text when no option is selected.
 * @param {boolean} [props.disabled=false] - Whether the select is disabled.
 * @param {boolean} [props.error=false] - Whether the select is in an error state.
 * @param {string} [props.className=""] - Additional CSS classes.
 * @returns {JSX.Element} The Select component.
 *
 * @example
 * ```tsx
 * <Select
 *   options={[
 *     { value: 'option1', label: 'Option 1' },
 *     { value: 'option2', label: 'Option 2' }
 *   ]}
 *   value={selectedValue}
 *   onChange={handleChange}
 * />
 * ```
 */
interface SelectProps {
    /** Array of options to display in the select dropdown */
    options: SelectOption[];
    /** Currently selected value */
    value?: string;
    /** Callback fired when selection changes */
    onChange?: (value: string) => void;
    /** Placeholder text when no option is selected */
    placeholder?: string;
    /** Whether the select is disabled */
    disabled?: boolean;
    /** Whether the select is in an error state */
    error?: boolean;
    /** Additional CSS classes */
    className?: string;
}
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

interface SidebarProps {
    children: React.ReactNode;
    position?: "left" | "right";
    className?: string;
    trigger?: React.ReactNode;
}
/**
 * A sidebar component that can slide in from the left or right side of the screen.
 * It includes a close button and can be triggered by an external element like a button or icon.
 * The sidebar closes when clicking outside or pressing the Escape key.
 *
 * @param {SidebarProps} props - The props for the Sidebar component.
 * @param {React.ReactNode} props.children - The content inside the sidebar.
 * @param {"left" | "right"} [props.position="left"] - The position of the sidebar (left or right).
 * @param {string} [props.className=""] - Additional CSS classes.
 * @param {React.ReactNode} [props.trigger] - Trigger element to open the sidebar.
 * @returns {JSX.Element} The Sidebar component.
 *
 * @example
 * ```tsx
 * <Sidebar trigger={<Button>Open Sidebar</Button>}>
 *   <div>Sidebar content goes here</div>
 * </Sidebar>
 * ```
 */
declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;

interface SkeletonProps {
    /** The variant of the skeleton */
    variant?: "text" | "circular" | "rectangular";
    /** The animation type */
    animation?: "pulse" | "wave" | "none";
    /** Additional CSS classes */
    className?: string;
}
/**
 * A loading skeleton component that serves as a placeholder during content loading.
 * It offers different variants (text, circular, rectangular) and animation types (pulse, wave).
 *
 * @param {SkeletonProps} props - The props for the Skeleton component.
 * @param {"text" | "circular" | "rectangular"} [props.variant="text"] - The variant of the skeleton.
 * @param {"pulse" | "wave" | "none"} [props.animation="pulse"] - The animation effect to use.
 * @param {string} [props.className] - Additional CSS classes to apply.
 * @returns {JSX.Element} The Skeleton component.
 *
 * @example
 * ```tsx
 * <Skeleton
 *   variant="text"
 *   animation="pulse"
 *   className="w-full h-4"
 * />
 * ```
 */
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
    /** Whether the textarea is in an error state */
    error?: boolean;
}
/**
 * A multi-line text input component that supports error states and resizing.
 * It provides standard textarea functionality with customizable styles.
 *
 * @param {TextAreaProps} props - The props for the TextArea component.
 * @param {boolean} [props.error] - Whether the textarea is in an error state (optional).
 * @param {string} [props.className] - Additional CSS classes (optional).
 * @returns {JSX.Element} The TextArea component.
 *
 * @example
 * ```tsx
 * <TextArea
 *   placeholder="Enter your message"
 *   error={!!formErrors.message}
 *   onChange={handleChange}
 * />
 * ```
 */
declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

type ToastType = "info" | "success" | "warning" | "error";

interface ToastContextType {
    showToast: (message: string, type?: ToastType) => void;
}

/**
 * Custom hook to use the Toast context.
 * Throws an error if used outside of the ToastProvider.
 *
 * @returns {ToastContextType} The context value containing the showToast function.
 */
declare const useToast: () => ToastContextType;

declare function myTailwindContent(): string;

export { Accordion, Button, Checkbox, Dialog, HoverCard, Input, Label, LoadingSpinner, MultiSelect, RadioGroup, RangeSlider, Select, Sidebar, Skeleton, TextArea, myTailwindContent, useToast };