@julseb-lib/react 0.1.19 → 0.1.21

package/dist/index.d.ts

@@ -1 +1,3231 @@
-export {}
+import { c as LibColorsHover, ag as CssTextAlign, L as LibColors, a as LibColorsShort, b as LibAllColors, e as LibOverlays, f as LibAllColorsAndOverlays, l as LibSpacers, al as CssAlignContent, aj as CssAlignItems, ak as CssJustifyContent, ai as CssJustifyItems, F as LibMaxWidth, m as LibRadiuses, ao as CssObjectFit, v as LibButtonVariantExtended, k as LibShadows, ah as CssVerticalAlign, ae as DispatchState, a6 as TranslateLang, ab as ReactChildren, q as LibThemeNames, ac as ReactElement, t as LibLoaderVariant } from './global-Bck2LNL3.js';
+export { aw as designTokens } from './global-Bck2LNL3.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassNameValue } from 'tailwind-merge';
+import { MarkdownToJSX } from 'markdown-to-jsx';
+import { LibMdEditorOptions } from './types/components-items-props.js';
+export { addDay, addMonth, addYear, calculateAverage, calculateTotalSum, capitalize, convertDate, convertDateShort, convertPrice, convertToEmail, convertYoutube, deleteDuplicates, detectLanguage, disableScroll, emailRegex, enableScroll, filterObject, formatDate, formatHour, generateNumbers, getFirstName, getInitials, getLastName, getNextDay, getPercentage, getRandom, getRandomAvatar, getRandomDate, getRandomNumber, getRandomString, getRandomTime, getTimeNow, getToday, getTomorrow, getYesterday, hexToRgb, passwordRegex, rgbToHex, scrollToTop, slugify, sortByFrequency, stringifyPx, toCamelCase, toConstantCase, toDotCase, toKebabCase, toPascalCase, toPathCase, toSentenceCase, toSnakeCase, toTitleCase, unslugify, uuid } from '@julseb-lib/utils';
+import * as react from 'react';
+import { RefObject, ChangeEvent, RefCallback, Ref, FC as FC$1 } from 'react';
+import { ILibText, ILibWrapper, ILibMain, ILibAside, ILibSection, ILibGrid, ILibFlexbox, ILibKey, ILibHighlight, ILibLinkify, ILibHr, ILibSkeleton, ILibSkeletonCard, ILibTooltip, ILibImage, ILibMasonry, ILibBadge, ILibAvatar, ILibLoader, ILibBurger, ILibButton, ILibButtonIcon, ILibButtonGroup, ILibTag, ILibInputContainer, ILibInput, ILibInputImage, ILibInputCheck, ILibInputPhone, ILibInputCounter, ILibInputSlider, ILibSelect, ILibAutocomplete, ILibRating, ILibInputPin, ILibFieldset, ILibForm, ILibListGroup, ILibListGroupTitle, ILibListGroupItem, ILibBreadcrumbs, ILibAccordion, ILibAccordionItem, ILibDropdown, ILibDropdownItem, ILibToast, ILibAlert, ILibModal, ILibDragList, ILibDragListItem, ILibPagination, ILibPaginationButton, ILibPaginator, ILibProgressBar, ILibProgressCircle, ILibTabs, ILibTabsContainer, ILibTabsButtonsContainer, ILibTabsButton, ILibTabContent, ILibSlideshow, ILibCover, ILibTable, ILibPageLoading, ILibSticky, ILibMarkdownEditor, ILibMarkdownContainer, ILibCodeContainer, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly } from './types/components-props.js';
+import * as react_toastify from 'react-toastify';
+import { ToastContainerProps, ToastOptions } from 'react-toastify';
+import 'csstype';
+import 'fuse.js';
+import 'react-syntax-highlighter';
+import './types/require-at-least-one.js';
+
+declare const URL_REGEX: RegExp;
+declare const linkifyText: (text: string, blank?: boolean) => (string | react_jsx_runtime.JSX.Element)[];
+
+declare const genLinkColor: Record<LibColorsHover, string>;
+declare const genButtonColor: Record<LibColorsHover, string>;
+
+declare const genTextAlign: Record<CssTextAlign, string>;
+
+declare const genTextColor: Record<LibColors, string>;
+declare const genTextColorShort: Record<LibColorsShort, string>;
+declare const genTextColorHover: Record<LibColorsHover, string>;
+declare const genTextAllColor: Record<LibAllColors, string>;
+
+declare const genBgColor: Record<LibColors, string>;
+declare const genBgColorShort: Record<LibColorsShort, string>;
+declare const genBgColor50: Record<Exclude<LibColorsShort, "black" | "transparent" | "background" | "current">, string>;
+declare const genBgColorHover: Record<LibColorsHover, string>;
+declare const genBgColorGhostHover: Record<LibColorsHover, string>;
+declare const genBgOverlay: Record<LibOverlays, string>;
+declare const genBgAllColors: Record<LibAllColors, string>;
+declare const genBgAllColorsAndOverlays: Record<LibAllColorsAndOverlays, string>;
+
+declare const genBorderColor: Record<LibColors, string>;
+declare const genBorderColorShort: Record<LibColorsShort, string>;
+declare const genBorderColorHover: Record<LibColorsHover, string>;
+declare const genBorderAllColors: Record<LibAllColors, string>;
+
+declare const genGap: Record<LibSpacers, string>;
+declare const genRowGap: Record<LibSpacers, string>;
+declare const genColGap: Record<LibSpacers, string>;
+
+declare const clsx: (...classes: Array<ClassNameValue>) => string;
+
+declare const genAlignContent: Record<CssAlignContent, string>;
+declare const genAlignItems: Record<CssAlignItems, string>;
+
+declare const genJustifyContent: Record<CssJustifyContent, string>;
+declare const genJustifyItems: Record<CssJustifyItems, string>;
+
+declare const genMaxWidth: Record<LibMaxWidth, string>;
+
+declare const genBorderRadius: Record<LibRadiuses, string>;
+
+declare const genObjectFit: Record<CssObjectFit, string>;
+
+declare const genButtonDisabled: Record<LibButtonVariantExtended, string>;
+
+declare const genBoxShadow: Record<LibShadows, string>;
+
+declare const genVAlign: Record<CssVerticalAlign, string>;
+
+declare const libOptionsMarkdown: MarkdownToJSX.Options;
+declare const libMarkdownEditorOptions: LibMdEditorOptions;
+
+declare const genRingColor: Record<LibColorsHover, string>;
+declare const genRingColorChildren: Record<LibColorsHover, string>;
+
+type Event = MouseEvent | TouchEvent;
+/**
+ * Hook to trigger a function when clicking outside a referenced element.
+ *
+ * @hook
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null)
+ * useClickOutside(ref, () => {
+ *   console.log('Clicked outside!')
+ *   setIsOpen(false)
+ * })
+ *
+ * @template T - HTML element type that extends HTMLElement
+ * @param {RefObject<T>} ref - React ref object pointing to the target element
+ * @param {function} handler - Callback function to execute when clicking outside the element
+ * @param {Event} handler.event - The mouse or touch event that triggered the outside click
+ *
+ * @returns {void} This hook doesn't return anything
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useClickOutside
+ */
+declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
+
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>;
+/**
+ * Hook to copy text to clipboard and track the copied value state.
+ *
+ * @hook
+ *
+ * @example
+ * const [copiedText, copy] = useCopyToClipboard()
+ *
+ * const handleCopy = async () => {
+ *   const success = await copy('Hello, World!')
+ *   if (success) {
+ *     console.log('Copied:', copiedText)
+ *   }
+ * }
+ *
+ * @returns {[CopiedValue, CopyFn]} Array containing the last copied text and copy function
+ * @returns {string | null} returns[0] - The last successfully copied text, or null if no text copied or copy failed
+ * @returns {function} returns[1] - Async function to copy text to clipboard
+ * @returns {string} returns[1].text - Text to copy to clipboard
+ * @returns {Promise<boolean>} returns[1].Promise - Promise that resolves to true if copy succeeded, false otherwise
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useCopyToClipboard
+ */
+declare const useCopyToClipboard: () => [CopiedValue, CopyFn];
+
+/**
+ * Hook to delay the update of a value until after a specified delay period has passed without changes.
+ *
+ * @hook
+ *
+ * @example
+ * const [searchTerm, setSearchTerm] = useState('')
+ * const debouncedSearchTerm = useDebounce(searchTerm, 500)
+ *
+ * useEffect(() => {
+ *   if (debouncedSearchTerm) {
+ *     // Perform search API call
+ *     searchAPI(debouncedSearchTerm)
+ *   }
+ * }, [debouncedSearchTerm])
+ *
+ * @template T - Type of the value being debounced
+ * @param {T} value - The value to debounce
+ * @param {number} [delay=1000] - Delay in milliseconds before updating the debounced value
+ *
+ * @returns {T} The debounced value that updates after the delay period
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useDebounce
+ */
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+
+/**
+ * Hook to export data to JSON or CSV format with automatic file download functionality.
+ *
+ * @hook
+ *
+ * @example
+ * const { exportToJson, exportToCsv } = useExportData()
+ *
+ * // Export to JSON
+ * const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]
+ * exportToJson(users, 'users-data')
+ *
+ * // Export to CSV
+ * const headers = ['ID', 'Name']
+ * exportToCsv(users, 'users-data', headers)
+ *
+ * @template T - Type of the data objects being exported
+ *
+ * @returns {object} Object containing export functions
+ * @returns {function} returns.exportToJson - Function to export data as JSON file
+ * @returns {Array<T>} returns.exportToJson.data - Array of data objects to export
+ * @returns {string} returns.exportToJson.fileName - Name for the downloaded file (without extension)
+ * @returns {function} returns.exportToCsv - Function to export data as CSV file
+ * @returns {Array<T>} returns.exportToCsv.data - Array of data objects to export
+ * @returns {string} returns.exportToCsv.fileName - Name for the downloaded file (without extension)
+ * @returns {Array<string>} returns.exportToCsv.headers - Array of column headers for the CSV file
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useExportData
+ */
+declare const useExportData: <T>() => {
+    exportToCsv: (data: Array<T>, fileName: string, headers: Array<string>) => void;
+    exportToJson: (data: Array<T>, fileName: string) => void;
+};
+
+/**
+ * Hook to fetch data from a Promise with loading and error state management.
+ *
+ * @hook
+ *
+ * @example
+ * const { response, error, loading } = useFetch(
+ *   fetch('/api/users').then(res => res.json()),
+ *   [userId]
+ * )
+ *
+ * if (loading) return <div>Loading...</div>
+ * if (error) return <div>Error: {error.message}</div>
+ * return <div>{response?.name}</div>
+ *
+ * @template T - Type of the data returned by the fetch function
+ * @param {Promise<T>} fetchFunction - Promise that resolves to the data to be fetched
+ * @param {any} [dependencies] - Dependency array to trigger re-fetching when values change
+ *
+ * @returns {object} Object containing fetch state
+ * @returns {T | null} returns.response - The fetched data, or null if not yet loaded or failed
+ * @returns {any} returns.error - Error object if the fetch failed, undefined otherwise
+ * @returns {boolean} returns.loading - Whether the fetch operation is currently in progress
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useFetch
+ */
+declare const useFetch: <T>(fetchFunction: Promise<T>, dependencies?: any) => {
+    readonly response: T | null;
+    readonly error: any;
+    readonly loading: boolean;
+};
+
+/**
+ * Hook to manage form state with input handling, validation, and submission functionality.
+ *
+ * @hook
+ *
+ * @example
+ * interface FormData {
+ *   email: string
+ *   password: string
+ * }
+ *
+ * const { formData, handleInputs, resetForm, handleSubmit } = useForm<FormData>(
+ *   { email: '', password: '' },
+ *   (data) => console.log('Form submitted:', data)
+ * )
+ *
+ * @template T - Type of the form data object
+ * @param {T} [initialState={}] - Initial state of the form data
+ * @param {function} [onSubmit] - Optional callback function called on form submission
+ * @param {T} onSubmit.formData - The current form data when submitted
+ *
+ * @returns {object} Object containing form state and handlers
+ * @returns {T} returns.formData - Current form data state
+ * @returns {function} returns.handleInputs - Function to handle input changes
+ * @returns {ChangeEvent<HTMLInputElement>} returns.handleInputs.e - Input change event
+ * @returns {function} returns.resetForm - Function to reset form to initial state
+ * @returns {function} returns.handleSubmit - Function to handle form submission
+ * @returns {ChangeEvent<HTMLFormElement>} returns.handleSubmit.e - Form submit event
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useForm
+ */
+declare const useForm: <T>(initialState?: T, onSubmit?: (formData: T) => void) => {
+    formData: T;
+    handleInputs: (e: ChangeEvent<HTMLInputElement>) => void;
+    resetForm: () => void;
+    handleSubmit: (e: ChangeEvent<HTMLFormElement>) => void;
+};
+
+/**
+ * Hook to detect if an element is overflowing its container bounds with optional callback functionality.
+ *
+ * @hook
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null)
+ * const isOverflow = useIsOverflow(ref, {
+ *   callback: (overflow) => console.log('Overflow detected:', overflow),
+ *   check: 'width'
+ * })
+ *
+ * if (isOverflow) {
+ *   // Handle overflow state
+ * }
+ *
+ * @param {RefObject<HTMLElement>} ref - React ref object pointing to the element to check for overflow
+ * @param {object} [options] - Configuration options for overflow detection
+ * @param {RefCallback<boolean>} [options.callback] - Callback function called when overflow state changes
+ * @param {"width" | "height"} [options.check="width"] - Which dimension to check for overflow
+ *
+ * @returns {boolean | undefined} Whether the element is overflowing, or undefined if not yet determined
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useIsOverflow
+ */
+declare const useIsOverflow: (ref: RefObject<HTMLElement>, options?: {
+    callback: RefCallback<boolean>;
+    check?: "width" | "height";
+}) => boolean | undefined;
+
+/**
+ * Hook to trigger functions on specific key press events with support for modifier keys and exclusions.
+ *
+ * @hook
+ *
+ * @example
+ * // Single key press
+ * useKeyPress('Escape', () => setIsOpen(false))
+ *
+ * // Modifier key combination
+ * useKeyPress(['Control', 'KeyS'], () => saveDocument())
+ *
+ * // With excluded keys
+ * useKeyPress('Enter', handleSubmit, ['Shift'])
+ *
+ * @param {string | Array<string>} keyCodes - Single key code or array of key codes for combinations
+ * @param {function} callback - Function to execute when the key combination is pressed
+ * @param {Array<string>} [excludeKeys] - Array of modifier keys to exclude from triggering the callback
+ *
+ * @returns {void} This hook doesn't return anything
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useKeyPress
+ */
+declare const useKeyPress: (keyCodes: string | Array<string>, callback: () => void, excludeKeys?: Array<string>) => void;
+
+/**
+ * Hook to detect if the viewport width is smaller than or equal to a specified width breakpoint.
+ *
+ * @hook
+ *
+ * @example
+ * const isMobile = useMaxWidth(768)
+ * const isTablet = useMaxWidth(1024)
+ *
+ * if (isMobile) {
+ *   // Render mobile layout
+ * }
+ *
+ * @param {number} width - The maximum width breakpoint to check against
+ *
+ * @returns {boolean} Whether the current viewport width is smaller than or equal to the specified width
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useMaxWidth
+ */
+declare const useMaxWidth: (width: number) => boolean;
+
+/**
+ * Hook to merge multiple refs into a single ref callback for use on a single element.
+ *
+ * @hook
+ *
+ * @example
+ * const ref1 = useRef<HTMLDivElement>(null)
+ * const ref2 = useRef<HTMLDivElement>(null)
+ * const mergedRef = useMergeRefs([ref1, ref2])
+ *
+ * return <div ref={mergedRef}>Content</div>
+ *
+ * @template Instance - Type of the element instance being referenced
+ * @param {Array<Ref<Instance> | undefined>} refs - Array of refs to merge together
+ *
+ * @returns {RefCallback<Instance> | null} Merged ref callback or null if all refs are null/undefined
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useMergeRefs
+ */
+declare const useMergeRefs: <Instance>(refs: Array<Ref<Instance> | undefined>) => RefCallback<Instance> | null;
+
+/**
+ * Hook to detect if the viewport width is greater than or equal to a specified width breakpoint.
+ *
+ * @hook
+ *
+ * @example
+ * const isDesktop = useMinWidth(1024)
+ * const isTablet = useMinWidth(768)
+ *
+ * if (isDesktop) {
+ *   // Render desktop layout
+ * }
+ *
+ * @param {number} width - The minimum width breakpoint to check against
+ *
+ * @returns {boolean} Whether the current viewport width is greater than or equal to the specified width
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useMinWidth
+ */
+declare const useMinWidth: (width: number) => boolean;
+
+interface IUsePaginatedData<T> {
+    paginatedData: Array<T>;
+    totalPages: number;
+}
+/**
+ * Hook to paginate data with URL parameter integration for use with Pagination or Paginator components.
+ *
+ * @hook
+ *
+ * @example
+ * const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, ...]
+ * const { paginatedData, totalPages } = usePaginatedData(users, 1, 10)
+ *
+ * return (
+ *   <div>
+ *     {paginatedData.map(user => <UserCard key={user.id} user={user} />)}
+ *     <Pagination totalPages={totalPages} />
+ *   </div>
+ * )
+ *
+ * @template T - Type of the data items being paginated
+ * @param {Array<T>} data - Array of data to paginate
+ * @param {number} page - Current page number (1-indexed)
+ * @param {number} [defaultLimit=20] - Number of items per page
+ *
+ * @returns {object} Object containing paginated data and pagination info
+ * @returns {Array<T>} returns.paginatedData - Current page's data items
+ * @returns {number} returns.totalPages - Total number of pages based on data length and limit
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#usePaginatedData
+ */
+declare const usePaginatedData: <T>(data: Array<T>, page: number, defaultLimit?: number) => IUsePaginatedData<T>;
+
+interface ILibUsePaginationNavigation {
+    currentPage: number;
+    setCurrentPage: DispatchState<number>;
+    totalPages?: number;
+}
+/**
+ * Hook to manage pagination navigation with URL parameter integration and automatic scrolling.
+ *
+ * @hook
+ *
+ * @example
+ * const [currentPage, setCurrentPage] = useState(1)
+ * const { handlePrev, handleNext, handlePage } = usePagination({
+ *   currentPage,
+ *   setCurrentPage,
+ *   totalPages: 10
+ * })
+ *
+ * return (
+ *   <div>
+ *     <button onClick={handlePrev}>Previous</button>
+ *     <button onClick={() => handlePage(5)}>Go to page 5</button>
+ *     <button onClick={handleNext}>Next</button>
+ *   </div>
+ * )
+ *
+ * @param {object} params - Configuration object for pagination
+ * @param {number} params.currentPage - Current active page number
+ * @param {DispatchState<number>} params.setCurrentPage - State setter function for current page
+ * @param {number} [params.totalPages] - Total number of pages available
+ *
+ * @returns {object} Object containing pagination navigation functions
+ * @returns {function} returns.handlePrev - Function to navigate to the previous page
+ * @returns {function} returns.handleNext - Function to navigate to the next page
+ * @returns {function} returns.handlePage - Function to navigate to a specific page number
+ * @returns {number} returns.handlePage.n - Page number to navigate to
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#usePagination
+ */
+declare const usePagination: ({ currentPage, setCurrentPage, totalPages, }: ILibUsePaginationNavigation) => {
+    handlePrev: () => void;
+    handleNext: () => void;
+    handlePage: (n: number) => void;
+};
+
+/**
+ * Hook to detect if the current device supports touch screen interaction.
+ *
+ * @hook
+ *
+ * @example
+ * const isTouchScreen = useTouchScreen()
+ *
+ * if (isTouchScreen) {
+ *   // Render touch-optimized UI
+ *   return <TouchOptimizedComponent />
+ * }
+ *
+ * return <DesktopComponent />
+ *
+ * @returns {boolean} Whether the current device supports touch screen interaction
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useTouchScreen
+ */
+declare const useTouchScreen: () => boolean;
+
+/**
+ * Hook to detect the language and return translated content with language switching functionality.
+ *
+ * @hook
+ *
+ * @example
+ * const translations = {
+ *   en: { greeting: 'Hello', goodbye: 'Goodbye' },
+ *   fr: { greeting: 'Bonjour', goodbye: 'Au revoir' },
+ *   es: { greeting: 'Hola', goodbye: 'Adiós' }
+ * }
+ *
+ * const { translate, setLanguage, language, languages } = useTranslation(translations)
+ *
+ * return (
+ *   <div>
+ *     <p>{translate('greeting')}</p>
+ *     <button onClick={() => setLanguage('fr')}>Switch to French</button>
+ *   </div>
+ * )
+ *
+ * @param {TranslateLang} translations - Object containing translations for each language
+ * @param {object} translations[language] - Translation object for a specific language
+ * @param {string} translations[language][key] - Translated string for a specific key
+ *
+ * @returns {object} Object containing translation utilities
+ * @returns {function} returns.translate - Function to get translated text for a given key
+ * @returns {string} returns.translate.key - Translation key to look up
+ * @returns {function} returns.setLanguage - Function to change the current language
+ * @returns {string} returns.setLanguage.lang - Language code to switch to
+ * @returns {string} returns.language - Current active language code
+ * @returns {Array<string>} returns.languages - Array of available language codes
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useTranslation
+ */
+declare const useTranslation: (translations: TranslateLang) => {
+    translate: (key: string) => string;
+    setLanguage: react.Dispatch<react.SetStateAction<string>>;
+    language: string;
+    languages: string[];
+};
+
+declare enum COLORS {
+    /** #EFF6FF */ PRIMARY_50 = "var(--color-primary-50)",
+    /** #DBEAFE */ PRIMARY_100 = "var(--color-primary-100)",
+    /** #BFDBFE */ PRIMARY_200 = "var(--color-primary-200)",
+    /** #93C5FD */ PRIMARY_300 = "var(--color-primary-300)",
+    /** #60A5FA */ PRIMARY_400 = "var(--color-primary-400)",
+    /** #3B82F6 */ PRIMARY_500 = "var(--color-primary-500)",
+    /** #2563EB */ PRIMARY_600 = "var(--color-primary-600)",
+    /** #1D4ED8 */ PRIMARY_700 = "var(--color-primary-700)",
+    /** #1E40AF */ PRIMARY_800 = "var(--color-primary-800)",
+    /** #1E3A8A */ PRIMARY_900 = "var(--color-primary-900)",
+    /** #172554 */ PRIMARY_950 = "var(--color-primary-950)",
+    /** #ECFEFF */ SECONDARY_50 = "var(--color-secondary-50)",
+    /** #CFFAFE */ SECONDARY_100 = "var(--color-secondary-100)",
+    /** #A5F3FC */ SECONDARY_200 = "var(--color-secondary-200)",
+    /** #67E8F9 */ SECONDARY_300 = "var(--color-secondary-300)",
+    /** #22D3EE */ SECONDARY_400 = "var(--color-secondary-400)",
+    /** #06B6D4 */ SECONDARY_500 = "var(--color-secondary-500)",
+    /** #0891B2 */ SECONDARY_600 = "var(--color-secondary-600)",
+    /** #0E7490 */ SECONDARY_700 = "var(--color-secondary-700)",
+    /** #155E75 */ SECONDARY_800 = "var(--color-secondary-800)",
+    /** #164E63 */ SECONDARY_900 = "var(--color-secondary-900)",
+    /** #083344 */ SECONDARY_950 = "var(--color-secondary-950)",
+    /** #F0FDF4 */ SUCCESS_50 = "var(--color-success-50)",
+    /** #DCFCE7 */ SUCCESS_100 = "var(--color-success-100)",
+    /** #BBF7D0 */ SUCCESS_200 = "var(--color-success-200)",
+    /** #86EFAC */ SUCCESS_300 = "var(--color-success-300)",
+    /** #4ADE80 */ SUCCESS_400 = "var(--color-success-400)",
+    /** #22C55E */ SUCCESS_500 = "var(--color-success-500)",
+    /** #16A34A */ SUCCESS_600 = "var(--color-success-600)",
+    /** #15803D */ SUCCESS_700 = "var(--color-success-700)",
+    /** #166534 */ SUCCESS_800 = "var(--color-success-800)",
+    /** #14532D */ SUCCESS_900 = "var(--color-success-900)",
+    /** #052E16 */ SUCCESS_950 = "var(--color-success-950)",
+    /** #FEF2F2 */ DANGER_50 = "var(--color-danger-50)",
+    /** #FEE2E2 */ DANGER_100 = "var(--color-danger-100)",
+    /** #FECACA */ DANGER_200 = "var(--color-danger-200)",
+    /** #FCA5A5 */ DANGER_300 = "var(--color-danger-300)",
+    /** #F87171 */ DANGER_400 = "var(--color-danger-400)",
+    /** #EF4444 */ DANGER_500 = "var(--color-danger-500)",
+    /** #DC2626 */ DANGER_600 = "var(--color-danger-600)",
+    /** #B91C1C */ DANGER_700 = "var(--color-danger-700)",
+    /** #991B1B */ DANGER_800 = "var(--color-danger-800)",
+    /** #7F1D1D */ DANGER_900 = "var(--color-danger-900)",
+    /** #450A0A */ DANGER_950 = "var(--color-danger-950)",
+    /** #FFFBEB */ WARNING_50 = "var(--color-warning-50)",
+    /** #FEF3C7 */ WARNING_100 = "var(--color-warning-100)",
+    /** #FDE68A */ WARNING_200 = "var(--color-warning-200)",
+    /** #FCD34D */ WARNING_300 = "var(--color-warning-300)",
+    /** #FBBF24 */ WARNING_400 = "var(--color-warning-400)",
+    /** #F59E0B */ WARNING_500 = "var(--color-warning-500)",
+    /** #D97706 */ WARNING_600 = "var(--color-warning-600)",
+    /** #B45309 */ WARNING_700 = "var(--color-warning-700)",
+    /** #92400E */ WARNING_800 = "var(--color-warning-800)",
+    /** #78350F */ WARNING_900 = "var(--color-warning-900)",
+    /** #451A03 */ WARNING_950 = "var(--color-warning-950)",
+    /** #FAFAFA */ GRAY_50 = "var(--color-gray-50)",
+    /** #F5F5F5 */ GRAY_100 = "var(--color-gray-100)",
+    /** #E5E5E5 */ GRAY_200 = "var(--color-gray-200)",
+    /** #D4D4D4 */ GRAY_300 = "var(--color-gray-300)",
+    /** #A3A3A3 */ GRAY_400 = "var(--color-gray-400)",
+    /** #737373 */ GRAY_500 = "var(--color-gray-500)",
+    /** #525252 */ GRAY_600 = "var(--color-gray-600)",
+    /** #404040 */ GRAY_700 = "var(--color-gray-700)",
+    /** #262626 */ GRAY_800 = "var(--color-gray-800)",
+    /** #171717 */ GRAY_900 = "var(--color-gray-900)",
+    /** #0A0A0A */ GRAY_950 = "var(--color-gray-950)",
+    /** #000000 */ BLACK = "var(--color-black)",
+    /** #FFFFFF */ WHITE = "var(--color-white)",
+    TRANSPARENT = "transparent",
+    CURRENT_COLOR = "currentColor"
+}
+declare enum OVERLAYS {
+    /** rgba(0, 0, 0, 0.5) */ BLACK_50 = "var(--color-overlay-black-50)",
+    /** rgba(0, 0, 0, 0.8) */ BLACK_80 = "var(--color-overlay-black-80)",
+    /** rgba(255, 255, 255, 0.5) */ WHITE_50 = "var(--color-overlay-white-50)",
+    /** rgba(69, 35, 35, 0.8) */ WHITE_80 = "var(--color-overlay-white-80)",
+    /** linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */ GRADIENT_BLACK = "var(--color-overlay-gradient-black)",
+    /** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--color-overlay-gradient-white)"
+}
+declare enum FONT_FAMILIES {
+    /** Primary font family for body text */ SANS = "var(--font-sans)",
+    /** Font family for code and monospaced text */ MONO = "var(--font-mono)"
+}
+declare enum FONT_SIZES {
+    /** 5rem */ DISPLAY_H1 = "var(--text-display-h1)",
+    /** 4rem */ DISPLAY_H2 = "var(--text-display-h2)",
+    /** 3.5rem */ DISPLAY_H3 = "var(--text-display-h3)",
+    /** 3rem */ DISPLAY_H4 = "var(--text-display-h4)",
+    /** 2.5rem */ DISPLAY_H5 = "var(--text-display-h5)",
+    /** 2.5rem */ H1 = "var(--text-h1)",
+    /** 2rem */ H2 = "var(--text-h2)",
+    /** 1.8rem */ H3 = "var(--text-h3)",
+    /** 1.5rem */ H4 = "var(--text-h4)",
+    /** 1.3rem */ H5 = "var(--text-h5)",
+    /** 1.1rem */ H6 = "var(--text-h6)",
+    /** 1rem */ BODY = "var(--text-body)",
+    /** 0.875rem */ SMALL = "var(--text-small)"
+}
+declare enum FONT_WEIGHTS {
+    /** 100 */ THIN = "var(--font-weight-thin)",
+    /** 200 */ EXTRA_LIGHT = "var(--font-weight-extralight)",
+    /** 300 */ LIGHT = "var(--font-weight-light)",
+    /** 400 */ NORMAL = "var(--font-weight-normal)",
+    /** 500 */ MEDIUM = "var(--font-weight-medium)",
+    /** 600 */ SEMI_BOLD = "var(--font-weight-semibold)",
+    /** 700 */ BOLD = "var(--font-weight-bold)",
+    /** 800 */ EXTRA_BOLD = "var(--font-weight-extrabold)",
+    /** 900 */ BLACK = "var(--font-weight-black)"
+}
+declare enum LINE_HEIGHTS {
+    /** 1 */ NONE = "var(--line-height-none)",
+    /** 1.25 */ TIGHT = "var(--line-height-tight)",
+    /** 1.375 */ SNUG = "var(--line-height-snug)",
+    /** 1.5 */ NORMAL = "var(--line-height-normal)",
+    /** 1.625 */ RELAXED = "var(--line-height-relaxed)",
+    /** 2 */ LOOSE = "var(--line-height-loose)",
+    /** 0.75rem (12px) */ _3 = "var(--line-height-3)",
+    /** 1rem (16px) */ _4 = "var(--line-height-4)",
+    /** 1.25rem (20px) */ _5 = "var(--line-height-5)",
+    /** 1.5rem (24px) */ _6 = "var(--line-height-6)",
+    /** 1.75rem (28px) */ _7 = "var(--line-height-7)",
+    /** 2rem (32px) */ _8 = "var(--line-height-8)",
+    /** 2.25rem (36px) */ _9 = "var(--line-height-9)",
+    /** 2.5rem (40px) */ _10 = "var(--line-height-10)"
+}
+declare enum SHADOWS {
+    /** 0 1px 2px 0 rgba(0, 0, 0, 0.05) */ "2XS" = "var(--shadow-2xs)",
+    /** 0 1px 2px 0 rgba(0, 0, 0, 0.05) */ XS = "var(--shadow-xs)",
+    /** 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) */ SM = "var(--shadow-sm)",
+    /** 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) */ MD = "var(--shadow-md)",
+    /** 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) */ LG = "var(--shadow-lg)",
+    /** 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) */ XL = "var(--shadow-xl)",
+    /** 0 25px 50px -12px rgba(0, 0, 0, 0.25) */ "2XL" = "var(--shadow-2xl)",
+    /** inset 0 2px 4px 0 rgb(0 0 0 / 0.06) */ INNER = "var(--shadow-inner)",
+    /** none */ NONE = "var(--shadow-none)"
+}
+declare enum INSET_SHADOWS {
+}
+declare enum DROP_SHADOWS {
+}
+declare enum TEXT_SHADOWS {
+}
+declare enum SPACERS {
+    /** 48px */ "2XL" = "var(--spacer-2xl)",
+    /** 32px */ XL = "var(--spacer-xl)",
+    /** 24px */ LG = "var(--spacer-lg)",
+    /** 16px */ MD = "var(--spacer-md)",
+    /** 12px */ SM = "var(--spacer-sm)",
+    /** 8px */ XS = "var(--spacer-xs)",
+    /** 4px */ "2XS" = "var(--spacer-2xs)"
+}
+declare enum RADIUS {
+    /** 0px */ NONE = "var(--radius-none)",
+    /**  */ XS = "var(--radius-xs)",
+    /** 0.125rem (2px) */ SM = "var(--radius-sm)",
+    /** 0.25rem (4px) */ DEFAULT = "var(--radius)",
+    /** 0.375rem (6px) */ MD = "var(--radius-md)",
+    /** 0.5rem (8px) */ LG = "var(--radius-lg)",
+    /** 0.75rem (12px) */ XL = "var(--radius-xl)",
+    /** 1rem (16px) */ "2XL" = "var(--radius-2xl)",
+    /** 1.5rem (24px) */ "3XL" = "var(--radius-3xl)",
+    /**  */ "4XL" = "var(--radius-4xl)",
+    /** 9999px */ FULL = "var(--radius-full)"
+}
+declare enum LAYOUTS {
+    /** 600px */ MAIN_DEFAULT = "var(--main-default)",
+    /** 800px */ MAIN_LARGE = "var(--main-large)",
+    /** 400px */ MAIN_FORM = "var(--main-form)",
+    /** 100% */ MAIN_FULL = "var(--main-full)",
+    /** 250px */ ASIDE_DEFAULT = "var(--aside-default)",
+    /** 200px */ ASIDE_SMALL = "var(--aside-small)"
+}
+declare enum TRANSITIONS {
+    /** all 200ms ease */ SHORT = "var(--transition-short)",
+    /** all 500ms ease */ LONG = "var(--transition-long)",
+    /** all 500ms cubic-bezier(0.25, 0.75, 0, 0.66) */ BEZIER = "var(--transition-bezier)"
+}
+declare enum MEDIA {
+    BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)",
+    BREAKPOINT_TABLET_SMALL = "(max-width: 768px)",
+    BREAKPOINT_MOBILE = "(max-width: 600px)",
+    TOUCH = "(hover: none) and (pointer: coarse)",
+    HOVER = "(hover: hover)",
+    PREFERS_LIGHT = "(prefers-color-scheme: light)",
+    PREFERS_DARK = "(prefers-color-scheme: dark)"
+}
+declare const ICON_MULTIPLIER: 0.6;
+declare const INPUT_HEIGHT: 32;
+
+type ILibThemeContext = {
+    theme: LibThemeNames;
+    setTheme: DispatchState<LibThemeNames>;
+    switchTheme: () => void;
+};
+interface ILibThemeProvider {
+    children?: ReactChildren;
+}
+declare const ThemeProviderWrapper: ({ children }: ILibThemeProvider) => react_jsx_runtime.JSX.Element;
+/**
+ * Custom hook to access the theme context.
+ *
+ * @returns {ILibThemeContext} The current theme, a setter for the theme, and a function to toggle between light and dark themes.
+ * @example
+ * const { theme, setTheme, switchTheme } = useLibTheme()
+ */
+declare const useLibTheme: () => ILibThemeContext;
+
+declare const TEXT_BASE_CLASSES: string;
+/**
+ * Text component for rendering semantic HTML text elements with consistent styles.
+ *
+ * Renders the appropriate semantic element based on the `tag` prop, such as headings, paragraphs, lists, blockquotes, etc.
+ *
+ * @component
+ * @example
+ * <Text tag="h2">Section title</Text>
+ * <Text tag="p">Paragraph content</Text>
+ * <Text tag="ul">
+ *   <li>Item 1</li>
+ *   <li>Item 2</li>
+ * </Text>
+ *
+ * @extends HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLDListElement & HTMLOListElement & HTMLUListElement
+ *
+ * @prop {object} props - Component props.
+ * @prop {ElementType} [props.element="p"] - The HTML element or React component to render.
+ * @prop {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"p"|"small"|"strong"|"em"|"blockquote"|"ul"|"ol"|"dl"} [props.tag="p"] - The semantic HTML tag to render.
+ * @prop {string} [props.color="currentColor"] - Any color from the library.
+ * @prop {"red"|"orange"|"amber"|"yellow"|"lime"|"green"|"emerald"|"teal"|"cyan"|"sky"|"blue"|"indigo"|"violet"|"purple"|"fuchsia"|"pink"|"rose"|"slate"} [props.linkColor="blue"] - Any hover color.
+ * @prop {"text-left"|"text-center"|"text-right"|"text-justify"|"text-start"|"text-end"} [props.textAlign="left"] - Text alignment.
+ * @prop {boolean} [props.display=false] - Whether to use display block.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {RefObject<any>} [props.ref] - Ref for the rendered element.
+ * @prop {ReactNode} props.children - Text content.
+ * @prop {object} [props.rest] - Additional props spread to the rendered element.
+ *
+ * @returns {JSX.Element} The rendered text element.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/styles/text
+ */
+declare const Text: FC$1<ILibText>;
+
+/**
+ * Wrapper component for providing a responsive layout container.
+ *
+ * @component
+ * @example
+ * <Wrapper>
+ *   <Main>Content</Main>
+ * </Wrapper>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="section"] - The HTML element or React component to render as the wrapper container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the wrapper container.
+ * @prop {ReactNode} props.children - Wrapper content.
+ * @prop {"px"|"full"|"screen"|"dvh"|"dvw"|"lvh"|"lvw"|"svw"|"svh"|"auto"|"min"|"max"|"fit"|"lh"|} [props.minHeight="svh"] - Minimum height class (uses Tailwind min-h-* utilities).
+ * @prop {string} [props.backgroundColor="background"] - Any color from the library.
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="lg"] - Gap between children (uses library spacers).
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered wrapper container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/styles/wrapper
+ */
+declare const Wrapper: FC$1<ILibWrapper>;
+
+/**
+ * Main component for rendering the primary content area.
+ *
+ * @component
+ *
+ * @example
+ * <Main size="large" gap="xl" backgroundColor="white">
+ *   <p>Main content</p>
+ * </Main>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="main"] - The HTML element or React component to render as the main container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the main container.
+ * @prop {ReactNode} props.children - Main content.
+ * @prop {"default"|"large"|"form"} [props.size="default"] - Main width size.
+ * @prop {string} [props.backgroundColor="white"] - Any color from the library.
+ * @prop {"2xl"|"xl"|"lg"|"md"|"sm"|"xs"|"2xs"} [props.gap="lg"] - Gap between children (uses spacer tokens).
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered main container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/styles/main
+ */
+declare const Main: FC$1<ILibMain>;
+
+/**
+ * Aside component for rendering a sidebar or secondary content area.
+ *
+ * @component
+ * @example
+ * <Aside size="small" backgroundColor="white">
+ *   <p>Sidebar content</p>
+ * </Aside>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="aside"] - The HTML element or React component to render as the aside container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the aside container.
+ * @prop {ReactNode} props.children - Aside content.
+ * @prop {"default"|"small"} [props.size="default"] - Aside width size.
+ * @prop {string} [props.backgroundColor="white"] - Any color from the library.
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered aside container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/styles/aside
+ */
+declare const Aside: FC$1<ILibAside>;
+
+/**
+ * Section component for grouping related content in a flexible layout.
+ *
+ * @component
+ * @example
+ * <Section gap="lg">
+ *   <h2>Section title</h2>
+ *   <p>Section content</p>
+ * </Section>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="section"] - The HTML element or React component to render as the section container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the section container.
+ * @prop {ReactNode} props.children - Section content.
+ * @prop {"2xl"|"xl"|"lg"|"md"|"sm"|"xs"|"2xs"|"0px"} [props.gap="md"] - Gap between children (uses spacer tokens).
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered section container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/section
+ */
+declare const Section: FC$1<ILibSection>;
+
+/**
+ * Grid component for flexible CSS grid layouts.
+ *
+ * @component
+ * @example
+ * <Grid cols={3} gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Grid>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the grid container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the grid container.
+ * @prop {ReactNode} props.children - Grid content.
+ * @prop {boolean} [props.inline] - Use inline-grid instead of grid.
+ * @prop {1|2|3|4|5|6|7|8|9|10|11|12} [props.cols=1] - Number of columns (1-12).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="0px"] - Gap between rows and columns (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.rowGap="0px"] - Row gap (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.colGap="0px"] - Column gap (can use spacer tokens).
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-sage"|"space-between"|"space-around"|"space-evenly"|"stretch"|"baseline"|"normal"} [props.justifyContent="start"] - Justify content property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"stretch"|"normal"} [props.justifyItems="stretch"] - Justify items property.
+ * @prop {"normal"|"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"|"baseline"|"stretch"} [props.alignContent="start"] - Align content property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"baseline"|"baseline-start"|"stretch"} [props.alignItems="stretch"] - Align items property.
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered grid container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/grid
+ */
+declare const Grid: FC$1<ILibGrid>;
+
+/**
+ * Flexbox component for flexible layouts using CSS flexbox.
+ *
+ * @component
+ * @example
+ * <Flexbox flexDirection="row" gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flexbox>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the flex container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the flex container.
+ * @prop {ReactNode} props.children - Flexbox content.
+ * @prop {boolean} [props.inline] - Use inline-flex instead of flex.
+ * @prop {"row"|"row-reverse"|"col"|"col-reverse"} [props.flexDirection="row"] - Flex direction.
+ * @prop {"nowrap"|"wrap"|"wrap-reverse"} [props.flexWrap="nowrap"] - Flex wrap.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-sage"|"space-between"|"space-around"|"space-evenly"|"stretch"|"baseline"|"normal"} [props.justifyContent="start"] - Justify content property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"baseline"|"baseline-start"|"stretch"} [props.alignItems="stretch"] - Align items property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"stretch"|"normal"} [props.justifyItems="stretch"] - Justify items property.
+ * @prop {"normal"|"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"|"baseline"|"stretch"} [props.alignContent="normal"] - Align content property.
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="0px"] - Gap between items (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.colGap="0px"] - Column gap (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.rowGap="0px"] - Row gap (can use spacer tokens).
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered flexbox container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/flexbox
+ */
+declare const Flexbox: FC$1<ILibFlexbox>;
+
+/**
+ * Key component for displaying keyboard keys or shortcuts.
+ *
+ * @component
+ *
+ * @example
+ * <Key keys={["Ctrl", "C"]} size="large" accentColor="blue" />
+ *
+ * @prop {Array<string>} keys - The list of keys to display.
+ * @prop {boolean} [withSeparator] - If true, displays a separator between keys.
+ * @prop {"default" | "large" | "form"} [size] - The size of the key component.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray"} [accentColor] - Accent color for the key, excluding black, white, transparent, background, and current.
+ *
+ * @returns {JSX.Element} The rendered Key component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/key
+ */
+declare const Key: FC$1<ILibKey>;
+
+/**
+ * Highlight component for emphasizing parts of text.
+ *
+ * @component
+ *
+ * @example
+ * <Highlight highlightedText="important" highlightClasses="bg-yellow-200" />
+ *
+ * @prop {string} highlightedText - The substring to highlight within the children.
+ * @prop {CSSProperties} [highlightStyle] - Inline style to apply to the highlighted text.
+ * @prop {string} [highlightClasses] - Additional class names to apply to the highlighted text.
+ *
+ * @returns {JSX.Element} The rendered Highlight component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/highlight
+ */
+declare const Highlight: FC$1<ILibHighlight>;
+
+/**
+ * Linkify component that automatically detects URLs in the provided text and wraps them in anchor tags.
+ *
+ * @component
+ *
+ * @example
+ * <Linkify>
+ *   Visit https://github.com for more information.
+ * </Linkify>
+ *
+ * @extends ILibText
+ *
+ * @prop {string} [props.className] - Additional class names to apply to the container element.
+ * @prop {ElementType} [props.element=Text] - The HTML element or React component to render as the container. Default is `Text`.
+ * @prop {RefObject<HTMLHeadingElement | HTMLParagraphElement | HTMLQuoteElement | HTMLDListElement | HTMLOListElement | HTMLUListElement>} [props.ref] - Ref for the container element.
+ * @prop {string} props.children - The text content to parse and linkify.
+ * @prop {boolean} [props.blank] - If true, links open in a new tab (`_blank`). Default is `false`.
+ * @prop {string} [props.linkClasses] - Additional class names to apply to the generated anchor tags.
+ * @prop {object} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {ReactElement} The rendered Linkify component with URLs converted to clickable links.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/linkify
+ */
+declare const Linkify: FC$1<ILibLinkify>;
+
+/**
+ * Hr component for rendering a horizontal rule with custom color, width, and border radius.
+ *
+ * @component
+ *
+ * @example
+ * <Hr maxWidth="lg" color="gray-200" isRounded />
+ *
+ * @extends HTMLHrElement
+ *
+ * @prop {"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "none" | "px" | "full" | "dvw" | "dvh" | "lvw" | "lvh" | "svw" | "svh" | "screen" | "min" | "max" | "fit"} [maxWidth="full"] - Maximum width of the hr.
+ * @prop {string} [color="gray-200"] - Background color of the hr.
+ * @prop {boolean} [isRounded] - If true, the hr will have fully rounded borders.
+ *
+ * @returns {JSX.Element} The rendered Hr component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/hr
+ */
+declare const Hr: FC$1<ILibHr>;
+
+/**
+ * Skeleton component for displaying a loading placeholder.
+ *
+ * @component
+ * @extends HTMLDivElement
+ *
+ * @example
+ * <Skeleton backgroundColor="gray-100" borderRadius="lg" animation="pulse" />
+ *
+ * @prop {LibAllColors} [backgroundColor] - Background color of the skeleton.
+ * @prop {LibRadiuses} [borderRadius] - Border radius of the skeleton.
+ * @prop {LibSkeletonAnimation} [animation] - Animation style for the skeleton. Possible values: "pulse", "shine".
+ *
+ * @returns {JSX.Element} The rendered Skeleton component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/skeleton
+ */
+declare const Skeleton: FC$1<ILibSkeleton>;
+
+/**
+ * SkeletonCard component for displaying a loading placeholder in the shape of a card.
+ *
+ * @component
+ * @extends HTMLDivElement
+ *
+ * @example
+ * <SkeletonCard isShiny backgroundColor="gray-100" borderRadius="lg" gap="md" />
+ *
+ * @prop {boolean} [inline] - Use inline-flex instead of flex for the skeleton card.
+ * @prop {CssFlexDirection} [flexDirection] - Flex direction for the skeleton card content.
+ * @prop {CssFlexWrap} [flexWrap] - Flex wrap for the skeleton card content.
+ * @prop {CssJustifyContent} [justifyContent] - Justify content property for the skeleton card content.
+ * @prop {CssAlignItems} [alignItems] - Align items property for the skeleton card content.
+ * @prop {CssJustifyItems} [justifyItems] - Justify items property for the skeleton card content.
+ * @prop {CssAlignContent} [alignContent] - Align content property for the skeleton card content.
+ * @prop {LibSpacers} [gap] - Gap between skeleton card children.
+ * @prop {LibSpacers} [colGap] - Column gap between skeleton card children.
+ * @prop {LibSpacers} [rowGap] - Row gap between skeleton card children.
+ * @prop {LibAllColors} [backgroundColor] - Background color of the skeleton card.
+ * @prop {LibRadiuses} [borderRadius] - Border radius of the skeleton card.
+ * @prop {boolean} [isShiny] - If true, applies a shiny animation to the skeleton card.
+ *
+ * @returns {JSX.Element} The rendered SkeletonCard component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/skeletoncard
+ */
+declare const SkeletonCard: FC<ILibSkeletonCard>;
+
+/**
+ * Tooltip component for displaying contextual information on hover or click interactions.
+ *
+ * @component
+ *
+ * @example
+ * <Tooltip
+ *   tooltip="This is a helpful tooltip"
+ *   position="top"
+ *   trigger="hover"
+ *   backgroundColor="black-80"
+ *   textColor="white"
+ * >
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tooltip container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tooltip container element.
+ * @prop {React.ReactNode} [props.children] - The element that triggers the tooltip on interaction.
+ * @prop {string} [props.tooltip] - The tooltip text content to display.
+ * @prop {"top" | "bottom" | "left" | "right"} [props.position="top"] - Position of the tooltip relative to the trigger element.
+ * @prop {boolean} [props.hideArrow] - Whether to hide the tooltip arrow pointer.
+ * @prop {"hover" | "click"} [props.trigger="hover"] - Event that triggers the tooltip display.
+ * @prop {LibAllColorsAndOverlays} [props.backgroundColor="black-80"] - Background color for the tooltip.
+ * @prop {LibAllColors} [props.textColor="white"] - Text color for the tooltip content.
+ * @prop {LibSpacers} [props.offset="xs"] - Distance offset between tooltip and trigger element.
+ * @prop {string} [props.tooltipClasses] - Additional CSS classes for the tooltip element.
+ * @prop {React.CSSProperties} [props.tooltipStyle] - Additional inline styles for the tooltip element.
+ * @prop {function} [props.onClick] - Click event handler for the trigger element.
+ * @prop {function} [props.onMouseEnter] - Mouse enter event handler for the trigger element.
+ * @prop {function} [props.onMouseLeave] - Mouse leave event handler for the trigger element.
+ *
+ * @returns {JSX.Element} The rendered Tooltip component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tooltip
+ */
+declare const Tooltip: FC$1<ILibTooltip>;
+
+/**
+ * Image component for displaying images with optional styling, captions, and accessibility features.
+ *
+ * @component
+ *
+ * @example
+ * <Image src="https://example.com/image.jpg" alt="Example image" borderRadius="lg" fit="cover" caption="Example caption" />
+ *
+ * @extends HTMLImageElement
+ *
+ * @prop {string} [className] - Additional class names to apply to the image or figure element.
+ * @prop {React.RefObject<HTMLImageElement | HTMLFigureElement>} [ref] - Ref for the image or figure element.
+ * @prop {string | { text: string, backgroundColor?: LibAllColorsAndOverlays, textColor?: LibAllColors, imgClasses?: string, captionClasses?: string }} [caption] - Caption for the image. Can be a string or an object with text and optional styling.
+ * @prop {LibRadiuses} [borderRadius] - Border radius for the image or figure.
+ * @prop {"contain" | "cover" | "fill" | "none" | "scale-down"} [fit] - How the image should fit within its container.
+ *
+ * @returns {JSX.Element} The rendered Image component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/image
+ */
+declare const Image: FC$1<ILibImage>;
+
+/**
+ * Masonry component for displaying content in a responsive masonry grid layout.
+ *
+ * @component
+ *
+ * @example
+ * <Masonry col={3} gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Masonry>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the container.
+ * @prop {React.RefObject<HTMLDivElement>} [props.ref] - Ref for the container element.
+ * @prop {React.ReactNode[]} [props.children=[]] - The content to display in the masonry grid.
+ * @prop {number} [props.col=4] - Number of columns in the masonry grid.
+ * @prop {"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.gap="lg"] - Gap between grid items.
+ *
+ * @returns {JSX.Element} The rendered Masonry component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/masonry
+ */
+declare const Masonry: FC$1<ILibMasonry>;
+
+/**
+ * Badge component for displaying a colored label or status.
+ *
+ * @component
+ *
+ * @example
+ * <Badge backgroundColor="primary" contentColor="white" borderRadius="full">New</Badge>
+ *
+ * @extends HTMLSpanElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the badge.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the badge.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the badge element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the badge.
+ * @prop {LibAllColors} [props.color="primary"] - Background color of the badge.
+ * @prop {LibAllColors} [props.contentColor="white"] - Text color of the badge.
+ * @prop {LibRadius} [props.borderRadius="full"] - Border radius of the badge.
+ * @prop {any} [props.rest] - Additional props spread to the badge element.
+ *
+ * @returns {JSX.Element} The rendered Badge component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/badge
+ */
+declare const Badge: FC$1<ILibBadge>;
+
+/**
+ * Avatar component for displaying a user image, initials, or icon, with optional badge and custom styles.
+ *
+ * @component
+ *
+ * @example
+ * <Avatar backgroundColor="primary" contentColor="white" borderRadius="full" badge="New">JS</Avatar>
+ *
+ * @extends HTMLSpanElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the avatar.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the avatar.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the avatar element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the avatar (image, initials, or icon).
+ * @prop {string | { content?: React.ReactNode; backgroundColor?: string; contentColor?: string; className?: string }} [props.badge] - Badge to display on the avatar, can be a string or an object with content and colors.
+ * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the avatar container.
+ * @prop {string} [props.containerClassName] - Additional CSS classes for the avatar container.
+ * @prop {string} [props.borderRadius] - Border radius of the avatar.
+ * @prop {string} [props.borderColor] - Border color of the avatar.
+ * @prop {string} [props.backgroundColor] - Background color of the avatar.
+ * @prop {string} [props.contentColor] - Text color of the avatar.
+ * @prop {any} [props.rest] - Additional props spread to the avatar element.
+ *
+ * @returns {JSX.Element} The rendered Avatar component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/avatar
+ */
+declare const Avatar: FC$1<ILibAvatar>;
+
+/**
+ * Loader component for displaying a loading indicator with multiple style variants and color options.
+ *
+ * @component
+ *
+ * @example
+ * <Loader variant={2} color="primary" />
+ *
+ * @extends HTMLSpanElement
+ *
+ * @prop {1 | 2 | 3} [props.variant=1] Possible values: 1, 2, 3. - Loader variant style.
+ * @prop {string} [props.color="primary"] Any color from the library. - Loader color.
+ * @prop {string} [props.className] - Additional CSS classes to apply to the loader.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the loader.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the loader element.
+ * @prop {any} [props.rest] - Additional props spread to the loader element.
+ *
+ * @returns {JSX.Element} The rendered Loader component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/loader
+ */
+declare const Loader: FC$1<ILibLoader>;
+
+/**
+ * Burger component for displaying a hamburger menu icon with open/closed states and hover effects.
+ *
+ * @component
+ *
+ * @example
+ * <Burger
+ *   isOpen={isMenuOpen}
+ *   color="primary"
+ *   onClick={toggleMenu}
+ * />
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the burger.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the burger.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the burger element.
+ * @prop {string} [props.role="button"] - ARIA role for accessibility.
+ * @prop {string} [props.aria-label="Burger"] - ARIA label for accessibility.
+ * @prop {boolean} [props.isOpen] - Whether the burger menu is open or closed.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color of the burger lines.
+ * @prop {string} [props.type="button"] - Button type attribute.
+ * @prop {boolean} [props.noHover] - Whether to disable hover effects.
+ * @prop {any} [props.rest] - Additional props spread to the burger element.
+ *
+ * @returns {JSX.Element} The rendered Burger component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/burger
+ */
+declare const Burger: FC$1<ILibBurger>;
+
+/**
+ * Button component for user interactions with multiple variants, colors, and loading states.
+ *
+ * @component
+ *
+ * @example
+ * <Button variant="plain" color="primary" size="default">Click me</Button>
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the button.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the button.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Button variant style.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
+ * @prop {"default" | "small"} [props.size="default"] - Button size.
+ * @prop {boolean} [props.isLoading] - Whether the button is in a loading state.
+ * @prop {1 | 2 | 3} [props.loaderVariant] - Loader variant to display when loading.
+ * @prop {boolean} [props.disabled] - Whether the button is disabled.
+ * @prop {any} [props.rest] - Additional props spread to the button element.
+ *
+ * @returns {JSX.Element} The rendered Button component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/button
+ */
+declare const Button: FC$1<ILibButton>;
+
+/**
+ * ButtonIcon component for displaying an icon button with optional tooltip and loading states.
+ *
+ * @component
+ *
+ * @example
+ * <ButtonIcon
+ *   icon={<BiUser />}
+ *   color="primary"
+ *   variant="plain"
+ *   tooltip="User profile"
+ *   showTooltip
+ * />
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the button.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
+ * @prop {React.ReactNode} [props.icon] - Icon element to display inside the button.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
+ * @prop {string} [props.borderRadius="full"] - Border radius of the button.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Button variant style.
+ * @prop {boolean} [props.isLoading] - Whether the button is in a loading state.
+ * @prop {1 | 2 | 3} [props.loaderVariant=1] - Loader variant to display when loading.
+ * @prop {string} [props.loaderClasses] - Additional CSS classes for the loader.
+ * @prop {string} [props.tooltip] - Tooltip text to display.
+ * @prop {boolean | object} [props.showTooltip] - Whether to show tooltip or tooltip configuration object.
+ * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the container.
+ * @prop {string} [props.containerClasses] - Additional CSS classes for the container.
+ * @prop {string} [props.aria-label] - ARIA label for accessibility, defaults to tooltip value.
+ * @prop {string} [props.type="button"] - Button type attribute.
+ * @prop {any} [props.rest] - Additional props spread to the button element.
+ *
+ * @returns {JSX.Element} The rendered ButtonIcon component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/button-icon
+ */
+declare const ButtonIcon: FC$1<ILibButtonIcon>;
+
+/**
+ * ButtonGroup component for displaying a group of related buttons with consistent styling and optional separators.
+ *
+ * @component
+ *
+ * @example
+ * <ButtonGroup
+ *   buttons={[
+ *     { id: "1", buttonContent: "Save" },
+ *     { id: "2", buttonContent: "Cancel" }
+ *   ]}
+ *   variant="plain"
+ *   color="primary"
+ * />
+ *
+ * @extends ILibFlexbox
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the button group.
+ * @prop {React.ComponentType} [props.element=Flexbox] - The component to render as the container element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the button group element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the button group when not using buttons prop.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the button group.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Visual variant style of the button group.
+ * @prop {string} [props.borderRadius="md"] - Border radius of the button group container.
+ * @prop {"default" | "small"} [props.size="default"] - Size of the buttons in the group.
+ * @prop {Array<LibButtonGroupButtonItem>} [props.buttons] - Array of button items to render in the group.
+ * @prop {any} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {JSX.Element} The rendered ButtonGroup component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/button-group
+ */
+declare const ButtonGroup: FC$1<ILibButtonGroup>;
+
+/**
+ * Tag component for displaying labeled content with customizable colors, variants, and styling options.
+ *
+ * @component
+ *
+ * @example
+ * <Tag color="primary" variant="plain">
+ *   New Feature
+ * </Tag>
+ * <Tag color="success" variant="outline" borderRadius="md">
+ *   Approved
+ * </Tag>
+ *
+ * @extends HTMLSpanElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tag container.
+ * @prop {React.ElementType} [props.element="span"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the tag element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the tag.
+ * @prop {LibAllColors} [props.color="primary"] - Background or border color of the tag.
+ * @prop {LibAllColors} [props.contentColor] - Text color of the tag content.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="full"] - Border radius size of the tag.
+ * @prop {"plain" | "outline"} [props.variant="plain"] - Visual style variant of the tag.
+ *
+ * @returns {JSX.Element} The rendered Tag component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tag
+ */
+declare const Tag: FC$1<ILibTag>;
+
+/**
+ * InputContainer component for wrapping input elements with labels, helper text, validation messages, and character counters.
+ *
+ * @component
+ *
+ * @example
+ * <InputContainer
+ *   label="Email"
+ *   helper="Enter your email address"
+ *   validation={{ status: true, message: "Valid email" }}
+ * >
+ *   <input type="email" />
+ * </InputContainer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the container.
+ * @prop {React.ComponentType | string} [props.element="div"] - The HTML element or component to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the container element.
+ * @prop {React.ReactNode} [props.children] - Input elements or other content to display inside the container.
+ * @prop {string} [props.label] - Label text to display above the input.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label in gray italic text.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the container.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object with status, message, and custom icons.
+ * @prop {string | number} [props.value] - Current value for character counter calculation.
+ * @prop {boolean | object} [props.counter] - Whether to show character counter or counter configuration.
+ * @prop {number} [props.maxLength] - Maximum character length for counter display.
+ * @prop {boolean} [props.hasListOpen] - Whether a dropdown list is open (adds z-index styling).
+ * @prop {string} [props.id] - Unique identifier to associate label with input element.
+ * @prop {any} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {JSX.Element} The rendered InputContainer component or just children if no wrapper content is needed.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input
+ */
+declare const InputContainer: FC$1<ILibInputContainer>;
+
+/**
+ * Input component with multiple types and variants for form data collection.
+ *
+ * @component
+ *
+ * @example
+ * <Input type="text" label="Name" placeholder="Enter your name" />
+ * <Input type="email" label="Email" validation={{ status: true }} />
+ * <Input type="select" label="Country">
+ *   <option value="us">United States</option>
+ *   <option value="ca">Canada</option>
+ * </Input>
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {string} [props.label] - Label text to display above the input.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the input.
+ * @prop {"color" | "date" | "datetime-local" | "month" | "week" | "file" | "password" | "search" | "email" | "number" | "tel" | "text" | "url" | "time" | "select" | "textarea"} [props.type="text"] - Type of input to render.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {string | number} [props.value] - Current value of the input.
+ * @prop {boolean | object} [props.counter] - Whether to show character counter or counter configuration.
+ * @prop {number} [props.maxLength] - Maximum number of characters allowed.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input.
+ * @prop {React.ReactNode} [props.icon] - Icon element to display inside the input.
+ * @prop {string} [props.placeholder] - Placeholder text for the input.
+ * @prop {boolean} [props.disabled] - Whether the input is disabled.
+ * @prop {React.ReactNode} [props.children] - Child elements for select and textarea types.
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered Input component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input
+ */
+declare const Input: FC$1<ILibInput>;
+
+/**
+ * InputImage component for uploading and displaying image files with hover interactions and validation states.
+ *
+ * @component
+ *
+ * @example
+ * <InputImage
+ *   id="profile-image"
+ *   label="Profile Picture"
+ *   value={imageUrl}
+ *   icons={{ upload: <BiUpload />, edit: <BiEdit /> }}
+ * />
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input image container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the label element.
+ * @prop {string} [props.label] - Label text to display above the input.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the input.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {string} [props.value] - Current image URL or base64 string value.
+ * @prop {object} [props.icons] - Icon configuration object for upload and edit states.
+ * @prop {"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"} [props.borderRadius="md"] - Border radius of the image container.
+ * @prop {boolean} [props.disabled] - Whether the input is disabled.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {any} [props.rest] - Additional props spread to the file input element.
+ *
+ * @returns {JSX.Element} The rendered InputImage component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-image
+ */
+declare const InputImage: FC$1<ILibInputImage>;
+
+/**
+ * InputCheck component for creating interactive checkbox, radio, and toggle inputs with multiple visual variants.
+ *
+ * @component
+ *
+ * @example
+ * <InputCheck id="terms" type="checkbox">
+ *   I agree to the terms and conditions
+ * </InputCheck>
+ * <InputCheck id="newsletter" type="checkbox" variant="tile">
+ *   Subscribe to newsletter
+ * </InputCheck>
+ * <InputCheck id="notifications" variant="toggle">
+ *   Enable notifications
+ * </InputCheck>
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input check container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the label element.
+ * @prop {React.ReactNode} [props.children] - Content to display next to the input check.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {"checkbox" | "radio"} [props.type="checkbox"] - Type of input check to render.
+ * @prop {React.ReactElement} [props.iconCheck=<BiCheck size={16} />] - Icon element to display in checkbox variant.
+ * @prop {"tile" | "toggle" | "selector"} [props.variant] - Visual variant style of the input check.
+ * @prop {boolean} [props.validation] - Validation state for error styling.
+ * @prop {boolean} [props.disabled] - Whether the input check is disabled.
+ * @prop {boolean} [props.checked] - Whether the input check is checked (controlled).
+ * @prop {boolean} [props.defaultChecked] - Whether the input check is initially checked (uncontrolled).
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered InputCheck component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-check
+ */
+declare const InputCheck: FC$1<ILibInputCheck>;
+
+/**
+ * InputPhone component for phone number input with country selection dropdown and search functionality.
+ *
+ * @component
+ *
+ * @example
+ * <InputPhone
+ *   id="phone"
+ *   label="Phone Number"
+ *   selectedCountry={selectedCountry}
+ *   setSelectedCountry={setSelectedCountry}
+ *   defaultCountry="us"
+ * />
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input phone container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
+ * @prop {object} [props.selectedCountry] - Currently selected country object with code, name, flag, and dial_code.
+ * @prop {function} [props.setSelectedCountry] - Function to update the selected country state.
+ * @prop {string} [props.defaultCountry="fr"] - Default country code to display when no country is selected.
+ * @prop {object} [props.icons] - Icon configuration object for customizing dropdown caret icon.
+ * @prop {string} [props.searchPlaceholder="Search country..."] - Placeholder text for the country search input.
+ * @prop {"up" | "down"} [props.listDirection="down"] - Direction for the dropdown list to appear.
+ * @prop {string} [props.countryButtonAriaLabel="Select country"] - Aria label for the country selection button.
+ * @prop {string} [props.textNoResult="Your search did not return any result."] - Text to display when no search results are found.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {string} [props.label] - Label text to display above the input.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the input.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input.
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered InputPhone component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-phone
+ */
+declare const InputPhone: FC$1<ILibInputPhone>;
+
+/**
+ * InputCounter component for numeric input with increment/decrement buttons and optional display-only mode.
+ *
+ * @component
+ *
+ * @example
+ * <InputCounter
+ *   value={count}
+ *   setValue={setCount}
+ *   min={0}
+ *   max={10}
+ *   label="Quantity"
+ * />
+ * <InputCounter
+ *   value={amount}
+ *   setValue={setAmount}
+ *   noInput
+ *   buttonsColor="secondary"
+ * />
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the counter container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input or span element.
+ * @prop {number} [props.value] - Current numeric value of the counter.
+ * @prop {function} [props.setValue] - Function to update the counter value.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.buttonVariant] - Visual variant style of the increment/decrement buttons.
+ * @prop {object} [props.icons] - Icon configuration object with minus and plus icons.
+ * @prop {object} [props.labelButtons] - Aria labels and tooltip text for the buttons.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"} [props.buttonsColor="primary"] - Color theme of the increment/decrement buttons.
+ * @prop {boolean} [props.showButtonsTooltip] - Whether to show tooltips on button hover.
+ * @prop {boolean} [props.noInput] - Whether to display value as text instead of editable input.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input field.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input field.
+ * @prop {string} [props.label] - Label text to display above the counter.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the counter.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {number} [props.min=1] - Minimum allowed value for the counter.
+ * @prop {number} [props.max=100] - Maximum allowed value for the counter.
+ * @prop {number} [props.step=1] - Increment/decrement step value.
+ * @prop {any} [props.rest] - Additional props spread to the input or span element.
+ *
+ * @returns {JSX.Element} The rendered InputCounter component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-counter
+ */
+declare const InputCounter: FC$1<ILibInputCounter>;
+
+/**
+ * InputSlider component for creating range input sliders with customizable appearance, tooltips, and min/max value display.
+ *
+ * @component
+ *
+ * @example
+ * <InputSlider
+ *   value={50}
+ *   min={0}
+ *   max={100}
+ *   label="Volume"
+ *   showValue="hover"
+ *   showMinMax
+ * />
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the slider container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
+ * @prop {string} [props.label] - Label text to display above the slider.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the slider.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {boolean} [props.showMinMax] - Whether to display min and max values on the sides of the slider.
+ * @prop {"never" | "always" | "hover"} [props.showValue="never"] - When to show the current value tooltip.
+ * @prop {number} [props.min=0] - Minimum value for the slider range.
+ * @prop {number} [props.max=100] - Maximum value for the slider range.
+ * @prop {number} [props.value] - Current value of the slider.
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered InputSlider component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-slider
+ */
+declare const InputSlider: FC$1<ILibInputSlider>;
+
+/**
+ * Select component for creating dropdown selection inputs with keyboard navigation, validation states, and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <Select
+ *   value={selectedValue}
+ *   setValue={setSelectedValue}
+ *   options={["Option 1", "Option 2", "Option 3"]}
+ *   label="Choose an option"
+ *   placeholder="Select..."
+ * />
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
+ * @prop {string} [props.value] - Currently selected value.
+ * @prop {function} [props.setValue] - Function to update the selected value.
+ * @prop {string[]} [props.options] - Array of options to display in the dropdown.
+ * @prop {"up" | "down"} [props.listDirection] - Direction for the dropdown list to appear.
+ * @prop {object} [props.icons] - Icon configuration object with left icon and caret icon.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the select input.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the select input.
+ * @prop {string} [props.label] - Label text to display above the select.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the select.
+ * @prop {string} [props.id] - Unique identifier for the select element.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {boolean} [props.disabled] - Whether the select is disabled.
+ * @prop {any} [props.rest] - Additional props spread to the button element.
+ *
+ * @returns {JSX.Element} The rendered Select component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/select
+ */
+declare const Select: FC$1<ILibSelect>;
+
+/**
+ * Autocomplete component for text input with fuzzy search functionality, keyboard navigation, and customizable dropdown results.
+ *
+ * @component
+ *
+ * @example
+ * <Autocomplete
+ *   value={searchValue}
+ *   setValue={setSearchValue}
+ *   listResults={["React", "Vue", "Angular", "Svelte"]}
+ *   label="Framework"
+ *   placeholder="Search frameworks..."
+ *   focusKeys={["cmd+k"]}
+ * />
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the autocomplete container.
+ * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
+ * @prop {string} [props.label] - Label text to display above the autocomplete.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the autocomplete.
+ * @prop {string} [props.value] - Current input value for searching.
+ * @prop {function} [props.setValue] - Function to update the input value.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input field.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input field.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {string[]} [props.listResults] - Array of items to search through and display as results.
+ * @prop {"up" | "down"} [props.listDirection] - Direction for the dropdown results to appear.
+ * @prop {object} [props.fuzzyOptions={}] - Configuration options for Fuse.js fuzzy search.
+ * @prop {object} [props.icons] - Icon configuration object with left icon and clear icon.
+ * @prop {string[]} [props.focusKeys=[""]] - Array of keyboard shortcuts to focus the input.
+ * @prop {boolean} [props.showKeys] - Whether to display the keyboard shortcut keys.
+ * @prop {string} [props.textNoResult="No result."] - Text to display when no search results are found.
+ * @prop {boolean} [props.disabled] - Whether the autocomplete is disabled.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered Autocomplete component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/autocomplete
+ */
+declare const Autocomplete: FC$1<ILibAutocomplete>;
+
+/**
+ * Rating component for displaying and selecting star ratings with customizable icons, read-only mode, and validation states.
+ *
+ * @component
+ *
+ * @example
+ * <Rating
+ *   rating={3}
+ *   setRating={setRating}
+ *   label="Rate this product"
+ * />
+ * <Rating
+ *   rating={4}
+ *   readOnly
+ *   icons={{ default: <BiHeart />, checked: <BiSolidHeart /> }}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the rating container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the rating container div element.
+ * @prop {number} [props.rating] - Current rating value (1-5 stars).
+ * @prop {function} [props.setRating] - Function to update the rating value when not in read-only mode.
+ * @prop {object} [props.icons] - Icon configuration object with default and checked icon variants.
+ * @prop {boolean} [props.readOnly] - Whether the rating is in read-only mode (no interaction).
+ * @prop {string} [props.label] - Label text to display above the rating.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the rating.
+ * @prop {string} [props.id] - Unique identifier for the rating element.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {any} [props.rest] - Additional props spread to the rating container.
+ *
+ * @returns {JSX.Element} The rendered Rating component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/rating
+ */
+declare const Rating: FC$1<ILibRating>;
+
+/**
+ * InputPin component for creating PIN code or verification code inputs with multiple individual input fields.
+ *
+ * @component
+ *
+ * @example
+ * <InputPin
+ *   values={{ pin1: "", pin2: "", pin3: "", pin4: "" }}
+ *   setValues={setValues}
+ *   label="Enter PIN Code"
+ *   hideValues
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the pin input container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the pin input container div element.
+ * @prop {string} [props.label] - Label text to display above the pin inputs.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the pin inputs.
+ * @prop {string} [props.id] - Unique identifier for the pin input container.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {object} [props.values] - Object containing the current values for each pin input field.
+ * @prop {function} [props.setValues] - Function to update the pin input values.
+ * @prop {string[]} [props.placeholders] - Array of placeholder texts for each pin input field.
+ * @prop {boolean} [props.hideValues] - Whether to hide the input values (password mode).
+ * @prop {boolean} [props.disabled] - Whether the pin inputs are disabled.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input fields.
+ * @prop {any} [props.rest] - Additional props spread to the pin input container.
+ *
+ * @returns {JSX.Element} The rendered InputPin component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-pin
+ */
+declare const InputPin: FC$1<ILibInputPin>;
+
+/**
+ * Fieldset component for grouping related form controls with a legend, validation states, and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <Fieldset
+ *   legend="Personal Information"
+ *   label="User Details"
+ *   borderRadius="lg"
+ * >
+ *   <Input label="First Name" />
+ *   <Input label="Last Name" />
+ *   <Input label="Email" />
+ * </Fieldset>
+ *
+ * @extends HTMLFieldSetElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the fieldset container.
+ * @prop {React.Ref<HTMLFieldSetElement>} [props.ref] - Ref to the fieldset element.
+ * @prop {React.ReactNode} [props.children] - Form controls and content to display inside the fieldset.
+ * @prop {string} [props.label] - Label text to display above the fieldset.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the fieldset.
+ * @prop {string} [props.id] - Unique identifier for the fieldset element.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {string} [props.legend] - Legend text to display as the fieldset title.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="md"] - Border radius size for the fieldset.
+ * @prop {any} [props.rest] - Additional props spread to the fieldset element.
+ *
+ * @returns {JSX.Element} The rendered Fieldset component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/fieldset
+ */
+declare const Fieldset: FC$1<ILibFieldset>;
+
+/**
+ * Form component for creating forms with built-in submit and secondary action buttons, loading states, and validation support.
+ *
+ * @component
+ *
+ * @example
+ * <Form
+ *   buttonPrimary="Submit"
+ *   buttonSecondary={{ content: "Cancel", onClick: handleCancel }}
+ *   isLoading={isSubmitting}
+ *   disabled={!isValid}
+ * >
+ *   <Input label="Name" value={name} setValue={setName} />
+ *   <Input label="Email" value={email} setValue={setEmail} />
+ * </Form>
+ *
+ * @extends HTMLFormElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the form container.
+ * @prop {React.Ref<HTMLFormElement>} [props.ref] - Ref to the form element.
+ * @prop {React.ReactNode} [props.children] - Form fields and content to display inside the form.
+ * @prop {boolean} [props.isLoading] - Whether the form is in a loading state (shows loader on primary button).
+ * @prop {boolean} [props.disabled] - Whether the form and its primary button are disabled.
+ * @prop {string} [props.buttonPrimary] - Text content for the primary submit button.
+ * @prop {object} [props.buttonSecondary] - Configuration object for the secondary button with content and additional props.
+ * @prop {1 | 2 | 3} [props.loaderVariant] - Type of loader animation to display on the primary button when loading.
+ * @prop {any} [props.rest] - Additional props spread to the form element.
+ *
+ * @returns {JSX.Element} The rendered Form component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/form
+ */
+declare const Form: FC$1<ILibForm>;
+
+/**
+ * ListGroup component for displaying a structured list of items with optional title, numbering, and separators.
+ *
+ * @component
+ *
+ * @example
+ * <ListGroup
+ *   title="My List"
+ *   items={[
+ *     { title: "Item 1", body: "Description 1" },
+ *     { title: "Item 2", body: "Description 2" }
+ *   ]}
+ *   showNumbers
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the list group container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the list group container element.
+ * @prop {React.ReactNode} [props.children] - Child components to render inside the list group.
+ * @prop {string | object} [props.title] - Title text or configuration object for the list group header.
+ * @prop {boolean} [props.noSeparator] - Whether to hide separators between list items.
+ * @prop {boolean} [props.showNumbers] - Whether to display numbers next to each list item.
+ * @prop {Array} [props.items] - Array of item objects to render as list items.
+ *
+ * @returns {JSX.Element} The rendered ListGroup component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/list-group
+ */
+declare const ListGroup: FC$1<ILibListGroup>;
+
+/**
+ * ListGroupTitle component for rendering a styled header/title for list groups with optional fixed positioning and shadow effects.
+ *
+ * @component
+ *
+ * @example
+ * <ListGroupTitle
+ *   isFixed
+ *   shadow="lg"
+ *   listRef={listRef}
+ * >
+ *   My List Title
+ * </ListGroupTitle>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the title container.
+ * @prop {React.ElementType} [props.element=Text] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the title element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the title.
+ * @prop {boolean} [props.isFixed] - Whether the title should be sticky positioned at the top.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none"} [props.shadow] - Shadow variant to apply when scrolled.
+ * @prop {React.RefObject} [props.listRef] - Ref to the scrollable list container for scroll detection.
+ * @prop {boolean} [props.noSeparator] - Whether to hide the bottom border separator.
+ *
+ * @returns {JSX.Element} The rendered ListGroupTitle component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/list-group
+ */
+declare const ListGroupTitle: FC$1<ILibListGroupTitle>;
+
+/**
+ * ListGroupItem component for rendering individual items within a list group with optional numbering, content, and separators.
+ *
+ * @component
+ *
+ * @example
+ * <ListGroupItem
+ *   title="Item Title"
+ *   body="Item description"
+ *   number={1}
+ *   contentRight={<Button>Action</Button>}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the list item container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the list item container element.
+ * @prop {React.ReactNode} [props.children] - Child components to render inside the list item.
+ * @prop {string} [props.title] - Title text to display for the list item.
+ * @prop {string} [props.body] - Body text or description to display below the title.
+ * @prop {React.ReactNode} [props.contentRight] - Content to display on the right side of the list item.
+ * @prop {boolean} [props.noSeparator] - Whether to hide the separator border between list items.
+ * @prop {number} [props.number] - Number to display before the title when using numbered lists.
+ *
+ * @returns {JSX.Element} The rendered ListGroupItem component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/list-group
+ */
+declare const ListGroupItem: FC$1<ILibListGroupItem>;
+
+/**
+ * Breadcrumbs component for displaying navigational breadcrumb trails with customizable separators and flexible content.
+ *
+ * @component
+ *
+ * @example
+ * <Breadcrumbs separator=">">
+ *   <Link to="/">Home</Link>
+ *   <Link to="/products">Products</Link>
+ *   <Text>Current Page</Text>
+ * </Breadcrumbs>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the breadcrumbs container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the breadcrumbs container element.
+ * @prop {React.ReactNode} [props.children] - Navigation items to display in the breadcrumb trail.
+ * @prop {string | React.ReactNode} [props.separator="/"] - Separator to display between breadcrumb items.
+ * @prop {any} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/breadcrumbs
+ */
+declare const Breadcrumbs: FC$1<ILibBreadcrumbs>;
+
+/**
+ * Accordion component for creating collapsible content sections with customizable styling and expandable items.
+ *
+ * @component
+ *
+ * @example
+ * <Accordion
+ *   variant="rounded"
+ *   icon="plus"
+ *   items={[
+ *     { title: "Section 1", content: <p>Content 1</p>, defaultOpen: true },
+ *     { title: "Section 2", content: <p>Content 2</p> }
+ *   ]}
+ * />
+ *
+ * @extends ILibAccordion
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the accordion container.
+ * @prop {React.ReactNode} [props.children] - Child AccordionItem components to render when not using items prop.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the accordion container element.
+ * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion.
+ * @prop {"plus" | "chevron"} [props.icon="plus"] - Type of icon to display for expand/collapse indicators.
+ * @prop {Array} [props.items] - Array of accordion items with title, content, and defaultOpen properties.
+ *
+ * @returns {JSX.Element} The rendered Accordion component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/accordion
+ */
+declare const Accordion: FC$1<ILibAccordion>;
+
+/**
+ * AccordionItem component for creating individual collapsible sections with title, content, and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <AccordionItem
+ *   title="Section Title"
+ *   icon="plus"
+ *   variant="rounded"
+ *   defaultOpen={false}
+ * >
+ *   <p>This is the accordion content that can be expanded or collapsed.</p>
+ * </AccordionItem>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {React.ReactNode} [props.title] - Title content to display in the accordion header.
+ * @prop {"plus" | "chevron"} [props.icon="chevron"] - Type of icon to display for expand/collapse indicator.
+ * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion item.
+ * @prop {boolean} [props.defaultOpen=false] - Whether the accordion should be open by default.
+ *
+ * @returns {JSX.Element} The rendered AccordionItem component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/accordion
+ */
+declare const AccordionItem: FC$1<ILibAccordionItem>;
+
+/**
+ * Dropdown component for creating contextual menus and popover content with customizable positioning and animations.
+ *
+ * @component
+ *
+ * @example
+ * <Dropdown
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   direction="down"
+ *   shadow="lg"
+ *   items={[
+ *     { content: "Profile", onClick: handleProfile },
+ *     { content: "Settings", onClick: handleSettings },
+ *     { content: "Logout", onClick: handleLogout }
+ *   ]}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the dropdown container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.ReactNode} [props.children] - Child DropdownItem components to render when not using items prop.
+ * @prop {boolean} [props.isOpen] - Whether the dropdown is currently visible.
+ * @prop {function} [props.setIsOpen] - Function to control the dropdown open/closed state.
+ * @prop {"up" | "down"} [props.direction="down"] - Direction for the dropdown to appear relative to its trigger.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none"} [props.shadow] - Shadow variant to apply when dropdown is open.
+ * @prop {Array} [props.items] - Array of dropdown item objects with content and click handlers.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="md"] - Border radius size for the dropdown container.
+ *
+ * @returns {JSX.Element} The rendered Dropdown component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/dropdown
+ */
+declare const Dropdown: FC$1<ILibDropdown>;
+
+/**
+ * DropdownItem component for rendering individual items within dropdown menus with hover states and customizable content.
+ *
+ * @component
+ *
+ * @example
+ * <DropdownItem onClick={handleClick}>
+ *   Menu Item
+ * </DropdownItem>
+ * <DropdownItem element="a" href="/profile">
+ *   Profile
+ * </DropdownItem>
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the dropdown item.
+ * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the item container.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the dropdown item.
+ *
+ * @returns {JSX.Element} The rendered DropdownItem component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/dropdown
+ */
+declare const DropdownItem: FC$1<ILibDropdownItem>;
+
+/**
+ * Toast component for displaying temporary notification messages with different status types and optional close functionality.
+ *
+ * @component
+ *
+ * @example
+ * <Toast
+ *   title="Success!"
+ *   body="Your changes have been saved."
+ *   status="success"
+ *   closeToast={handleClose}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the toast container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the toast element.
+ * @prop {React.ReactNode} [props.body] - Body content to display below the title.
+ * @prop {React.ReactNode} [props.title] - Title content to display in the toast header.
+ * @prop {"success" | "error" | "warning" | "info" | "loading"} [props.status="success"] - Status type that determines the toast appearance and behavior.
+ * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the toast.
+ * @prop {function} [props.closeToast] - Function to call when the close button is clicked.
+ * @prop {React.ReactElement} [props.iconClose] - Custom icon for the close button.
+ * @prop {1 | 2 | 3} [props.loaderVariant] - Variant of the loader shown when status is "loading".
+ *
+ * @returns {JSX.Element} The rendered Toast component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/toast
+ */
+declare const Toast: FC$1<ILibToast>;
+
+/**
+ * ToastContainer component for managing and displaying toast notifications with customizable positioning and behavior.
+ *
+ * @component
+ *
+ * @example
+ * <ToastContainer
+ *   position="top-right"
+ *   autoClose={5000}
+ *   hideProgressBar={false}
+ * />
+ *
+ * @extends ToastContainerProps from "react-toastify"
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the toast container.
+ * @prop {"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"} [props.position="bottom-right"] - Position where toasts will appear on the screen.
+ * @prop {number | false} [props.autoClose] - Time in milliseconds before toasts auto-close, or false to disable.
+ * @prop {boolean} [props.hideProgressBar] - Whether to hide the progress bar on toasts.
+ * @prop {boolean} [props.newestOnTop] - Whether to display newest toasts at the top.
+ * @prop {boolean} [props.closeOnClick] - Whether toasts close when clicked.
+ * @prop {boolean} [props.rtl] - Whether to use right-to-left layout.
+ * @prop {boolean} [props.pauseOnFocusLoss] - Whether to pause toast timers when window loses focus.
+ * @prop {boolean} [props.draggable] - Whether toasts can be dragged to dismiss.
+ * @prop {boolean} [props.pauseOnHover] - Whether to pause toast timers on hover.
+ * @prop {"default" | "colored" | "dark"} [props.theme] - Visual theme for the toast container.
+ * @prop {number} [props.limit] - Maximum number of toasts to display at once.
+ *
+ * @returns {JSX.Element} The rendered ToastContainer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/toast
+ */
+declare const ToastContainer: FC$1<ToastContainerProps>;
+
+/**
+ * Toast utility functions for displaying different types of notification messages with customizable options and automatic styling.
+ *
+ * @namespace toast
+ *
+ * @example
+ * // Success toast
+ * toast.success("Operation completed!", {
+ *   body: "Your changes have been saved.",
+ *   duration: 5000
+ * })
+ *
+ * // Error toast
+ * toast.error("Something went wrong!", {
+ *   body: "Please try again later."
+ * })
+ *
+ * // Close all toasts
+ * toast.close()
+ *
+ * @prop {function} success - Display a success toast notification with green styling.
+ * @prop {function} error - Display an error toast notification with red styling.
+ * @prop {function} warning - Display a warning toast notification with yellow styling.
+ * @prop {function} info - Display an info toast notification with blue styling.
+ * @prop {function} loading - Display a loading toast notification with gray styling.
+ * @prop {function} close - Close/dismiss all active toast notifications.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/toast
+ */
+declare const toast: {
+    success: (title: string, options?: Omit<ILibToast, "status" | "closeToast" | "title"> & Omit<ToastOptions, "icon" | "closeButton" | "style" | "autoClose" | "className" | "progressClassName"> & {
+        duration?: number;
+        iconClose?: ReactElement;
+    }) => react_toastify.Id;
+    error: (title: string, options?: Omit<ILibToast, "status" | "closeToast" | "title"> & Omit<ToastOptions, "icon" | "closeButton" | "style" | "autoClose" | "className" | "progressClassName"> & {
+        duration?: number;
+        iconClose?: ReactElement;
+    }) => react_toastify.Id;
+    warning: (title: string, options?: Omit<ILibToast, "status" | "closeToast" | "title"> & Omit<ToastOptions, "icon" | "closeButton" | "style" | "autoClose" | "className" | "progressClassName"> & {
+        duration?: number;
+        iconClose?: ReactElement;
+    }) => react_toastify.Id;
+    info: (title: string, options?: Omit<ILibToast, "status" | "closeToast" | "title"> & Omit<ToastOptions, "icon" | "closeButton" | "style" | "autoClose" | "className" | "progressClassName"> & {
+        duration?: number;
+        iconClose?: ReactElement;
+    }) => react_toastify.Id;
+    loading: (title: string, options?: Omit<ILibToast, "status" | "closeToast" | "title"> & Omit<ToastOptions, "icon" | "closeButton" | "style" | "autoClose" | "className" | "progressClassName"> & {
+        duration?: number;
+        iconClose?: ReactElement;
+        loaderVariant?: LibLoaderVariant;
+    }) => react_toastify.Id;
+    close: () => void;
+};
+
+/**
+ * Alert component for displaying informational messages with customizable colors and styling.
+ *
+ * @component
+ *
+ * @example
+ * <Alert color="success">
+ *   Operation completed successfully!
+ * </Alert>
+ * <Alert color="danger">
+ *   <Text>Error occurred</Text>
+ *   <Text>Please try again</Text>
+ * </Alert>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the alert container.
+ * @prop {React.ElementType} [props.element=typeof children === "string" ? Text : "div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the alert element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the alert.
+ * @prop {LibAllColors} [props.color="primary"] - Color theme for the alert background and border.
+ *
+ * @returns {JSX.Element} The rendered Alert component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/alert
+ */
+declare const Alert: FC$1<ILibAlert>;
+
+/**
+ * Modal component for displaying overlay content with backdrop, close functionality, and keyboard navigation support.
+ *
+ * @component
+ *
+ * @example
+ * <Modal
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   labelClose="Close dialog"
+ * >
+ *   <div className="bg-white p-6 rounded-lg">
+ *     <h2>Modal Content</h2>
+ *     <p>This is a modal dialog.</p>
+ *   </div>
+ * </Modal>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the modal container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the modal element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the modal.
+ * @prop {boolean} [props.isOpen] - Whether the modal is currently visible.
+ * @prop {function} [props.setIsOpen] - Function to control the modal open/closed state.
+ * @prop {boolean} [props.disableEsc] - Whether to disable closing the modal with the Escape key.
+ * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the modal.
+ * @prop {React.ReactNode} [props.closeIcon=<BiX size={32} />] - Custom close icon for the modal.
+ * @prop {string} [props.labelClose="Close modal"] - Aria label for the close button.
+ *
+ * @returns {JSX.Element} The rendered Modal component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/modal
+ */
+declare const Modal: FC$1<ILibModal>;
+
+/**
+ * DragList component for creating draggable and reorderable lists with customizable items and separators.
+ *
+ * @component
+ *
+ * @example
+ * <DragList
+ *   items={dragItems}
+ *   setItems={setDragItems}
+ *   iconDrag={<GripVertical />}
+ *   hideSeparator={false}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the drag list container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drag list element.
+ * @prop {React.ReactNode} [props.children] - Child components to render when not using items prop.
+ * @prop {React.ReactNode} [props.iconDrag] - Icon to display as the drag handle for each item.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius] - Border radius size for the drag list container.
+ * @prop {Array} [props.items] - Array of draggable items with id, title, and body properties.
+ * @prop {function} [props.setItems] - Function to update the items array when items are reordered.
+ * @prop {boolean} [props.hideSeparator] - Whether to hide separators between draggable items.
+ *
+ * @returns {JSX.Element} The rendered DragList component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/drag-list
+ */
+declare const DragList: FC$1<ILibDragList>;
+
+/**
+ * DragListItem component for rendering individual draggable items within a drag list with drag handles and content.
+ *
+ * @component
+ *
+ * @example
+ * <DragListItem
+ *   item={{ id: "1", title: "Item Title", body: "Item description" }}
+ *   index={0}
+ *   handleDragStart={handleDragStart}
+ *   handleDragOver={handleDragOver}
+ *   iconDrag={<GripVertical />}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the drag list item.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drag list item element.
+ * @prop {React.ReactNode} [props.children] - Child components to render when not using item prop.
+ * @prop {number} [props.index] - Index position of the item in the drag list.
+ * @prop {React.ReactNode} [props.iconDrag=<BiDotsVerticalRounded size={24} />] - Icon to display as the drag handle.
+ * @prop {function} [props.handleDragStart] - Function called when drag operation starts.
+ * @prop {function} [props.handleDragOver] - Function called when dragging over this item.
+ * @prop {object} [props.item] - Item object containing id, title, and body properties.
+ * @prop {string} [props.id] - Unique identifier for the drag list item.
+ * @prop {string} [props.iconLabel="Drag"] - Aria label for the drag handle button.
+ *
+ * @returns {JSX.Element} The rendered DragListItem component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/drag-list
+ */
+declare const DragListItem: FC$1<ILibDragListItem>;
+
+/**
+ * Pagination component for navigating through multiple pages of content with customizable styling and navigation controls.
+ *
+ * @component
+ *
+ * @example
+ * <Pagination
+ *   currentPage={currentPage}
+ *   setCurrentPage={setCurrentPage}
+ *   totalPages={20}
+ *   accentColor="primary"
+ *   pageLimit={5}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the pagination container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the pagination element.
+ * @prop {React.ReactNode} [props.children] - Child components to render when not using totalPages prop.
+ * @prop {LibAllColors} [props.accentColor="primary"] - Color theme for active page and hover states.
+ * @prop {number} [props.totalPages] - Total number of pages available for navigation.
+ * @prop {object} [props.icons] - Custom icons for previous and next navigation buttons.
+ * @prop {React.ReactNode} [props.icons.prev] - Custom icon for the previous page button.
+ * @prop {React.ReactNode} [props.icons.next] - Custom icon for the next page button.
+ * @prop {number} [props.pageLimit=5] - Maximum number of page buttons to display at once.
+ * @prop {number} [props.currentPage] - Current active page number.
+ * @prop {function} [props.setCurrentPage] - Function to update the current page state.
+ *
+ * @returns {JSX.Element} The rendered Pagination component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/pagination
+ */
+declare const Pagination: FC$1<ILibPagination>;
+
+/**
+ * PaginationButton component for rendering individual page navigation buttons with active states and styling.
+ *
+ * @component
+ *
+ * @example
+ * <PaginationButton
+ *   accentColor="primary"
+ *   isActive={currentPage === 5}
+ *   onClick={() => handlePage(5)}
+ * >
+ *   5
+ * </PaginationButton>
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the pagination button.
+ * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the pagination button element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the button (usually page number).
+ * @prop {LibAllColors} [props.accentColor="primary"] - Color theme for active and hover states.
+ * @prop {boolean} [props.isActive] - Whether this button represents the current active page.
+ * @prop {boolean} [props.readOnly] - Whether the button is in read-only mode (non-interactive).
+ *
+ * @returns {JSX.Element} The rendered PaginationButton component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/pagination
+ */
+declare const PaginationButton: FC$1<ILibPaginationButton>;
+
+/**
+ * Paginator component for simple page navigation with input field and next/previous buttons.
+ *
+ * @component
+ *
+ * @example
+ * <Paginator
+ *   currentPage={currentPage}
+ *   setCurrentPage={setCurrentPage}
+ *   totalPages={20}
+ *   texts={{ page: "Page", of: "of" }}
+ *   labels={{ prev: "Previous", next: "Next" }}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the paginator container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the paginator element.
+ * @prop {number} [props.totalPages] - Total number of pages available for navigation.
+ * @prop {number} [props.currentPage] - Current active page number.
+ * @prop {function} [props.setCurrentPage] - Function to update the current page state.
+ * @prop {boolean} [props.noInput] - Whether to hide the page input field and show read-only text.
+ * @prop {object} [props.texts] - Custom text labels for page display.
+ * @prop {string} [props.texts.page="Page"] - Text label for "Page".
+ * @prop {string} [props.texts.of="of"] - Text label for "of".
+ * @prop {object} [props.icons] - Custom icons for navigation buttons.
+ * @prop {React.ReactNode} [props.icons.prev] - Custom icon for the previous page button.
+ * @prop {React.ReactNode} [props.icons.next] - Custom icon for the next page button.
+ * @prop {object} [props.labels] - Custom aria labels and tooltips for navigation buttons.
+ * @prop {string} [props.labels.prev="Previous"] - Label for the previous page button.
+ * @prop {string} [props.labels.next="Next"] - Label for the next page button.
+ * @prop {boolean} [props.hideButtonsTooltip] - Whether to hide tooltips on navigation buttons.
+ * @prop {function} [props.handlePrev] - Custom handler for previous page navigation.
+ * @prop {function} [props.handleNext] - Custom handler for next page navigation.
+ * @prop {function} [props.handlePage] - Custom handler for direct page navigation.
+ *
+ * @returns {JSX.Element} The rendered Paginator component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/paginator
+ */
+declare const Paginator: FC$1<ILibPaginator>;
+
+/**
+ * ProgressBar component for displaying progress with customizable colors and animations using a meter element.
+ *
+ * @component
+ *
+ * @example
+ * <ProgressBar
+ *   value={75}
+ *   color="primary"
+ *   max={100}
+ * />
+ *
+ * @extends HTMLMeterElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the progress bar.
+ * @prop {React.Ref<HTMLMeterElement>} [props.ref] - Ref to the progress bar element.
+ * @prop {number} [props.value] - Current progress value.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the progress bar fill.
+ * @prop {boolean} [props.noAnimation] - Whether to disable the progress animation.
+ * @prop {number} [props.min=0] - Minimum value for the progress bar.
+ * @prop {number} [props.max=100] - Maximum value for the progress bar.
+ * @prop {string} [props.id] - Unique identifier for the progress bar element.
+ *
+ * @returns {JSX.Element} The rendered ProgressBar component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/progress-bar
+ */
+declare const ProgressBar: FC$1<ILibProgressBar>;
+
+/**
+ * ProgressCircle component for displaying circular progress with customizable colors and smooth animations using SVG.
+ *
+ * @component
+ *
+ * @example
+ * <ProgressCircle
+ *   value={75}
+ *   color="primary"
+ *   size={120}
+ *   showValue
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the progress circle.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the progress circle element.
+ * @prop {number} [props.value] - Current progress value (0-100).
+ * @prop {number} [props.size=48] - Size of the progress circle in pixels.
+ * @prop {number} [props.strokeWidth=4] - Width of the progress stroke.
+ * @prop {boolean} [props.noAnimation] - Whether to disable the progress animation.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the progress circle stroke.
+ * @prop {boolean} [props.showValue] - Whether to display the percentage value in the center.
+ * @prop {React.ReactNode} [props.icon] - Custom icon to display in the center instead of value.
+ *
+ * @returns {JSX.Element} The rendered ProgressCircle component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/progress-circle
+ */
+declare const ProgressCircle: FC$1<ILibProgressCircle>;
+
+/**
+ * Tabs component for creating tabbed interfaces with automatic state management and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * const tabItems = [
+ *   { title: "Tab 1", content: "Content for tab 1" },
+ *   { title: "Tab 2", content: "Content for tab 2" },
+ *   { title: "Tab 3", content: "Content for tab 3" }
+ * ]
+ *
+ * <Tabs
+ *   items={tabItems}
+ *   justify="stretch"
+ *   variant="rounded"
+ *   activeTab={0}
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tabs container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs container element.
+ * @prop {Array<LibTabItem>} [props.items] - Array of tab items containing title and content for each tab.
+ * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning tabs within their container.
+ * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab buttons.
+ * @prop {number} [props.activeTab=0] - Index of the initially active tab.
+ *
+ * @returns {JSX.Element} The rendered Tabs component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tabs
+ */
+declare const Tabs: FC$1<ILibTabs>;
+
+/**
+ * TabsContainer component for wrapping tab navigation and content panels with customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <TabsContainer>
+ *   <TabsButtonsContainer>
+ *     <TabsButton>Tab 1</TabsButton>
+ *     <TabsButton>Tab 2</TabsButton>
+ *   </TabsButtonsContainer>
+ *   <TabsContent>Content 1</TabsContent>
+ *   <TabsContent>Content 2</TabsContent>
+ * </TabsContainer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tabs container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs container element.
+ * @prop {React.ReactNode} [props.children] - Child components (typically TabsNav and TabsContent).
+ *
+ * @returns {JSX.Element} The rendered TabsContainer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tabs
+ */
+declare const TabsContainer: FC$1<ILibTabsContainer>;
+
+/**
+ * TabsButtonsContainer component for wrapping tab navigation buttons with customizable layout and styling.
+ *
+ * @component
+ *
+ * @example
+ * <TabsButtonsContainer justify="stretch" variant="rounded">
+ *   <TabsButton>Tab 1</TabsButton>
+ *   <TabsButton>Tab 2</TabsButton>
+ *   <TabsButton>Tab 3</TabsButton>
+ * </TabsButtonsContainer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tabs buttons container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs buttons container element.
+ * @prop {React.ReactNode} [props.children] - Child components (typically TabsButton components).
+ * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning tabs within their container.
+ * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab buttons.
+ *
+ * @returns {JSX.Element} The rendered TabsButtonsContainer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tabs
+ */
+declare const TabsButtonsContainer: FC$1<ILibTabsButtonsContainer>;
+
+/**
+ * TabsButton component for individual tab navigation buttons with active states and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <TabsButton
+ *   isActive={activeTab === 'tab1'}
+ *   onClick={() => setActiveTab('tab1')}
+ *   variant="rounded"
+ * >
+ *   Tab 1
+ * </TabsButton>
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tab button.
+ * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the tab button element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the tab button.
+ * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning the button content.
+ * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab button.
+ * @prop {boolean} [props.isActive] - Whether this tab button is currently active/selected.
+ * @prop {function} [props.onClick] - Click handler function for tab selection.
+ *
+ * @returns {JSX.Element} The rendered TabsButton component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tabs
+ */
+declare const TabsButton: FC$1<ILibTabsButton>;
+
+/**
+ * TabsContent component for displaying individual tab panel content with conditional rendering based on active state.
+ *
+ * @component
+ *
+ * @example
+ * <TabsContent isActive={activeTab === 'tab1'}>
+ *   <h3>Tab 1 Content</h3>
+ *   <p>This is the content for the first tab.</p>
+ * </TabsContent>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tab content container.
+ * @prop {React.ElementType} [props.element] - HTML element type to render as the container. Defaults to Text if children is string, otherwise "div".
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tab content element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the tab panel.
+ * @prop {boolean} [props.isActive] - Whether this tab content is currently active/visible.
+ *
+ * @returns {JSX.Element} The rendered TabsContent component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tabs
+ */
+declare const TabsContent: FC$1<ILibTabContent>;
+
+/**
+ * Slideshow component for displaying images or content with navigation controls, pagination, and touch/swipe support.
+ *
+ * @component
+ *
+ * @example
+ * <Slideshow
+ *   images={["image1.jpg", "image2.jpg", "image3.jpg"]}
+ *   controls={{ prev: <BiChevronLeft />, next: <BiChevronRight /> }}
+ *   pagination={{ type: "dots", position: "outside" }}
+ *   options={{ autoPlay: 3000, speed: 500 }}
+ *   imgFit="cover"
+ *   borderRadius="md"
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the slideshow container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the slideshow element.
+ * @prop {React.ReactNode} [props.children] - Child components to display as slides when not using images prop.
+ * @prop {"cover" | "contain" | "fill"} [props.imgFit="cover"] - Object fit property for images in the slideshow.
+ * @prop {object} [props.controls] - Configuration object for navigation control buttons.
+ * @prop {boolean} [props.hideControls=false] - Whether to hide the navigation control buttons.
+ * @prop {ILibPaginationOptions} [props.options] - Configuration options for autoplay timing and transition speed.
+ * @prop {string[]} [props.images] - Array of image URLs to display in the slideshow.
+ * @prop {object} [props.pagination] - Configuration object for pagination indicators and behavior.
+ * @prop {boolean} [props.hidePagination] - Whether to hide the pagination indicators.
+ * @prop {LibBorderRadius} [props.borderRadius] - Border radius variant for the slideshow container.
+ *
+ * @returns {JSX.Element} The rendered Slideshow component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/slideshow
+ */
+declare const Slideshow: FC$1<ILibSlideshow>;
+
+/**
+ * Cover component for creating full-screen layouts with background images, overlays, and content positioning.
+ *
+ * @component
+ *
+ * @example
+ * <Cover
+ *   img="/images/hero-bg.jpg"
+ *   alt="Hero background"
+ *   overlay="gradient-black"
+ *   alignItems="center"
+ *   justifyContent="center"
+ * >
+ *   <Text tag="h1" display className="text-white">
+ *     Welcome to our site
+ *   </Text>
+ * </Cover>
+ *
+ * @extends ILibFlexbox
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the cover container.
+ * @prop {React.ElementType} [props.element=Flexbox] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the cover element.
+ * @prop {string} [props.img] - URL of the background image to display.
+ * @prop {string} [props.alt] - Alt text for the background image.
+ * @prop {LibBgOverlay} [props.overlay] - Overlay variant to apply over the background image.
+ * @prop {React.ReactNode} [props.children] - Content to display over the background image.
+ *
+ * @returns {JSX.Element} The rendered Cover component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/cover
+ */
+declare const Cover: FC$1<ILibCover>;
+
+/**
+ * Table component for creating structured data tables with customizable styling, variants, and automatic link detection.
+ *
+ * @component
+ *
+ * @example
+ * <Table
+ *   variant="bordered"
+ *   headers={["Name", "Email", "Role"]}
+ *   data={[
+ *     ["John Doe", "john@example.com", "Admin"],
+ *     ["Jane Smith", "jane@example.com", "User"]
+ *   ]}
+ *   footers={["Total: 2 users", "", ""]}
+ *   linkify
+ * />
+ *
+ * @extends HTMLTableElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the table.
+ * @prop {React.Ref<HTMLTableElement>} [props.ref] - Ref to the table element.
+ * @prop {React.ReactNode} [props.children] - Table content when not using data prop.
+ * @prop {"bordered" | "stripped" | "border-bottom"} [props.variant="bordered"] - Visual variant for table styling.
+ * @prop {"align-baseline" | "align-top" | "align-middle" | "align-bottom" | "align-text-top" | "align-text-bottom" | "align-sub" | "align-super"} [props.vAlign="align-top"] - Vertical alignment for table cells.
+ * @prop {"left" | "center" | "right" | "justify"} [props.textAlign="left"] - Text alignment for table content.
+ * @prop {boolean} [props.linkify] - Whether to automatically convert URLs in text to clickable links.
+ * @prop {boolean} [props.blank] - Whether links should open in new tab when linkify is enabled.
+ * @prop {Array<React.ReactNode>} [props.headers] - Array of header content for table columns.
+ * @prop {Array<React.ReactNode>} [props.footers] - Array of footer content for table columns.
+ * @prop {Array<Array<React.ReactNode>>} [props.data] - 2D array of table data for automatic table generation.
+ *
+ * @returns {JSX.Element} The rendered Table component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/table
+ */
+declare const Table: FC$1<ILibTable>;
+
+/**
+ * PageLoading component for displaying a full-screen loading overlay with customizable background and loader.
+ *
+ * @component
+ *
+ * @example
+ * <PageLoading
+ *   backgroundColor="primary-500"
+ *   loaderColor="white"
+ *   loaderVariant={2}
+ *   stopScrolling
+ * />
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the page loading container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the page loading element.
+ * @prop {LibColors} [props.backgroundColor="primary-500"] - Background color for the loading overlay.
+ * @prop {LibColorsShort} [props.loaderColor="white"] - Color of the loading spinner.
+ * @prop {1 | 2 | 3} [props.loaderVariant=1] - Visual variant of the loading spinner.
+ * @prop {boolean} [props.stopScrolling] - Whether to disable page scrolling while loading is visible.
+ *
+ * @returns {JSX.Element} The rendered PageLoading component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/page-loading
+ */
+declare const PageLoading: FC$1<ILibPageLoading>;
+
+/**
+ * Sticky component for creating elements that stick to a specified position during scroll.
+ *
+ * @component
+ *
+ * @example
+ * <Sticky top="md">
+ *   <nav>Navigation content</nav>
+ * </Sticky>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the sticky container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the sticky element.
+ * @prop {React.ReactNode} [props.children] - Content to be positioned sticky.
+ * @prop {"0px" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.top="sm"] - Distance from top when sticky positioning is active.
+ *
+ * @returns {JSX.Element} The rendered Sticky component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/sticky
+ */
+declare const Sticky: FC$1<ILibSticky>;
+
+/**
+ * MarkdownEditor component for creating rich text content with live preview and customizable toolbar.
+ *
+ * @component
+ *
+ * @example
+ * <MarkdownEditor
+ *   value={content}
+ *   setValue={setContent}
+ *   label="Article Content"
+ *   defaultView="live"
+ *   options={{
+ *     bold: true,
+ *     italic: true,
+ *     code: true,
+ *     editorPreview: true
+ *   }}
+ * />
+ *
+ * @extends HTMLTextAreaElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the textarea.
+ * @prop {React.Ref<HTMLTextAreaElement>} [props.ref] - Ref to the textarea element.
+ * @prop {string} [props.value] - Current markdown content value.
+ * @prop {function} [props.setValue] - Function to update the markdown content.
+ * @prop {string} [props.label] - Label text for the editor.
+ * @prop {string} [props.labelComment] - Additional comment text for the label.
+ * @prop {string} [props.helper] - Helper text displayed above the editor.
+ * @prop {string} [props.helperBottom] - Helper text displayed below the editor.
+ * @prop {LibValidation} [props.validation] - Validation state and messages.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme for the editor.
+ * @prop {string} [props.id] - HTML id attribute for the textarea.
+ * @prop {"code" | "live" | "preview"} [props.defaultView="live"] - Initial view mode for the editor.
+ * @prop {LibMarkdownEditorOptions} [props.options] - Configuration for which toolbar buttons to show.
+ * @prop {string} [props.textButtonTitles="Titles"] - Text for the titles dropdown button.
+ * @prop {object} [props.icons] - Custom icons for toolbar buttons.
+ *
+ * @returns {JSX.Element} The rendered MarkdownEditor component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/markdown-editor
+ */
+declare const MarkdownEditor: FC$1<ILibMarkdownEditor>;
+
+/**
+ * MarkdownContainer component for rendering markdown content with customizable parsing options and styling.
+ *
+ * @component
+ *
+ * @example
+ * <MarkdownContainer>
+ *   # Hello World
+ *   This is **bold** and *italic* text.
+ * </MarkdownContainer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the markdown container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the markdown container element.
+ * @prop {string} [props.children] - Markdown content to parse and render.
+ * @prop {object} [props.options=libOptionsMarkdown] - Markdown parsing options and configurations.
+ *
+ * @returns {JSX.Element} The rendered MarkdownContainer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/markdown-container
+ */
+declare const MarkdownContainer: FC$1<ILibMarkdownContainer>;
+
+/**
+ * CodeContainer component for displaying syntax-highlighted code with optional copy functionality.
+ *
+ * @component
+ *
+ * @example
+ * <CodeContainer>
+ *   const hello = "world";
+ *   console.log(hello);
+ * </CodeContainer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the code container.
+ * @prop {React.ElementType} [props.element] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the code container element.
+ * @prop {React.ReactNode} [props.children] - Code content to display and highlight.
+ * @prop {object} [props.highlighterProps] - Additional props to pass to the syntax highlighter.
+ * @prop {LibAllColors} [props.textColor] - Text color for the code content.
+ * @prop {LibAllColors} [props.backgroundColor] - Background color for the code content.
+ * @prop {object} [props.style=atomOneDark] - Custom styles for the syntax highlighter.
+ * @prop {boolean} [props.hideCopyButton] - Whether to hide the copy to clipboard button.
+ * @prop {object} [props.tooltipTexts] - Custom tooltip texts for copy button states.
+ * @prop {object} [props.icons] - Custom icons for copy button states.
+ *
+ * @returns {JSX.Element} The rendered CodeContainer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/code-container
+ */
+declare const CodeContainer: FC$1<ILibCodeContainer>;
+
+/**
+ * Fade component for creating smooth fade-in animations when elements enter the viewport.
+ *
+ * @component
+ *
+ * @example
+ * <Fade>
+ *   <h1>This content will fade in when visible</h1>
+ * </Fade>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the fade container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the fade element.
+ * @prop {React.ReactNode} [props.children] - Content to animate with fade effect.
+ *
+ * @returns {JSX.Element} The rendered Fade component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/fade
+ */
+declare const Fade: FC$1<ILibFade>;
+
+/**
+ * BackToTop component for providing a smooth scroll-to-top functionality with customizable styling and positioning.
+ *
+ * @component
+ *
+ * @example
+ * <BackToTop
+ *   color="primary"
+ *   tooltip="Back to top"
+ *   showTooltip={{ position: "left" }}
+ * />
+ *
+ * @extends ILibButtonIcon
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the back-to-top button.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
+ * @prop {React.ReactElement} [props.icon=<BiUpArrowAlt />] - Custom icon for the back-to-top button.
+ * @prop {LibColorsShort} [props.color="primary"] - Color theme for the button styling.
+ * @prop {string} [props.tooltip="Back to top"] - Tooltip text displayed on hover.
+ * @prop {LibTooltipPositionOptions} [props.showTooltip] - Configuration for tooltip positioning and styling.
+ *
+ * @returns {JSX.Element} The rendered BackToTop component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/back-to-top
+ */
+declare const BackToTop: FC$1<ILibBackToTop>;
+
+/**
+ * Drawer component for creating slide-out panels with customizable positioning, styling, and overlay functionality.
+ *
+ * @component
+ *
+ * @example
+ * <Drawer
+ *   isOpen={isDrawerOpen}
+ *   setIsOpen={setIsDrawerOpen}
+ *   position="right"
+ *   backgroundColor="primary"
+ *   contentColor="white"
+ * >
+ *   <h2>Drawer Content</h2>
+ *   <p>This is the drawer content.</p>
+ * </Drawer>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the drawer container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drawer element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the drawer.
+ * @prop {boolean} [props.isOpen] - Whether the drawer is currently open.
+ * @prop {function} [props.setIsOpen] - Function to control the drawer's open/closed state.
+ * @prop {"left" | "right"} [props.position="right"] - Position of the drawer relative to the viewport.
+ * @prop {boolean} [props.enableScrollingOpen] - Whether to allow page scrolling when drawer is open.
+ * @prop {boolean} [props.disableEsc] - Whether to disable closing the drawer with the Escape key.
+ * @prop {LibAllColors} [props.backgroundColor="primary"] - Background color for the drawer content area.
+ * @prop {LibAllColors} [props.contentColor="white"] - Text color for the drawer content.
+ * @prop {LibAllColors} [props.linksColor="white"] - Color for links and buttons within the drawer.
+ * @prop {LibSpacers} [props.gap="md"] - Gap between child elements in the drawer.
+ * @prop {number} [props.maxWidth=400] - Maximum width of the drawer in pixels.
+ * @prop {LibAllColorsAndOverlays} [props.overlayColor="black-80"] - Background color for the overlay behind the drawer.
+ * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the drawer.
+ *
+ * @returns {JSX.Element} The rendered Drawer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/drawer
+ */
+declare const Drawer: FC$1<ILibDrawer>;
+
+/**
+ * Header component for creating responsive navigation headers with customizable positioning, mobile menu variants, and search functionality.
+ *
+ * @component
+ *
+ * @example
+ * <Header
+ *   logo={<img src="/logo.png" alt="Logo" />}
+ *   burgerPosition="right"
+ *   navDesktopPosition="right"
+ *   navMobileVariant="drawer"
+ *   backgroundColor="primary"
+ *   textColor="white"
+ * >
+ *   <nav>
+ *     <a href="/">Home</a>
+ *     <a href="/about">About</a>
+ *   </nav>
+ * </Header>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the header container.
+ * @prop {React.ElementType} [props.element="header"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the header element.
+ * @prop {React.ReactNode} [props.logo] - Logo content to display in the header.
+ * @prop {"left" | "right"} [props.burgerPosition="right"] - Position of the burger menu button.
+ * @prop {LibColorsHover | object} [props.burgerColor="white"] - Color for the burger menu button, can be a single color or object with open/closed states.
+ * @prop {React.ReactNode} [props.children] - Content to display in the navigation area.
+ * @prop {"left" | "right"} [props.navDesktopPosition="right"] - Position of the navigation on desktop screens.
+ * @prop {"drawer" | "fullscreen"} [props.navMobileVariant="drawer"] - Variant for mobile navigation display.
+ * @prop {boolean} [props.enableScrollingOpen] - Whether to allow page scrolling when mobile menu is open.
+ * @prop {React.ReactNode} [props.search] - Search component to display in the header.
+ * @prop {"relative" | "absolute" | "fixed"} [props.position="relative"] - CSS position property for the header.
+ * @prop {boolean | number} [props.hideOnScroll] - Whether to hide header on scroll, or scroll threshold in pixels.
+ * @prop {Array<React.ReactNode>} [props.links] - Array of link elements for navigation.
+ * @prop {React.ReactNode} [props.nav] - Navigation content to display.
+ * @prop {LibAllColors} [props.backgroundColor="primary"] - Background color for the header.
+ * @prop {LibAllColors} [props.textColor="white"] - Text color for header content.
+ * @prop {LibColorsHover} [props.linkColor="white"] - Color for navigation links.
+ *
+ * @returns {JSX.Element} The rendered Header component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/header
+ */
+declare const Header: FC$1<ILibHeader>;
+
+/**
+ * Footer component for displaying a page footer with logo, links, and customizable layout options.
+ *
+ * @component
+ *
+ * @example
+ * <Footer
+ *   logo={<img src="/logo.png" alt="Logo" />}
+ *   direction="horizontal"
+ *   linksSeparator="dot"
+ *   items={[
+ *     <a href="/privacy">Privacy</a>,
+ *     <a href="/terms">Terms</a>,
+ *     <a href="/contact">Contact</a>
+ *   ]}
+ * />
+ *
+ * @extends ILibFooter
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the footer container.
+ * @prop {React.ElementType} [props.element="footer"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the footer element.
+ * @prop {React.ReactNode} [props.children] - Child elements to display in the footer links section.
+ * @prop {boolean} [props.hideSeparator] - Whether to hide the top border separator line.
+ * @prop {boolean} [props.hideLinksSeparator] - Whether to hide separators between footer links.
+ * @prop {"dot" | "dash"} [props.linksSeparator="dot"] - Type of separator to display between links.
+ * @prop {Array<React.ReactNode>} [props.items] - Array of footer link items to display.
+ * @prop {React.ReactNode} [props.logo] - Logo element to display in the footer.
+ * @prop {"horizontal" | "vertical"} [props.direction="horizontal"] - Layout direction for footer content.
+ * @prop {LibAllColors} [props.linksSeparatorColor="gray-500"] - Color for the separator between links.
+ *
+ * @returns {JSX.Element} The rendered Footer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/footer
+ */
+declare const Footer: FC$1<ILibFooter>;
+
+/**
+ * Meta component for managing HTML head metadata including SEO, Open Graph, and Twitter Card properties.
+ *
+ * @component
+ *
+ * @example
+ * <Meta
+ *   title="My Website"
+ *   description="A description of my website"
+ *   favicon="/favicon.ico"
+ *   cover="/og-image.jpg"
+ *   siteName="My Site"
+ *   author="John Doe"
+ *   url="https://mywebsite.com"
+ * />
+ *
+ * @prop {React.ReactNode} [props.children] - Additional meta tags or head elements to include.
+ * @prop {string} [props.title] - Page title for the document and social media.
+ * @prop {string} [props.favicon] - URL path to the favicon icon file.
+ * @prop {string} [props.description] - Page description for SEO and social media.
+ * @prop {string} [props.generator] - Name of the generator used to create the page.
+ * @prop {string[]} [props.keywords] - Array of keywords for SEO purposes.
+ * @prop {string} [props.author] - Author name for the page content.
+ * @prop {string} [props.authorUrl] - URL to the author's profile or website.
+ * @prop {string} [props.publisher] - Publisher name for the content.
+ * @prop {string} [props.type] - Open Graph type (e.g., "website", "article").
+ * @prop {string} [props.cover] - URL to the cover image for social media sharing.
+ * @prop {string} [props.siteName] - Name of the website or application.
+ * @prop {string} [props.language] - Language locale code (e.g., "en-US").
+ * @prop {string} [props.url] - Canonical URL of the page.
+ * @prop {string} [props.email] - Contact email address.
+ * @prop {string} [props.creator] - Creator name for the content.
+ * @prop {string} [props.manifest] - URL path to the web app manifest file.
+ * @prop {string} [props.category] - Category classification for the content.
+ * @prop {string} [props.twitterCard] - Twitter Card type (e.g., "summary", "summary_large_image").
+ *
+ * @returns {JSX.Element} The rendered Meta component with HTML head elements.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/meta
+ */
+declare const Meta: FC$1<ILibMeta>;
+
+/**
+ * PageLayout component for creating a complete page structure with optional header, footer, wrapper, and meta tags.
+ *
+ * @component
+ *
+ * @example
+ * <PageLayout
+ *   meta={{ title: "My Page", description: "Page description" }}
+ *   header={{ logo: <Logo />, nav: <Nav /> }}
+ *   footer={{ logo: <Logo />, items: [<Link href="/privacy">Privacy</Link>] }}
+ *   wrapperProps={{ maxWidth: "px" }}
+ *   mainProps={{ className: "large" }}
+ * >
+ *   <h1>Page Content</h1>
+ * </PageLayout>
+ *
+ * @prop {React.ReactNode} [props.children] - The main content to be rendered inside the page layout.
+ * @prop {ILibMeta} [props.meta] - Meta component props for HTML head metadata including SEO and social media tags.
+ * @prop {ILibHeader} [props.header] - Header component props for displaying the page header with logo and navigation.
+ * @prop {ILibWrapper} [props.wrapperProps] - Wrapper component props for controlling the page container styling and layout.
+ * @prop {ILibMain} [props.mainProps] - Main component props for styling the main content area.
+ * @prop {ILibFooter} [props.footer] - Footer component props for displaying the page footer with links and logo.
+ * @prop {boolean} [props.noWrapper] - Whether to skip rendering the Wrapper component around the main content.
+ * @prop {boolean} [props.noMain] - Whether to skip rendering the Main component wrapper around children.
+ *
+ * @returns {JSX.Element} The rendered PageLayout component with complete page structure.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/page-layout
+ */
+declare const PageLayout: FC$1<ILibPageLayout>;
+
+/**
+ * SrOnly component for creating screen reader only content that is visually hidden but accessible to assistive technologies.
+ *
+ * @component
+ *
+ * @example
+ * <SrOnly>
+ *   This text is only visible to screen readers
+ * </SrOnly>
+ *
+ * @extends ILibSrOnly
+ *
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the sr-only element.
+ * @prop {React.ReactNode} [props.children] - Content to be hidden visually but accessible to screen readers.
+ *
+ * @returns {JSX.Element} The rendered SrOnly component with screen reader accessible content.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/sr-only
+ */
+declare const SrOnly: FC$1<ILibSrOnly>;
+
+export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, CodeContainer, Cover, DROP_SHADOWS, DragList, DragListItem, Drawer, Dropdown, DropdownItem, FONT_FAMILIES, FONT_SIZES, FONT_WEIGHTS, Fade, Fieldset, Flexbox, Footer, Form, Grid, Header, Highlight, Hr, ICON_MULTIPLIER, INPUT_HEIGHT, INSET_SHADOWS, Image, Input, InputCheck, InputContainer, InputCounter, InputImage, InputPhone, InputPin, InputSlider, Key, LAYOUTS, LINE_HEIGHTS, Linkify, ListGroup, ListGroupItem, ListGroupTitle, Loader, MEDIA, Main, MarkdownContainer, MarkdownEditor, Masonry, Meta, Modal, OVERLAYS, PageLayout, PageLoading, Pagination, PaginationButton, Paginator, ProgressBar, ProgressCircle, RADIUS, Rating, SHADOWS, SPACERS, Section, Select, Skeleton, SkeletonCard, Slideshow, SrOnly, Sticky, TEXT_BASE_CLASSES, TEXT_SHADOWS, TRANSITIONS, Table, Tabs, TabsButton, TabsButtonsContainer, TabsContainer, TabsContent, Tag, Text, ThemeProviderWrapper, Toast, ToastContainer, Tooltip, URL_REGEX, Wrapper, clsx, genAlignContent, genAlignItems, genBgAllColors, genBgAllColorsAndOverlays, genBgColor, genBgColor50, genBgColorGhostHover, genBgColorHover, genBgColorShort, genBgOverlay, genBorderAllColors, genBorderColor, genBorderColorHover, genBorderColorShort, genBorderRadius, genBoxShadow, genButtonColor, genButtonDisabled, genColGap, genGap, genJustifyContent, genJustifyItems, genLinkColor, genMaxWidth, genObjectFit, genRingColor, genRingColorChildren, genRowGap, genTextAlign, genTextAllColor, genTextColor, genTextColorHover, genTextColorShort, genVAlign, libMarkdownEditorOptions, libOptionsMarkdown, linkifyText, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, usePaginatedData, usePagination, useTouchScreen, useTranslation };