@julseb-lib/react 0.1.10 → 0.1.12

package/dist/lib/Variables.ts

@@ -81,24 +81,24 @@ export enum OVERLAYS {
 }
 
 export enum FONT_FAMILIES {
-	/** Primary font family for body text */ BODY = "var(--font-family-body)",
-	/** Font family for code and monospaced text */ CODE = "var(--font-family-code)",
+	/** Primary font family for body text */ SANS = "var(--font-sans)",
+	/** Font family for code and monospaced text */ MONO = "var(--font-mono)",
 }
 
 export enum FONT_SIZES {
-	/** 5rem */ DISPLAY_H1 = "var(--font-size-display-h1)",
-	/** 4rem */ DISPLAY_H2 = "var(--font-size-display-h2)",
-	/** 3.5rem */ DISPLAY_H3 = "var(--font-size-display-h3)",
-	/** 3rem */ DISPLAY_H4 = "var(--font-size-display-h4)",
-	/** 2.5rem */ DISPLAY_H5 = "var(--font-size-display-h5)",
-	/** 2.5rem */ H1 = "var(--font-size-h1)",
-	/** 2rem */ H2 = "var(--font-size-h2)",
-	/** 1.8rem */ H3 = "var(--font-size-h3)",
-	/** 1.5rem */ H4 = "var(--font-size-h4)",
-	/** 1.3rem */ H5 = "var(--font-size-h5)",
-	/** 1.1rem */ H6 = "var(--font-size-h6)",
-	/** 1rem */ BODY = "var(--font-size-body)",
-	/** 0.875rem */ SMALL = "var(--font-size-small)",
+	/** 5rem */ DISPLAY_H1 = "var(--text-display-h1)",
+	/** 4rem */ DISPLAY_H2 = "var(--text-display-h2)",
+	/** 3.5rem */ DISPLAY_H3 = "var(--text-display-h3)",
+	/** 3rem */ DISPLAY_H4 = "var(--text-display-h4)",
+	/** 2.5rem */ DISPLAY_H5 = "var(--text-display-h5)",
+	/** 2.5rem */ H1 = "var(--text-h1)",
+	/** 2rem */ H2 = "var(--text-h2)",
+	/** 1.8rem */ H3 = "var(--text-h3)",
+	/** 1.5rem */ H4 = "var(--text-h4)",
+	/** 1.3rem */ H5 = "var(--text-h5)",
+	/** 1.1rem */ H6 = "var(--text-h6)",
+	/** 1rem */ BODY = "var(--text-body)",
+	/** 0.875rem */ SMALL = "var(--text-small)",
 }
 
 export enum FONT_WEIGHTS {
@@ -138,6 +138,7 @@ export enum SHADOWS {
 	/** 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) */ LG = "var(--shadow-lg)",
 	/** 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) */ XL = "var(--shadow-xl)",
 	/** 0 25px 50px -12px rgba(0, 0, 0, 0.25) */ "2XL" = "var(--shadow-2xl)",
+	/** inset 0 2px 4px 0 rgb(0 0 0 / 0.06) */ INNER = "var(--shadow-inner)",
 	/** none */ NONE = "var(--shadow-none)",
 }
 
@@ -168,7 +169,7 @@ export enum RADIUS {
 	/** 1rem (16px) */ "2XL" = "var(--radius-2xl)",
 	/** 1.5rem (24px) */ "3XL" = "var(--radius-3xl)",
 	/**  */ "4XL" = "var(--radius-4xl)",
-	/** 9999px */ FULL = "var(--rounded-full)",
+	/** 9999px */ FULL = "var(--radius-full)",
 }
 
 export enum LAYOUTS {
@@ -181,9 +182,9 @@ export enum LAYOUTS {
 }
 
 export enum TRANSITIONS {
-	/** all 150ms cubic-bezier(0.4, 0, 0.2, 1) */ DEFAULT = "var(--transition-default)",
-	/** all 75ms cubic-bezier(0.4, 0, 1, 1) */ FAST = "var(--transition-fast)",
-	/** all 300ms cubic-bezier(0.4, 0, 0.2, 1) */ SLOW = "var(--transition-slow)",
+	/** all 200ms ease */ SHORT = "var(--transition-short)",
+	/** all 500ms ease */ LONG = "var(--transition-long)",
+	/** all 500ms cubic-bezier(0.25, 0.75, 0, 0.66) */ BEZIER = "var(--transition-bezier)",
 }
 
 export enum MEDIA {

package/dist/lib/components/Accordion/Accordion.tsx

@@ -23,7 +23,7 @@ import type { ILibAccordion } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the accordion container.
  * @prop {React.ReactNode} [props.children] - Child AccordionItem components to render when not using items prop.
- * @prop {React.Ref<any>} [props.ref] - Ref to the accordion container element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the accordion container element.
  * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion.
  * @prop {"plus" | "chevron"} [props.icon="plus"] - Type of icon to display for expand/collapse indicators.
  * @prop {Array} [props.items] - Array of accordion items with title, content, and defaultOpen properties.

package/dist/lib/components/Accordion/AccordionContent.tsx

@@ -41,9 +41,9 @@ export const AccordionContent: FC<ILibAccordionContent> = ({
 			ref={ref}
 			className={clsx(
 				"overflow-hidden transition-all duration-200 ease",
+				"py-0 max-h-0 opacity-0",
 				variant === "rounded" && "px-2",
-				isOpen && "open",
-				"py-0 max-h-0 opacity-0 [&.open]:py-2 [&.open]:max-h-auto",
+				isOpen && "open py-2 max-h-auto opacity-100",
 				"accordion-content",
 				className,
 			)}

package/dist/lib/components/Accordion/AccordionTitle.tsx

@@ -1,6 +1,6 @@
 import { type FC } from "react"
 import { BiPlus, BiChevronDown } from "react-icons/bi"
-import { clsx, genTextColorHover } from "../../utils"
+import { clsx, genRingColor, genTextColorHover } from "../../utils"
 import type { ILibAccordionTitle } from "./subtypes"
 
 /**
@@ -43,10 +43,11 @@ export const AccordionTitle: FC<ILibAccordionTitle> = ({
 		<button
 			ref={ref}
 			className={clsx(
-				"flex justify-between items-center border-b w-full",
+				"flex justify-between items-center border-b outline-none w-full",
 				variant === "rounded"
 					? "bg-primary-500 text-white py-1 px-2 border-b-white"
-					: [genTextColorHover["primary"], "border-b-gray-200"],
+					: [genTextColorHover["primary"], "border-b-gray-200 "],
+				genRingColor["primary"],
 				"accordion-title",
 				className,
 			)}

package/dist/lib/components/Alert/Alert.tsx

@@ -21,7 +21,7 @@ import type { ILibAlert } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the alert container.
  * @prop {React.ElementType} [props.element=typeof children === "string" ? Text : "div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the alert element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the alert element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the alert.
  * @prop {LibAllColors} [props.color="primary"] - Color theme for the alert background and border.
  *
@@ -43,7 +43,7 @@ export const Alert: FC<ILibAlert> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"flex flex-col gap-2 px-4 py-2 border rounded-lg w-full max-w-[400px]",
+				"flex flex-col gap-2 px-4 py-2 border rounded-md w-full max-w-[400px]",
 				genBgColor50[color],
 				genBorderColorShort[color],
 				"alert",

package/dist/lib/components/Autocomplete/Autocomplete.tsx

@@ -39,7 +39,7 @@ import type { ILibAutocomplete } from "./types"
  * @extends HTMLInputElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the autocomplete 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 autocomplete.
  * @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/Avatar/Avatar.tsx

@@ -16,7 +16,7 @@ import type { ILibAvatar } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the avatar.
  * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the avatar.
- * @prop {React.Ref<any>} [props.ref] - Ref to the avatar element.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the avatar element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the avatar (image, initials, or icon).
  * @prop {string | { content?: React.ReactNode; backgroundColor?: string; contentColor?: string; className?: string }} [props.badge] - Badge to display on the avatar, can be a string or an object with content and colors.
  * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the avatar container.
@@ -72,13 +72,9 @@ export const Avatar: FC<ILibAvatar> = ({
 					contentColor={
 						typeof badge === "object" ? badge.contentColor : "white"
 					}
-					color={
-						typeof badge === "object"
-							? badge.color
-							: "primary"
-					}
+					color={typeof badge === "object" ? badge.color : "primary"}
 					className={clsx(
-						"top-0 right-0 absolute -translate-y-(--spacer-xs) translate-x-(--spacer-xs)",
+						"top-0 right-0 absolute -translate-y-2 translate-x-2",
 						typeof badge === "object"
 							? badge.className
 							: (undefined as any),

package/dist/lib/components/BackToTop/BackToTop.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, type FC } from "react"
 import { BiUpArrowAlt } from "react-icons/bi"
 import { scrollToTop } from "@julseb-lib/utils"
 import { ButtonIcon } from "../ButtonIcon"
-import { clsx } from "../../utils"
+import { clsx, genRingColor } from "../../utils"
 import type { ILibBackToTop } from "./types"
 
 /**
@@ -71,7 +71,8 @@ export const BackToTop: FC<ILibBackToTop> = ({
 		<ButtonIcon
 			ref={ref}
 			className={clsx(
-				isVisible ? "opacity-100 visible" : "opacity-0 invisible",
+				isVisible ? "opacity-100 visible " : "opacity-0 invisible",
+				genRingColor[color],
 				"back-to-top",
 				className,
 			)}
@@ -82,7 +83,7 @@ export const BackToTop: FC<ILibBackToTop> = ({
 				showTooltip && {
 					position: "left",
 					className: [
-						"fixed bottom-(--spacer-lg) right-(--spacer-lg) [&_.tooltip]:translate-y-[10px] [&_.tooltip]:translate-x-[-50%] transition-all duration-200 ease-in-out",
+						"fixed bottom-5 right-5 [&_.tooltip]:translate-y-[10px] [&_.tooltip]:translate-x-[-50%] transition-all duration-200 ease-in-out",
 						isVisible ? "opacity-100" : "opacity-0",
 					],
 					...(showTooltip as any),

package/dist/lib/components/Badge/Badge.tsx

@@ -19,7 +19,7 @@ import type { ILibBadge } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the badge.
  * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the badge.
- * @prop {React.Ref<any>} [props.ref] - Ref to the badge element.
+ * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the badge element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the badge.
  * @prop {LibAllColors} [props.color="primary"] - Background color of the badge.
  * @prop {LibAllColors} [props.contentColor="white"] - Text color of the badge.

package/dist/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -20,7 +20,7 @@ import type { ILibBreadcrumbs } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the breadcrumbs container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the breadcrumbs container element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the breadcrumbs container element.
  * @prop {React.ReactNode} [props.children] - Navigation items to display in the breadcrumb trail.
  * @prop {string | React.ReactNode} [props.separator="/"] - Separator to display between breadcrumb items.
  * @prop {any} [props.rest] - Additional props spread to the container element.

package/dist/lib/components/Burger/Burger.tsx

@@ -1,5 +1,5 @@
 import { type FC } from "react"
-import { clsx, genBgAllColors } from "../../utils"
+import { clsx, genBgAllColors, genRingColor } from "../../utils"
 import type { ILibBurger } from "./types"
 import type { LibColorsHover } from "../../types"
 
@@ -12,17 +12,23 @@ const SPAN_COMMON =
  * @component
  *
  * @example
- * <Burger isOpen={true} color="primary" />
+ * <Burger
+ *   isOpen={isMenuOpen}
+ *   color="primary"
+ *   onClick={toggleMenu}
+ * />
  *
  * @extends HTMLButtonElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the burger.
  * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the burger.
- * @prop {React.Ref<any>} [props.ref] - Ref to the burger element.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the burger element.
  * @prop {string} [props.role="button"] - ARIA role for accessibility.
  * @prop {string} [props.aria-label="Burger"] - ARIA label for accessibility.
  * @prop {boolean} [props.isOpen] - Whether the burger menu is open or closed.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "white"} [props.color="primary"] - Color of the burger lines.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color of the burger lines.
+ * @prop {string} [props.type="button"] - Button type attribute.
+ * @prop {boolean} [props.noHover] - Whether to disable hover effects.
  * @prop {any} [props.rest] - Additional props spread to the burger element.
  *
  * @returns {JSX.Element} The rendered Burger component.
@@ -49,6 +55,7 @@ export const Burger: FC<ILibBurger> = ({
 			className={clsx(
 				"relative w-8 h-6",
 				!noHover && genHover[color],
+				!noHover && genRingColor[color],
 				"burger",
 				className,
 			)}

package/dist/lib/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import {
 	genBgColorGhostHover,
 	genBorderRadius,
 	genButtonDisabled,
+	genRingColor,
 } from "../../utils"
 import { Loader } from "../Loader"
 import type { ILibButton } from "./types"
@@ -24,7 +25,7 @@ import type { ILibButton } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the button.
  * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
- * @prop {React.Ref<any>} [props.ref] - Ref to the button element.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the button.
  * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Button variant style.
  * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
@@ -59,7 +60,7 @@ export const Button: FC<ILibButton> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"inline-flex items-center self-start gap-2 px-4 py-2 font-bold text-base",
+				"inline-flex items-center self-start gap-2 px-4 py-2 outline-none font-bold text-base",
 				genBorderRadius[borderRadius],
 				variant === "plain" && [
 					genBgColorHover[color],
@@ -78,6 +79,7 @@ export const Button: FC<ILibButton> = ({
 				],
 				variant === "transparent" && [genTextColorHover[color]],
 				size === "small" && "text-sm px-2 py-1",
+				genRingColor[color],
 				genButtonDisabled[variant],
 				"button",
 				className,
@@ -97,8 +99,7 @@ export const Button: FC<ILibButton> = ({
 							? "border-3 size-4"
 							: loaderVariant === 2
 								? "size-4 [&_span]:border-3"
-								: loaderVariant === 3 &&
-									"[&_span]:size-2 translate-y-[5px]",
+								: loaderVariant === 3 && "[&_span]:size-2",
 						"button-loader",
 					)}
 				/>

package/dist/lib/components/ButtonGroup/ButtonGroup.tsx

@@ -10,6 +10,7 @@ import {
 	genButtonDisabled,
 	genTextColorShort,
 	genTextColorHover,
+	genRingColor,
 } from "../../utils"
 import type { ILibButtonGroup } from "./types"
 
@@ -32,7 +33,7 @@ import type { ILibButtonGroup } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the button group.
  * @prop {React.ComponentType} [props.element=Flexbox] - The component to render as the container element.
- * @prop {React.Ref<any>} [props.ref] - Ref to the button group element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the button group element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the button group when not using buttons prop.
  * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the button group.
  * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Visual variant style of the button group.
@@ -81,9 +82,10 @@ export const ButtonGroup: FC<ILibButtonGroup> = ({
 					<Fragment key={button.id}>
 						<button
 							className={clsx(
-								"px-2 py-1 h-full",
+								"px-2 py-1 outline-none h-full",
 								size === "small" && "text-sm px-2 py-1",
 								genButtonDisabled[variant],
+								genRingColor[color],
 								variant === "plain" && [
 									color === "white"
 										? "text-primary-500"

package/dist/lib/components/ButtonIcon/ButtonFn.tsx

@@ -7,6 +7,7 @@ import {
 	genTextAllColor,
 	genTextColorHover,
 	genButtonDisabled,
+	genRingColor,
 } from "../../utils"
 import type { ILibButtonIcon } from "./types"
 import { Loader } from "../Loader"
@@ -36,8 +37,9 @@ export const ButtonIconFn: FC<
 		<Element
 			ref={ref}
 			className={clsx(
-				"inline-flex justify-center items-center size-12",
+				"inline-flex justify-center items-center outline-none size-12",
 				genButtonDisabled[variant],
+				genRingColor[color],
 				variant === "plain" && [
 					genBgColorHover[color],
 					"text-white",

package/dist/lib/components/ButtonIcon/ButtonIcon.tsx

@@ -10,13 +10,19 @@ import type { ILibButtonIcon } from "./types"
  * @component
  *
  * @example
- * <ButtonIcon icon={<BiUser />} color="primary" variant="plain" tooltip="User profile" showTooltip />
+ * <ButtonIcon
+ *   icon={<BiUser />}
+ *   color="primary"
+ *   variant="plain"
+ *   tooltip="User profile"
+ *   showTooltip
+ * />
  *
  * @extends HTMLButtonElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the button.
  * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
- * @prop {React.Ref<any>} [props.ref] - Ref to the button element.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
  * @prop {React.ReactNode} [props.icon] - Icon element to display inside the button.
  * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
  * @prop {string} [props.borderRadius="full"] - Border radius of the button.
@@ -29,6 +35,7 @@ import type { ILibButtonIcon } from "./types"
  * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the container.
  * @prop {string} [props.containerClasses] - Additional CSS classes for the container.
  * @prop {string} [props.aria-label] - ARIA label for accessibility, defaults to tooltip value.
+ * @prop {string} [props.type="button"] - Button type attribute.
  * @prop {any} [props.rest] - Additional props spread to the button element.
  *
  * @returns {JSX.Element} The rendered ButtonIcon component.

package/dist/lib/components/CodeContainer/CodeContainer.tsx

@@ -2,9 +2,8 @@ import { useState, type FC } from "react"
 import SyntaxHighlighter from "react-syntax-highlighter"
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
 import { BiCheck, BiClipboard } from "react-icons/bi"
-import {} from "@julseb-lib/utils"
 import { ButtonIcon } from "../ButtonIcon"
-import { clsx, genTextAllColor } from "../../utils"
+import { clsx, genRingColor, genTextAllColor } from "../../utils"
 import type { ILibCodeContainer } from "./types"
 
 /**
@@ -18,11 +17,11 @@ import type { ILibCodeContainer } from "./types"
  *   console.log(hello);
  * </CodeContainer>
  *
- * @extends ILibCodeContainer
+ * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the code container.
  * @prop {React.ElementType} [props.element] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the code container element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the code container element.
  * @prop {React.ReactNode} [props.children] - Code content to display and highlight.
  * @prop {object} [props.highlighterProps] - Additional props to pass to the syntax highlighter.
  * @prop {LibAllColors} [props.textColor] - Text color for the code content.
@@ -73,10 +72,11 @@ export const CodeContainer: FC<ILibCodeContainer> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"relative",
+				"relative outline-none",
 				"code-container-wrapper",
 				"[&>pre]:bg-gray-800! [&>pre]:p-4!",
 				textColor && genTextAllColor[textColor],
+				genRingColor["primary"],
 				className,
 			)}
 			{...rest}

package/dist/lib/components/Cover/Cover.tsx

@@ -26,7 +26,7 @@ import type { ILibCover } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the cover container.
  * @prop {React.ElementType} [props.element=Flexbox] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the cover element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the cover element.
  * @prop {string} [props.img] - URL of the background image to display.
  * @prop {string} [props.alt] - Alt text for the background image.
  * @prop {LibBgOverlay} [props.overlay] - Overlay variant to apply over the background image.

package/dist/lib/components/DragList/DragList.tsx

@@ -21,7 +21,7 @@ import type { ILibDragList } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the drag list container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the drag list element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drag list element.
  * @prop {React.ReactNode} [props.children] - Child components to render when not using items prop.
  * @prop {React.ReactNode} [props.iconDrag] - Icon to display as the drag handle for each item.
  * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius] - Border radius size for the drag list container.

package/dist/lib/components/DragList/DragListItem.tsx

@@ -1,7 +1,7 @@
 import { type FC, type DragEvent } from "react"
 import { BiDotsVerticalRounded } from "react-icons/bi"
 import { Text } from "../Text"
-import { clsx } from "../../utils"
+import { clsx, genRingColor } from "../../utils"
 import type { ILibDragListItem } from "./types"
 
 /**
@@ -22,7 +22,7 @@ import type { ILibDragListItem } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the drag list item.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the drag list item element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drag list item element.
  * @prop {React.ReactNode} [props.children] - Child components to render when not using item prop.
  * @prop {number} [props.index] - Index position of the item in the drag list.
  * @prop {React.ReactNode} [props.iconDrag=<BiDotsVerticalRounded size={24} />] - Icon to display as the drag handle.
@@ -72,8 +72,9 @@ export const DragListItem: FC<ILibDragListItem> = ({
 				role="button"
 				aria-label={iconLabel}
 				className={clsx(
-					"cursor-grab! active:cursor-grabbing",
+					"outline-none cursor-grab! active:cursor-grabbing",
 					"drag-list-item-button",
+					genRingColor["gray"],
 				)}
 			>
 				{iconDrag}

package/dist/lib/components/Drawer/Drawer.tsx

@@ -35,7 +35,7 @@ import type { ILibDrawer } from "./types"
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the drawer container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the drawer element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the drawer element.
  * @prop {React.ReactNode} [props.children] - Content to display inside the drawer.
  * @prop {boolean} [props.isOpen] - Whether the drawer is currently open.
  * @prop {function} [props.setIsOpen] - Function to control the drawer's open/closed state.

package/dist/lib/components/Dropdown/Dropdown.tsx

@@ -23,7 +23,7 @@ import type { ILibDropdown } from "./types"
  *   ]}
  * />
  *
- * @extends ILibDropdown
+ * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the dropdown container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.

package/dist/lib/components/Fade/Fade.tsx

@@ -12,14 +12,14 @@ import type { ILibFade } from "./types"
  * <Fade>
  *   <h1>This content will fade in when visible</h1>
  * </Fade>
- * 
- * @extends ILibFade
+ *
+ * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the fade container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the fade element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the fade element.
  * @prop {React.ReactNode} [props.children] - Content to animate with fade effect.
- * 
+ *
  * @returns {JSX.Element} The rendered Fade component.
  *
  * @see https://doc-julseb-lib-react.vercel.app/components/fade

package/dist/lib/components/Fieldset/Fieldset.tsx

@@ -22,7 +22,7 @@ import type { ILibFieldset } from "./types"
  * @extends HTMLFieldSetElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the fieldset container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the fieldset element.
+ * @prop {React.Ref<HTMLFieldSetElement>} [props.ref] - Ref to the fieldset element.
  * @prop {React.ReactNode} [props.children] - Form controls and content to display inside the fieldset.
  * @prop {string} [props.label] - Label text to display above the fieldset.
  * @prop {string} [props.labelComment] - Additional comment text next to the label.
@@ -74,7 +74,7 @@ export const Fieldset: FC<ILibFieldset> = ({
 				)}
 				{...rest}
 			>
-				<legend className="px-3 font-black fieldset-legend">
+				<legend className="px-3 font-bold fieldset-legend">
 					{legend}
 				</legend>
 

package/dist/lib/components/Footer/Footer.tsx

@@ -0,0 +1,103 @@
+import { Children, Fragment, type FC } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { clsx, genTextAllColor } from "../../utils"
+import type { ILibFooter } from "./types"
+
+/**
+ * Footer component for displaying a page footer with logo, links, and customizable layout options.
+ *
+ * @component
+ *
+ * @example
+ * <Footer
+ *   logo={<img src="/logo.png" alt="Logo" />}
+ *   direction="horizontal"
+ *   linksSeparator="dot"
+ *   items={[
+ *     <a href="/privacy">Privacy</a>,
+ *     <a href="/terms">Terms</a>,
+ *     <a href="/contact">Contact</a>
+ *   ]}
+ * />
+ *
+ * @extends ILibFooter
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the footer container.
+ * @prop {React.ElementType} [props.element="footer"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the footer element.
+ * @prop {React.ReactNode} [props.children] - Child elements to display in the footer links section.
+ * @prop {boolean} [props.hideSeparator] - Whether to hide the top border separator line.
+ * @prop {boolean} [props.hideLinksSeparator] - Whether to hide separators between footer links.
+ * @prop {"dot" | "dash"} [props.linksSeparator="dot"] - Type of separator to display between links.
+ * @prop {Array<React.ReactNode>} [props.items] - Array of footer link items to display.
+ * @prop {React.ReactNode} [props.logo] - Logo element to display in the footer.
+ * @prop {"horizontal" | "vertical"} [props.direction="horizontal"] - Layout direction for footer content.
+ * @prop {LibAllColors} [props.linksSeparatorColor="gray-500"] - Color for the separator between links.
+ *
+ * @returns {JSX.Element} The rendered Footer component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/footer
+ */
+export const Footer: FC<ILibFooter> = ({
+	className,
+	element = "footer",
+	ref,
+	children,
+	hideSeparator,
+	hideLinksSeparator,
+	linksSeparator = "dot",
+	items,
+	logo,
+	direction = "horizontal",
+	linksSeparatorColor = "gray-500",
+	...rest
+}) => {
+	const Element = element
+	const childrenArray = Children.toArray(children)
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				"relative flex px-[5%] pb-4",
+				direction === "horizontal"
+					? "flex-row justify-between"
+					: "flex-col items-center gap-2",
+				!hideSeparator &&
+					"before:w-[90%] before:h-[1px] before:absolute before:top-0 before:left-[5%] before:bg-gray-200 pt-4",
+				"footer",
+				className,
+			)}
+			{...rest}
+		>
+			{logo}
+
+			<div className="flex items-container gap-2">
+				{items?.map((item, i) => (
+					<Fragment key={uuid()}>
+						{item}
+
+						{i !== items.length - 1 && !hideLinksSeparator && (
+							<span
+								className={clsx(
+									genTextAllColor[linksSeparatorColor],
+								)}
+							>
+								{linksSeparator === "dot" ? "•" : "-"}
+							</span>
+						)}
+					</Fragment>
+				)) ??
+					childrenArray.map((child, i) => (
+						<Fragment key={uuid()}>
+							{child}
+
+							{i !== childrenArray.length - 1 &&
+								!hideLinksSeparator &&
+								(linksSeparator === "dot" ? "•" : "-")}
+						</Fragment>
+					))}
+			</div>
+		</Element>
+	)
+}

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

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