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

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -26,6 +26,47 @@ export type FileUploadProps = {
   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 const FileUpload = ({
   label,
   name = 'file-input',

package/src/components/Input/FormActions/FormActions.tsx

@@ -14,6 +14,43 @@ export interface FormActionsProps {
   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 const FormActions = ({
   submitButtonProps,
   cancelButtonProps,

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -32,6 +32,37 @@ type ControlledElementProps<T extends FieldValues = FieldValues> = {
   [key: string]: any;
 };
 
+/**
+ * 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 function FormControlWrapper<T extends FieldValues = FieldValues>({
   control,
   children,

package/src/components/Input/FormWrapper/FormWrapper.tsx

@@ -6,6 +6,26 @@ type FormWrapperProps = {
   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 const FormWrapper = ({ children, className }: FormWrapperProps) => {
   return (
     <div className={cn('flex flex-col gap-3 m-4', className)}>{children}</div>

package/src/components/Input/HelpButton/HelpButton.tsx

@@ -1,6 +1,20 @@
 import { MessageCircleQuestionMark } from 'lucide-react';
 import { Button } from '../../export';
 
+/**
+ * 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 />
+ * ```
+ */
 const HelpButton = () => {
   return (
     <Button

package/src/components/Input/IconButtons/IconButtons/DeleteButton.tsx

@@ -1,6 +1,22 @@
 import { Trash2 } from 'lucide-react';
 import { Button, 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 function DeleteButton({ disabled, ...props }: ButtonProps) {
   return (
     <Button size="icon" variant="ghost" disabled={disabled} {...props}>

package/src/components/Input/IconButtons/IconButtons/EditButton.tsx

@@ -1,6 +1,22 @@
 import { Pencil } from 'lucide-react';
 import { Button, 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 function EditButton({ disabled, ...props }: ButtonProps) {
   return (
     <Button size="icon" variant="ghost" disabled={disabled} {...props}>

package/src/components/Input/IconButtons/IconButtons/RedirectButton.tsx

@@ -1,6 +1,22 @@
 import { SquareArrowOutUpRight } from 'lucide-react';
 import { Button, 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 function RedirectButton({ disabled, ...props }: ButtonProps) {
   return (
     <Button size="icon" variant="ghost" disabled={disabled} {...props}>

package/src/components/Input/IconButtons/IconButtons/ViewButton.tsx

@@ -1,6 +1,22 @@
 import { Eye } from 'lucide-react';
 import { Button, 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 function ViewButton({ disabled, ...props }: ButtonProps) {
   return (
     <Button size="icon" variant="ghost" disabled={disabled} {...props}>

package/src/components/Input/IconButtons/IconButtons.tsx

@@ -3,6 +3,24 @@ 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 const IconButtons = {
   DeleteButton,
   EditButton,

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -9,6 +9,32 @@ export interface LabelWrapperProps {
   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 const LabelWrapper = ({
   required,
   name,

package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx

@@ -15,6 +15,40 @@ export type MultiCheckboxProps = {
   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 const MultiCheckBox = ({
   name,
   options,

package/src/components/Input/MultiSelect/MultiSelect.tsx

@@ -46,6 +46,46 @@ export type MultiSelectProps = {
   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 const MultiSelect = ({
   options,
   optionsApiEndPoint,

package/src/components/Input/OtpInput/OtpInput.tsx

@@ -16,6 +16,35 @@ interface OtpInputProps {
   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 const OtpInput = ({
   length,
   onChangeOtp,

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -21,6 +21,40 @@ export type PasswordFieldProps = {
   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 const PasswordField = ({
   name,
   label,

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -22,6 +22,44 @@ export type RadioGroupProps = {
   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 const RadioGroup = ({
   label,
   required = false,

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -15,6 +15,32 @@ export type SearchBarProps = {
   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 const SearchBar = ({
   placeholder = 'Search by Name',
   label,

package/src/components/Input/Select/Select.tsx

@@ -33,6 +33,15 @@ export type SelectProps = {
   loading?: boolean;
 };
 
+/**
+ * Helper function to get color CSS classes for select options
+ *
+ * Maps color names to Tailwind CSS classes for styling select options.
+ *
+ * @param {string} [color] - Color name ('red', 'green', 'blue', 'pink', 'yellow', 'orange', 'secondary')
+ * @returns {string} Tailwind CSS classes for the color
+ * @internal
+ */
 const getColorClasses = (
   color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange' | 'secondary',
 ) => {
@@ -56,6 +65,38 @@ const getColorClasses = (
   }
 };
 
+/**
+ * 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 const Select = ({
   options = [],
   onChange,

package/src/components/Input/SingleCheckBox/SingleCheckBox.tsx

@@ -18,6 +18,35 @@ export type CheckboxProps = {
   '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 const SingleCheckBox = ({
   checked,
   label,