@julseb-lib/react 0.1.11 → 0.1.13

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

@@ -0,0 +1,54 @@
+import type {
+	LibAllColors,
+	LibComponentBase,
+	LibFooterDirection,
+	LibFooterLinksSeparator,
+	ReactChildren,
+	RequireAtLeastOne,
+} from "../../types"
+
+interface ILibFooterBase extends LibComponentBase<HTMLDivElement> {
+	hideSeparator?: boolean
+	hideLinksSeparator?: boolean
+	linksSeparator?: LibFooterLinksSeparator
+	linksSeparatorColor?: LibAllColors
+}
+
+interface FooterHorizontalWithItems extends ILibFooterBase {
+	items: Array<ReactChildren>
+	logo: ReactChildren
+	direction?: Extract<LibFooterDirection, "horizontal">
+	children?: never
+}
+
+interface FooterHorizontalWithChildren extends ILibFooterBase {
+	items?: never
+	logo: ReactChildren
+	direction?: Extract<LibFooterDirection, "horizontal">
+	children?: ReactChildren
+}
+
+type ILibFooterHorizontal =
+	| FooterHorizontalWithItems
+	| FooterHorizontalWithChildren
+
+interface FooterVerticalWithItems extends ILibFooterBase {
+	items?: Array<ReactChildren>
+	logo?: ReactChildren
+	direction?: Extract<LibFooterDirection, "vertical">
+	children?: never
+}
+
+interface FooterVerticalWithChildren extends ILibFooterBase {
+	items?: never
+	logo?: ReactChildren
+	direction?: Extract<LibFooterDirection, "vertical">
+	children?: ReactChildren
+}
+
+type ILibFooterVertical = RequireAtLeastOne<
+	FooterVerticalWithItems | FooterVerticalWithChildren,
+	"items" | "children" | "logo"
+>
+
+export type ILibFooter = ILibFooterHorizontal | ILibFooterVertical

package/dist/lib/components/Form/Form.tsx

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

package/dist/lib/components/Header/Header.tsx

@@ -7,6 +7,7 @@ import {
 	clsx,
 	genBgAllColors,
 	genLinkColor,
+	genRingColorChildren,
 	genTextAllColor,
 } from "../../utils"
 import type { ILibHeader } from "./types"
@@ -35,7 +36,7 @@ import type { ILibHeader } from "./types"
  *
  * @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<any>} [props.ref] - Ref to the header element.
+ * @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.
@@ -139,9 +140,10 @@ export const Header: FC<ILibHeader> = ({
 			</>
 		),
 		className: clsx(
-			"z-999 flex gap-(--spacer-xs) transition-all duration-200 ease-in-out",
+			"z-999 flex gap-2 [&>a]:outline-none transition-all duration-200 ease-in-out",
 			"fixed md:relative",
 			"flex-col md:flex-row px-[5%] md:px-0",
+			genRingColorChildren[linkColor],
 			navDesktopPosition === "left" && "grow",
 			genBgAllColors[backgroundColor],
 			navMobileVariant === "drawer" && [
@@ -165,7 +167,7 @@ export const Header: FC<ILibHeader> = ({
 						: "right-[-100%] md:right-[unset]",
 			],
 			navMobileVariant === "top" && [
-				"md:top-[unset] w-[100%] md:w-fit h-fit md:h-[unset] left-0 md:left-[unset] py-(--spacer-md) md:py-0",
+				"md:top-[unset] w-[100%] md:w-fit h-fit md:h-[unset] left-0 md:left-[unset] py-4 md:py-0",
 				isOpen ? "top-[56px] " : "top-[calc((160px+56px)*-1)]",
 			],
 			"nav",
@@ -184,10 +186,10 @@ export const Header: FC<ILibHeader> = ({
 			className={clsx(
 				"z-999 flex items-center px-[5%] py-4 w-full transition-all duration-200 ease-in-out",
 				navDesktopPosition === "left"
-					? "justify-between md:justify-start gap-(--spacer-xl)"
+					? "justify-between md:justify-start gap-8"
 					: "justify-between",
 				burgerPosition === "left" &&
-					"justify-start gap-(--spacer-md) md:justify-between",
+					"justify-start gap-4 md:justify-between",
 				position,
 				genBgAllColors[backgroundColor],
 				genTextAllColor[textColor],
@@ -200,7 +202,14 @@ export const Header: FC<ILibHeader> = ({
 		>
 			{burgerPosition === "left" && <Burger {...burgerProps} />}
 
-			<span className="z-999">{logo}</span>
+			<span
+				className={clsx(
+					"z-999 outline-none [&>a]:outline-none",
+					genRingColorChildren[linkColor],
+				)}
+			>
+				{logo}
+			</span>
 
 			{navDesktopPosition === "left" && <nav {...navProps} />}
 

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

@@ -10,7 +10,7 @@ import type {
 import type { LibHeaderSearch } from "./subtypes"
 
 interface ILibHeaderBase extends LibComponentBase<HTMLDivElement> {
-	logo: ReactElement
+	logo: ReactChildren
 	burgerPosition?: LibNavBurgerPosition
 	burgerColor?:
 		| LibColorsHover

package/dist/lib/components/Image/Image.tsx

@@ -60,7 +60,7 @@ export const Image: FC<ILibImage> = ({
 
 				<figcaption
 					className={clsx(
-						"bottom-0 left-0 z-10 absolute bg-overlay-black-80 px-4 py-2 w-full text-white",
+						"bottom-0 left-0 z-10 absolute bg-overlay-black-80 px-2 px-4 w-full text-white",
 						typeof caption === "object" &&
 							caption.backgroundColor &&
 							genBgAllColorsAndOverlays[caption.backgroundColor],

package/dist/lib/components/Input/Input.tsx

@@ -60,10 +60,10 @@ const InputFunction: FC<ILibInput> = ({ type, ...rest }) =>
  *   <option value="ca">Canada</option>
  * </Input>
  *
- * @extends InputHTMLAttributes
+ * @extends HTMLInputElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the input.
- * @prop {React.Ref<any>} [props.ref] - Ref to the input element.
+ * @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.

package/dist/lib/components/Input/templates/ColorInput.tsx

@@ -13,6 +13,7 @@ export const ColorInput: FC<ILibColorInput> = ({
 	validation,
 	inputBackground,
 	inputVariant,
+	value,
 	...rest
 }) => {
 	return (
@@ -22,6 +23,8 @@ export const ColorInput: FC<ILibColorInput> = ({
 			inputBackground={inputBackground}
 			inputVariant={inputVariant}
 		>
+			{value && <span className="pl-2">{value}</span>}
+
 			<input
 				{...rest}
 				type={type}
@@ -32,6 +35,7 @@ export const ColorInput: FC<ILibColorInput> = ({
 					}),
 					"input-color",
 				)}
+				value={value}
 			/>
 
 			<InputValidation validation={validation} />

package/dist/lib/components/InputCheck/InputCheck.tsx

@@ -23,7 +23,7 @@ import type { ILibInputCheck } from "./types"
  * @extends HTMLInputElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the input check container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the label element.
+ * @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.
@@ -58,7 +58,7 @@ export const InputCheck: FC<ILibInputCheck> = ({
 			ref={ref}
 			htmlFor={id}
 			className={clsx(
-				"inline-flex items-start gap-1 cursor-pointer",
+				"inline-flex items-start gap-1 outline-none cursor-pointer",
 				variant === "tile" && [
 					"w-full border-gray-200 border p-2 rounded-lg",
 					"has-[input:checked]:border-primary-500",

package/dist/lib/components/InputComponents/InputButton.tsx

@@ -1,5 +1,5 @@
 import type { FC, MouseEventHandler } from "react"
-import { clsx } from "../../utils"
+import { clsx, genRingColor } from "../../utils"
 import { INPUT_BUTTON_CLASSES } from "./classes"
 import type { ClassNames, ReactChildren } from "../../types"
 
@@ -11,7 +11,12 @@ export const InputButton: FC<IInputButton> = ({
 	return (
 		<button
 			onClick={onClick}
-			className={clsx(INPUT_BUTTON_CLASSES, "input-button", className)}
+			className={clsx(
+				INPUT_BUTTON_CLASSES,
+				genRingColor["primary"],
+				"input-button",
+				className,
+			)}
 			type="button"
 		>
 			{children}

package/dist/lib/components/InputComponents/classes.ts

@@ -42,7 +42,7 @@ export const SUFFIX_CLASSES = [
 ]
 
 export const INPUT_ICON_CONTAINER_CLASSES = [
-	"h-[32px] w-8 inline-flex items-center justify-center border-e-1 border-e-gray-200",
+	"size-8 inline-flex items-center justify-center border-e-1 border-e-gray-200",
 ]
 
 export const INPUT_CONTAINER_CLASSES = ({

package/dist/lib/components/InputContainer/InputContainer.tsx

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

package/dist/lib/components/InputCounter/InputCounter.tsx

@@ -25,10 +25,10 @@ import type { ILibInputCounter } from "./types"
  *   buttonsColor="secondary"
  * />
  *
- * @extends InputHTMLAttributes
+ * @extends HTMLInputElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the counter container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the input or span element.
+ * @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.

package/dist/lib/components/InputImage/InputImage.tsx

@@ -21,7 +21,7 @@ import type { ILibInputImage } from "./types"
  * @extends HTMLInputElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the input image container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the label element.
+ * @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.

package/dist/lib/components/InputPhone/InputPhone.tsx

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

package/dist/lib/components/InputPin/InputPin.tsx

@@ -20,7 +20,7 @@ import type { ILibInputPin } from "./types"
  * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the pin input container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the pin input container div element.
+ * @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.
@@ -54,6 +54,7 @@ export const InputPin: FC<ILibInputPin> = ({
 	hideValues,
 	disabled,
 	inputBackground,
+	autoFocus,
 	...rest
 }) => {
 	const [inputsRefsArr] = useState<Array<Ref<HTMLInputElement>>>(() =>
@@ -98,6 +99,7 @@ export const InputPin: FC<ILibInputPin> = ({
 							type={hideValues ? "password" : "text"}
 							maxLength={1}
 							disabled={disabled}
+							autoFocus={autoFocus && i === 0}
 							className={clsx(
 								INPUT_COMMON_CLASSES({
 									inputBackground,

package/dist/lib/components/InputSlider/InputSlider.tsx

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

package/dist/lib/components/Key/Key.tsx

@@ -74,8 +74,8 @@ const genFontSize: Gen = {
 }
 
 const genPadding: Gen = {
-	small: "py-0 px-(--spacer-2xs)",
-	large: "py-(--spacer-2xs) px-(--spacer-xs)",
+	small: "py-0 px-1",
+	large: "py-1 px-2",
 }
 
 const genBorderBottom: Gen = {

package/dist/lib/components/ListGroup/ListGroup.tsx

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

package/dist/lib/components/ListGroup/ListGroupItem.tsx

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

package/dist/lib/components/ListGroup/ListGroupTitle.tsx

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

package/dist/lib/components/Loader/Loader.tsx

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

package/dist/lib/components/Loader/templates/LoaderOne.tsx

@@ -16,7 +16,7 @@ export const LoaderOne: FC<Omit<ILibLoader, "variant">> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"inline-block relative border-8 border-transparent rounded-full size-12 animate-spin",
+				"inline-block relative border-8 border-transparent rounded-full size-12 animate-[spin_1200ms_linear_infinite]",
 				genBorderBottomColor[color],
 				"loader loader-1",
 				className,

package/dist/lib/components/Loader/templates/LoaderThree.tsx

@@ -23,21 +23,21 @@ export const LoaderThree: FC<Omit<ILibLoader, "variant">> = ({
 		>
 			<span
 				className={clsx(
-					"block rounded-full size-4 dot [--dot-delay:100ms]",
+					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_100ms] dot [--dot-delay:100ms]",
 					genBgAllColors[color],
 					"loader-3-dot",
 				)}
 			/>
 			<span
 				className={clsx(
-					"block rounded-full size-4 dot [--dot-delay:300ms]",
+					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_300ms] dot [--dot-delay:300ms]",
 					genBgAllColors[color],
 					"loader-3-dot",
 				)}
 			/>
 			<span
 				className={clsx(
-					"block rounded-full size-4 dot [--dot-delay:500ms]",
+					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_500ms] dot [--dot-delay:500ms]",
 					genBgAllColors[color],
 					"loader-3-dot",
 				)}

package/dist/lib/components/Loader/templates/LoaderTwo.tsx

@@ -4,7 +4,7 @@ import { genBorderBottomColor } from "../utils/gen-border-bottom"
 import type { ILibLoader } from "../types"
 
 const SPAN_COMMON =
-	"block absolute w-full h-full border-8 border-transparent rounded-full animate-bezier"
+	"block absolute w-full h-full border-8 border-transparent rounded-full animate-[spin_1200ms_var(--animate-cubic-bezier)_infinite_var(--spinner-delay)]"
 
 export const LoaderTwo: FC<Omit<ILibLoader, "variant">> = ({
 	className,
@@ -19,7 +19,7 @@ export const LoaderTwo: FC<Omit<ILibLoader, "variant">> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"inline-block relative rounded-full size-12 animate-spin",
+				"inline-block relative rounded-full size-12 animate-[spin_1200ms_linear_infinite]",
 				"loader loader-2",
 				className,
 			)}

package/dist/lib/components/MarkdownContainer/MarkdownContainer.tsx

@@ -14,10 +14,10 @@ import type { ILibMarkdownContainer } from "./types"
  *   This is **bold** and *italic* text.
  * </MarkdownContainer>
  *
- * @extends ILibMarkdownContainer
+ * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the markdown container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the markdown container element.
+ * @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.
  *

package/dist/lib/components/Meta/Meta.tsx

@@ -0,0 +1,125 @@
+import { type FC } from "react"
+import type { ILibMeta } from "./types"
+
+/**
+ * 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
+ */
+export const Meta: FC<ILibMeta> = ({
+	children,
+	title,
+	favicon,
+	description,
+	generator,
+	keywords,
+	author,
+	authorUrl,
+	publisher,
+	type = "website",
+	cover,
+	siteName,
+	language,
+	url,
+	email,
+	creator,
+	manifest,
+	category,
+	twitterCard = "summary",
+}) => {
+	return (
+		<>
+			<meta charSet="utf-8" />
+			<meta
+				name="viewport"
+				content="width=device-width, initial-scale=1"
+			/>
+			{title && (
+				<>
+					<title>{title}</title>
+					<meta property="og:title" content={title} />
+					<meta name="twitter:title" content={title} />
+				</>
+			)}
+			{description && (
+				<>
+					<meta name="description" content={description} />
+					<meta property="og:description" content={description} />
+					<meta name="twitter:description" content={description} />
+				</>
+			)}
+			{siteName && (
+				<>
+					<meta name="application-name" content={siteName} />
+					<meta property="og:site_name" content={siteName} />
+				</>
+			)}
+			{author && (
+				<>
+					<meta name="author" content={author} />
+					<meta name="twitter:creator" content={author} />
+				</>
+			)}
+			{url && (
+				<>
+					<meta property="og:url" content={url} />
+					<meta name="twitter:site" content={url} />
+				</>
+			)}
+			{cover && (
+				<>
+					<meta property="og:image" content={cover} />
+					<meta name="twitter:image" content={cover} />
+				</>
+			)}
+			{authorUrl && <link rel="author" href={authorUrl} />}
+			{manifest && <link rel="manifest" href={manifest} />}
+			{generator && <meta name="generator" content={generator} />}
+			{keywords && <meta name="keywords" content={keywords?.join(",")} />}
+			{creator && <meta name="creator" content={creator} />}
+			{publisher && <meta name="publisher" content={publisher} />}
+			{category && <meta name="category" content={category} />}
+			{language && <meta property="og:locale" content={language} />}
+			{email && <meta property="og:email" content={email} />}
+			{type && <meta property="og:type" content={type} />}
+			{twitterCard && <meta name="twitter:card" content={twitterCard} />}
+			{favicon && <link rel="icon" href={favicon} />}
+			{children}
+		</>
+	)
+}

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

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

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

@@ -0,0 +1,35 @@
+import type { ReactChildren } from "../../types"
+
+export interface ILibMeta {
+	title: string
+	favicon?: string
+	description?: string
+	generator?: string
+	keywords?: Array<string>
+	author?: string
+	authorUrl?: string
+	publisher?: string
+	type?:
+		| "article"
+		| "book"
+		| "music.album"
+		| "music.playlist"
+		| "music.radio_station"
+		| "music.song"
+		| "profile"
+		| "video.episode"
+		| "video.movie"
+		| "video.other"
+		| "video. tv_show"
+		| "website"
+	cover?: string
+	siteName?: string
+	language?: string
+	url?: string
+	email?: string
+	creator?: string
+	manifest?: string
+	category?: string
+	twitterCard?: "app" | "player" | "summary" | "summary_large_image"
+	children?: ReactChildren
+}

package/dist/lib/components/Modal/Modal.tsx

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