@julseb-lib/react 0.1.11 → 0.1.13

package/dist/lib/components/Toast/Toast.tsx

@@ -2,7 +2,7 @@ import { type FC } from "react"
 import { BiX } from "react-icons/bi"
 import { Text } from "../Text"
 import { Loader } from "../Loader"
-import { clsx, genTextColorHover } from "../../utils"
+import { clsx, genRingColor, genTextColorHover } from "../../utils"
 import { genToastColors } from "./utils"
 import type { ILibToast } from "./types"
 
@@ -19,11 +19,11 @@ import type { ILibToast } from "./types"
  *   closeToast={handleClose}
  * />
  *
- * @extends ILibToast
+ * @extends HTMLDivElement
  *
  * @prop {string} [props.className] - Additional CSS classes to apply to the toast container.
  * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the toast element.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the toast element.
  * @prop {React.ReactNode} [props.body] - Body content to display below the title.
  * @prop {React.ReactNode} [props.title] - Title content to display in the toast header.
  * @prop {"success" | "error" | "warning" | "info" | "loading"} [props.status="success"] - Status type that determines the toast appearance and behavior.
@@ -85,8 +85,9 @@ export const Toast: FC<ILibToast> = ({
 						<button
 							onClick={closeToast}
 							className={clsx(
-								"inline-flex justify-center items-center size-6",
+								"inline-flex justify-center items-center rounded-md outline-none size-6",
 								genTextColorHover["gray"],
+								genRingColor["gray"],
 								"toast-close-button",
 							)}
 						>

package/dist/lib/components/Tooltip/Tooltip.tsx

@@ -9,36 +9,43 @@ import type {
 } from "../../types"
 
 /**
- * Tooltip component for displaying contextual information on hover or click.
+ * Tooltip component for displaying contextual information on hover or click interactions.
  *
  * @component
- * @example
- * <Tooltip tooltip="Hello world!" position="top" trigger="hover" backgroundColor="black" textColor="white" />
  *
- * @link https://doc-julseb-lib-react.vercel.app/components/tooltip
+ * @example
+ * <Tooltip
+ *   tooltip="This is a helpful tooltip"
+ *   position="top"
+ *   trigger="hover"
+ *   backgroundColor="black-80"
+ *   textColor="white"
+ * >
+ *   <button>Hover me</button>
+ * </Tooltip>
  *
  * @extends HTMLDivElement
  *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the tooltip container.
- * @prop {React.RefObject<HTMLDivElement>} [props.ref] - Ref for the tooltip container.
- * @prop {React.ReactNode} props.children - The element that triggers the tooltip.
- * @prop {string} props.tooltip - The tooltip text to display.
- * @prop {"top" | "bottom" | "left" | "right"} [props.position="top"] - Tooltip position.
- * @prop {boolean} [props.hideArrow] - If true, hides the tooltip arrow.
- * @prop {"hover" | "click"} [props.trigger="hover"] - Tooltip trigger event.
- * @prop {string} [props.backgroundColor="black-80"] - Tooltip background color.
- * @prop {string} [props.textColor="white"] - Tooltip text color.
- * @prop {"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0px"} [props.offset="xs"] - Tooltip offset.
- * @prop {string} [props.tooltipClasses] - Additional class names for the tooltip.
- * @prop {CSSProperties} [props.tooltipStyle] - Additional style for the tooltip.
- * @prop {function} [props.onClick] - Click event handler.
- * @prop {function} [props.onMouseEnter] - Mouse enter event handler.
- * @prop {function} [props.onMouseLeave] - Mouse leave event handler.
- * @prop {object} [props.rest] - Additional props spread to the tooltip container.
+ * @prop {string} [props.className] - Additional CSS classes to apply to the tooltip container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tooltip container element.
+ * @prop {React.ReactNode} [props.children] - The element that triggers the tooltip on interaction.
+ * @prop {string} [props.tooltip] - The tooltip text content to display.
+ * @prop {"top" | "bottom" | "left" | "right"} [props.position="top"] - Position of the tooltip relative to the trigger element.
+ * @prop {boolean} [props.hideArrow] - Whether to hide the tooltip arrow pointer.
+ * @prop {"hover" | "click"} [props.trigger="hover"] - Event that triggers the tooltip display.
+ * @prop {LibAllColorsAndOverlays} [props.backgroundColor="black-80"] - Background color for the tooltip.
+ * @prop {LibAllColors} [props.textColor="white"] - Text color for the tooltip content.
+ * @prop {LibSpacers} [props.offset="xs"] - Distance offset between tooltip and trigger element.
+ * @prop {string} [props.tooltipClasses] - Additional CSS classes for the tooltip element.
+ * @prop {React.CSSProperties} [props.tooltipStyle] - Additional inline styles for the tooltip element.
+ * @prop {function} [props.onClick] - Click event handler for the trigger element.
+ * @prop {function} [props.onMouseEnter] - Mouse enter event handler for the trigger element.
+ * @prop {function} [props.onMouseLeave] - Mouse leave event handler for the trigger element.
  *
  * @returns {JSX.Element} The rendered Tooltip component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/tooltip
  */
 export const Tooltip: FC<ILibTooltip> = ({
 	className,

package/dist/lib/components/Wrapper/Wrapper.tsx

@@ -43,7 +43,7 @@ export const Wrapper: FC<ILibWrapper> = ({
 		<Element
 			ref={ref}
 			className={clsx(
-				"z-10 relative flex sm:flex-row flex-col justify-stretch sm:justify-center-safe gap-6 px-4 md:px-6 lg:px-12 w-full",
+				"z-10 relative flex sm:flex-row flex-col justify-stretch sm:justify-center-safe gap-5 px-4 md:px-5 lg:px-12 w-full",
 				(genBgAllColors as any)[backgroundColor],
 				genMinHeight[minHeight],
 				genGap[gap],

package/dist/lib/index.css

@@ -4,7 +4,8 @@
 
 :root {
 	--font-lato: "Lato", sans-serif;
-	--font-family-body: var(--font-lato);
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
 }
 
 @theme {
@@ -78,10 +79,6 @@
 	--color-background: var(--color-white);
 	--color-font: var(--color-black);
 
-	--font-lato: "Lato", sans-serif;
-	--font-family-body: var(--font-lato);
-	--font-family-code: monospace;
-
 	--font-weight-thin: 100;
 	--font-weight-light: 300;
 	--font-weight-normal: 400;
@@ -103,7 +100,16 @@
 		rgba(255, 255, 255, 0.35) 100%
 	);
 
-	--rounded-full: calc(infinity * 1px);
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
+
+	--spacer-2xs: 4px;
+	--spacer-xs: 8px;
+	--spacer-sm: 12px;
+	--spacer-md: 16px;
+	--spacer-lg: 24px;
+	--spacer-xl: 32px;
+	--spacer-2xl: 48px;
 
 	--main-default: 600px;
 	--main-large: 800px;
@@ -112,64 +118,54 @@
 	--aside-default: 250px;
 	--aside-small: 200px;
 
-	--shadow-2xl:
-		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-xl:
-		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-lg:
-		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
-	--shadow-md:
-		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
-	--shadow-sm:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 	--shadow-xs:
 		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-md:
+		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-lg:
+		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+	--shadow-xl:
+		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-2xl:
+		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
 	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
 	--shadow-none: none;
 
-	--spacer-2xs: 4px;
-	--spacer-xs: 8px;
-	--spacer-sm: 12px;
-	--spacer-md: 16px;
-	--spacer-lg: 24px;
-	--spacer-xl: 32px;
-	--spacer-2xl: 48px;
-
 	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
 
-	--font-size-display-h1: 5rem;
-	--font-size-display-h2: 4rem;
-	--font-size-display-h3: 3.5rem;
-	--font-size-display-h4: 3rem;
-	--font-size-display-h5: 2.5rem;
-	--font-size-h1: 2.5rem;
-	--font-size-h2: 2rem;
-	--font-size-h3: 1.8rem;
-	--font-size-h4: 1.5rem;
-	--font-size-h5: 1.3rem;
-	--font-size-h6: 1.1rem;
-	--font-size-body: 1rem;
-	--font-size-small: 0.875rem;
-}
-
-@layer base {
-	html,
-	body {
-		font-family: var(--font-family-body);
-	}
+	--transition-short: all 200ms ease;
+	--transition-long: all 500ms ease;
+	--transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
+
+	--text-display-h1: 5rem;
+	--text-display-h2: 4rem;
+	--text-display-h3: 3.5rem;
+	--text-display-h4: 3rem;
+	--text-display-h5: 2.5rem;
+	--text-h1: 2.5rem;
+	--text-h2: 2rem;
+	--text-h3: 1.8rem;
+	--text-h4: 1.5rem;
+	--text-h5: 1.3rem;
+	--text-h6: 1.1rem;
+	--text-body: 1rem;
+	--text-small: 0.875rem;
 }
 
 /*====================== Common styles ======================*/
 
 html,
 body {
-	font-family: var(--font-family-body) !important;
+	font-family: var(--font-sans);
 	width: 100%;
 	min-height: 100vh;
 	background-color: var(--color-background);
 	color: var(--color-font);
 	max-width: 100dvw;
+	line-height: var(--leading-normal);
 
 	&.dark {
 		--color-background: var(--color-black);
@@ -184,7 +180,7 @@ body {
 a,
 button {
 	cursor: pointer;
-	transition: all 200ms ease;
+	transition: var(--transition-short);
 
 	&:disabled {
 		cursor: not-allowed;
@@ -198,73 +194,73 @@ button {
 		max-width: 100%;
 	}
 
-	.no-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
 	.no-scrollbar {
 		-ms-overflow-style: none;
 		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
 	}
 
 	/*====================== Fonts ======================*/
 
 	.lato-thin {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: normal;
 	}
 
 	.lato-light {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: normal;
 	}
 
 	.lato-regular {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: normal;
 	}
 
 	.lato-bold {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: normal;
 	}
 
 	.lato-black {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: normal;
 	}
 
 	.lato-thin-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: italic;
 	}
 
 	.lato-light-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: italic;
 	}
 
 	.lato-regular-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: italic;
 	}
 
 	.lato-bold-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: italic;
 	}
 
 	.lato-black-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: italic;
 	}
@@ -363,24 +359,6 @@ button {
 		}
 	}
 
-	.animate-shine {
-		position: relative;
-		overflow: hidden;
-
-		&:before {
-			content: "";
-			position: absolute;
-			top: -200px;
-			bottom: -200px;
-			background-color: var(--color-white);
-			opacity: 0.7;
-			filter: blur(20px);
-			width: 100px;
-			transform: skew(-15deg);
-			animation: shine 2000ms ease-in-out infinite;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);
@@ -391,15 +369,6 @@ button {
 		}
 	}
 
-	.animate-spin {
-		animation: spin 1200ms linear infinite;
-	}
-
-	.animate-bezier {
-		animation: spin 1200ms var(--animate-cubic-bezier) infinite;
-		animation-delay: var(--spinner-delay);
-	}
-
 	@keyframes loader-pulse {
 		0%,
 		100% {
@@ -411,30 +380,6 @@ button {
 		}
 	}
 
-	.dot {
-		animation: loader-pulse 1200ms linear infinite;
-		animation-delay: var(--dot-delay);
-	}
-
-	input::-webkit-slider-thumb {
-		box-shadow: var(--shadow-lg);
-	}
-
-	@keyframes toast-timer-animation {
-		0% {
-			width: 100%;
-		}
-
-		100% {
-			width: 0;
-		}
-	}
-
-	.toast-timer {
-		animation: toast-timer-animation var(--toast-timer-duration) linear
-			forwards;
-	}
-
 	.Toastify__progress-bar--bg {
 		background-color: transparent !important;
 	}
@@ -448,8 +393,4 @@ button {
 			width: var(--meter-value);
 		}
 	}
-
-	.progress-bar-animated:before {
-		animation: progress-bar calc(var(--progress-speed) * 50ms) ease forwards;
-	}
 }

package/dist/lib/index.ts

@@ -122,5 +122,8 @@ export * from "./components/Fade"
 export * from "./components/BackToTop"
 export * from "./components/Drawer"
 export * from "./components/Header"
-export * from "./components/IconMenu"
+export * from "./components/Footer"
+export * from "./components/Meta"
+export * from "./components/PageLayout"
+export * from "./components/SrOnly"
 /* Prepend here - DO NOT REMOVE */

package/dist/lib/types/components-items-props.ts

@@ -1,9 +1,4 @@
-import type {
-	ButtonHTMLAttributes,
-	ElementType,
-	RefObject,
-	ReactElement,
-} from "react"
+import type { ButtonHTMLAttributes, ElementType, RefObject } from "react"
 import type { ClassNames, ReactChildren } from "./global"
 
 /**
@@ -187,21 +182,3 @@ export type LibMdEditorOptions = {
 	viewLive?: boolean
 	viewPreview?: boolean
 }
-
-/**
- * @description Props for button items within IconMenu components, combining base item functionality with button-specific properties.
- *
- * @extends LibItemBase<HTMLButtonElement>
- * @extends ButtonHTMLAttributes<HTMLButtonElement>
- * @prop {ElementType} [element] - HTML element type to render as the container.
- * @prop {RefObject<HTMLButtonElement>} [ref] - Ref to the button element.
- * @prop {string} [id] - Unique identifier for the menu item.
- * @prop {string} label - Text label displayed for the menu item.
- * @prop {ReactElement} icon - Icon element displayed alongside the label.
- */
-export interface LibIconMenuItem
-	extends LibItemBase<HTMLButtonElement>,
-		Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
-	label: string
-	icon: ReactElement
-}

package/dist/lib/types/components-props.ts

@@ -59,5 +59,8 @@ export * from "../components/Fade/types"
 export * from "../components/BackToTop/types"
 export * from "../components/Drawer/types"
 export * from "../components/Header/types"
-export * from "../components/IconMenu/types"
+export * from "../components/Footer/types"
+export * from "../components/Meta/types"
+export * from "../components/PageLayout/types"
+export * from "../components/SrOnly/types"
 /* Prepend here - DO NOT REMOVE */

package/dist/lib/types/global.ts

@@ -563,25 +563,23 @@ export type LibHeaderPosition = Extract<
 >
 
 /**
- * @description All icon menu direction tokens available in the library for controlling the direction of expandable icon menus.
- * @type {"up" | "down" | "left" | "right"}
+ * @description All footer direction tokens available in the library for controlling the layout direction of footer content.
+ * @type {"horizontal" | "vertical"}
  * @example
- * direction="up"
- * direction="down"
- * direction="left"
- * direction="right"
+ * direction="horizontal"
+ * direction="vertical"
  */
-export type LibIconMenuDirection =
-	keyof typeof designTokens.libIconMenuDirections
+export type LibFooterDirection = keyof typeof designTokens.libFooterDirection
 
 /**
- * @description All icon menu icon tokens available in the library for controlling the icon displayed in expandable icon menus.
- * @type {"plus" | "burger"}
+ * @description All footer links separator tokens available in the library for controlling the visual separator between footer links.
+ * @type {"dot" | "dash"}
  * @example
- * icon="plus"
- * icon="burger"
+ * separator="dot"
+ * separator="dash"
  */
-export type LibIconMenuIcon = keyof typeof designTokens.libIconMenuIcon
+export type LibFooterLinksSeparator =
+	keyof typeof designTokens.libFooterLinksSeparator
 
 /**
  * @description Type of values for InputPin component representing a collection of pin input values.

package/dist/lib/utils/design-tokens.ts

@@ -534,14 +534,9 @@ export const designTokens = {
 
 	libNavMobileVariants: { full: "full", top: "top", drawer: "drawer" },
 
-	libIconMenuDirections: {
-		left: "left",
-		up: "up",
-		right: "right",
-		down: "down",
-	},
+	libFooterDirection: { horizontal: "horizontal", vertical: "vertical" },
 
-	libIconMenuIcon: { plus: "plus", burger: "burger" },
+	libFooterLinksSeparator: { dot: "dot", dash: "dash" },
 
 	libCountryCodes: {
 		af: "af",

package/dist/lib/utils/gen-gap.ts

@@ -1,34 +1,34 @@
 import type { LibSpacers } from "../types"
 
 export const genGap: Record<LibSpacers, string> = {
-	"2xl": "gap-(--spacer-2xl)",
-	xl: "gap-(--spacer-xl)",
-	lg: "gap-(--spacer-lg)",
-	md: "gap-(--spacer-md)",
-	sm: "gap-(--spacer-sm)",
-	xs: "gap-(--spacer-xs)",
-	"2xs": "gap-(--spacer-2xs)",
+	"2xl": "gap-12",
+	xl: "gap-8",
+	lg: "gap-5",
+	md: "gap-4",
+	sm: "gap-3",
+	xs: "gap-2",
+	"2xs": "gap-1",
 	"0px": "0px",
 }
 
 export const genRowGap: Record<LibSpacers, string> = {
-	"2xl": "gap-y-(--spacer-2xl)",
-	xl: "gap-y-(--spacer-xl)",
-	lg: "gap-y-(--spacer-lg)",
-	md: "gap-y-(--spacer-md)",
-	sm: "gap-y-(--spacer-sm)",
-	xs: "gap-y-(--spacer-xs)",
-	"2xs": "gap-y-(--spacer-2xs)",
+	"2xl": "gap-y-12",
+	xl: "gap-y-8",
+	lg: "gap-y-5",
+	md: "gap-y-4",
+	sm: "gap-y-3",
+	xs: "gap-y-2",
+	"2xs": "gap-y-1",
 	"0px": "0px",
 }
 
 export const genColGap: Record<LibSpacers, string> = {
-	"2xl": "gap-x-(--spacer-2xl)",
-	xl: "gap-x-(--spacer-xl)",
-	lg: "gap-x-(--spacer-lg)",
-	md: "gap-x-(--spacer-md)",
-	sm: "gap-x-(--spacer-sm)",
-	xs: "gap-x-(--spacer-xs)",
-	"2xs": "gap-x-(--spacer-2xs)",
+	"2xl": "gap-x-12",
+	xl: "gap-x-8",
+	lg: "gap-x-5",
+	md: "gap-x-4",
+	sm: "gap-x-3",
+	xs: "gap-x-2",
+	"2xs": "gap-x-1",
 	"0px": "0px",
 }

package/dist/lib/utils/gen-ring-color.ts

@@ -0,0 +1,21 @@
+import type { LibColorsHover } from "../types"
+
+export const genRingColor: Record<LibColorsHover, string> = {
+	primary: "focus:ring-1 focus:ring-primary-800",
+	secondary: "focus:ring-1 focus:ring-secondary-800",
+	success: "focus:ring-1 focus:ring-success-800",
+	danger: "focus:ring-1 focus:ring-danger-800",
+	warning: "focus:ring-1 focus:ring-warning-800",
+	gray: "focus:ring-1 focus:ring-gray-800",
+	white: "focus:ring-1 focus:ring-gray-500",
+}
+
+export const genRingColorChildren: Record<LibColorsHover, string> = {
+	primary: "[&>*]:focus:ring-1 [&>*]:focus:ring-primary-800",
+	secondary: "[&>*]:focus:ring-1 [&>*]:focus:ring-secondary-800",
+	success: "[&>*]:focus:ring-1 [&>*]:focus:ring-success-800",
+	danger: "[&>*]:focus:ring-1 [&>*]:focus:ring-danger-800",
+	warning: "[&>*]:focus:ring-1 [&>*]:focus:ring-warning-800",
+	gray: "[&>*]:focus:ring-1 [&>*]:focus:ring-gray-800",
+	white: "[&>*]:focus:ring-1 [&>*]:focus:ring-gray-500",
+}

package/dist/lib/utils/index.ts

@@ -16,3 +16,4 @@ export * from "./gen-button-color"
 export * from "./gen-box-shadow"
 export * from "./gen-vertical-align"
 export * from "./options-markdown"
+export * from "./gen-ring-color"

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@julseb-lib/react",
 	"private": false,
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"type": "module",
 	"license": "MIT",
 	"scripts": {
@@ -18,16 +18,10 @@
 		"plop:st": "yarn plop subtype",
 		"plop:g": "yarn plop generator",
 		"plop:d": "yarn plop demo",
-		"cy": "cypress",
-		"cy:open": "cypress open",
-		"cy:ct:run": "cypress run --component --browser electron",
-		"cy:ct:open": "cypress open --component --browser electron",
-		"docgen": "react-docgen -o ./src/data/docgen.json ./src/lib/components/**/*.tsx",
-		"cssgen": "cssjson src/lib/index.css --output src/data/styles.json",
 		"check-errors": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@julseb-lib/utils": "^0.0.13",
+		"@julseb-lib/utils": "^0.0.14",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/postcss": "^4.1.11",
 		"@tailwindcss/vite": "^4.1.11",
@@ -37,7 +31,6 @@
 		"postcss": "^8.5.6",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
-		"react-helmet-async": "^2.0.5",
 		"react-icons": "^5.5.0",
 		"react-router-dom": "^7.6.3",
 		"react-syntax-highlighter": "^15.6.1",
@@ -59,6 +52,7 @@
 		"@typescript-eslint/eslint-plugin": "^8.35.1",
 		"@typescript-eslint/parser": "^8.35.1",
 		"@vitejs/plugin-react": "^4.6.0",
+		"axios": "^1.10.0",
 		"cross-env": "^7.0.3",
 		"cssjson-cli": "^1.0.1",
 		"dotenv": "^17.0.0",