@julseb-lib/react 1.0.74 → 1.1.0

package/dist/index.d.cts

@@ -7,7 +7,7 @@ import { LibMdEditorOptions } from './types/components-items-props.cjs';
 export { addDay, addMonth, addYear, calculateAverage, calculateTotalSum, capitalize, convertDate, convertDateShort, convertPrice, convertTime, convertToEmail, convertYoutube, decrypt, deleteDuplicates, emailRegex, encrypt, filterObject, formatDate, formatHour, generateNumbers, getFirstName, getInitials, getLastName, getNextDay, getPercentage, getRandom, getRandomAvatar, getRandomDate, getRandomNumber, getRandomString, getRandomTime, getTimeNow, getToday, getTomorrow, getYesterday, hexToRgb, passwordRegex, rgbToHex, 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, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly, ILibCodeContainer, ILibCarousel } from './types/components-props.cjs';
+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, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly, ILibCodeContainer, ILibCarousel, ILibLazyImage } from './types/components-props.cjs';
 import * as react_toastify from 'react-toastify';
 import { ToastContainerProps, ToastOptions } from 'react-toastify';
 import 'csstype';
@@ -3394,4 +3394,32 @@ declare const CodeContainer: FC$1<ILibCodeContainer>;
  */
 declare const Carousel: FC$1<ILibCarousel>;
 
-export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, 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, RADIUSES, 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, countries, detectLanguage, disableScroll, enableScroll, 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, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };
+/**
+ * LazyImage component for lazy-loading images with a skeleton placeholder.
+ *
+ * @component
+ *
+ * @example
+ * <LazyImage
+ *   src="https://example.com/image.jpg"
+ *   alt="Example image"
+ *   skeletonClasses="h-48"
+ *   skeletonAnimation="pulse"
+ *   className="rounded"
+ * />
+ *
+ * @extends HTMLImageElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the image.
+ * @prop {React.Ref<HTMLImageElement>} [props.ref] - Ref to the image element.
+ * @prop {string} [props.skeletonClasses] - Additional CSS classes for the skeleton placeholder.
+ * @prop {"pulse" | "shine" | "none"} [props.skeletonAnimation="shine"] - Animation style for the skeleton placeholder.
+ * @prop {object} [props.rest] - Additional props spread to the image element.
+ *
+ * @returns {JSX.Element} The rendered LazyImage component with a skeleton fallback while loading.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/lazy-image
+ */
+declare const LazyImage: FC$1<ILibLazyImage>;
+
+export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, 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, LazyImage, Linkify, ListGroup, ListGroupItem, ListGroupTitle, Loader, MEDIA, Main, MarkdownContainer, MarkdownEditor, Masonry, Meta, Modal, OVERLAYS, PageLayout, PageLoading, Pagination, PaginationButton, Paginator, ProgressBar, ProgressCircle, RADIUSES, 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, countries, detectLanguage, disableScroll, enableScroll, 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, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { LibMdEditorOptions } from './types/components-items-props.js';
 export { addDay, addMonth, addYear, calculateAverage, calculateTotalSum, capitalize, convertDate, convertDateShort, convertPrice, convertTime, convertToEmail, convertYoutube, decrypt, deleteDuplicates, emailRegex, encrypt, filterObject, formatDate, formatHour, generateNumbers, getFirstName, getInitials, getLastName, getNextDay, getPercentage, getRandom, getRandomAvatar, getRandomDate, getRandomNumber, getRandomString, getRandomTime, getTimeNow, getToday, getTomorrow, getYesterday, hexToRgb, passwordRegex, rgbToHex, 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, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly, ILibCodeContainer, ILibCarousel } from './types/components-props.js';
+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, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly, ILibCodeContainer, ILibCarousel, ILibLazyImage } from './types/components-props.js';
 import * as react_toastify from 'react-toastify';
 import { ToastContainerProps, ToastOptions } from 'react-toastify';
 import 'csstype';
@@ -3394,4 +3394,32 @@ declare const CodeContainer: FC$1<ILibCodeContainer>;
  */
 declare const Carousel: FC$1<ILibCarousel>;
 
-export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, 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, RADIUSES, 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, countries, detectLanguage, disableScroll, enableScroll, 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, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };
+/**
+ * LazyImage component for lazy-loading images with a skeleton placeholder.
+ *
+ * @component
+ *
+ * @example
+ * <LazyImage
+ *   src="https://example.com/image.jpg"
+ *   alt="Example image"
+ *   skeletonClasses="h-48"
+ *   skeletonAnimation="pulse"
+ *   className="rounded"
+ * />
+ *
+ * @extends HTMLImageElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the image.
+ * @prop {React.Ref<HTMLImageElement>} [props.ref] - Ref to the image element.
+ * @prop {string} [props.skeletonClasses] - Additional CSS classes for the skeleton placeholder.
+ * @prop {"pulse" | "shine" | "none"} [props.skeletonAnimation="shine"] - Animation style for the skeleton placeholder.
+ * @prop {object} [props.rest] - Additional props spread to the image element.
+ *
+ * @returns {JSX.Element} The rendered LazyImage component with a skeleton fallback while loading.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/lazy-image
+ */
+declare const LazyImage: FC$1<ILibLazyImage>;
+
+export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, 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, LazyImage, Linkify, ListGroup, ListGroupItem, ListGroupTitle, Loader, MEDIA, Main, MarkdownContainer, MarkdownEditor, Masonry, Meta, Modal, OVERLAYS, PageLayout, PageLoading, Pagination, PaginationButton, Paginator, ProgressBar, ProgressCircle, RADIUSES, 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, countries, detectLanguage, disableScroll, enableScroll, 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, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };