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

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

@@ -38,5 +38,45 @@ export type SingleSelectProps = {
     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/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>;

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

@@ -8,6 +8,54 @@ interface SidebarProviderProps {
     children: React.ReactNode;
     initialCollapsed?: boolean;
 }
+/**
+ * SidebarProvider Component
+ *
+ * React Context provider that manages global sidebar collapse state and provides methods
+ * to toggle and set the collapse state. Wraps the application or specific layout sections
+ * to enable sidebar state management across the component tree.
+ *
+ * @param {React.ReactNode} children - Child components that will have access to sidebar context
+ * @param {boolean} [initialCollapsed=false] - Initial collapsed state of the sidebar
+ *
+ * @returns {React.ReactElement} Context provider wrapping children with sidebar state
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider initialCollapsed={isMobile}>
+ *   <AppLayout>
+ *     <Content />
+ *   </AppLayout>
+ * </SidebarProvider>
+ * ```
+ */
 export declare const SidebarProvider: React.FC<SidebarProviderProps>;
+/**
+ * useSidebar Hook
+ *
+ * Custom React hook to access the sidebar context state and methods.
+ * Must be used within a SidebarProvider component, otherwise it throws an error.
+ *
+ * @returns {{
+ *   collapsed: boolean;
+ *   toggleSidebar: () => void;
+ *   setCollapsed: (collapsed: boolean) => void;
+ * }} Object containing sidebar state and methods to control it
+ *
+ * @throws {Error} If used outside of SidebarProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { collapsed, toggleSidebar, setCollapsed } = useSidebar();
+ *
+ *   return (
+ *     <button onClick={toggleSidebar}>
+ *       {collapsed ? 'Expand' : 'Collapse'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 export declare const useSidebar: () => SidebarContextType;
 export {};

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

@@ -17,7 +17,7 @@ export interface AppLayoutProps {
     /** Navigation menu items */
     menu: SideMenuItemProps[];
     /**User profile parameters */
-    userProfileParams: UserProfilePopupProps;
+    userProfileParams?: UserProfilePopupProps;
     /** Switchers section customization - receives collapsed state */
     actions?: ReactNode | ((params: {
         collapsed: boolean;

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

@@ -2,7 +2,27 @@ import { ReactNode } from 'react';
 interface PageContentProps {
     children: ReactNode;
     className?: string;
+    styles?: React.CSSProperties;
 }
-declare const PageContent: ({ children, className }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * PageContent Component
+ *
+ * Main content area wrapper that provides responsive padding, scrolling behavior, and custom scrollbar styling.
+ * Automatically adjusts height based on screen size to account for page header and other UI elements.
+ * Includes thin scrollbar styling using Tailwind's scrollbar utilities.
+ *
+ * @param {React.ReactNode} children - Content to render inside the page content area
+ * @param {string} [className=''] - Additional CSS classes to apply to the container
+ *
+ * @returns {React.ReactElement} A scrollable content container with responsive height and styling
+ *
+ * @example
+ * ```tsx
+ * <PageContent className="bg-white">
+ *   <YourPageContent />
+ * </PageContent>
+ * ```
+ */
+declare const PageContent: ({ children, className, styles }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
 export { PageContent };
 export default PageContent;