@julseb-lib/react 0.1.11 → 0.1.12

package/dist/lib/components/PageLayout/PageLayout.tsx

@@ -0,0 +1,64 @@
+import { type FC } from "react"
+import { Meta } from "../Meta"
+import { Header } from "../Header"
+import { Wrapper } from "../Wrapper"
+import { Main } from "../Main"
+import { Footer } from "../Footer"
+import type { ILibPageLayout } from "./types"
+
+/**
+ * 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
+ */
+export const PageLayout: FC<ILibPageLayout> = ({
+	children,
+	meta,
+	header,
+	wrapperProps,
+	mainProps,
+	footer,
+	noWrapper,
+	noMain,
+}) => {
+	return (
+		<>
+			{meta && <Meta {...meta} />}
+			{header && <Header {...header} />}
+			{!noWrapper && (
+				<Wrapper {...wrapperProps}>
+					{!noMain ? (
+						<Main {...mainProps}>{children}</Main>
+					) : (
+						children
+					)}
+				</Wrapper>
+			)}
+			{footer && <Footer {...footer} />}
+		</>
+	)
+}

package/dist/lib/components/PageLayout/index.ts

@@ -0,0 +1 @@
+export * from "./PageLayout"

package/dist/lib/components/PageLayout/types.ts

@@ -0,0 +1,29 @@
+import type { ReactChildren } from "../../types"
+import type { ILibMeta } from "../Meta/types"
+import type { ILibHeader } from "../Header/types"
+import type { ILibWrapper } from "../Wrapper/types"
+import type { ILibMain } from "../Main/types"
+import type { ILibFooter } from "../Footer/types"
+
+interface ILibPageLayoutBase {
+	children?: ReactChildren
+	meta?: ILibMeta
+	header?: ILibHeader
+	footer?: ILibFooter
+}
+
+interface PageLayoutWithWrapper extends ILibPageLayoutBase {
+	noWrapper?: false | undefined
+	wrapperProps?: Omit<ILibWrapper, "children">
+	noMain?: boolean
+	mainProps?: Omit<ILibMain, "children">
+}
+
+interface PageLayoutWithoutWrapper extends ILibPageLayoutBase {
+	noWrapper?: true
+	wrapperProps?: never
+	noMain?: never
+	mainProps?: never
+}
+
+export type ILibPageLayout = PageLayoutWithWrapper | PageLayoutWithoutWrapper

package/dist/lib/components/PageLoading/PageLoading.tsx

@@ -21,7 +21,7 @@ import type { ILibPageLoading } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the page loading element.
+ * @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.

package/dist/lib/components/Pagination/Pagination.tsx

@@ -23,7 +23,7 @@ import type { ILibPagination } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the pagination element.
+ * @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.

package/dist/lib/components/Pagination/PaginationButton.tsx

@@ -20,7 +20,7 @@ import type { ILibPaginationButton } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the pagination button element.
+ * @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.

package/dist/lib/components/Paginator/Paginator.tsx

@@ -24,7 +24,7 @@ import type { ILibPaginator } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the paginator element.
+ * @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.

package/dist/lib/components/ProgressBar/ProgressBar.tsx

@@ -19,8 +19,7 @@ import type { LibColorsShort } from "../../types"
  * @extends HTMLMeterElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the progress bar.
- * @prop {React.ElementType} [props.element="meter"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the progress bar element.
+ * @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.
@@ -34,7 +33,6 @@ import type { LibColorsShort } from "../../types"
  */
 export const ProgressBar: FC<ILibProgressBar> = ({
 	className,
-	element = "meter",
 	ref,
 	value,
 	color = "primary",
@@ -44,12 +42,10 @@ export const ProgressBar: FC<ILibProgressBar> = ({
 	id,
 	...rest
 }) => {
-	const Element = element
-
 	const percent = getPercentage(value, Number(max))
 
 	return (
-		<Element
+		<meter
 			ref={ref}
 			id={id}
 			className={clsx(
@@ -58,7 +54,8 @@ export const ProgressBar: FC<ILibProgressBar> = ({
 				"appearance-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:border-none",
 				"[&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-suboptimum-value]:bg-none [&::-webkit-meter-even-less-good-value]:bg-none",
 				"[&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:border-none",
-				!noAnimation && "progress-bar-animated",
+				!noAnimation &&
+					"before:animate-[progress-bar_calc(var(--progress-speed)*50ms)_ease_forwards]",
 				noAnimation && "before:w-(--meter-value)",
 				genProgressColor[color],
 				"progress-bar",

package/dist/lib/components/ProgressBar/types.ts

@@ -2,7 +2,7 @@ import type { MeterHTMLAttributes } from "react"
 import type { LibColorsShort, LibComponentBase } from "../../types"
 
 export interface ILibProgressBar
-	extends LibComponentBase<HTMLMeterElement>,
+	extends Omit<LibComponentBase<HTMLMeterElement>, "element">,
 		MeterHTMLAttributes<HTMLMeterElement> {
 	value: number
 	color?: Exclude<

package/dist/lib/components/ProgressCircle/ProgressCircle.tsx

@@ -21,7 +21,8 @@ import type { LibColorsShort } from "../../types"
  * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the progress circle.
- * @prop {React.Ref<any>} [props.ref] - Ref to the progress circle element.
+ * @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.
@@ -35,6 +36,7 @@ import type { LibColorsShort } from "../../types"
  * @see https://doc-julseb-lib-react.vercel.app/components/progress-circle
  */
 export const ProgressCircle: FC<ILibProgressCircle> = ({
+	element = "div",
 	className,
 	ref,
 	value,
@@ -46,6 +48,8 @@ export const ProgressCircle: FC<ILibProgressCircle> = ({
 	icon,
 	...rest
 }) => {
+	const Element = element
+
 	const [animatedValue, setAnimatedValue] = useState(noAnimation ? value : 0)
 	const radius = (size - strokeWidth) / 2
 	const circumference = 2 * Math.PI * radius
@@ -66,7 +70,7 @@ export const ProgressCircle: FC<ILibProgressCircle> = ({
 	}, [value, noAnimation])
 
 	return (
-		<div
+		<Element
 			ref={ref}
 			className={clsx(
 				"inline-flex relative justify-center items-center",
@@ -124,7 +128,7 @@ export const ProgressCircle: FC<ILibProgressCircle> = ({
 					)}
 				</div>
 			)}
-		</div>
+		</Element>
 	)
 }
 

package/dist/lib/components/ProgressCircle/types.ts

@@ -4,8 +4,7 @@ import type {
 	ReactElement,
 } from "../../types"
 
-interface ILibProgressCircleBase
-	extends Omit<LibComponentBase<HTMLDivElement>, "element"> {
+interface ILibProgressCircleBase extends LibComponentBase<HTMLDivElement> {
 	value: number
 	size?: number
 	strokeWidth?: number

package/dist/lib/components/Rating/Rating.tsx

@@ -25,7 +25,7 @@ import type { ILibRating } from "./types"
  * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the rating container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the rating container div element.
+ * @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.

package/dist/lib/components/Select/Select.tsx

@@ -31,7 +31,7 @@ import type { ILibSelect } from "./types"
  * @extends HTMLButtonElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the select container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the button element.
+ * @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.

package/dist/lib/components/Skeleton/Skeleton.tsx

@@ -47,8 +47,11 @@ export const Skeleton: FC<ILibSkeleton> = ({
 	)
 }
 
-const genAnimation: Record<LibSkeletonAnimation, string> = {
+const genAnimation: Record<LibSkeletonAnimation, string | Array<string>> = {
 	none: "animate-none",
 	pulse: "animate-pulse",
-	shine: "animate-shine",
+	shine: [
+		"relative overflow-hidden",
+		"before:absolute before:-top-[200px] before:-bottom-[200px] before:bg-white before:opacity-70 before:blur-[20px] before:w-[100px] before:-skew-15 before:animate-[shine_2000ms_ease-in-out_infinite]",
+	],
 }

package/dist/lib/components/Skeleton/SkeletonCard.tsx

@@ -43,7 +43,10 @@ export const SkeletonCard: FC<ILibSkeletonCard> = ({
 			element={element}
 			className={clsx(
 				"relative overflow-hidden",
-				isShiny && "animate-shine",
+				isShiny && [
+					"relative overflow-hidden",
+					"before:absolute before:-top-[200px] before:-bottom-[200px] before:bg-white before:opacity-70 before:blur-[20px] before:w-[100px] before:-skew-15 before:animate-[shine_2000ms_ease-in-out_infinite]",
+				],
 				genBgAllColors[backgroundColor],
 				genBorderRadius[borderRadius],
 				"skeleton-card",

package/dist/lib/components/Slideshow/Slideshow.tsx

@@ -31,7 +31,7 @@ import type { ILibSlideshow } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the slideshow element.
+ * @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.

package/dist/lib/components/Slideshow/SlideshowPagination.tsx

@@ -21,7 +21,7 @@ export const SlideshowPagination: FC<ILibSlideshowPagination> = ({
 	return (
 		<div
 			className={clsx(
-				"flex justify-center gap-2 mx-auto py-2 w-full max-w-[70%]",
+				"flex justify-center gap-2 mx-auto px-2 w-full max-w-[70%]",
 				pagination?.position === "outside"
 					? ""
 					: "absolute bottom-1 left-[50%] -translate-x-[50%]",

package/dist/lib/components/SrOnly/SrOnly.tsx

@@ -0,0 +1,33 @@
+import { type FC } from "react"
+import { clsx } from "../../utils"
+import type { ILibSrOnly } from "./types"
+
+/**
+ * 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
+ */
+export const SrOnly: FC<ILibSrOnly> = ({ element = "div", ref, children }) => {
+	const Element = element
+
+	return (
+		<Element ref={ref} className={clsx("sr-only")}>
+			{children}
+		</Element>
+	)
+}

package/dist/lib/components/SrOnly/index.ts

@@ -0,0 +1 @@
+export * from "./SrOnly"

package/dist/lib/components/SrOnly/types.ts

@@ -0,0 +1,7 @@
+import type { LibComponentBase } from "../../types"
+
+export interface ILibSrOnly
+	extends Pick<
+		LibComponentBase<HTMLDivElement>,
+		"ref" | "element" | "children"
+	> {}

package/dist/lib/components/Sticky/Sticky.tsx

@@ -17,7 +17,7 @@ import type { ILibSticky } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the sticky element.
+ * @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.
  *
@@ -48,11 +48,11 @@ export const Sticky: FC<ILibSticky> = ({
 
 const genTop: Record<LibSpacers, string> = {
 	"0px": "top-0",
-	"2xs": "top-(--spacer-2xs)",
-	xs: "top-(--spacer-xs)",
-	sm: "top-(--spacer-sm)",
-	md: "top-(--spacer-md)",
-	lg: "top-(--spacer-lg)",
-	xl: "top-(--spacer-xl)",
-	"2xl": "top-(--spacer-2xl)",
+	"2xs": "top-1",
+	xs: "top-2",
+	sm: "top-3",
+	md: "top-4",
+	lg: "top-5",
+	xl: "top-8",
+	"2xl": "top-12",
 }

package/dist/lib/components/Table/Table.tsx

@@ -89,10 +89,13 @@ export const Table: FC<ILibTable> = ({
 			{...rest}
 		>
 			{headers && (
-				<thead>
-					<tr>
+				<thead className={clsx(genVAlign[vAlign])}>
+					<tr className={clsx(genVAlign[vAlign])}>
 						{headers.map(header => (
-							<th key={uuid()}>
+							<th
+								className={clsx(genVAlign[vAlign])}
+								key={uuid()}
+							>
 								{linkify && typeof header === "string"
 									? linkifyText(header, blank)
 									: header}
@@ -103,7 +106,7 @@ export const Table: FC<ILibTable> = ({
 			)}
 
 			{data ? (
-				<tbody>
+				<tbody className={clsx(genVAlign[vAlign])}>
 					{data.map(row => (
 						<tr key={uuid()}>
 							{row.map(col => (
@@ -117,7 +120,7 @@ export const Table: FC<ILibTable> = ({
 					))}
 				</tbody>
 			) : (
-				children
+				<tbody>{children}</tbody>
 			)}
 
 			{footers && (

package/dist/lib/components/Tabs/Tabs.tsx

@@ -30,7 +30,7 @@ import type { ILibTabs } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tabs container element.
+ * @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.

package/dist/lib/components/Tabs/TabsButton.tsx

@@ -1,5 +1,5 @@
 import { type FC } from "react"
-import { clsx } from "../../utils"
+import { clsx, genRingColor } from "../../utils"
 import type { ILibTabsButton } from "./types"
 
 /**
@@ -20,7 +20,7 @@ import type { ILibTabsButton } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tab button element.
+ * @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.
@@ -48,6 +48,8 @@ export const TabsButton: FC<ILibTabsButton> = ({
 		<Element
 			ref={ref}
 			className={clsx(
+				"outline-none",
+				genRingColor["primary"],
 				isActive && "active",
 				variant === "basic" && [
 					"text-left border-b border-b-transparent translate-y-[1px]",

package/dist/lib/components/Tabs/TabsButtonsContainer.tsx

@@ -18,7 +18,7 @@ import type { ILibTabsButtonsContainer } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tabs buttons container element.
+ * @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.

package/dist/lib/components/Tabs/TabsContainer.tsx

@@ -21,7 +21,7 @@ import type { ILibTabsContainer } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tabs container element.
+ * @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.

package/dist/lib/components/Tabs/TabsContent.tsx

@@ -18,7 +18,7 @@ import type { ILibTabContent } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tab content element.
+ * @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.
  *

package/dist/lib/components/Tag/Tag.tsx

@@ -25,7 +25,7 @@ import type { ILibTag } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the tag element.
+ * @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.

package/dist/lib/components/Text/templates/Blockquote.tsx

@@ -24,7 +24,7 @@ export const Blockquote: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-h6)",
+				"text-(length:--text-h6)",
 				"italic ps-4",
 				genTextAlign[textAlign],
 				(genTextAllColor as any)[color],

package/dist/lib/components/Text/templates/Dl.tsx

@@ -24,7 +24,7 @@ export const Dl: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-body)",
+				"text-(length:--text-body)",
 				"[&>dt]:font-bold",
 				"[&>dd]:font-normal [&>dd]:ps-4",
 				genTextAlign[textAlign],

package/dist/lib/components/Text/templates/H1.tsx

@@ -25,8 +25,8 @@ export const H1: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				display
-					? "text-(length:--font-size-display-h1)"
-					: "text-(length:--font-size-h1)",
+					? "text-(length:--text-display-h1)"
+					: "text-(length:--text-h1)",
 				TEXT_BASE_CLASSES,
 				"font-black",
 				(genTextAlign as any)[textAlign],

package/dist/lib/components/Text/templates/H2.tsx

@@ -27,8 +27,8 @@ export const H2: FC<ILibText> = ({
 				TEXT_BASE_CLASSES,
 				"font-black",
 				display
-					? "text-(length:--font-size-display-h2)"
-					: "text-(length:--font-size-h2)",
+					? "text-(length:--text-display-h2)"
+					: "text-(length:--text-h2)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/H3.tsx

@@ -27,8 +27,8 @@ export const H3: FC<ILibText> = ({
 				TEXT_BASE_CLASSES,
 				"font-black",
 				display
-					? "text-(length:--font-size-display-h3)"
-					: "text-(length:--font-size-h3)",
+					? "text-(length:--text-display-h3)"
+					: "text-(length:--text-h3)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/H4.tsx

@@ -27,8 +27,8 @@ export const H4: FC<ILibText> = ({
 				TEXT_BASE_CLASSES,
 				"font-black",
 				display
-					? "text-(length:--font-size-display-h4)"
-					: "text-(length:--font-size-h4)",
+					? "text-(length:--text-display-h4)"
+					: "text-(length:--text-h4)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/H5.tsx

@@ -27,8 +27,8 @@ export const H5: FC<ILibText> = ({
 				TEXT_BASE_CLASSES,
 				"font-black",
 				display
-					? "text-(length:--font-size-display-h5)"
-					: "text-(length:--font-size-h5)",
+					? "text-(length:--text-display-h5)"
+					: "text-(length:--text-h5)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/H6.tsx

@@ -24,7 +24,7 @@ export const H6: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-h6)",
+				"text-(length:--text-h6)",
 				"font-black",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],

package/dist/lib/components/Text/templates/Ol.tsx

@@ -24,7 +24,7 @@ export const Ol: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-body)",
+				"text-(length:--text-body)",
 				"list-decimal ps-8",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],

package/dist/lib/components/Text/templates/P.tsx

@@ -24,7 +24,7 @@ export const P: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-body)",
+				"text-(length:--text-body)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/Small.tsx

@@ -24,7 +24,7 @@ export const Small: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-small)",
+				"text-(length:--text-small)",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],
 				genLinkColor[linkColor],

package/dist/lib/components/Text/templates/Ul.tsx

@@ -24,7 +24,7 @@ export const Ul: FC<ILibText> = ({
 		<Element
 			className={clsx(
 				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-body)",
+				"text-(length:--text-body)",
 				"list-disc ps-8",
 				(genTextAlign as any)[textAlign],
 				(genTextAllColor as any)[color],