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

package/src/components/DataDisplay/Timeline/Timeline.tsx

@@ -2,18 +2,76 @@ import { cn } from '@/lib/utils';
 import { Info, MinusSquare, PlusSquare, SquareCheck } from 'lucide-react';
 import { ReactNode } from 'react';
 
+/**
+ * Props for individual timeline item
+ * @typedef {Object} TimelineItems
+ * @property {ReactNode} timelineContent - Main content of the timeline item
+ * @property {ReactNode} [timelineOppositeContent] - Optional opposite-side content (for alternate layouts)
+ * @property {'info' | 'success' | 'error' | 'warning'} [variant='info'] - Icon variant for the timeline marker
+ */
 export type TimelineItems = {
   timelineContent: ReactNode;
   timelineOppositeContent?: ReactNode;
   variant?: 'info' | 'success' | 'error' | 'warning';
 };
 
+/**
+ * Props for Timeline component
+ * @typedef {Object} TimelineProps
+ * @property {TimelineItems[]} timelineItems - Array of timeline items to display
+ * @property {'left' | 'right' | 'alternate' | 'alternate-reverse'} [position='right'] - Timeline layout position
+ * @property {string} [className] - Optional CSS class for the timeline container
+ */
 export type TimelineProps = {
   timelineItems: TimelineItems[];
   position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
   className?: string;
 };
 
+/**
+ * Timeline component for displaying chronological events or steps
+ * Supports multiple layout positions and icon variants per item
+ *
+ * @component
+ * @param {TimelineProps} props - Timeline configuration
+ * @param {TimelineItems[]} props.timelineItems - Array of timeline events with content and optional opposite content
+ * @param {'left' | 'right' | 'alternate' | 'alternate-reverse'} [props.position='right'] - Position of timeline connector
+ *   - 'left': All content on left side
+ *   - 'right': All content on right side
+ *   - 'alternate': Content alternates left/right starting with left
+ *   - 'alternate-reverse': Content alternates left/right starting with right
+ * @param {string} [props.className] - Additional CSS classes for the timeline wrapper
+ * @returns {JSX.Element} Timeline visualization with ordered events
+ *
+ * @example
+ * // Basic timeline (content on right)
+ * <Timeline
+ *   position="right"
+ *   timelineItems={[
+ *     { timelineContent: "Project started", variant: "success" },
+ *     { timelineContent: "First milestone", variant: "info" },
+ *     { timelineContent: "Completed", variant: "success" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // Alternating timeline with opposite content
+ * <Timeline
+ *   position="alternate"
+ *   timelineItems={[
+ *     {
+ *       timelineContent: "Development",
+ *       timelineOppositeContent: "Jan 2024",
+ *       variant: "info"
+ *     },
+ *     {
+ *       timelineContent: "Testing",
+ *       timelineOppositeContent: "Feb 2024",
+ *       variant: "warning"
+ *     }
+ *   ]}
+ * />
+ */
 export const Timeline = ({
   timelineItems,
   position = 'right',

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -4,6 +4,31 @@ import {
   typographyVariants,
 } from '@/shadcn-components/DataDisplay/Typography/Typography';
 
+/**
+ * Typography component wrapper around shadcn Typography
+ * Provides semantic text rendering with predefined variants
+ *
+ * @component
+ * @param {TypographyProps} props - Typography configuration
+ * @param {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'blockquote' | 'code' | 'lead' | 'large' | 'small' | 'muted'} [props.variant='p'] - Predefined typography variant
+ * @param {React.ReactNode} props.children - Content to render with typography styling
+ * @param {...TypographyProps} [props] - Additional typography props (className, etc.)
+ * @returns {JSX.Element} Styled typography element
+ *
+ * @example
+ * // Heading
+ * <Typography variant="h1">Page Title</Typography>
+ *
+ * @example
+ * // Paragraph with custom class
+ * <Typography variant="p" className="text-gray-600">
+ *   This is a paragraph with custom styling
+ * </Typography>
+ *
+ * @example
+ * // Small text
+ * <Typography variant="small">Small disclaimer text</Typography>
+ */
 export const Typography = ({
   variant = 'p',
   children,

package/src/components/Feedback/Alert/Alert.tsx

@@ -2,6 +2,14 @@ import { AlertDescription, Alert as ShadcnAlert } from '@/shadcn-components/Feed
 import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react';
 import { ReactNode } from 'react';
 
+/**
+ * Props for the Alert component.
+ * @typedef {Object} AlertProps
+ * @property {string | ReactNode} message - The message content to display in the alert
+ * @property {'success' | 'error' | 'info' | 'warning'} [severity] - The severity level of the alert that determines the icon displayed
+ * @property {'default' | 'destructive'} [variant] - The visual variant of the alert. Defaults to 'destructive' if severity is 'error'
+ * @property {string} [className] - Additional CSS classes to apply to the alert component
+ */
 export type AlertProps = {
   message: string | ReactNode;
   severity?: 'success' | 'error' | 'info' | 'warning';
@@ -9,6 +17,13 @@ export type AlertProps = {
   className?: string;
 };
 
+/**
+ * Returns an icon component based on the alert severity level.
+ * @param {AlertProps['severity']} severity - The severity level of the alert
+ * @returns {JSX.Element | null} The icon element corresponding to the severity, or null if no severity is provided
+ * @example
+ * const icon = getIcon('success'); // Returns CheckCircle2 icon
+ */
 const getIcon = (severity: AlertProps['severity']) => {
   switch (severity) {
     case 'success':
@@ -24,6 +39,29 @@ const getIcon = (severity: AlertProps['severity']) => {
   }
 };
 
+/**
+ * Alert component that displays a message with an optional severity-based icon.
+ * Renders a styled alert box with appropriate visual indicators based on severity level.
+ *
+ * @param {AlertProps} props - The component props
+ * @param {string | ReactNode} props.message - The message content to display
+ * @param {'success' | 'error' | 'info' | 'warning'} [props.severity] - The severity level determining icon and styling
+ * @param {'default' | 'destructive'} [props.variant] - The visual variant. Overrides default variant selection
+ * @param {string} [props.className] - Additional CSS classes to apply to the alert
+ * @returns {JSX.Element} The rendered alert component
+ *
+ * @example
+ * // Display a success alert
+ * <Alert message="Operation completed successfully" severity="success" />
+ *
+ * @example
+ * // Display an error alert with custom styling
+ * <Alert
+ *   message="An error occurred"
+ *   severity="error"
+ *   className="mt-4"
+ * />
+ */
 export const Alert = ({
   severity,
   message,

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -9,13 +9,33 @@ import { useEffect } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../Input/Button/Button';
 
+/**
+ * Severity levels for snackbar alerts.
+ * @typedef {'success' | 'info' | 'warning' | 'error'} Severity
+ */
 export type Severity = 'success' | 'info' | 'warning' | 'error';
 
+/**
+ * Position configuration for snackbar placement on screen.
+ * @typedef {Object} SnackbarPosition
+ * @property {'top' | 'bottom'} vertical - Vertical alignment of the snackbar
+ * @property {'left' | 'center' | 'right'} horizontal - Horizontal alignment of the snackbar
+ */
 export type SnackbarPosition = {
   vertical: 'top' | 'bottom';
   horizontal: 'left' | 'center' | 'right';
 };
 
+/**
+ * Props for the Snackbar component.
+ * @typedef {Object} SnackbarProps
+ * @property {Severity} severity - The severity level of the snackbar (success, info, warning, error)
+ * @property {string} message - The message text to display in the snackbar
+ * @property {boolean} open - Whether the snackbar is visible
+ * @property {Function} [onClose] - Callback function when snackbar is closed. Called with reason ('timeout' or 'clickaway')
+ * @property {SnackbarPosition} [anchorOrigin] - Position configuration for the snackbar placement. Defaults to {vertical: 'top', horizontal: 'center'}
+ * @property {number} [autoHideDuration] - Duration in milliseconds after which the snackbar auto-closes. If not provided, snackbar stays open until manually closed
+ */
 export type SnackbarProps = {
   severity: Severity;
   message: string;
@@ -25,6 +45,40 @@ export type SnackbarProps = {
   autoHideDuration?: number;
 };
 
+/**
+ * Snackbar component for displaying temporary notification messages.
+ * Displays a dismissible notification box with icon and message based on severity.
+ * Auto-hides after specified duration or when close button is clicked.
+ *
+ * @param {SnackbarProps} props - The component props
+ * @param {Severity} props.severity - The severity level of the notification
+ * @param {string} props.message - The message text to display
+ * @param {boolean} props.open - Whether the snackbar is visible
+ * @param {Function} [props.onClose] - Callback when snackbar is closed. Receives close reason as parameter
+ * @param {SnackbarPosition} [props.anchorOrigin] - Position configuration for placement (defaults to top center)
+ * @param {number} [props.autoHideDuration] - Duration in milliseconds before auto-closing (undefined = no auto-close)
+ * @returns {JSX.Element | null} The rendered snackbar component or null if not open
+ *
+ * @example
+ * // Display a success message that auto-hides after 3 seconds
+ * <Snackbar
+ *   severity="success"
+ *   message="Changes saved successfully"
+ *   open={true}
+ *   autoHideDuration={3000}
+ *   onClose={(reason) => console.log('Closed:', reason)}
+ * />
+ *
+ * @example
+ * // Position snackbar at bottom-right
+ * <Snackbar
+ *   severity="info"
+ *   message="New updates available"
+ *   open={isOpen}
+ *   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+ *   onClose={() => setIsOpen(false)}
+ * />
+ */
 export const Snackbar = ({
   severity,
   message,

package/src/components/Feedback/Spinner/Spinner.tsx

@@ -1,3 +1,18 @@
+/**
+ * Spinner component that displays an animated loading indicator.
+ * Renders a dual-colored rotating spinner with smooth continuous animation.
+ * No props required - it's a simple stateless component.
+ *
+ * @returns {JSX.Element} The rendered spinner component
+ *
+ * @example
+ * // Display a loading spinner
+ * <Spinner />
+ *
+ * @example
+ * // Use in a loading state
+ * {isLoading ? <Spinner /> : <div>Content loaded</div>}
+ */
 export const Spinner = () => {
   return (
     <div className="relative h-10 w-10 scale-[0.4] rounded-full [animation:rotate_1s_linear_infinite] before:absolute before:inset-0 before:box-border before:rounded-full before:border-[5px] before:border-[#7D60D9] before:content-[''] before:[animation:prixClipFix_1.5s_linear_infinite] after:absolute after:inset-0 after:box-border after:rounded-full after:border-[5px] after:border-[#FF3D00] after:content-[''] after:[animation:prixClipFix_1.5s_linear_infinite] after:[transform:rotate3d(90,90,0,180deg)]" />

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -6,6 +6,18 @@ import {
   TooltipTrigger,
 } from '@/shadcn-components/Feedback/Tooltip/Tooltip';
 
+/**
+ * Props for the Tooltip component.
+ * @typedef {Object} TooltipProps
+ * @property {ReactNode} children - The element that triggers the tooltip on hover
+ * @property {ReactNode} title - The tooltip content to display
+ * @property {'top' | 'right' | 'bottom' | 'left'} [placement] - The direction to place the tooltip relative to the trigger element. Defaults to 'right'
+ * @property {boolean} [arrow] - Whether to display an arrow pointing to the trigger element. Currently not implemented in UI
+ * @property {boolean} [open] - Controlled open state of the tooltip
+ * @property {boolean} [defaultOpen] - Initial open state if tooltip is uncontrolled
+ * @property {Function} [onOpenChange] - Callback fired when tooltip open state changes
+ * @property {number} [delayDuration] - Delay in milliseconds before tooltip appears on hover
+ */
 export type TooltipProps = {
   children: ReactNode;
   title: ReactNode;
@@ -17,6 +29,48 @@ export type TooltipProps = {
   delayDuration?: number;
 };
 
+/**
+ * Tooltip component that displays contextual information on hover.
+ * Wraps the shadcn tooltip component with enhanced positioning and configuration options.
+ * Supports both controlled and uncontrolled modes for tooltip visibility.
+ *
+ * @param {TooltipProps} props - The component props
+ * @param {ReactNode} props.children - The element that triggers the tooltip
+ * @param {ReactNode} props.title - The tooltip content to display
+ * @param {'top' | 'right' | 'bottom' | 'left'} [props.placement] - Tooltip placement direction (defaults to 'right')
+ * @param {boolean} [props.arrow] - Arrow display option (not currently implemented)
+ * @param {boolean} [props.open] - Controlled open state
+ * @param {boolean} [props.defaultOpen] - Initial open state for uncontrolled mode
+ * @param {Function} [props.onOpenChange] - Callback when open state changes
+ * @param {number} [props.delayDuration] - Delay before showing tooltip in milliseconds
+ * @returns {JSX.Element} The rendered tooltip component
+ *
+ * @example
+ * // Basic tooltip with default placement
+ * <Tooltip title="This is a helpful tip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Tooltip positioned at bottom with delay
+ * <Tooltip
+ *   title="Additional information"
+ *   placement="bottom"
+ *   delayDuration={500}
+ * >
+ *   <span>Information icon</span>
+ * </Tooltip>
+ *
+ * @example
+ * // Controlled tooltip state
+ * <Tooltip
+ *   title="Controlled tooltip"
+ *   open={isTooltipOpen}
+ *   onOpenChange={setIsTooltipOpen}
+ * >
+ *   <button>Toggle</button>
+ * </Tooltip>
+ */
 export const Tooltip = ({
   children,
   title,

package/src/components/Input/Button/Button.tsx

@@ -13,6 +13,32 @@ export type ButtonProps = React.ComponentProps<'button'> &
     fullWidth?: boolean;
   };
 
+/**
+ * Button component with enhanced features
+ *
+ * A customizable button component that wraps the shadcn Button with additional
+ * functionality including loading states, icons, and full width options.
+ *
+ * @component
+ * @param {ButtonProps} props - The button properties
+ * @param {boolean} [props.loading=false] - Whether the button is in a loading state
+ * @param {ReactNode} [props.startIcon] - Icon to display at the start of the button
+ * @param {ReactNode} [props.endIcon] - Icon to display at the end of the button
+ * @param {boolean} [props.fullWidth=false] - Whether the button should take full width
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @param {ReactNode} [props.children] - The button content/label
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {string} [props.variant] - Button style variant from buttonVariants
+ * @param {string} [props.size] - Button size variant from buttonVariants
+ * @returns {React.ReactElement} The rendered button element
+ *
+ * @example
+ * ```tsx
+ * <Button loading={isLoading} startIcon={<SendIcon />} variant="default">
+ *   Submit
+ * </Button>
+ * ```
+ */
 export const Button = ({
   loading = false,
   disabled,

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -33,6 +33,47 @@ export type DatePickerProps = {
   [key: string]: any;
 };
 
+/**
+ * DatePicker component for date selection
+ *
+ * A flexible date picker component that supports both input and filter modes,
+ * with customizable date formats, restrictions, and shortcuts.
+ *
+ * @component
+ * @param {DatePickerProps} props - The date picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the date picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date changes
+ * @param {DateFormat} [props.format='dd/MM/yyyy'] - Date format for display
+ * @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
+ * @param {Date} [props.maxDate] - Maximum selectable date
+ * @param {boolean} [props.disablePast] - Whether past dates are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates 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 picker component
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Select Date"
+ *   value={date}
+ *   onChange={setDate}
+ *   format="dd/MM/yyyy"
+ *   required
+ * />
+ * ```
+ */
 export const DatePicker = ({
   type = 'input',
   ...props

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -61,6 +61,48 @@ export type DateTimePickerProps = {
   [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 const DateTimePicker = ({
   type = 'input',
   ...props

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}>