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

package/src/components/DataDisplay/ActivityLogView/ActivityLogView.tsx

@@ -12,8 +12,20 @@ import {
   useIntersectionObserver,
 } from './service';
 
+/**
+ * Type for activity action
+ * @typedef {'create' | 'update' | 'delete'} ActivityAction
+ */
 export type ActivityAction = 'create' | 'update' | 'delete';
 
+/**
+ * Interface for a single activity entry
+ * @typedef {Object} Activity
+ * @property {string} [userName] - Name of user who performed the action
+ * @property {ActivityAction} [action] - Type of action performed
+ * @property {string} message - Description or details of the activity
+ * @property {string} timestamp - ISO timestamp of when activity occurred
+ */
 export interface Activity {
   userName?: string;
   action?: ActivityAction;
@@ -21,6 +33,22 @@ export interface Activity {
   timestamp: string;
 }
 
+/**
+ * Props for ActivityLogView component
+ * @typedef {Object} ActivityLogProps
+ * @property {Activity[]} activitiesData - Array of activities to display
+ * @property {boolean} isFetchingNextPage - Whether next page is being fetched
+ * @property {() => void} fetchNextPage - Callback to fetch next page
+ * @property {boolean | undefined} hasNextPage - Whether more activities exist
+ * @property {Date | null} fromDate - Filter start date
+ * @property {Date | null} toDate - Filter end date
+ * @property {(date: Date | null) => void} setFromDate - Update filter start date
+ * @property {(date: Date | null) => void} setToDate - Update filter end date
+ * @property {boolean} isLoading - Whether data is loading
+ * @property {boolean} [hideLogFilter] - Hide the date filter controls
+ * @property {string} [className] - CSS class for container
+ * @property {string} [title] - Title to display above activities
+ */
 interface ActivityLogProps {
   activitiesData: Activity[];
   isFetchingNextPage: boolean;
@@ -36,6 +64,12 @@ interface ActivityLogProps {
   title?: string;
 }
 
+/**
+ * Get icon component for activity action type
+ * @param {ActivityAction} [action] - The action type
+ * @returns {JSX.Element} Icon component for the action
+ * @private
+ */
 const getActivityIcon = (action?: ActivityAction) => {
   const iconProps = { size: 16, className: 'text-foreground' };
   switch (action) {
@@ -50,6 +84,56 @@ const getActivityIcon = (action?: ActivityAction) => {
   }
 };
 
+/**
+ * ActivityLogView component for displaying chronological activity feed
+ * Groups activities by date, supports filtering and infinite scroll
+ *
+ * @component
+ * @param {ActivityLogProps} props - Activity log configuration
+ * @param {Activity[]} props.activitiesData - Array of activity entries to display
+ * @param {boolean} props.isFetchingNextPage - Whether next page is loading
+ * @param {() => void} props.fetchNextPage - Callback to load more activities
+ * @param {boolean | undefined} props.hasNextPage - Whether more activities available
+ * @param {Date | null} props.fromDate - Filter start date (null = no limit)
+ * @param {Date | null} props.toDate - Filter end date (null = no limit)
+ * @param {(date: Date | null) => void} props.setFromDate - Update filter start date
+ * @param {(date: Date | null) => void} props.setToDate - Update filter end date
+ * @param {boolean} props.isLoading - Initial load state
+ * @param {boolean} [props.hideLogFilter=false] - Hide filter controls
+ * @param {string} [props.className] - CSS class for container
+ * @param {string} [props.title] - Title to display above log
+ * @returns {JSX.Element} Activity log with timeline, filtering, and infinite scroll
+ *
+ * @example
+ * // Activity log with filtering
+ * <ActivityLogView
+ *   activitiesData={activities}
+ *   isFetchingNextPage={loading}
+ *   fetchNextPage={() => loadMore()}
+ *   hasNextPage={true}
+ *   fromDate={startDate}
+ *   toDate={endDate}
+ *   setFromDate={setStartDate}
+ *   setToDate={setEndDate}
+ *   isLoading={false}
+ *   title="Activity Feed"
+ * />
+ *
+ * @example
+ * // Activity log without filter
+ * <ActivityLogView
+ *   activitiesData={activities}
+ *   isFetchingNextPage={loading}
+ *   fetchNextPage={() => loadMore()}
+ *   hasNextPage={true}
+ *   fromDate={null}
+ *   toDate={null}
+ *   setFromDate={() => {}}
+ *   setToDate={() => {}}
+ *   isLoading={false}
+ *   hideLogFilter
+ * />
+ */
 export const ActivityLogView = ({
   activitiesData,
   isFetchingNextPage,

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -6,6 +6,16 @@ import {
 } from '@/shadcn-components/DataDisplay/Avatar/Avatar';
 import { Typography } from '../Typography/Typography';
 
+/**
+ * Props for CircularAvatar component
+ * @typedef {Object} CircularAvatarProps
+ * @property {string} text - Text to display as fallback initials (e.g., "John Doe" -> "JD")
+ * @property {string} [src] - Optional image source URL for the avatar
+ * @property {string} [alt] - Optional alt text for the avatar image
+ * @property {string} [className] - Optional CSS class for the avatar container
+ * @property {string} [fallbackClassName] - Optional CSS class for the fallback text
+ * @property {(e: React.MouseEvent<HTMLDivElement>) => void} [onClick] - Optional click handler
+ */
 export type CircularAvatarProps = {
   text: string;
   src?: string;
@@ -15,6 +25,36 @@ export type CircularAvatarProps = {
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 
+/**
+ * Circular avatar component with image and fallback initials
+ * Extracts first letter from each word to create initials fallback
+ *
+ * @component
+ * @param {CircularAvatarProps} props - Avatar configuration
+ * @param {string} props.text - Text to extract initials from for fallback display
+ * @param {string} [props.src] - Image URL to display; falls back to initials if not provided
+ * @param {string} [props.alt] - Alternative text for image accessibility
+ * @param {string} [props.className] - Additional CSS classes for avatar wrapper
+ * @param {string} [props.fallbackClassName] - Additional CSS classes for fallback text display
+ * @param {(e: React.MouseEvent<HTMLDivElement>) => void} [props.onClick] - Handler called when avatar is clicked
+ * @returns {JSX.Element} Circular avatar with image or initials
+ *
+ * @example
+ * // Avatar with image
+ * <CircularAvatar
+ *   text="John Doe"
+ *   src="/path/to/avatar.jpg"
+ *   alt="John's avatar"
+ * />
+ *
+ * @example
+ * // Avatar with fallback initials and click handler
+ * <CircularAvatar
+ *   text="Jane Smith"
+ *   onClick={(e) => openUserMenu(e)}
+ *   className="border-2 border-blue-500"
+ * />
+ */
 export const CircularAvatar = ({
   text,
   src,

package/src/components/DataDisplay/Chip/Chip.tsx

@@ -1,10 +1,38 @@
 import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
 import * as React from 'react';
 
+/**
+ * Props for Chip component
+ * @typedef {Object} ChipProps
+ * @property {string} label - The text content displayed in the chip
+ * @extends {React.ComponentPropsWithoutRef<typeof Badge>}
+ */
 export interface ChipProps extends React.ComponentPropsWithoutRef<typeof Badge> {
   label: string;
 }
 
+/**
+ * Chip component for displaying compact, labeled badges
+ * Wrapper around shadcn Badge component with simpler API
+ *
+ * @component
+ * @param {ChipProps} props - Chip configuration
+ * @param {string} props.label - Text to display in the chip
+ * @param {...React.ComponentPropsWithoutRef<typeof Badge>} [props] - Additional Badge props (variant, className, etc.)
+ * @returns {JSX.Element} Chip badge element
+ *
+ * @example
+ * // Basic chip
+ * <Chip label="JavaScript" />
+ *
+ * @example
+ * // Chip with custom variant
+ * <Chip
+ *   label="Active"
+ *   variant="default"
+ *   className="bg-green-500"
+ * />
+ */
 export const Chip = ({ label, ...rest }: ChipProps) => {
   return <Badge {...rest}>{label}</Badge>;
 };

package/src/components/DataDisplay/Chips/Chips.tsx

@@ -2,6 +2,23 @@ import { cn } from '@/lib/utils';
 import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
 import { ReactNode, useEffect, useState } from 'react';
 
+/**
+ * Props for individual chip item
+ * @typedef {Object} ChipItem
+ * @property {string | ReactNode} label - Display label for the chip
+ * @property {string | number} value - Unique value identifier for the chip
+ */
+
+/**
+ * Props for Chips component (multi/single selection)
+ * @typedef {Object} ChipsProps
+ * @property {{ label: string | ReactNode; value: string | number }[]} list - Array of chip items
+ * @property {string[] | string | number} selected - Currently selected value(s)
+ * @property {(selected: string[] | string | number) => void} onSelected - Callback when selection changes
+ * @property {'row' | 'column'} [direction='row'] - Layout direction for chips
+ * @property {boolean} [singleSelection=true] - Enable single or multiple selection
+ * @property {boolean} [toggle=false] - Allow toggling selection off
+ */
 interface ChipsProps {
   list: { label: string | ReactNode; value: string | number }[];
   selected: string[] | string | number;
@@ -11,6 +28,45 @@ interface ChipsProps {
   toggle?: boolean;
 }
 
+/**
+ * Chips component for single or multi-select chip groups
+ * Renders interactive chips with toggle/selection capabilities
+ *
+ * @component
+ * @param {ChipsProps} props - Chips configuration
+ * @param {{ label: string | ReactNode; value: string | number }[]} props.list - Array of chip options
+ * @param {string[] | string | number} props.selected - Current selected value(s)
+ * @param {(selected: string[] | string | number) => void} props.onSelected - Callback fired when selection changes
+ * @param {'row' | 'column'} [props.direction='row'] - Flex direction for chip layout
+ * @param {boolean} [props.singleSelection=true] - If true, only one chip can be selected at a time
+ * @param {boolean} [props.toggle=false] - If true, clicking selected chip deselects it (only in singleSelection mode)
+ * @returns {JSX.Element} Interactive chip group
+ *
+ * @example
+ * // Single selection chips
+ * <Chips
+ *   list={[
+ *     { label: "Option 1", value: "opt1" },
+ *     { label: "Option 2", value: "opt2" }
+ *   ]}
+ *   selected="opt1"
+ *   onSelected={(value) => setSelected(value)}
+ * />
+ *
+ * @example
+ * // Multi-selection chips with column layout
+ * <Chips
+ *   list={[
+ *     { label: "JavaScript", value: "js" },
+ *     { label: "TypeScript", value: "ts" },
+ *     { label: "Python", value: "py" }
+ *   ]}
+ *   selected={["js", "ts"]}
+ *   onSelected={(values) => setTags(values)}
+ *   singleSelection={false}
+ *   direction="column"
+ * />
+ */
 export const Chips = ({
   list = [],
   selected: _selected,

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -26,6 +26,39 @@ import {
   processColumnsForSorting,
 } from './components/utils';
 
+/**
+ * Props for the DataTable component
+ * @typedef {Object} DataTableProps
+ * @template TData - Type of data in table rows
+ *
+ * @property {number} [limit] - Number of rows per page for pagination
+ * @property {number} [offset] - Current page offset for pagination
+ * @property {number} [totalCount] - Total number of records in dataset
+ * @property {(page: number) => void} [onPageChange] - Callback when page changes
+ * @property {(limit: number) => void} [onLimitChange] - Callback when page limit changes
+ * @property {ColumnDef<TData, any>[]} columns - Column definitions for the table
+ * @property {TData[]} rows - Array of data rows to display
+ * @property {'standard' | 'compact' | 'comfortable'} [density='standard'] - Row height density
+ * @property {{ [x: string]: boolean }} [columnVisibilityModel] - Column visibility state
+ * @property {boolean} [isLoading=false] - Whether table is loading
+ * @property {boolean} [checkboxSelection=false] - Enable row checkboxes
+ * @property {Record<string, boolean>} [rowSelectionModel={}] - Selected rows state
+ * @property {(newRowSelectionModel: Record<string, boolean>) => void} [onRowSelectionModelChange] - Selection change callback
+ * @property {React.ReactNode[]} [selectionActions] - Actions to show when rows selected
+ * @property {(params: { row: Row<TData> }) => void} [onRowClick] - Row click handler
+ * @property {boolean} [enableSorting=false] - Enable column sorting
+ * @property {SortingState} [sortingState] - Current sorting state
+ * @property {(newSortingState: SortingState) => void} [onSortingChange] - Sorting change callback
+ * @property {boolean} [hideTableActionHeader] - Hide the action header
+ * @property {Object} [tableActionProps] - Table action header configuration
+ * @property {React.ReactNode[]} cards - Card view items for card layout
+ * @property {string} [className] - CSS class for wrapper
+ * @property {string} [tableClassName] - CSS class for table element
+ * @property {string} [headerClassName] - CSS class for header row
+ * @property {string | ((row: Row<TData>) => string)} [rowClassName] - CSS class for data rows
+ * @property {string} [cellClassName] - CSS class for cells
+ * @property {string} [cardContainerClassName] - CSS class for card container
+ */
 type DataTableProps<TData = any> = {
   // Pagination props
   limit?: number;
@@ -81,6 +114,68 @@ type DataTableProps<TData = any> = {
   cardContainerClassName?: string;
 };
 
+/**
+ * DataTable component for displaying tabular data with advanced features
+ * Supports sorting, filtering, pagination, row selection, and card view layout
+ *
+ * @component
+ * @template TData - Type of data in table rows
+ * @param {DataTableProps<TData>} props - DataTable configuration
+ * @param {ColumnDef<TData, any>[]} props.columns - TanStack table column definitions
+ * @param {TData[]} props.rows - Array of data rows
+ * @param {number} [props.limit] - Rows per page (enables pagination)
+ * @param {number} [props.offset] - Page offset
+ * @param {number} [props.totalCount] - Total row count for pagination
+ * @param {(page: number) => void} [props.onPageChange] - Page change handler
+ * @param {(limit: number) => void} [props.onLimitChange] - Page limit change handler
+ * @param {'standard' | 'compact' | 'comfortable'} [props.density='standard'] - Row height
+ * @param {boolean} [props.checkboxSelection] - Show row selection checkboxes
+ * @param {Record<string, boolean>} [props.rowSelectionModel] - Selected rows
+ * @param {(newRowSelectionModel: Record<string, boolean>) => void} [props.onRowSelectionModelChange] - Selection changed callback
+ * @param {React.ReactNode[]} [props.selectionActions] - Actions when rows selected
+ * @param {(params: { row: Row<TData> }) => void} [props.onRowClick] - Row clicked callback
+ * @param {boolean} [props.enableSorting] - Enable column sorting
+ * @param {SortingState} [props.sortingState] - Current sort state
+ * @param {(newSortingState: SortingState) => void} [props.onSortingChange] - Sort changed callback
+ * @param {boolean} [props.isLoading] - Show loading skeletons
+ * @param {boolean} [props.hideTableActionHeader] - Hide action header
+ * @param {Object} [props.tableActionProps] - Table action configuration
+ * @param {React.ReactNode[]} props.cards - Card view items
+ * @param {string} [props.className] - Wrapper CSS class
+ * @param {string} [props.tableClassName] - Table CSS class
+ * @param {string} [props.headerClassName] - Header CSS class
+ * @param {string | ((row: Row<TData>) => string)} [props.rowClassName] - Row CSS class
+ * @param {string} [props.cellClassName] - Cell CSS class
+ * @param {string} [props.cardContainerClassName] - Card container CSS class
+ * @returns {JSX.Element} Data table with optional pagination, sorting, and selection
+ *
+ * @example
+ * // Basic table
+ * <DataTable
+ *   columns={columns}
+ *   rows={data}
+ *   limit={10}
+ *   offset={0}
+ *   totalCount={100}
+ * />
+ *
+ * @example
+ * // Table with selection and sorting
+ * <DataTable
+ *   columns={columns}
+ *   rows={data}
+ *   checkboxSelection
+ *   rowSelectionModel={selected}
+ *   onRowSelectionModelChange={setSelected}
+ *   enableSorting
+ *   sortingState={sorting}
+ *   onSortingChange={setSorting}
+ *   limit={20}
+ *   offset={page * 20}
+ *   totalCount={total}
+ *   onPageChange={(offset) => setPage(offset / 20)}
+ * />
+ */
 const DataTable = <TData extends Record<string, any> = any>(
   props: DataTableProps<TData>,
 ) => {

package/src/components/DataDisplay/DataTable/components/TablePagination.tsx

@@ -14,6 +14,16 @@ import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
 import { Typography } from '../../Typography/Typography';
 
+/**
+ * Props for TablePagination component
+ * @typedef {Object} PaginationProps
+ * @property {number} limit - Number of rows per page
+ * @property {number} offset - Current page offset (0-indexed)
+ * @property {number} totalCount - Total number of records
+ * @property {(offset: number) => void} onPageChange - Callback when page changes
+ * @property {(limit: number) => void} onLimitChange - Callback when page limit changes
+ * @property {number} rowCount - Number of rows in current page
+ */
 export type PaginationProps = {
   limit: number;
   offset: number;
@@ -23,6 +33,31 @@ export type PaginationProps = {
   rowCount: number;
 };
 
+/**
+ * TablePagination component for controlling data table pagination
+ * Displays page numbers, navigation arrows, row count, and page limit selector
+ *
+ * @component
+ * @param {PaginationProps} props - Pagination configuration
+ * @param {number} props.limit - Rows per page
+ * @param {number} props.offset - Current page offset
+ * @param {number} props.totalCount - Total records in dataset
+ * @param {(offset: number) => void} props.onPageChange - Handler for page navigation
+ * @param {(limit: number) => void} props.onLimitChange - Handler for limit changes
+ * @param {number} props.rowCount - Current page row count
+ * @returns {JSX.Element} Pagination controls with page selector and limit dropdown
+ *
+ * @example
+ * // Pagination with 20 rows per page
+ * <TablePagination
+ *   limit={20}
+ *   offset={0}
+ *   totalCount={150}
+ *   rowCount={20}
+ *   onPageChange={(offset) => setOffset(offset)}
+ *   onLimitChange={(limit) => setLimit(limit)}
+ * />
+ */
 export const TablePagination = (props: PaginationProps) => {
   const { limit, offset, totalCount, onPageChange, onLimitChange, rowCount } =
     props;

package/src/components/DataDisplay/EmptyIllustration/EmptyIllustration.tsx

@@ -5,6 +5,37 @@ import {
   TypographyProps,
 } from '../../DataDisplay/Typography/Typography';
 
+/**
+ * Props for EmptyIllustration component
+ * @typedef {Object} EmptyIllustrationProps
+ * @property {string} message - Text message displayed below the empty illustration
+ * @property {TypographyProps} [messageProps] - Typography props for styling the message text
+ * @property {string} [containerClassName] - CSS class for the container div
+ */
+
+/**
+ * EmptyIllustration component for displaying empty state messaging
+ * Shows decorative empty state icon with customizable message
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.message - Text message to display below illustration
+ * @param {TypographyProps} [props.messageProps] - Typography styling props (variant, className, etc.)
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @returns {JSX.Element} Empty state illustration with message
+ *
+ * @example
+ * // Basic empty state
+ * <EmptyIllustration message="No data found" />
+ *
+ * @example
+ * // With custom styling
+ * <EmptyIllustration
+ *   message="No search results match your criteria"
+ *   messageProps={{ variant: "p", className: "text-gray-600" }}
+ *   containerClassName="py-12"
+ * />
+ */
 export const EmptyIllustration = ({
   message,
   messageProps,

package/src/components/DataDisplay/ReactJoyride/ReactJoyride.tsx

@@ -4,6 +4,20 @@ import { Button } from '../../Input/Button/Button';
 import { Typography } from '../Typography/Typography';
 import './CustomJoyRideStyles.css';
 
+/**
+ * Configuration for individual tour step
+ * @typedef {Object} JoyrideStep
+ * @property {string} target - CSS selector for the element to highlight
+ * @property {string | ReactNode} content - Description or content for the step
+ * @property {string} [title] - Title text for the step tooltip
+ * @property {'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto'} [placement='auto'] - Tooltip placement relative to target
+ * @property {boolean} [disableBeacon] - Hide the beacon pulse animation
+ * @property {boolean} [hideCloseButton] - Hide close button in tooltip
+ * @property {boolean} [showProgress] - Display progress indicator
+ * @property {boolean} [showSkipButton] - Show skip button in tooltip
+ * @property {boolean} [spotlightClicks] - Allow clicking inside spotlight area
+ * @property {Record<string, any>} [styles] - Custom styles for tooltip
+ */
 interface JoyrideStep {
   target: string;
   content: string | ReactNode;
@@ -17,6 +31,56 @@ interface JoyrideStep {
   styles?: Record<string, any>;
 }
 
+/**
+ * ReactJoyride component for interactive product tours
+ * Provides guided walkthrough of UI elements with customizable steps
+ *
+ * @component
+ * @param {Object} props - Tour configuration
+ * @param {JoyrideStep[]} props.steps - Array of tour steps with targets, content, and placement
+ * @param {ReactNode} [props.children] - Application content to overlay tour on
+ * @param {string} props.tourName - Unique identifier for the tour (for state management)
+ * @returns {JSX.Element} Tour overlay component with tour trigger button
+ *
+ * @example
+ * // Basic product tour
+ * <ReactJoyRide
+ *   tourName="dashboard-tour"
+ *   steps={[
+ *     {
+ *       target: ".logo",
+ *       title: "Welcome",
+ *       content: "Welcome to our dashboard!",
+ *       placement: "bottom"
+ *     },
+ *     {
+ *       target: ".user-menu",
+ *       title: "Profile",
+ *       content: "Access your profile and settings here",
+ *       placement: "left"
+ *     }
+ *   ]}
+ * >
+ *   <Dashboard />
+ * </ReactJoyRide>
+ *
+ * @example
+ * // Advanced tour with custom placement and styling
+ * <ReactJoyRide
+ *   tourName="feature-tour"
+ *   steps={[
+ *     {
+ *       target: ".new-feature",
+ *       title: "New Feature",
+ *       content: "Check out this exciting new feature",
+ *       placement: "right",
+ *       disableBeacon: false
+ *     }
+ *   ]}
+ * >
+ *   <App />
+ * </ReactJoyRide>
+ */
 export const ReactJoyRide = ({
   steps,
   children,

package/src/components/DataDisplay/Separator/Separator.tsx

@@ -2,6 +2,14 @@ import * as React from 'react';
 
 import { Separator as ShadcnSaperator } from '@/shadcn-components/DataDisplay/Seperator/Seperator';
 
+/**
+ * Props for Separator component
+ * @typedef {Object} SeparatorProps
+ * @property {'horizontal' | 'vertical'} [orientation='horizontal'] - Direction of the separator
+ * @property {boolean} [decorative=true] - If true, renders as non-semantic element for styling
+ * @property {string} [className] - Optional CSS class for custom styling
+ * @extends {React.ComponentPropsWithoutRef<typeof ShadcnSaperator>}
+ */
 interface SeparatorProps
   extends React.ComponentPropsWithoutRef<typeof ShadcnSaperator> {
   orientation?: 'horizontal' | 'vertical';
@@ -9,6 +17,28 @@ interface SeparatorProps
   className?: string;
 }
 
+/**
+ * Separator component for dividing content sections
+ * Renders semantic or decorative separator line
+ *
+ * @component
+ * @param {SeparatorProps} props - Separator configuration
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Direction of the dividing line
+ * @param {boolean} [props.decorative=true] - Whether separator is decorative (non-semantic)
+ * @param {string} [props.className] - Additional CSS classes for styling
+ * @param {...React.ComponentPropsWithoutRef<typeof ShadcnSaperator>} [props] - Additional separator props
+ * @returns {JSX.Element} Separator line element
+ * @example
+ * // Horizontal separator
+ * <Separator />
+ *
+ * @example
+ * // Vertical separator with custom styling
+ * <Separator
+ *   orientation="vertical"
+ *   className="h-12"
+ * />
+ */
 const Separator = React.forwardRef<
   React.ElementRef<typeof ShadcnSaperator>,
   SeparatorProps
@@ -29,4 +59,6 @@ const Separator = React.forwardRef<
   },
 );
 
+Separator.displayName = 'Separator';
+
 export { Separator };

package/src/components/DataDisplay/Skeleton/Skeleton.tsx

@@ -1,3 +1,23 @@
 import { Skeleton as SkeletonUI } from '@/shadcn-components/DataDisplay/Skeleton/Skeleton';
 
+/**
+ * Skeleton component for loading placeholder animations
+ * Re-export of shadcn Skeleton component for use in DataDisplay module
+ *
+ * @component
+ * @param {React.ComponentProps<typeof SkeletonUI>} props - Standard HTML div props with className for styling
+ * @param {string} [props.className] - CSS classes for sizing and styling the skeleton (e.g., "h-12 w-12 rounded-full")
+ * @returns {JSX.Element} Animated skeleton placeholder
+ *
+ * @example
+ * // Skeleton for profile picture
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ *
+ * @example
+ * // Skeleton for content block
+ * <div className="space-y-2">
+ *   <Skeleton className="h-4 w-full" />
+ *   <Skeleton className="h-4 w-3/4" />
+ * </div>
+ */
 export { SkeletonUI as Skeleton };

package/src/components/DataDisplay/StatusCard/StatusCard.tsx

@@ -1,6 +1,14 @@
 import { cn } from '@/lib/utils';
 import { Typography, TypographyProps } from '../Typography/Typography';
 
+/**
+ * Props for StatusCard component
+ * @typedef {Object} StatusCardProps
+ * @property {'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink'} color - Color theme for the status card
+ * @property {string} text - Text content to display in the status card
+ * @property {string} [className] - Optional additional CSS classes
+ * @property {TypographyProps['variant']} [typographyVariant='small'] - Typography variant for text styling
+ */
 export type StatusCardProps = {
   color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
   text: string;
@@ -8,6 +16,34 @@ export type StatusCardProps = {
   typographyVariant?: TypographyProps['variant'];
 };
 
+/**
+ * StatusCard component for displaying colored status badges
+ * Renders status indicators with color-coded backgrounds and text
+ *
+ * @component
+ * @param {StatusCardProps} props - StatusCard configuration
+ * @param {'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink'} props.color - Status color (determines styling)
+ * @param {string} props.text - Status text to display
+ * @param {string} [props.className] - Additional CSS classes for custom styling
+ * @param {TypographyProps['variant']} [props.typographyVariant='small'] - Typography variant (h1-h6, p, small, etc.)
+ * @returns {JSX.Element} Colored status badge
+ *
+ * @example
+ * // Active status
+ * <StatusCard
+ *   color="green"
+ *   text="Active"
+ * />
+ *
+ * @example
+ * // Error status with custom styling
+ * <StatusCard
+ *   color="red"
+ *   text="Error"
+ *   typographyVariant="p"
+ *   className="font-bold"
+ * />
+ */
 export const StatusCard = ({
   color,
   text,