@campxdev/react-blueprint 3.0.0-alpha.5 → 3.0.0-alpha.7

package/dist/cjs/types/src/components/Input/DateTimePicker/DateTimePicker.d.ts

@@ -33,5 +33,47 @@ export type DateTimePickerProps = {
     type?: 'input' | 'filter';
     [key: string]: any;
 };
+/**
+ * DateTimePicker component for date and time selection
+ *
+ * A comprehensive date and time picker component supporting both input and filter modes,
+ * with flexible date/time formats, time unit selection, and date restrictions.
+ *
+ * @component
+ * @param {DateTimePickerProps} props - The date time picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date and time
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date/time changes
+ * @param {DateTimeFormat} [props.format] - Date and time format for display
+ * @param {DateTimePickerViews[]} [props.views] - Which time units to display (year, month, day, hours, minutes, seconds)
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.helperText] - Helper text below the input
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the picker is disabled
+ * @param {Date} [props.minDate] - Minimum selectable date/time
+ * @param {Date} [props.maxDate] - Maximum selectable date/time
+ * @param {boolean} [props.disablePast] - Whether past dates/times are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates/times are disabled
+ * @param {(date: Date) => boolean} [props.shouldDisableDate] - Custom date disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableMonth] - Custom month disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableYear] - Custom year disable logic
+ * @param {boolean} [props.fullWidth] - Whether the picker takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type of the picker
+ * @param {() => void} [props.onOpen] - Callback when picker opens
+ * @param {() => void} [props.onClose] - Callback when picker closes
+ * @returns {React.ReactElement} The rendered date time picker component
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker
+ *   label="Select Date & Time"
+ *   value={dateTime}
+ *   onChange={setDateTime}
+ *   format="dd/MM/yyyy hh:mm a"
+ *   views={['year', 'month', 'day', 'hours', 'minutes']}
+ * />
+ * ```
+ */
 export declare const DateTimePicker: ({ type, ...props }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Input/FileUpload/FileUpload.d.ts

@@ -18,4 +18,45 @@ export type FileUploadProps = {
     previewClassName?: string;
     required?: boolean;
 };
+/**
+ * FileUpload component for file selection and management
+ *
+ * A comprehensive file upload component with drag-and-drop support, file validation,
+ * preview capabilities, and file management features.
+ *
+ * @component
+ * @param {FileUploadProps} props - The file upload properties
+ * @param {string} props.label - Label text for the upload field
+ * @param {string} props.name - Name attribute for the input element
+ * @param {File[]} [props.files=[]] - Array of currently selected files
+ * @param {(files: File[]) => void} [props.onChange] - Callback fired when files are selected
+ * @param {(index: number) => void} [props.handleRemove] - Callback to remove a file by index
+ * @param {'image/*' | '.pdf' | '.docx' | '.txt' | '*'} [props.accept='*'] - File type filter
+ * @param {(file: File) => void} [props.onInvalidFile] - Callback fired when an invalid file is selected
+ * @param {string} [props.inputText] - Custom text for the upload prompt
+ * @param {boolean} [props.multiple=true] - Whether multiple files can be selected
+ * @param {boolean} [props.disabled=false] - Whether the upload is disabled
+ * @param {boolean} [props.hideDeleteButton=false] - Whether to hide delete buttons on files
+ * @param {boolean} [props.hideInput=false] - Whether to hide the file input area
+ * @param {string} [props.errorText] - Error message to display
+ * @param {string} [props.className] - Additional CSS classes for the upload area
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {boolean} [props.showImage] - Whether to show image previews instead of file list
+ * @param {string} [props.previewClassName] - Additional CSS classes for previews
+ * @param {boolean} [props.required] - Whether the field is required
+ * @returns {React.ReactElement} The rendered file upload component
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   label="Upload Documents"
+ *   name="documents"
+ *   files={files}
+ *   onChange={setFiles}
+ *   accept=".pdf,.docx"
+ *   multiple
+ *   required
+ * />
+ * ```
+ */
 export declare const FileUpload: ({ label, name, disabled, onChange, handleRemove, files, accept, inputText, onInvalidFile, hideDeleteButton, hideInput, multiple, errorText, showImage, previewClassName, className, containerClassName, required, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/FormActions/FormActions.d.ts

@@ -10,4 +10,41 @@ export interface FormActionsProps {
     className?: string;
     showTopBorder?: boolean;
 }
+/**
+ * FormActions component for form submission and cancellation
+ *
+ * A component that renders submit and cancel buttons with customizable configurations
+ * and visibility options. Typically used at the bottom of forms.
+ *
+ * @component
+ * @param {FormActionsProps} props - The form actions properties
+ * @param {ButtonConfig} [props.submitButtonProps] - Configuration for the submit button
+ * @param {ButtonConfig} [props.submitButtonProps.show=true] - Whether to show the submit button
+ * @param {string} [props.submitButtonProps.title='Submit'] - Submit button label
+ * @param {() => void} [props.submitButtonProps.onClick] - Callback when submit is clicked
+ * @param {ButtonConfig} [props.cancelButtonProps] - Configuration for the cancel button
+ * @param {ButtonConfig} [props.cancelButtonProps.show=true] - Whether to show the cancel button
+ * @param {string} [props.cancelButtonProps.title='Cancel'] - Cancel button label
+ * @param {() => void} [props.cancelButtonProps.onClick] - Callback when cancel is clicked
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {boolean} [props.showTopBorder=false] - Whether to show a top border
+ * @returns {React.ReactElement} The rendered form actions component
+ *
+ * @example
+ * ```tsx
+ * <FormActions
+ *   submitButtonProps={{
+ *     title: 'Save Changes',
+ *     onClick: handleSubmit,
+ *     variant: 'default'
+ *   }}
+ *   cancelButtonProps={{
+ *     title: 'Discard',
+ *     onClick: handleCancel,
+ *     variant: 'ghost'
+ *   }}
+ *   showTopBorder
+ * />
+ * ```
+ */
 export declare const FormActions: ({ submitButtonProps, cancelButtonProps, className, showTopBorder, }: FormActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/FormControlWrapper/FormControlWrapper.d.ts

@@ -8,5 +8,36 @@ interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
     formActionProps?: FormActionsProps;
     disabled?: boolean;
 }
+/**
+ * FormControlWrapper component for react-hook-form integration
+ *
+ * A wrapper component that integrates react-hook-form's Controller with form elements,
+ * automatically handling field registration, validation, and error display.
+ *
+ * @component
+ * @template T - The form values type from react-hook-form
+ * @param {FormControlWrapperProps<T>} props - The wrapper properties
+ * @param {Control<T>} props.control - React Hook Form control instance from useForm()
+ * @param {ReactNode} props.children - Child form elements to be controlled
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {FormActionsProps} [props.formActionProps] - Properties for form submit/cancel buttons
+ * @param {boolean} [props.disabled=false] - Whether all controlled fields are disabled
+ * @returns {React.ReactElement} The rendered wrapper with controlled form elements
+ *
+ * @example
+ * ```tsx
+ * const { control, handleSubmit } = useForm();
+ *
+ * <FormControlWrapper
+ *   control={control}
+ *   formActionProps={{
+ *     submitButtonProps: { onClick: handleSubmit(onSubmit) }
+ *   }}
+ * >
+ *   <TextField name="email" label="Email" />
+ *   <PasswordField name="password" label="Password" />
+ * </FormControlWrapper>
+ * ```
+ */
 export declare function FormControlWrapper<T extends FieldValues = FieldValues>({ control, children, containerClassName, formActionProps, disabled, }: FormControlWrapperProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Input/FormWrapper/FormWrapper.d.ts

@@ -3,5 +3,25 @@ type FormWrapperProps = {
     children: ReactNode;
     className?: string;
 };
+/**
+ * FormWrapper component for layout styling
+ *
+ * A simple wrapper component that provides default styling and spacing for form elements.
+ * Used to maintain consistent form layout and spacing throughout the application.
+ *
+ * @component
+ * @param {FormWrapperProps} props - The wrapper properties
+ * @param {ReactNode} props.children - Child form elements
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @returns {React.ReactElement} The styled form wrapper container
+ *
+ * @example
+ * ```tsx
+ * <FormWrapper>
+ *   <TextField label="Name" name="name" />
+ *   <TextField label="Email" name="email" />
+ * </FormWrapper>
+ * ```
+ */
 export declare const FormWrapper: ({ children, className }: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Input/HelpButton/HelpButton.d.ts

@@ -1,2 +1,16 @@
+/**
+ * HelpButton component for documentation access
+ *
+ * A button component that opens the help/documentation page in a new window
+ * when clicked. Features a question mark icon.
+ *
+ * @component
+ * @returns {React.ReactElement} The rendered help button
+ *
+ * @example
+ * ```tsx
+ * <HelpButton />
+ * ```
+ */
 declare const HelpButton: () => import("react/jsx-runtime").JSX.Element;
 export default HelpButton;

package/dist/cjs/types/src/components/Input/IconButtons/IconButtons/DeleteButton.d.ts

@@ -1,2 +1,18 @@
 import { ButtonProps } from '../../Button/Button';
+/**
+ * DeleteButton component for delete actions
+ *
+ * An icon button with a trash icon for triggering delete/remove actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered delete button
+ *
+ * @example
+ * ```tsx
+ * <DeleteButton onClick={handleDelete} />
+ * ```
+ */
 export declare function DeleteButton({ disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/IconButtons/IconButtons/EditButton.d.ts

@@ -1,2 +1,18 @@
 import { ButtonProps } from '../../Button/Button';
+/**
+ * EditButton component for edit actions
+ *
+ * An icon button with a pencil icon for triggering edit/modify actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered edit button
+ *
+ * @example
+ * ```tsx
+ * <EditButton onClick={handleEdit} />
+ * ```
+ */
 export declare function EditButton({ disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/IconButtons/IconButtons/RedirectButton.d.ts

@@ -1,2 +1,18 @@
 import { ButtonProps } from '../../Button/Button';
+/**
+ * RedirectButton component for navigation/external link actions
+ *
+ * An icon button with an external link arrow icon for redirecting users
+ * to other pages or external URLs. Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered redirect button
+ *
+ * @example
+ * ```tsx
+ * <RedirectButton onClick={() => window.open(url)} />
+ * ```
+ */
 export declare function RedirectButton({ disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/IconButtons/IconButtons/ViewButton.d.ts

@@ -1,2 +1,18 @@
 import { ButtonProps } from '../../Button/Button';
+/**
+ * ViewButton component for view/preview actions
+ *
+ * An icon button with an eye icon for triggering view/preview actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered view button
+ *
+ * @example
+ * ```tsx
+ * <ViewButton onClick={handleView} />
+ * ```
+ */
 export declare function ViewButton({ disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/IconButtons/IconButtons.d.ts

@@ -2,6 +2,24 @@ import { DeleteButton } from './IconButtons/DeleteButton';
 import { EditButton } from './IconButtons/EditButton';
 import { RedirectButton } from './IconButtons/RedirectButton';
 import { ViewButton } from './IconButtons/ViewButton';
+/**
+ * IconButtons object namespace
+ *
+ * A collection of common action icon buttons for use in tables and lists.
+ * All buttons are minimal icon-only buttons with consistent styling.
+ *
+ * @namespace IconButtons
+ * @property {typeof DeleteButton} DeleteButton - Button with trash icon for delete actions
+ * @property {typeof EditButton} EditButton - Button with pencil icon for edit actions
+ * @property {typeof ViewButton} ViewButton - Button with eye icon for view/preview actions
+ * @property {typeof RedirectButton} RedirectButton - Button with external link icon for navigation
+ *
+ * @example
+ * ```tsx
+ * <IconButtons.DeleteButton onClick={handleDelete} />
+ * <IconButtons.EditButton onClick={handleEdit} />
+ * ```
+ */
 export declare const IconButtons: {
     DeleteButton: typeof DeleteButton;
     EditButton: typeof EditButton;

package/dist/cjs/types/src/components/Input/LabelWrapper/LabelWrapper.d.ts

@@ -6,4 +6,30 @@ export interface LabelWrapperProps {
     children: ReactNode;
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
+/**
+ * LabelWrapper component for form field labeling
+ *
+ * A wrapper component that provides consistent label styling and required field indicators.
+ * Automatically handles string labels and custom label elements.
+ *
+ * @component
+ * @param {LabelWrapperProps} props - The wrapper properties
+ * @param {boolean} props.required - Whether the field is required (adds asterisk indicator)
+ * @param {string} [props.name] - Name attribute for the associated label
+ * @param {ReactNode | string} [props.label] - The label text or element
+ * @param {ReactNode} props.children - The form element to be labeled
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional container attributes
+ * @returns {React.ReactElement} The label and children wrapped in a container
+ *
+ * @example
+ * ```tsx
+ * <LabelWrapper
+ *   label="Email Address"
+ *   name="email"
+ *   required
+ * >
+ *   <Input type="email" />
+ * </LabelWrapper>
+ * ```
+ */
 export declare const LabelWrapper: ({ required, name, children, containerProps, label, }: LabelWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/MultiCheckBox/MultiCheckBox.d.ts

@@ -13,4 +13,38 @@ export type MultiCheckboxProps = {
     name: string;
     className?: string;
 };
+/**
+ * MultiCheckBox component for multi-value checkbox selection
+ *
+ * A component that renders multiple checkboxes in a row or column layout,
+ * allowing users to select multiple values from a set of options.
+ *
+ * @component
+ * @param {MultiCheckboxProps} props - The checkbox group properties
+ * @param {string} props.label - Group label text
+ * @param {Array<{label: ReactNode, value: any}>} props.options - Available checkbox options
+ * @param {any[]} props.values - Currently selected values
+ * @param {(values: any[]) => void} props.onChange - Callback when selection changes
+ * @param {string} props.name - Name attribute for the checkbox group
+ * @param {boolean} props.required - Whether the field is required
+ * @param {'row' | 'column'} [props.direction='column'] - Layout direction for checkboxes
+ * @param {string} [props.className] - Additional CSS classes for the options container
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional container attributes
+ * @returns {React.ReactElement} The rendered checkbox group
+ *
+ * @example
+ * ```tsx
+ * <MultiCheckBox
+ *   label="Select Features"
+ *   name="features"
+ *   values={selectedFeatures}
+ *   onChange={setSelectedFeatures}
+ *   required
+ *   options={[
+ *     { label: 'Feature A', value: 'a' },
+ *     { label: 'Feature B', value: 'b' }
+ *   ]}
+ * />
+ * ```
+ */
 export declare const MultiCheckBox: ({ name, options, required, containerProps, label, direction, values, onChange, className, ...rest }: MultiCheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/MultiSelect/MultiSelect.d.ts

@@ -38,5 +38,45 @@ export type MultiSelectProps = {
     disabled?: boolean;
     loading?: boolean;
 };
+/**
+ * MultiSelect component for multi-value selection
+ *
+ * A feature-rich multi-select component supporting both local and API-driven options,
+ * with search, pagination, filtering, and flexible display modes.
+ *
+ * @component
+ * @param {MultiSelectProps} props - The select properties
+ * @param {Array<{label: string, subLabel?: string, value: any, icon?: ReactNode}>} [props.options] - Static options array
+ * @param {string} [props.optionsApiEndPoint] - API endpoint for dynamic options loading
+ * @param {any} [props.optionsApiEndpointParams] - Additional parameters for API requests
+ * @param {AxiosInstance} [props.externalAxios] - Custom axios instance for API calls
+ * @param {any[]} [props.value] - Currently selected values
+ * @param {(values: any[]) => void} [props.onChange] - Callback fired when selection changes
+ * @param {(option: any) => any} [props.getValue] - Function to extract value from option object
+ * @param {{valueKey: string, isObjectId?: boolean, isInt?: boolean, isFloat?: boolean}} [props.dbValueProps] - Database value mapping properties
+ * @param {{labelKey: string, subLabelKey?: string, useLabelStartCase?: boolean, useSubLabelStartCase?: boolean}} [props.dbLabelProps] - Database label mapping properties
+ * @param {string} [props.label] - Label for the select
+ * @param {string} [props.name] - Name attribute
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the select is disabled
+ * @param {boolean} [props.loading] - Whether options are loading
+ * @param {boolean} [props.disableClear] - Whether to hide the clear button
+ * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type
+ * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
+ * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
+ * @returns {React.ReactElement} The rendered multi-select component
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="Select Users"
+ *   value={selectedUsers}
+ *   onChange={setSelectedUsers}
+ *   options={users}
+ *   required
+ * />
+ * ```
+ */
 export declare const MultiSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/cjs/types/src/components/Input/OtpInput/OtpInput.d.ts

@@ -9,5 +9,34 @@ interface OtpInputProps {
     error?: boolean;
     helperText?: string;
 }
+/**
+ * OtpInput component for one-time password entry
+ *
+ * A component that renders a sequence of single-digit input fields for OTP entry,
+ * with auto-focus, paste support, and keyboard navigation.
+ *
+ * @component
+ * @param {OtpInputProps} props - The OTP input properties
+ * @param {number} props.length - Number of OTP digits
+ * @param {(otp: string) => void} props.onChangeOtp - Callback fired when OTP changes
+ * @param {string} [props.label] - Optional label for the OTP input group
+ * @param {string} [props.name] - Name attribute for the inputs
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.error=false] - Whether there's a validation error
+ * @param {string} [props.helperText] - Helper or error text to display
+ * @param {string} [props.containerClassName] - Additional CSS classes for the input container
+ * @param {string} [props.inputClassName] - Additional CSS classes for individual inputs
+ * @returns {React.ReactElement} The rendered OTP input component
+ *
+ * @example
+ * ```tsx
+ * <OtpInput
+ *   length={6}
+ *   onChangeOtp={setOtp}
+ *   label="Enter Verification Code"
+ *   required
+ * />
+ * ```
+ */
 export declare const OtpInput: ({ length, onChangeOtp, containerClassName, inputClassName, label, name, required, error, helperText, }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;
 export type { OtpInputProps };

package/dist/cjs/types/src/components/Input/PasswordField/PasswordField.d.ts

@@ -13,4 +13,38 @@ export type PasswordFieldProps = {
     className?: string;
     fullWidth?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/**
+ * PasswordField component for password input
+ *
+ * A text input field specialized for password entry with visibility toggle,
+ * error states, and helper text support.
+ *
+ * @component
+ * @param {PasswordFieldProps} props - The password field properties
+ * @param {string} [props.label] - Label for the field
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {string} [props.value] - Current input value
+ * @param {(e: React.ChangeEvent<HTMLInputElement>) => void} [props.onChange] - Callback when value changes
+ * @param {string} [props.placeholder='Enter password'] - Placeholder text
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the field is disabled
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {string} [props.helperText] - Helper or error text
+ * @param {string} [props.description] - Additional description text
+ * @param {boolean} [props.fullWidth] - Whether the field takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered password field component
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   name="password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   required
+ * />
+ * ```
+ */
 export declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, fullWidth, ...rest }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/RadioGroup/RadioGroup.d.ts

@@ -19,4 +19,42 @@ export type RadioGroupProps = {
     error?: boolean;
     helperText?: ReactNode;
 };
+/**
+ * RadioGroup component for exclusive single-value selection
+ *
+ * A component that renders a group of radio buttons allowing users to select
+ * exactly one value from a set of options, with row or column layout.
+ *
+ * @component
+ * @param {RadioGroupProps} props - The radio group properties
+ * @param {string} props.name - Name attribute for the radio group
+ * @param {Array<{label: ReactNode, value: any, disabled?: boolean}>} props.options - Available radio options
+ * @param {string} [props.label] - Group label text
+ * @param {any} [props.value] - Currently selected value (controlled)
+ * @param {any} [props.defaultValue] - Default selected value (uncontrolled)
+ * @param {(value: any) => void} [props.onChange] - Callback when selection changes
+ * @param {(value: string) => void} [props.onValueChange] - Alternative callback when selection changes
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether all options are disabled
+ * @param {'row' | 'column'} [props.direction='column'] - Layout direction for radio buttons
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {ReactNode} [props.helperText] - Helper or error text
+ * @param {string} [props.className] - Additional CSS classes for the radio container
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered radio group component
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="status"
+ *   label="Select Status"
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={[
+ *     { label: 'Active', value: 'active' },
+ *     { label: 'Inactive', value: 'inactive' }
+ *   ]}
+ * />
+ * ```
+ */
 export declare const RadioGroup: ({ label, required, options, name, containerProps, disabled, onChange, onValueChange, direction, className, error, helperText, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/SearchBar/SearchBar.d.ts

@@ -8,4 +8,30 @@ export type SearchBarProps = {
     containerClassName?: string;
     inputClassName?: string;
 } & Omit<React.ComponentProps<'input'>, 'onChange' | 'value'>;
+/**
+ * SearchBar component for search input
+ *
+ * A search input component with built-in debouncing for efficient search operations,
+ * featuring a search icon and customizable styling.
+ *
+ * @component
+ * @param {SearchBarProps} props - The search bar properties
+ * @param {string} [props.placeholder='Search by Name'] - Placeholder text
+ * @param {string | ReactNode} [props.label] - Optional label above the search input
+ * @param {string} [props.value=''] - Current search value
+ * @param {(value: string) => void} [props.onSearch] - Callback fired when search value changes (debounced)
+ * @param {string} [props.className] - Additional CSS classes for the input wrapper
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {string} [props.inputClassName] - Additional CSS classes for the input element
+ * @returns {React.ReactElement} The rendered search bar component
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   label="Search Users"
+ *   placeholder="Enter username..."
+ *   onSearch={handleSearch}
+ * />
+ * ```
+ */
 export declare const SearchBar: ({ placeholder, label, value, onSearch, className, containerClassName, inputClassName, ...rest }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/Select/Select.d.ts

@@ -14,4 +14,36 @@ export type SelectProps = {
     fullWidth?: boolean;
     loading?: boolean;
 };
+/**
+ * Select component for single-value selection
+ *
+ * A select dropdown component with support for colors, loading states, and flexible sizing.
+ * Built on shadcn's Select component with additional enhancements.
+ *
+ * @component
+ * @param {SelectProps} props - The select properties
+ * @param {Array<{label: React.ReactNode, value: string | number, color?: string}>} props.options - Available select options
+ * @param {(value: string) => void} [props.onChange] - Callback fired when selection changes
+ * @param {string | number} [props.value] - Currently selected value (controlled)
+ * @param {string | number} [props.defaultValue] - Default selected value (uncontrolled)
+ * @param {string} [props.placeholder='Select an option...'] - Placeholder text when no value selected
+ * @param {boolean} [props.disabled] - Whether the select is disabled
+ * @param {boolean} [props.loading] - Whether options are loading
+ * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {React.ReactElement} The rendered select component
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { label: 'Option 1', value: 'opt1', color: 'blue' },
+ *     { label: 'Option 2', value: 'opt2', color: 'green' }
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Choose an option"
+ * />
+ * ```
+ */
 export declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, loading, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/SingleCheckBox/SingleCheckBox.d.ts

@@ -11,4 +11,33 @@ export type CheckboxProps = {
     disabled?: boolean;
     name?: string;
 } & Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onChange' | 'onCheckedChange'>;
+/**
+ * SingleCheckBox component for single checkbox selection
+ *
+ * A checkbox component with label support, validation states, and required field indicators.
+ * Built on Radix UI's checkbox primitive.
+ *
+ * @component
+ * @param {CheckboxProps} props - The checkbox properties
+ * @param {ReactNode} props.label - Label text for the checkbox
+ * @param {boolean} [props.checked] - Whether the checkbox is checked (controlled)
+ * @param {(checked: boolean) => void} [props.onChange] - Callback when checked state changes
+ * @param {string} [props.name] - Name attribute for the checkbox
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the checkbox is disabled
+ * @param {string} [props.className] - Additional CSS classes for the checkbox
+ * @param {string} [props.labelClassName] - Additional CSS classes for the label
+ * @param {string} [props.containerClassName='flex items-center space-x-2'] - Additional CSS classes for the container
+ * @returns {React.ReactElement} The rendered checkbox component
+ *
+ * @example
+ * ```tsx
+ * <SingleCheckBox
+ *   label="I agree to the terms"
+ *   checked={agreed}
+ *   onChange={setAgreed}
+ *   required
+ * />
+ * ```
+ */
 export declare const SingleCheckBox: ({ checked, label, onChange, required, className, labelClassName, containerClassName, disabled, name, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;