@instincthub/react-ui 0.1.4 → 0.1.6

package/dist/src/types/components/forms/DateInputPicker.d.ts

@@ -1,7 +1,39 @@
 import { DateInputPickerPropsType } from "@/types";
 import React from "react";
 /**
- * A reusable date input component with calendar picker
+ * A comprehensive date input component with built-in calendar picker, date validation, and optional time selection.
+ * Supports keyboard navigation, accessibility features, date range restrictions, and disabled dates.
+ * Can be used for both date-only and datetime input scenarios.
+ * @example
+ * ```tsx
+ * <DateInputPicker
+ *   label="Select Date"
+ *   value={selectedDate}
+ *   onChange={handleDateChange}
+ *   required={true}
+ *   minDate="2024-01-01"
+ *   maxDate="2024-12-31"
+ * />
+ * ```
+ * @prop {string} label - The label text for the input field
+ * @prop {string} value - The current date value in ISO format (YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS)
+ * @prop {function} onChange - Callback function called when date changes, receives the new date string
+ * @prop {boolean} required - Whether the field is required for form validation
+ * @prop {string} minDate - Minimum allowed date in ISO format
+ * @prop {string} maxDate - Maximum allowed date in ISO format
+ * @prop {string[]} disabledDates - Array of disabled dates in ISO format
+ * @prop {string} errorMessage - Custom error message to display
+ * @prop {string} className - Additional CSS classes to apply
+ * @prop {string} displayFormat - Date display format (default: "YYYY-MM-DD")
+ * @prop {string} locale - Locale for date formatting (default: "en-US")
+ * @prop {boolean} includeTime - Whether to include time selection
+ * @prop {string} name - Name attribute for form submission
+ * @prop {string} id - Unique identifier for the input
+ * @prop {string} placeholder - Placeholder text for the input
+ * @prop {boolean} disabled - Whether the input is disabled
+ * @prop {boolean} showCalendarPicker - Whether to show the calendar picker icon
+ * @prop {boolean} showQuickActions - Whether to show Today/Clear quick action buttons
+ * @prop {string} ariaLabel - Accessibility label for screen readers
  */
 declare const DateInputPicker: React.FC<DateInputPickerPropsType>;
 export default DateInputPicker;

package/dist/src/types/components/forms/DateTimePicker.d.ts

@@ -0,0 +1,49 @@
+import { DateTimePickerPropsType } from "@/types";
+import React from "react";
+/**
+ * A modern date and time picker component that combines calendar-based date selection
+ * with time input in a single unified interface. Supports various formats, locales,
+ * validation, and accessibility features.
+ * @example
+ * ```tsx
+ * <DateTimePicker
+ *   label="Schedule Meeting"
+ *   value={selectedDateTime}
+ *   onChange={handleDateTimeChange}
+ *   minDate="2024-01-01"
+ *   maxDate="2024-12-31"
+ *   use12Hour={true}
+ * />
+ * ```
+ * @prop {string} label - The label text for the input field
+ * @prop {string} value - The current datetime value in ISO format (YYYY-MM-DDTHH:mm:ss)
+ * @prop {function} onChange - Callback function called when datetime changes
+ * @prop {boolean} required - Whether the field is required for form validation
+ * @prop {string} minDate - Minimum allowed date in ISO format
+ * @prop {string} maxDate - Maximum allowed date in ISO format
+ * @prop {string} minTime - Minimum allowed time in HH:mm format
+ * @prop {string} maxTime - Maximum allowed time in HH:mm format
+ * @prop {string[]} disabledDates - Array of disabled dates in ISO format
+ * @prop {string[]} disabledTimes - Array of disabled times in HH:mm format
+ * @prop {boolean} use12Hour - Whether to use 12-hour format (default: false)
+ * @prop {boolean} includeSeconds - Whether to include seconds in time selection
+ * @prop {number} timeStep - Time step in minutes for time selection (default: 30)
+ * @prop {string} dateFormat - Date display format (default: "yyyy-MM-dd")
+ * @prop {string} timeFormat - Time display format (default: "HH:mm")
+ * @prop {string} locale - Locale for date formatting (default: "en-US")
+ * @prop {string} placeholder - Placeholder text for the input
+ * @prop {string} errorMessage - Custom error message to display
+ * @prop {string} className - Additional CSS classes to apply
+ * @prop {string} name - Name attribute for form submission
+ * @prop {string} id - Unique identifier for the input
+ * @prop {boolean} disabled - Whether the input is disabled
+ * @prop {boolean} showCalendarIcon - Whether to show the calendar icon
+ * @prop {boolean} showTimeIcon - Whether to show the time icon
+ * @prop {boolean} showQuickActions - Whether to show quick action buttons
+ * @prop {string} ariaLabel - Accessibility label for screen readers
+ * @prop {boolean} autoFocus - Whether to focus the input on mount
+ * @prop {function} onFocus - Focus event handler
+ * @prop {function} onBlur - Blur event handler
+ */
+declare const DateTimePicker: React.FC<DateTimePickerPropsType>;
+export default DateTimePicker;

package/dist/src/types/components/forms/DropFile.d.ts

@@ -1,7 +1,19 @@
 import React from "react";
 interface DropFileProps {
+    /** Function called when file is dropped */
     onDrop: (file: File) => void;
-    tmplateUrl: string;
+    /** Label text to display in drop zone */
+    label?: string;
+    /** Array of accepted file extensions (e.g., [".xlsx", ".csv"]) */
+    acceptedTypes?: string[];
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Template download URL */
+    tmplateUrl?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Custom className */
+    className?: string;
 }
 declare const DropFile: React.FC<DropFileProps>;
 export default DropFile;

package/dist/src/types/components/forms/EmailList.d.ts

@@ -1,7 +1,21 @@
 import React from "react";
 interface EmailListProps {
-    setEmailListValue?: (value: (prevEmails: string[]) => string[]) => void;
+    /** Label to display above the email list */
+    label?: string;
+    /** Array of email addresses */
+    emails?: string[];
+    /** Function to update emails array */
+    setEmails?: (emails: string[]) => void;
+    /** Placeholder text for input field */
+    placeholder?: string;
+    /** Custom class name */
+    className?: string;
+    /** Field name for form submission */
     names?: string;
+    /** Allow bulk email input */
+    allowBulkInput?: boolean;
+    /** Legacy prop for backward compatibility */
+    setEmailListValue?: (value: (prevEmails: string[]) => string[]) => void;
 }
 declare const EmailList: React.FC<EmailListProps>;
 export default EmailList;

package/dist/src/types/components/forms/FormError.d.ts

@@ -7,6 +7,8 @@ interface FormErrorProps {
     errors?: Record<string, string[]> | null;
     /** HTTP status code of the error */
     status?: number;
+    /** Simple error message string */
+    message?: string;
 }
-declare const _default: React.MemoExoticComponent<({ errors, status }: FormErrorProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ errors, status, message }: FormErrorProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;

package/dist/src/types/components/forms/InputSearchDropdown.d.ts

@@ -1,8 +1,23 @@
 import React from "react";
+/**
+ * Option interface for dropdown items
+ * @interface Option
+ * @prop {string} name - The display name of the option
+ * @prop {any} [key: string] - Additional properties can be added dynamically
+ */
 interface Option {
     name: string;
     [key: string]: any;
 }
+/**
+ * Props interface for InputSearchDropdown component
+ * @interface InputSearchDropdownProps
+ * @prop {Option[]} options - Array of options to display in the dropdown
+ * @prop {function} onOptionSelected - Callback function triggered when an option is selected
+ * @prop {string} [defaultValues] - Default value for the input field
+ * @prop {string} [names] - Name attribute for the input field
+ * @prop {boolean} [disableds] - Whether the input should be read-only
+ */
 interface InputSearchDropdownProps {
     options: Option[];
     onOptionSelected: (option: Option) => void;
@@ -10,5 +25,34 @@ interface InputSearchDropdownProps {
     names?: string;
     disableds?: boolean;
 }
+/**
+ * A searchable dropdown component that filters options based on exact match of the input value.
+ * It displays a dropdown list when the user types and there are matching results.
+ * The dropdown auto-hides when an option is selected or the input loses focus.
+ *
+ * @example
+ * ```tsx
+ * const organisations = [
+ *   { name: "Company A", id: 1 },
+ *   { name: "Company B", id: 2 }
+ * ];
+ *
+ * <InputSearchDropdown
+ *   options={organisations}
+ *   onOptionSelected={(option) => console.log(option)}
+ *   defaultValues="Company A"
+ *   names="organisation"
+ * />
+ * ```
+ *
+ * @component
+ * @param {InputSearchDropdownProps} props - The component props
+ * @param {Option[]} props.options - Array of options to display in the dropdown
+ * @param {function} props.onOptionSelected - Callback function triggered when an option is selected
+ * @param {string} [props.defaultValues=""] - Default value for the input field
+ * @param {string} [props.names] - Name attribute for the input field
+ * @param {boolean} [props.disableds=false] - Whether the input should be read-only
+ * @returns {JSX.Element} The rendered dropdown component
+ */
 declare const InputSearchDropdown: React.FC<InputSearchDropdownProps>;
 export default InputSearchDropdown;

package/dist/src/types/components/forms/InputText.d.ts

@@ -68,6 +68,10 @@ interface InputTextProps {
      * The id of the input
      */
     id?: string;
+    /**
+     * Whether to activate the floating label
+     */
+    activeLabel?: boolean;
 }
 /**
  * A modern input text component with floating label for InstinctHub
@@ -92,6 +96,7 @@ interface InputTextProps {
  * @prop {string} helperText - Helper text or notes to display below the input
  * @prop {string} note - Note text to display below the input
  * @prop {string} id - The id of the input
+ * @prop {boolean} activeLabel - Whether to activate the floating label
  */
 declare const InputText: React.FC<InputTextProps>;
 export default InputText;

package/dist/src/types/components/forms/PasswordField.d.ts

@@ -12,6 +12,7 @@ interface PasswordFieldProps {
     error?: string | null;
     className?: string | null;
     helperText?: string | null;
+    placeholder?: string;
 }
 /**
  * PasswordField component
@@ -47,5 +48,5 @@ interface PasswordFieldProps {
  * @property {(value: string) => void} setValue - Callback for setting values
  * @property {(e: React.ChangeEvent<HTMLInputElement>) => void} onChange - Callback for input events
  */
-export default function PasswordField({ id, name, label, note, required, value, setValue, onChange, setNameValue, error, className, helperText, }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function PasswordField({ id, name, label, note, required, value, setValue, onChange, setNameValue, error, className, helperText, placeholder, }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/types/components/forms/SearchFieldDB.d.ts

@@ -34,7 +34,7 @@ interface SearchFieldDBProps {
  *   setData={setData}
  *   setNext={setNext}
  *   setPrevious={setPrevious}
- *   token={session?.user?.name?.token}
+ *   token={userSession?.accessToken}
  *   searchParams={{ channel, search }}
  *   labels="Courses"
  * />

package/dist/src/types/components/forms/SearchObjectsFromDB.d.ts

@@ -9,13 +9,14 @@ interface SearchObjectsFromDBProps<T extends SearchObjectItemType = SearchObject
     appLabel?: string;
     modelName?: string;
     filterChannel?: boolean;
-    limit_query?: number;
-    limit_select?: number;
-    key_name?: string;
+    limitQuery?: number;
+    limitSelect?: number;
+    keyName?: string;
     placeholder?: string;
     searchUrl?: string;
     selected: T[];
     err?: boolean;
+    required?: boolean;
 }
 /**
  * Component for searching objects from a database with filtering capabilities
@@ -24,9 +25,10 @@ interface SearchObjectsFromDBProps<T extends SearchObjectItemType = SearchObject
  * <SearchObjectsFromDB<UserType>
  *  token={authToken}
  *  handle={channelHandle}
- *  set={setSelectedUser}
- *  key_name="display_name"
+ *  setSelected={setSelectedUser}
+ *  keyName="display_name"
  *  selected={selectedUsers}
+ *  limitSelect={5}
  * />
  * ```
  * @param {SearchObjectsFromDBProps<T>} props - The component props
@@ -36,15 +38,15 @@ interface SearchObjectsFromDBProps<T extends SearchObjectItemType = SearchObject
  * @param {string} props.appLabel - The app label for the API request
  * @param {string} props.modelName - The model name for the API request
  * @param {boolean} props.filterChannel - The filter channel for the API request
- * @param {number} props.limit_query - 0 means unlimited, 1 means only one result
- * @param {number} props.limit_select - The limit user can select (0 means unlimited)
+ * @param {number} props.limitQuery - 0 means unlimited, 1 means only one result
+ * @param {number} props.limitSelect - The limit user can select (0 means unlimited)
  * @param {T[]} props.options - The options for the API request
- * @param {keyof T | "name_plus_username"} props.key_name - The key_name to display search results (option[key_name])
+ * @param {keyof T | "name_plus_username"} props.keyName - The keyName to display search results (option[keyName])
  * @param {string} props.placeholder - The placeholder for the API request
  * @param {string} props.searchUrl - The search url for the API request
  * @param {T[]} props.selected - The selected for the API request
  * @param {boolean} props.err - The error for the API request
  */
-declare function SearchObjectsFromDB<T extends SearchObjectItemType = SearchObjectItemType>({ label, token, handle, setSelected, appLabel, modelName, filterChannel, limit_query, limit_select, options, key_name, placeholder, searchUrl, selected, err, }: SearchObjectsFromDBProps<T>): JSX.Element;
+declare function SearchObjectsFromDB<T extends SearchObjectItemType = SearchObjectItemType>({ label, token, handle, setSelected, appLabel, modelName, filterChannel, limitQuery, limitSelect, options, keyName, placeholder, searchUrl, selected, err, required, }: SearchObjectsFromDBProps<T>): JSX.Element;
 declare const _default: typeof SearchObjectsFromDB;
 export default _default;

package/dist/src/types/components/forms/TimePicker.d.ts

@@ -0,0 +1,39 @@
+import { TimePickerPropsType } from "@/types";
+import React from "react";
+/**
+ * A comprehensive time input component with built-in time picker dropdown, time validation, and optional seconds.
+ * Supports both 12-hour and 24-hour formats, keyboard navigation, accessibility features, and time range restrictions.
+ * Can be used for time-only input scenarios with customizable step intervals.
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Select Time"
+ *   value={selectedTime}
+ *   onChange={handleTimeChange}
+ *   use12Hour={true}
+ *   includeSeconds={false}
+ *   step={15}
+ * />
+ * ```
+ * @prop {string} label - The label text for the input field
+ * @prop {string} value - The current time value in HH:MM or HH:MM:SS format
+ * @prop {function} onChange - Callback function called when time changes, receives the new time string
+ * @prop {boolean} required - Whether the field is required for form validation
+ * @prop {boolean} use12Hour - Whether to use 12-hour format with AM/PM (default: false for 24-hour)
+ * @prop {boolean} includeSeconds - Whether to include seconds in time selection
+ * @prop {number} step - Time step in minutes for quick selection (default: 1)
+ * @prop {string} minTime - Minimum allowed time in HH:MM format
+ * @prop {string} maxTime - Maximum allowed time in HH:MM format
+ * @prop {string[]} disabledTimes - Array of disabled times in HH:MM format
+ * @prop {string} errorMessage - Custom error message to display
+ * @prop {string} className - Additional CSS classes to apply
+ * @prop {string} name - Name attribute for form submission
+ * @prop {string} id - Unique identifier for the input
+ * @prop {string} placeholder - Placeholder text for the input
+ * @prop {boolean} disabled - Whether the input is disabled
+ * @prop {boolean} showTimePicker - Whether to show the time picker dropdown icon
+ * @prop {boolean} showQuickActions - Whether to show Now/Clear quick action buttons
+ * @prop {string} ariaLabel - Accessibility label for screen readers
+ */
+declare const TimePicker: React.FC<TimePickerPropsType>;
+export default TimePicker;

package/dist/src/types/components/forms/index.d.ts

@@ -3,6 +3,7 @@ export { default as AnimatedBox } from "./AnimatedBox";
 export { default as PasswordField } from "./PasswordField";
 export { default as DateInput } from "./DateInput";
 export { default as DateTimeInput } from "./DateTimeInput";
+export { default as DateTimePicker } from "./DateTimePicker";
 export { default as DropFile } from "./DropFile";
 export { default as EmailList } from "./EmailList";
 export { default as FilterArray } from "./FilterArray";
@@ -45,5 +46,6 @@ export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as RadioField } from "./RadioField";
 export { default as RadioSimple } from "./RadioSimple";
 export { default as ReactTimeAgo } from "./ReactTimeAgo";
+export { default as TimePicker } from "./TimePicker";
 export { default as FileUploader } from "./uploads/FileUploader";
 export { default as IhubFileUploader } from "./uploads/IhubFileUploader";

package/dist/src/types/components/forms/uploads/FileUploader.d.ts

@@ -8,10 +8,43 @@ interface S3UploadResponse {
     location: string;
 }
 interface FileUploaderProps {
+    /** Function called when files are selected */
+    onFilesSelected?: (files: File[]) => void;
+    /** Function called when upload is triggered */
+    onUpload?: (files: File[]) => Promise<void>;
+    /** Maximum number of files allowed */
+    maxFiles?: number;
+    /** Maximum file size in bytes */
+    maxFileSize?: number;
+    /** Array of accepted file extensions */
+    acceptedFileTypes?: string[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Upload type classification */
+    uploadType?: string;
+    /** Show preview of selected files */
+    showPreview?: boolean;
+    /** Show upload progress */
+    showProgress?: boolean;
+    /** Upload in progress state */
+    isUploading?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Upload progress percentage */
+    uploadProgress?: number;
+    /** Enable image cropping */
+    cropEnabled?: boolean;
+    /** Crop aspect ratio */
+    aspectRatio?: string;
+    /** Validate CSV files */
+    validateCSV?: boolean;
+    /** Generate thumbnail for images */
+    generateThumbnail?: boolean;
+    /** Show file type indicator */
+    showFileType?: boolean;
     headers?: string;
     labels?: string;
     accepts?: string;
-    maxFileSize?: number;
     names?: string;
     module?: string;
     step?: string;

package/dist/src/types/components/lib/permissions.d.ts

@@ -1,11 +1,5 @@
 import { NextApiRequest } from "next";
-interface Session {
-    user: {
-        name: {
-            username: string;
-        };
-    };
-}
+import { Session } from "@/types/auth";
 /**
  * Validates if the request has valid username and custom header
  * @param session - User session from NextAuth
@@ -30,4 +24,3 @@ export declare const headerKeyPermission: (req: NextApiRequest) => Promise<boole
  * @returns string | undefined - Permission if found, undefined if not found
  */
 export declare const findPermissions: (permission: string[], option: string) => string | undefined;
-export {};

package/dist/src/types/components/lib/redux/slices/channelSlice/instructorChannelList.d.ts

@@ -1,6 +1,5 @@
 import { PayloadAction } from "@reduxjs/toolkit";
 import { instructorChannelListSliceState } from "@/types/redux";
 export declare const instructorChannelList: import("@reduxjs/toolkit").Slice<instructorChannelListSliceState, {
-    set: (state: import("immer").WritableDraft<instructorChannelListSliceState>, action: PayloadAction<[
-    ]>) => void;
+    set: (state: import("immer").WritableDraft<instructorChannelListSliceState>, action: PayloadAction<[]>) => void;
 }, "instructorChannelList", "instructorChannelList", import("@reduxjs/toolkit").SliceSelectors<instructorChannelListSliceState>>;

package/dist/src/types/components/status/MultiPurposeModal.d.ts

@@ -17,11 +17,20 @@ interface MultiPurposeModalProps {
     /**
      * Controls whether the modal should force re-render when children change
      * @default true
+     * @deprecated Use refreshStrategy instead for better control
      * Set to false when using forms or components that manage their own state
      */
     enableContentRefresh?: boolean;
     /**
-     * Preserves scroll position when content refreshes (only works when enableContentRefresh is true)
+     * Content refresh strategy
+     * - 'none': Never force refresh (best for forms with inputs)
+     * - 'smart': Refresh only on structural changes (default)
+     * - 'aggressive': Always refresh on any change (original behavior)
+     * @default 'smart'
+     */
+    refreshStrategy?: 'none' | 'smart' | 'aggressive';
+    /**
+     * Preserves scroll position when content refreshes
      * @default true
      */
     preserveScrollPosition?: boolean;
@@ -32,25 +41,35 @@ interface MultiPurposeModalProps {
  * @component
  * @example
  * ```tsx
- * // For forms - disable content refresh to prevent scroll jumping
+ * // For forms - no forced refresh to preserve input focus
  * <MultiPurposeModal
  *   isOpen={isOpen}
  *   onClose={onClose}
  *   title="User Form"
- *   enableContentRefresh={false}
+ *   refreshStrategy="none"
  * >
  *   <UserForm />
  * </MultiPurposeModal>
  *
- * // For dynamic content - enable content refresh (default behavior)
+ * // For dynamic content - smart refresh (default)
  * <MultiPurposeModal
  *   isOpen={isOpen}
  *   onClose={onClose}
  *   title="Dynamic Content"
- *   enableContentRefresh={true}
+ *   refreshStrategy="smart"
  * >
  *   {dynamicContent}
  * </MultiPurposeModal>
+ *
+ * // For complete refresh needs
+ * <MultiPurposeModal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Fully Dynamic"
+ *   refreshStrategy="aggressive"
+ * >
+ *   {completelyDynamicContent}
+ * </MultiPurposeModal>
  * ```
  *
  * @param isOpen Controls whether the modal is visible
@@ -67,8 +86,9 @@ interface MultiPurposeModalProps {
  * @param disableScroll Whether to disable body scrolling when modal is open
  * @param handleSubmit Function to call when the modal is submitted
  * @param removeForm Whether to remove the default form element
- * @param enableContentRefresh Whether to force re-render when children change (default: true)
- * @param preserveScrollPosition Whether to maintain scroll position during refreshes (default: true)
+ * @param enableContentRefresh (Deprecated) Use refreshStrategy instead
+ * @param refreshStrategy Content refresh strategy - 'none' | 'smart' | 'aggressive'
+ * @param preserveScrollPosition Whether to maintain scroll position during refreshes
  */
 declare const MultiPurposeModal: React.FC<MultiPurposeModalProps>;
 export default MultiPurposeModal;

package/dist/src/types/components/status/ReactTimeTracker.d.ts

@@ -1,7 +1,7 @@
-import { SessionUserType } from "@/types";
+import { Session } from "@/types/auth";
 interface TimeTrackerProps {
     channel_username?: string | null;
-    session: SessionUserType;
+    session: Session | null;
     endpoint: string | null;
 }
 /**

package/dist/src/types/components/tabs/Tabs.d.ts

@@ -1,4 +1,15 @@
 import { TabItemType } from "@/types";
+/**
+ * Props interface for the Tabs component
+ * @interface TabsProps
+ * @prop {TabItemType[]} items - Array of tab items containing id, label, content, and disabled state
+ * @prop {string | number} [defaultActiveTab] - ID of the tab to be active by default
+ * @prop {function} [onChange] - Callback function triggered when a tab is clicked
+ * @prop {"default" | "bordered" | "pills"} [variant] - Visual style variant for the tabs
+ * @prop {string} [className] - Additional CSS class for the main container
+ * @prop {string} [tabsContainerClassName] - Additional CSS class for the tabs header container
+ * @prop {string} [contentClassName] - Additional CSS class for the content area
+ */
 interface TabsProps {
     items: TabItemType[];
     defaultActiveTab?: string | number;
@@ -8,5 +19,37 @@ interface TabsProps {
     tabsContainerClassName?: string;
     contentClassName?: string;
 }
+/**
+ * A flexible tabs component that supports multiple visual variants and provides
+ * an accessible tabbed interface for organizing content into separate views.
+ * Each tab consists of a clickable header and associated content panel.
+ *
+ * @example
+ * ```tsx
+ * const tabItems = [
+ *   { id: 'tab1', label: 'Overview', content: <Overview /> },
+ *   { id: 'tab2', label: 'Details', content: <Details /> },
+ *   { id: 'tab3', label: 'Settings', content: <Settings />, disabled: true }
+ * ];
+ *
+ * <Tabs
+ *   items={tabItems}
+ *   defaultActiveTab="tab1"
+ *   onChange={(tab) => console.log('Selected tab:', tab)}
+ *   variant="bordered"
+ * />
+ * ```
+ *
+ * @component
+ * @param {TabsProps} props - The component props
+ * @param {TabItemType[]} props.items - Array of tab items with id, label, content, and optional disabled state
+ * @param {string | number} [props.defaultActiveTab] - ID of the initially active tab (defaults to first tab)
+ * @param {function} [props.onChange] - Callback fired when tab selection changes
+ * @param {"default" | "bordered" | "pills"} [props.variant="default"] - Visual style variant
+ * @param {string} [props.className=""] - Additional CSS class for the container
+ * @param {string} [props.tabsContainerClassName=""] - Additional CSS class for tabs header
+ * @param {string} [props.contentClassName=""] - Additional CSS class for content area
+ * @returns {JSX.Element} The rendered tabs component
+ */
 declare const Tabs: ({ items, defaultActiveTab, onChange, variant, className, tabsContainerClassName, contentClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/src/types/components/theme/SessionProviders.d.ts

@@ -1,11 +1,37 @@
 import { ReactNode } from "react";
+/**
+ * Props interface for SessionProviders component
+ * @interface SessionProvidersProps
+ * @prop {ReactNode} children - Child components to wrap with session context
+ * @prop {number} [refetchInterval] - Session refetch interval in seconds (default: 12 hours)
+ * @prop {boolean} [refetchOnWindowFocus] - Whether to refetch session when window gains focus
+ */
 interface SessionProvidersProps {
     children: ReactNode;
     refetchInterval?: number;
     refetchOnWindowFocus?: boolean;
 }
 /**
- * Wraps the Next-Auth SessionProvider with hydration handling
+ * Wraps the Next-Auth SessionProvider with hydration handling.
+ * Provides a SessionProvider context only after client-side hydration
+ * to prevent hydration mismatches and useSession errors during SSR.
+ *
+ * @example
+ * ```tsx
+ * <SessionProviders
+ *   refetchInterval={720 * 60}
+ *   refetchOnWindowFocus={true}
+ * >
+ *   <App />
+ * </SessionProviders>
+ * ```
+ *
+ * @component
+ * @param {SessionProvidersProps} props - The component props
+ * @param {ReactNode} props.children - Child components to wrap with session context
+ * @param {number} [props.refetchInterval=720*60] - Session refetch interval in seconds (default: 12 hours)
+ * @param {boolean} [props.refetchOnWindowFocus=true] - Whether to refetch session on window focus
+ * @returns {JSX.Element} The wrapped children with SessionProvider context
  */
 export default function SessionProviders({ children, refetchInterval, // 12 hour
 refetchOnWindowFocus, }: SessionProvidersProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/types/components/ui/Action.d.ts

@@ -4,7 +4,7 @@ import React from "react";
  */
 export interface ActionDropdownItem {
     /** Text label to display for the dropdown item */
-    label: string;
+    label: string | React.ReactNode;
     /** Click handler function */
     onClick?: () => void;
     /** Link destination if the dropdown item is a link */
@@ -21,7 +21,7 @@ export interface ActionDropdownItem {
  */
 interface ActionProps {
     /** Text label to display in the action element */
-    label: string;
+    label: string | React.ReactNode;
     /** Click handler function */
     onClick?: () => void;
     /** Link destination if the action is a link */
@@ -54,8 +54,19 @@ interface ActionProps {
     dropdownPosition?: "left" | "right" | "center";
 }
 /**
+ * Action component
  * A versatile Action component that can be rendered as a button or link
  * with various styles, sizes, icon options, and dropdown functionality
+ * @example
+ * <Action
+ *  label="Click Me"
+ * onClick={() => alert('Action clicked!')}
+ * variant="primary"
+ * size="medium"
+ * fullWidth={false}
+ * disabled={false}
+ * iconBefore={<Icon />}
+ * />
  */
 declare const Action: React.FC<ActionProps>;
 export default Action;