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

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

@@ -12,5 +12,38 @@ export type SelectProps = {
     className?: string;
     disabled?: boolean;
     fullWidth?: boolean;
+    loading?: boolean;
 };
-export declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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;

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

@@ -35,6 +35,48 @@ export type SingleSelectProps = {
     type?: 'input' | 'filter';
     disableClear?: boolean;
     fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 };
+/**
+ * SingleSelect component for single-value selection
+ *
+ * A feature-rich single-select component supporting both local and API-driven options,
+ * with search, pagination, filtering, and flexible display modes.
+ *
+ * @component
+ * @param {SingleSelectProps} 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 value
+ * @param {(value: 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 single-select component
+ *
+ * @example
+ * ```tsx
+ * <SingleSelect
+ *   label="Select User"
+ *   value={selectedUser}
+ *   onChange={setSelectedUser}
+ *   options={users}
+ *   required
+ * />
+ * ```
+ */
 export declare const SingleSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/cjs/types/src/components/Input/SingleSelect/components/SingleFilter.d.ts

@@ -9,4 +9,4 @@ export type SingleFilterProps = {
     handleScroll: (event: any) => Promise<void>;
     state: SingleSelectState;
 } & SingleSelectProps;
-export declare const SingleFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, state, disableClear, fullWidth, }: SingleFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, state, disableClear, fullWidth, disabled, loading, }: SingleFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Input/SingleSelect/components/SingleInput.d.ts

@@ -9,4 +9,4 @@ export type SingleInputProps = {
     handleScroll: (event: any) => Promise<void>;
     state: SingleSelectState;
 } & SingleSelectProps;
-export declare const SingleInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, state, fullWidth, }: SingleInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, state, fullWidth, disabled, loading, }: SingleInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,27 @@ import * as React from 'react';
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof ShadcnSwitch> {
     label?: string;
 }
+/**
+ * Switch component for boolean toggle input
+ *
+ * A toggle switch component with optional label support, built on shadcn's Switch.
+ * Renders a label beside the switch if provided.
+ *
+ * @component
+ * @param {SwitchProps} props - The switch properties
+ * @param {string} [props.label] - Optional label text to display next to the switch
+ * @param {boolean} [props.checked] - Whether the switch is checked
+ * @param {(checked: boolean) => void} [props.onCheckedChange] - Callback when switch state changes
+ * @param {boolean} [props.disabled] - Whether the switch is disabled
+ * @returns {React.ReactElement} The rendered switch component
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   label="Enable notifications"
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ * />
+ * ```
+ */
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -7,4 +7,30 @@ export type TagsProps = {
     variant?: 'default' | 'secondary' | 'destructive' | 'outline';
     className?: string;
 };
+/**
+ * Tags component for displaying and managing tag badges
+ *
+ * A component that renders a collection of tags/badges with optional delete functionality.
+ * Useful for displaying categories, labels, or removable items.
+ *
+ * @component
+ * @param {TagsProps} props - The tags properties
+ * @param {Array<{label: string, value: any}>} props.tags - Array of tags to display
+ * @param {(deletedChip: any) => void} [props.onDelete] - Callback fired when a tag is deleted
+ * @param {'default' | 'secondary' | 'destructive' | 'outline'} [props.variant='secondary'] - Badge variant style
+ * @param {string} [props.className] - Additional CSS classes for the container
+ * @returns {React.ReactElement} The rendered tags component
+ *
+ * @example
+ * ```tsx
+ * <Tags
+ *   tags={[
+ *     { label: 'React', value: 'react' },
+ *     { label: 'TypeScript', value: 'ts' }
+ *   ]}
+ *   onDelete={handleTagDelete}
+ *   variant="secondary"
+ * />
+ * ```
+ */
 export declare const Tags: ({ tags, onDelete, variant, className, }: TagsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,4 +9,39 @@ export type TextFieldProps = {
     error?: boolean;
     helperText?: React.ReactNode;
 } & React.ComponentProps<typeof Input>;
+/**
+ * TextField component for text input
+ *
+ * A general-purpose text input field with label support, validation states,
+ * helper/error text, and optional description.
+ *
+ * @component
+ * @param {TextFieldProps} props - The text field properties
+ * @param {React.ReactNode | 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] - 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 {React.ReactNode} [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 text field component
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Username"
+ *   name="username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ *   placeholder="Enter your username"
+ *   required
+ * />
+ * ```
+ */
 export declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,4 +9,40 @@ export type TextareaProps = {
     error?: boolean;
     helperText?: React.ReactNode;
 } & React.ComponentProps<typeof ShadcnTextarea>;
+/**
+ * Textarea component for multi-line text input
+ *
+ * A multi-line text input field with label support, validation states,
+ * helper/error text, and optional description.
+ *
+ * @component
+ * @param {TextareaProps} props - The textarea properties
+ * @param {React.ReactNode | string} [props.label] - Label for the field
+ * @param {string} [props.name] - Name attribute for the textarea
+ * @param {string} [props.value] - Current input value
+ * @param {(e: React.ChangeEvent<HTMLTextAreaElement>) => void} [props.onChange] - Callback when value changes
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {number} [props.rows] - Number of visible rows
+ * @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 {React.ReactNode} [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 textarea component
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   label="Comments"
+ *   name="comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ *   placeholder="Enter your comments..."
+ *   rows={4}
+ * />
+ * ```
+ */
 export declare const Textarea: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Layout/AppLayout/AppLayout.d.ts

@@ -1,3 +1,35 @@
 import React from 'react';
 import { AppLayoutProps } from './types';
+/**
+ * AppLayout Component
+ *
+ * Main layout component that provides a persistent sidebar navigation structure with responsive behavior.
+ * Automatically collapses on small screens and wraps content in a SidebarProvider for state management.
+ * Includes a floating help docs button in the bottom-right corner.
+ *
+ * @param {React.ReactNode} children - Main content to render inside the layout
+ * @param {SideMenuItemProps[]} menu - Navigation menu items for the sidebar
+ * @param {ReactNode | ((params: { collapsed: boolean }) => ReactNode)} [actions] - Optional action elements or function that receives collapsed state
+ * @param {string} [mainContainerClassName=''] - Additional CSS classes for the main content container
+ * @param {HelpDocsConfig} [helpDocsConfig] - Configuration for context-based help documentation
+ * @param {boolean} [initialCollapsed] - Initial state of sidebar collapse (auto-determined on small screens)
+ * @param {UserProfilePopupProps} [userProfileParams] - Configuration for user profile popup/menu
+ *
+ * @returns {React.ReactElement} The complete app layout with sidebar and main content area
+ *
+ * @example
+ * ```tsx
+ * <AppLayout
+ *   menu={menuItems}
+ *   userProfileParams={{
+ *     userFullName: "John Doe",
+ *     email: "john@example.com",
+ *     onLogout: handleLogout
+ *   }}
+ *   actions={<ActionButtons />}
+ * >
+ *   <YourContent />
+ * </AppLayout>
+ * ```
+ */
 export declare const AppLayout: React.FC<AppLayoutProps>;

package/dist/cjs/types/src/components/Layout/AppLayout/components/MenuToggleButton.d.ts

@@ -3,5 +3,21 @@ interface MenuToggleButtonProps {
     /** Custom className */
     className?: string;
 }
+/**
+ * MenuToggleButton Component
+ *
+ * Mobile-only button that toggles the sidebar visibility. This button is hidden on desktop screens
+ * (above 768px width) using the Tailwind media query. Useful for including in page headers
+ * on mobile devices to control sidebar drawer visibility.
+ *
+ * @param {string} [className=''] - Additional CSS classes to apply to the button
+ *
+ * @returns {React.ReactElement} A menu toggle button (empty fragment on desktop)
+ *
+ * @example
+ * ```tsx
+ * <MenuToggleButton className="ml-4" />
+ * ```
+ */
 export declare const MenuToggleButton: React.FC<MenuToggleButtonProps>;
 export {};

package/dist/cjs/types/src/components/Layout/AppLayout/components/Sidebar/MenuBar.d.ts

@@ -1,2 +1,28 @@
 import { MenuBarProps } from './interfaces';
+/**
+ * MenuBar Component
+ *
+ * Container component that renders the current menu level with optional back navigation.
+ * Displays a header with "Back" button when viewing nested menus and animates menu item
+ * appearance using staggered animations. Supports both collapsed and expanded sidebar states.
+ *
+ * @param {MenuState} currentMenuState - Current menu level state with menu items, title, and path
+ * @param {(params: InternalMenuClickHandlerProps) => void} internalMenuClickHandler - Callback to navigate into nested menus
+ * @param {() => void} previousMenuClickHandler - Callback to navigate back to previous menu level
+ * @param {() => void} [onClose] - Optional callback to close the mobile drawer
+ * @param {boolean} [collapsed] - Whether the sidebar is collapsed
+ * @param {(collapsed: boolean) => void} [setCollapsed] - Function to update sidebar collapse state
+ *
+ * @returns {React.ReactElement} Animated menu container with menu items and optional back button
+ *
+ * @example
+ * ```tsx
+ * <MenuBar
+ *   currentMenuState={menuState}
+ *   internalMenuClickHandler={handleInternalClick}
+ *   previousMenuClickHandler={handleBack}
+ *   collapsed={false}
+ * />
+ * ```
+ */
 export declare const MenuBar: React.FC<MenuBarProps>;

package/dist/cjs/types/src/components/Layout/AppLayout/components/Sidebar/MenuItem.d.ts

@@ -1,2 +1,39 @@
 import { MenuItemProps } from './interfaces';
+/**
+ * MenuItem Component
+ *
+ * Renders a single menu item that can be one of three types:
+ * 1. **Internal Menu Item** (has nested menu): Shows a back arrow on hover, opens nested menu on click
+ * 2. **Sub Menu Item** (has expandable sub-items): Shows chevron icon, expands/collapses sub-items below
+ * 3. **Regular Link Item** (direct navigation): Direct link to a route
+ *
+ * Automatically shows tooltips when collapsed and handles drawer closing logic for mobile.
+ * Supports route matching to highlight the active menu item based on current URL.
+ *
+ * @param {number} index - Unique index of the menu item in the list
+ * @param {SideMenuItemProps} menuItem - Menu item configuration with name, path, icon, and optional menu/subMenu
+ * @param {string | null} currentMenuPath - Current path prefix for building full paths (for nested menus)
+ * @param {(params: InternalMenuClickHandlerProps) => void} internalMenuClickHandler - Callback when opening a nested/internal menu
+ * @param {() => void} [onClose] - Optional callback to close the mobile drawer after navigation
+ * @param {boolean} [collapsed] - Whether the sidebar is in collapsed state
+ * @param {(collapsed: boolean) => void} [setCollapsed] - Function to update sidebar collapse state
+ *
+ * @returns {React.ReactElement} Animated menu item with appropriate interactive elements
+ *
+ * @example
+ * ```tsx
+ * <MenuItem
+ *   index={0}
+ *   menuItem={{
+ *     name: "Dashboard",
+ *     path: "/dashboard",
+ *     icon: <DashboardIcon />,
+ *     menu: subMenuItems // For nested menus
+ *   }}
+ *   currentMenuPath="/admin"
+ *   internalMenuClickHandler={handleMenuClick}
+ *   collapsed={false}
+ * />
+ * ```
+ */
 export declare const MenuItem: React.FC<MenuItemProps>;

package/dist/cjs/types/src/components/Layout/AppLayout/components/Sidebar/Sidebar.d.ts

@@ -5,12 +5,41 @@ interface SidebarProps {
     /** Menu items for navigation */
     menu: SideMenuItemProps[];
     /**User profile Params */
-    userProfileParams: UserProfilePopupProps;
+    userProfileParams?: UserProfilePopupProps;
     /** Whether the sidebar is collapsed */
     collapsed: boolean;
     /** Function to toggle sidebar collapse state */
     setCollapsed: any;
     actions: ReactNode;
 }
+/**
+ * Sidebar Component
+ *
+ * Responsive sidebar navigation component that displays differently on mobile and desktop:
+ * - **Mobile**: Renders as a collapsible Sheet drawer
+ * - **Desktop**: Renders as an animated fixed-width sidebar with collapse/expand animation
+ *
+ * Manages menu navigation state, hover effects, and user profile popup. Automatically
+ * handles internal menu navigation and animated transitions between menu levels.
+ *
+ * @param {SideMenuItemProps[]} menu - Navigation menu items with support for nested/internal menus and sub-menus
+ * @param {UserProfilePopupProps} userProfileParams - User profile configuration including name, email, and action handlers
+ * @param {boolean} collapsed - Current collapse state of the sidebar
+ * @param {(collapsed: boolean) => void} setCollapsed - Function to update the collapse state
+ * @param {ReactNode} actions - Action elements to display in the sidebar footer (above user profile)
+ *
+ * @returns {React.ReactElement} Responsive sidebar component (Sheet on mobile, animated div on desktop)
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   menu={navigationMenu}
+ *   collapsed={sidebarCollapsed}
+ *   setCollapsed={setSidebarCollapsed}
+ *   userProfileParams={userProfile}
+ *   actions={<CustomActions />}
+ * />
+ * ```
+ */
 export declare const Sidebar: React.FC<SidebarProps>;
 export {};

package/dist/cjs/types/src/components/Layout/AppLayout/components/Sidebar/StyledComponents.d.ts

@@ -22,16 +22,155 @@ type ButtonProps = {
     className?: string;
     onClick?: () => void;
 } & React.HTMLAttributes<HTMLButtonElement>;
+/**
+ * SidebarContainer Component
+ *
+ * Main container for the sidebar with flex layout, rounded corners, and overflow hidden.
+ * Serves as the root wrapper for all sidebar content including header, menu, and footer.
+ *
+ * @param {React.ReactNode} children - Content to render inside the sidebar
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A flex container for sidebar content
+ */
 export declare const SidebarContainer: React.FC<BaseProps>;
+/**
+ * MenuBarContainer Component
+ *
+ * Scrollable container for menu items with custom scrollbar styling. Includes responsive
+ * design with different width and margin behavior on mobile vs desktop. Custom scrollbar
+ * uses theme colors with thin width.
+ *
+ * @param {React.ReactNode} children - Menu items to render inside the container
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A vertically scrollable menu container
+ */
 export declare const MenuBarContainer: React.FC<BaseProps>;
+/**
+ * MenuHeaderContainer Component
+ *
+ * Header container for displaying nested menu titles with back navigation.
+ * Provides fixed height with flex layout for centered or start-aligned content.
+ * Includes hover background effect.
+ *
+ * @param {React.ReactNode} children - Header content (typically back button and title)
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A header container for menu navigation
+ */
 export declare const MenuHeaderContainer: React.FC<BaseProps>;
+/**
+ * MenuItemContainer Component
+ *
+ * Wrapper container for individual menu items with flex centering and rounded corners.
+ * Provides consistent spacing and layout for menu items.
+ *
+ * @param {React.ReactNode} children - Menu item content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A centered flex container for a menu item
+ */
 export declare const MenuItemContainer: React.FC<BaseProps>;
+/**
+ * MenuItemButton Component
+ *
+ * Styled button for menu items with flex layout, whitespace handling, and rounded appearance.
+ * Based on Button component with ghost variant and custom padding.
+ *
+ * @param {React.ReactNode} children - Button content (icon and/or text)
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLButtonElement>} props - Additional button attributes
+ *
+ * @returns {React.ReactElement} A styled button for menu navigation
+ */
 export declare const MenuItemButton: React.FC<ButtonProps>;
+/**
+ * MenuItemIcon Component
+ *
+ * Container for menu item icons with flex centering and right margin.
+ * Ensures icons are properly sized and aligned within menu items.
+ *
+ * @param {React.ReactNode} children - Icon element
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A centered flex container for an icon
+ */
 export declare const MenuItemIcon: React.FC<BaseProps>;
+/**
+ * MenuLink Component
+ *
+ * React Router Link component styled as a menu item. Shows different background color
+ * when the route matches the current location. Includes hover effects and transitions.
+ *
+ * @param {boolean} [match] - Whether the link destination matches current route
+ * @param {string} [to=''] - Route path to navigate to
+ * @param {React.ReactNode} children - Link content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {any} props - Additional Link properties
+ *
+ * @returns {React.ReactElement} A styled navigation link
+ */
 export declare const MenuLink: React.FC<StyledLinkButtonProps>;
+/**
+ * SubMenuContainer Component
+ *
+ * Container for sub-menu items that can expand/collapse or navigate.
+ * Shows different background color when active/matched. Used for menu items
+ * with expandable sub-items or internal navigation.
+ *
+ * @param {boolean} [match] - Whether the sub-menu is currently active/matched
+ * @param {React.ReactNode} children - Sub-menu content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {any} props - Additional HTML attributes
+ *
+ * @returns {React.ReactElement} A styled container for sub-menu items
+ */
 export declare const SubMenuContainer: React.FC<StyledLinkButtonProps>;
+/**
+ * SubMenuItemContainer Component
+ *
+ * Container for a list of sub-menu items that appear below a parent menu item.
+ * Includes left border, gap spacing, and left margin for visual hierarchy.
+ * Used to display expandable/collapsible sub-menu items.
+ *
+ * @param {React.ReactNode} children - Sub-menu item elements
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A flex column container for sub-menu items
+ */
 export declare const SubMenuItemContainer: React.FC<BaseProps>;
+/**
+ * HoverIcon Component
+ *
+ * Container for icons that appear on hover within menu items.
+ * Hidden by default and shown only when parent element is hovered.
+ *
+ * @param {React.ReactNode} children - Icon element to show on hover
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A hidden flex container that shows on hover
+ */
 export declare const HoverIcon: React.FC<BaseProps>;
+/**
+ * AnimationWrapper Component
+ *
+ * Generic wrapper component for content that may have animation effects.
+ * Provides full width and height to accommodate animated children.
+ *
+ * @param {React.ReactNode} children - Content to wrap with animation support
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A full-size flex container for animated content
+ */
 export declare const AnimationWrapper: React.FC<BaseProps>;
 export declare const desktopOnlyClasses = "hidden md:block";
 export declare const mobileOnlyClasses = "block md:hidden";

package/dist/cjs/types/src/components/Layout/AppLayout/components/UserProfilePopup.d.ts

@@ -21,4 +21,38 @@ export interface UserProfilePopupProps {
     /**Persistant Side bar collapsed - boolean */
     collapsed?: boolean;
 }
+/**
+ * UserProfilePopup Component
+ *
+ * User profile dropdown menu component displayed in the sidebar footer. Shows user avatar/initials,
+ * and provides a menu with Account section, optional Active Devices, custom profile actions, and Logout.
+ * Automatically adapts layout when sidebar is collapsed (centered alignment, avatar only).
+ *
+ * @param {string} userFullName - User's full name (required, used for avatar text and display)
+ * @param {string} [email=''] - User's email address (shown in account section)
+ * @param {React.ReactNode[]} [profileActions=[]] - Custom menu items to include in the dropdown
+ * @param {() => void} [onLogout] - Callback handler when user clicks logout
+ * @param {string} [profileUrl] - URL to user's profile image (uses initials fallback if not provided)
+ * @param {string} [avatarClassName=''] - Additional CSS classes for the avatar component
+ * @param {boolean} [showActiveDevices=false] - Whether to show the "Active Devices" menu item
+ * @param {() => void} [onActiveDevicesClick] - Callback handler when user clicks active devices
+ * @param {() => void} [onAccountClick] - Callback handler when user clicks the account section
+ * @param {boolean} [collapsed] - Whether the sidebar is in collapsed state (affects layout)
+ *
+ * @returns {React.ReactElement} A dropdown menu anchored to user avatar with profile options
+ *
+ * @example
+ * ```tsx
+ * <UserProfilePopup
+ *   userFullName="Jane Smith"
+ *   email="jane@example.com"
+ *   profileUrl="/avatar.jpg"
+ *   showActiveDevices={true}
+ *   onLogout={handleLogout}
+ *   onAccountClick={navigateToSettings}
+ *   onActiveDevicesClick={showDevices}
+ *   collapsed={false}
+ * />
+ * ```
+ */
 export declare const UserProfilePopup: React.FC<UserProfilePopupProps>;