@julseb-lib/react 1.1.34 → 1.1.35

package/dist/index.css

@@ -4,8 +4,6 @@
 
 :root {
 	--font-lato: "Lato", sans-serif;
-	--font-sans: var(--font-lato);
-	--font-mono: monospace;
 
 	--color-primary-50: var(--color-blue-50);
 	--color-primary-100: var(--color-blue-100);
@@ -90,12 +88,22 @@
 	--color-overlay-gradient-black: linear-gradient(
 		180deg,
 		rgba(255, 255, 255, 0) 0%,
-		rgba(0, 0, 0, 0.56) 100%
+		rgba(0, 0, 0, 0.5) 100%
 	);
 	--color-overlay-gradient-white: linear-gradient(
 		180deg,
 		rgba(0, 0, 0, 0) 0%,
-		rgba(255, 255, 255, 0.35) 100%
+		rgba(255, 255, 255, 0.8) 100%
+	);
+	--color-overlay-gradient-theme-bg: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0) 0%,
+		rgba(255, 255, 255, 0.8) 100%
+	);
+	--color-overlay-gradient-theme-text: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0) 0%,
+		rgba(0, 0, 0, 0.5) 100%
 	);
 
 	--font-sans: var(--font-lato);
@@ -226,25 +234,23 @@
 	--color-background: var(--color-white);
 	--color-font: var(--color-black);
 
-	--font-weight-thin: 100;
-	--font-weight-light: 300;
+	--font-weight-thin: var(--font-weight-thin);
+	--font-weight-light: var(--font-weight-light);
 	--font-weight-normal: 400;
 	--font-weight-bold: 700;
 	--font-weight-black: 900;
 
-	--color-overlay-black-50: rgba(0, 0, 0, 0.5);
-	--color-overlay-black-80: rgba(0, 0, 0, 0.8);
-	--color-overlay-white-50: rgba(255, 255, 255, 0.5);
-	--color-overlay-white-80: rgba(255, 255, 255, 0.8);
-	--color-overlay-gradient-black: linear-gradient(
-		180deg,
-		rgba(255, 255, 255, 0) 0%,
-		rgba(0, 0, 0, 0.56) 100%
+	--color-overlay-black-50: var(--color-overlay-black-50);
+	--color-overlay-black-80: var(--color-overlay-black-80);
+	--color-overlay-white-50: var(--color-overlay-white-50);
+	--color-overlay-white-80: var(--color-overlay-white-80);
+	--color-overlay-gradient-black: var(--color-overlay-gradient-black);
+	--color-overlay-gradient-white: var(--color-overlay-gradient-white);
+	--color-overlay-gradient-theme-bg: var(
+		--color-overlay-gradient-theme-light
 	);
-	--color-overlay-gradient-white: linear-gradient(
-		180deg,
-		rgba(0, 0, 0, 0) 0%,
-		rgba(255, 255, 255, 0.35) 100%
+	--color-overlay-gradient-theme-text: var(
+		--color-overlay-gradient-theme-dark
 	);
 
 	--font-sans: var(--font-lato);
@@ -392,6 +398,17 @@ body {
 
 	--color-background: var(--color-black);
 	--color-font: var(--color-white);
+
+	--color-overlay-gradient-theme-bg: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0) 0%,
+		rgba(0, 0, 0, 0.5) 100%
+	);
+	--color-overlay-gradient-theme-text: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0) 0%,
+		rgba(255, 255, 255, 0.8) 100%
+	);
 }
 
 .smooth {
@@ -567,6 +584,14 @@ iframe {
 	background: var(--color-overlay-gradient-white);
 }
 
+.bg-overlay-gradient-theme-bg {
+	background: var(--color-overlay-gradient-theme-bg);
+}
+
+.bg-overlay-gradient-theme-text {
+	background: var(--overlay-gradient-theme-text);
+}
+
 /*====================== Keyframes & animations ======================*/
 
 @keyframes shine {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { c as LibColorsHover, af as CssTextAlign, L as LibColors, a as LibColorsShort, b as LibAllColors, e as LibOverlays, f as LibAllColorsAndOverlays, k as LibSpacers, ak as CssAlignContent, ai as CssAlignItems, aj as CssJustifyContent, ah as CssJustifyItems, E as LibMaxWidth, l as LibRadiuses, an as CssObjectFit, u as LibButtonVariantExtended, j as LibShadows, ag as CssVerticalAlign, h as LibFontSizes, i as LibFontWeights, ad as DispatchState, a5 as TranslateLang, aa as ReactChildren, p as LibThemeNames, ac as FC$1, a7 as LibCountry, ab as ReactElement, s as LibLoaderVariant } from './global-BFS193oO.cjs';
-export { av as designTokens } from './global-BFS193oO.cjs';
+import { c as LibColorsHover, af as CssTextAlign, L as LibColors, a as LibColorsShort, b as LibAllColors, e as LibOverlays, f as LibAllColorsAndOverlays, k as LibSpacers, ak as CssAlignContent, ai as CssAlignItems, aj as CssJustifyContent, ah as CssJustifyItems, E as LibMaxWidth, l as LibRadiuses, an as CssObjectFit, u as LibButtonVariantExtended, j as LibShadows, ag as CssVerticalAlign, h as LibFontSizes, i as LibFontWeights, ad as DispatchState, a5 as TranslateLang, aa as ReactChildren, p as LibThemeNames, ac as FC$1, a7 as LibCountry, ab as ReactElement, s as LibLoaderVariant } from './global-CQBsO8PJ.cjs';
+export { av as designTokens } from './global-CQBsO8PJ.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassNameValue } from 'tailwind-merge';
 import { LibMdEditorOptions } from './types/components-items-props.cjs';
@@ -7,7 +7,7 @@ import { Components } from 'react-markdown';
 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$2 } from 'react';
-import { ILibText, ILibWrapper, ILibMain, ILibAside, ILibSection, ILibGrid, ILibFlexbox, ILibKey, ILibHighlight, ILibLinkify, ILibHr, ILibSkeleton, ILibSkeletonCard, ILibTooltip, ILibImage, ILibLazyImage, 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, ILibTabsContent, ILibSlideshow, ILibCarousel, ILibCover, ILibTable, ILibPageLoading, ILibSticky, ILibMarkdownEditor, ILibMarkdownContainer, ILibCodeContainer, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly } from './types/components-props.cjs';
+import { ILibText, ILibWrapper, ILibMain, ILibAside, ILibSection, ILibGrid, ILibFlexbox, ILibKey, ILibHighlight, ILibLinkify, ILibHr, ILibSkeleton, ILibSkeletonCard, ILibTooltip, ILibImage, ILibLazyImage, 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, ILibCollapsedText, ILibAccordion, ILibAccordionItem, ILibDropdown, ILibDropdownItem, ILibToast, ILibAlert, ILibModal, ILibDragList, ILibDragListItem, ILibPagination, ILibPaginationButton, ILibPaginator, ILibProgressBar, ILibProgressCircle, ILibTabs, ILibTabsContainer, ILibTabsButtonsContainer, ILibTabsButton, ILibTabsContent, ILibSlideshow, ILibCarousel, ILibCover, ILibTable, ILibPageLoading, ILibSticky, ILibMarkdownEditor, ILibMarkdownContainer, ILibCodeContainer, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly } from './types/components-props.cjs';
 import * as react_toastify from 'react-toastify';
 import { ToastContainerProps, ToastOptions } from 'react-toastify';
 import 'csstype';
@@ -997,7 +997,11 @@ declare enum OVERLAYS {
     /** 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)"
+    /** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--color-overlay-gradient-white)",
+    /** light: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%); dark: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */
+    GRADIENT_THEME_BG = "var(--color-overlay-gradient-theme-bg)",
+    /** light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%); dark: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */
+    GRADIENT_THEME_TEXT = "var(--color-overlay-gradient-theme-text)"
 }
 declare enum FONT_FAMILIES {
     /** Primary font family for body text */ SANS = "var(--font-sans)",
@@ -2492,6 +2496,33 @@ declare const ListGroupItem: FC$2<ILibListGroupItem>;
  */
 declare const Breadcrumbs: FC$2<ILibBreadcrumbs>;
 
+/**
+ * CollapsedText is a component that displays text content with the ability to expand or collapse it, showing a limited number of lines by default and a button to toggle visibility.
+ *
+ * @component
+ *
+ * @example
+ * <CollapsedText collapsedMaxLines={2} texts={{ read: "Show", more: "more", less: "less" }}>
+ *   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ * </CollapsedText>
+ *
+ * @extends ILibCollapsedText
+ *
+ * @prop {string} [props.className] - Additional class names to apply to the root element.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="div"] - The HTML element to render as the root. Default is "div".
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the root element.
+ * @prop {React.ReactNode} [props.children] - The text or elements to display inside the component.
+ * @prop {boolean} [props.defaultOpen] - If true, the text is expanded by default.
+ * @prop {{ read?: string; more?: string; less?: string }} [props.texts] - Customizable button texts for "read", "more", and "less".
+ * @prop {ILibText} [props.textProps] - Additional props to pass to the inner Text component.
+ * @prop {number} [props.collapsedMaxLines=3] - Number of lines to show when collapsed. Default is 3.
+ *
+ * @returns {JSX.Element} The rendered CollapsedText component with expand/collapse functionality.
+ *
+ * @see https://julseb-lib.vercel.app/components/CollapsedText
+ */
+declare const CollapsedText: FC$2<ILibCollapsedText>;
+
 /**
  * Accordion component for creating collapsible content sections with customizable styling and expandable items.
  *
@@ -3744,4 +3775,4 @@ declare const PageLayout: FC$2<ILibPageLayout>;
  */
 declare const SrOnly: FC$2<ILibSrOnly>;
 
-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, ModalOpenProviderWrapper, 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, genFontSize, genFontWeight, genGap, genJustifyContent, genJustifyItems, genLinkColor, genMaxWidth, genObjectFit, genRingColor, genRingColorChildren, genRowGap, genTextAlign, genTextAllColor, genTextColor, genTextColorHover, genTextColorShort, genVAlign, libMarkdownComponents, libMarkdownEditorOptions, linkifyText, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, useModalOpen, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };
+export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, CodeContainer, CollapsedText, 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, ModalOpenProviderWrapper, 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, genFontSize, genFontWeight, genGap, genJustifyContent, genJustifyItems, genLinkColor, genMaxWidth, genObjectFit, genRingColor, genRingColorChildren, genRowGap, genTextAlign, genTextAllColor, genTextColor, genTextColorHover, genTextColorShort, genVAlign, libMarkdownComponents, libMarkdownEditorOptions, linkifyText, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, useModalOpen, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { c as LibColorsHover, af as CssTextAlign, L as LibColors, a as LibColorsShort, b as LibAllColors, e as LibOverlays, f as LibAllColorsAndOverlays, k as LibSpacers, ak as CssAlignContent, ai as CssAlignItems, aj as CssJustifyContent, ah as CssJustifyItems, E as LibMaxWidth, l as LibRadiuses, an as CssObjectFit, u as LibButtonVariantExtended, j as LibShadows, ag as CssVerticalAlign, h as LibFontSizes, i as LibFontWeights, ad as DispatchState, a5 as TranslateLang, aa as ReactChildren, p as LibThemeNames, ac as FC$1, a7 as LibCountry, ab as ReactElement, s as LibLoaderVariant } from './global-BFS193oO.js';
-export { av as designTokens } from './global-BFS193oO.js';
+import { c as LibColorsHover, af as CssTextAlign, L as LibColors, a as LibColorsShort, b as LibAllColors, e as LibOverlays, f as LibAllColorsAndOverlays, k as LibSpacers, ak as CssAlignContent, ai as CssAlignItems, aj as CssJustifyContent, ah as CssJustifyItems, E as LibMaxWidth, l as LibRadiuses, an as CssObjectFit, u as LibButtonVariantExtended, j as LibShadows, ag as CssVerticalAlign, h as LibFontSizes, i as LibFontWeights, ad as DispatchState, a5 as TranslateLang, aa as ReactChildren, p as LibThemeNames, ac as FC$1, a7 as LibCountry, ab as ReactElement, s as LibLoaderVariant } from './global-CQBsO8PJ.js';
+export { av as designTokens } from './global-CQBsO8PJ.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassNameValue } from 'tailwind-merge';
 import { LibMdEditorOptions } from './types/components-items-props.js';
@@ -7,7 +7,7 @@ import { Components } from 'react-markdown';
 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$2 } from 'react';
-import { ILibText, ILibWrapper, ILibMain, ILibAside, ILibSection, ILibGrid, ILibFlexbox, ILibKey, ILibHighlight, ILibLinkify, ILibHr, ILibSkeleton, ILibSkeletonCard, ILibTooltip, ILibImage, ILibLazyImage, 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, ILibTabsContent, ILibSlideshow, ILibCarousel, ILibCover, ILibTable, ILibPageLoading, ILibSticky, ILibMarkdownEditor, ILibMarkdownContainer, ILibCodeContainer, ILibFade, ILibBackToTop, ILibDrawer, ILibHeader, ILibFooter, ILibMeta, ILibPageLayout, ILibSrOnly } from './types/components-props.js';
+import { ILibText, ILibWrapper, ILibMain, ILibAside, ILibSection, ILibGrid, ILibFlexbox, ILibKey, ILibHighlight, ILibLinkify, ILibHr, ILibSkeleton, ILibSkeletonCard, ILibTooltip, ILibImage, ILibLazyImage, 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, ILibCollapsedText, ILibAccordion, ILibAccordionItem, ILibDropdown, ILibDropdownItem, ILibToast, ILibAlert, ILibModal, ILibDragList, ILibDragListItem, ILibPagination, ILibPaginationButton, ILibPaginator, ILibProgressBar, ILibProgressCircle, ILibTabs, ILibTabsContainer, ILibTabsButtonsContainer, ILibTabsButton, ILibTabsContent, ILibSlideshow, ILibCarousel, 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';
@@ -997,7 +997,11 @@ declare enum OVERLAYS {
     /** 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)"
+    /** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--color-overlay-gradient-white)",
+    /** light: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%); dark: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */
+    GRADIENT_THEME_BG = "var(--color-overlay-gradient-theme-bg)",
+    /** light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%); dark: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */
+    GRADIENT_THEME_TEXT = "var(--color-overlay-gradient-theme-text)"
 }
 declare enum FONT_FAMILIES {
     /** Primary font family for body text */ SANS = "var(--font-sans)",
@@ -2492,6 +2496,33 @@ declare const ListGroupItem: FC$2<ILibListGroupItem>;
  */
 declare const Breadcrumbs: FC$2<ILibBreadcrumbs>;
 
+/**
+ * CollapsedText is a component that displays text content with the ability to expand or collapse it, showing a limited number of lines by default and a button to toggle visibility.
+ *
+ * @component
+ *
+ * @example
+ * <CollapsedText collapsedMaxLines={2} texts={{ read: "Show", more: "more", less: "less" }}>
+ *   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ * </CollapsedText>
+ *
+ * @extends ILibCollapsedText
+ *
+ * @prop {string} [props.className] - Additional class names to apply to the root element.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="div"] - The HTML element to render as the root. Default is "div".
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the root element.
+ * @prop {React.ReactNode} [props.children] - The text or elements to display inside the component.
+ * @prop {boolean} [props.defaultOpen] - If true, the text is expanded by default.
+ * @prop {{ read?: string; more?: string; less?: string }} [props.texts] - Customizable button texts for "read", "more", and "less".
+ * @prop {ILibText} [props.textProps] - Additional props to pass to the inner Text component.
+ * @prop {number} [props.collapsedMaxLines=3] - Number of lines to show when collapsed. Default is 3.
+ *
+ * @returns {JSX.Element} The rendered CollapsedText component with expand/collapse functionality.
+ *
+ * @see https://julseb-lib.vercel.app/components/CollapsedText
+ */
+declare const CollapsedText: FC$2<ILibCollapsedText>;
+
 /**
  * Accordion component for creating collapsible content sections with customizable styling and expandable items.
  *
@@ -3744,4 +3775,4 @@ declare const PageLayout: FC$2<ILibPageLayout>;
  */
 declare const SrOnly: FC$2<ILibSrOnly>;
 
-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, ModalOpenProviderWrapper, 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, genFontSize, genFontWeight, genGap, genJustifyContent, genJustifyItems, genLinkColor, genMaxWidth, genObjectFit, genRingColor, genRingColorChildren, genRowGap, genTextAlign, genTextAllColor, genTextColor, genTextColorHover, genTextColorShort, genVAlign, libMarkdownComponents, libMarkdownEditorOptions, linkifyText, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, useModalOpen, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };
+export { Accordion, AccordionItem, Alert, Aside, Autocomplete, Avatar, BackToTop, Badge, Breadcrumbs, Burger, Button, ButtonGroup, ButtonIcon, COLORS, Carousel, CodeContainer, CollapsedText, 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, ModalOpenProviderWrapper, 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, genFontSize, genFontWeight, genGap, genJustifyContent, genJustifyItems, genLinkColor, genMaxWidth, genObjectFit, genRingColor, genRingColorChildren, genRowGap, genTextAlign, genTextAllColor, genTextColor, genTextColorHover, genTextColorShort, genVAlign, libMarkdownComponents, libMarkdownEditorOptions, linkifyText, scrollToTop, toast, useClickOutside, useCopyToClipboard, useDebounce, useExportData, useFetch, useForm, useIsOverflow, useKeyPress, useLibTheme, useMaxWidth, useMergeRefs, useMinWidth, useModalOpen, usePaginatedData, usePagination, useTextLineCount, useTouchScreen, useTranslation };