@julseb-lib/react 0.1.18 → 0.1.20

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

@@ -1,197 +0,0 @@
-import { useCallback, useRef, useState, type FC, type RefObject } from "react"
-import { clsx, genBgAllColorsAndOverlays, genTextAllColor } from "../../utils"
-import type { ILibTooltip } from "./types"
-import { useClickOutside, useTouchScreen } from "../../hooks"
-import type {
-	LibSpacers,
-	LibTooltipPosition,
-	LibTooltipTrigger,
-} from "../../types"
-
-/**
- * Tooltip component for displaying contextual information on hover or click interactions.
- *
- * @component
- *
- * @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 {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,
-	element = "div",
-	ref,
-	children,
-	tooltip,
-	position = "top",
-	hideArrow,
-	trigger = "hover",
-	backgroundColor = "black-80",
-	textColor = "white",
-	offset = "xs",
-	tooltipClasses,
-	tooltipStyle,
-	onClick,
-	onMouseEnter,
-	onMouseLeave,
-	...rest
-}) => {
-	const Element = element
-
-	const isTouchScreen = useTouchScreen()
-	const defaultTrigger: LibTooltipTrigger =
-		trigger === "click" || isTouchScreen ? "click" : "hover"
-
-	const [isVisible, setIsVisible] = useState(false)
-
-	const el = useRef<HTMLDivElement>(null)
-	useClickOutside(el as RefObject<HTMLElement>, () => {
-		if (isVisible && defaultTrigger === "click") setIsVisible(false)
-	})
-
-	const handleClick = useCallback(() => {
-		setIsVisible(!isVisible)
-	}, [isVisible])
-
-	const handleHover = useCallback(() => {
-		setIsVisible(true)
-	}, [])
-
-	const handleLeave = useCallback(() => {
-		setIsVisible(false)
-	}, [])
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-block relative w-fit",
-				isVisible && "visible",
-				"[&.visible]:z-20",
-				"tooltip-wrapper",
-				className,
-			)}
-			onClick={
-				onClick
-					? onClick
-					: defaultTrigger === "click"
-						? handleClick
-						: undefined
-			}
-			onMouseEnter={
-				onMouseEnter
-					? onMouseEnter
-					: defaultTrigger === "hover"
-						? handleHover
-						: undefined
-			}
-			onMouseLeave={
-				onMouseLeave
-					? onMouseLeave
-					: defaultTrigger === "hover"
-						? handleLeave
-						: undefined
-			}
-			{...rest}
-		>
-			{children}
-
-			<span
-				className={clsx(
-					"absolute px-2 py-1 rounded-md max-w-[unset] text-sm whitespace-nowrap transition-all duration-200 ease-in-out",
-					genBgAllColorsAndOverlays[backgroundColor],
-					genTextAllColor[textColor],
-					isVisible ? "opacity-100 visible" : "opacity-0 invisible",
-					!hideArrow && "with-arrow",
-					genPosition[offset][position],
-					tooltipClasses,
-					"tooltip",
-				)}
-				style={tooltipStyle}
-			>
-				{tooltip}
-			</span>
-		</Element>
-	)
-}
-
-const genPosition: Record<LibSpacers, Record<LibTooltipPosition, string>> = {
-	"0px": {
-		left: "top-0 -left-[86%] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[-70%] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[80%] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-0px))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	"2xs": {
-		left: "top-0 -left-[calc(86%+var(--spacer-2xs))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-2xs)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-2xs))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-2xs)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	xs: {
-		left: "top-0 -left-[calc(86%+var(--spacer-xs))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-xs)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-xs))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-xs)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	sm: {
-		left: "top-0 -left-[calc(86%+var(--spacer-sm))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-sm)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-sm))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-sm)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	md: {
-		left: "top-0 -left-[calc(86%+var(--spacer-md))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-md)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-md))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-md)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	lg: {
-		left: "top-0 -left-[calc(86%+var(--spacer-lg))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-lg)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-lg))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-lg)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	xl: {
-		left: "top-0 -left-[calc(86%+var(--spacer-xl))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-xl)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-xl))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-xl)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-	"2xl": {
-		left: "top-0 -left-[calc(86%+var(--spacer-2xl))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:left-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-l-(--color-overlay-black-80)",
-		top: "left-[50%] -translate-x-[50%] top-[calc(-100%-var(--spacer-2xl)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-t-(--color-overlay-black-80)",
-		right: "top-0 -right-[calc(80%+var(--spacer-2xl))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:top-[50%] [&.with-arrow]:after:right-[100%] [&.with-arrow]:after:translate-y-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-r-(--color-overlay-black-80)",
-		bottom: "left-[50%] -translate-x-[50%] bottom-[calc(-100%-var(--spacer-2xl)))] [&.with-arrow]:after:absolute [&.with-arrow]:after:border-4 [&.with-arrow]:after:bottom-[100%] [&.with-arrow]:after:left-[50%] [&.with-arrow]:after:translate-x-[-50%] [&.with-arrow]:after:border-transparent [&.with-arrow]:after:border-b-(--color-overlay-black-80)",
-	},
-}

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

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

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

@@ -1,23 +0,0 @@
-import type { ReactElement } from "react"
-import type {
-	ClassNames,
-	CSSProperties,
-	LibAllColors,
-	LibAllColorsAndOverlays,
-	LibComponentBase,
-	LibSpacers,
-	LibTooltipPosition,
-	LibTooltipTrigger,
-} from "../../types"
-
-export interface ILibTooltip extends LibComponentBase<HTMLSpanElement> {
-	tooltip: string | ReactElement
-	position?: LibTooltipPosition
-	hideArrow?: boolean
-	trigger?: LibTooltipTrigger
-	backgroundColor?: LibAllColorsAndOverlays
-	textColor?: LibAllColors
-	offset?: LibSpacers
-	tooltipClasses?: ClassNames
-	tooltipStyle?: CSSProperties
-}

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

@@ -1,75 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgAllColors, genGap } from "../../utils"
-import type { ILibWrapper } from "./types"
-
-/**
- * Wrapper component for providing a responsive layout container.
- *
- * @component
- * @example
- * <Wrapper>
- *   <Main>Content</Main>
- * </Wrapper>
- *
- * @extends HTMLDivElement
- *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="section"] - The HTML element or React component to render as the wrapper container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the wrapper container.
- * @prop {ReactNode} props.children - Wrapper content.
- * @prop {"px"|"full"|"screen"|"dvh"|"dvw"|"lvh"|"lvw"|"svw"|"svh"|"auto"|"min"|"max"|"fit"|"lh"|} [props.minHeight="svh"] - Minimum height class (uses Tailwind min-h-* utilities).
- * @prop {string} [props.backgroundColor="background"] - Any color from the library.
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="lg"] - Gap between children (uses library spacers).
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered wrapper container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/styles/wrapper
- */
-export const Wrapper: FC<ILibWrapper> = ({
-	className,
-	element = "section",
-	children,
-	ref,
-	minHeight = "svh",
-	backgroundColor = "background",
-	gap = "lg",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"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],
-				"wrapper",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const genMinHeight = {
-	px: "min-h-px",
-	full: "min-h-full",
-	screen: "min-h-screen",
-	dvh: "min-h-dvh",
-	dvw: "min-h-dvw",
-	lvh: "min-h-lvh",
-	lvw: "min-h-lvw",
-	svw: "min-h-svw",
-	svh: "min-h-svh",
-	auto: "min-h-auto",
-	min: "min-h-min",
-	max: "min-h-max",
-	fit: "min-h-fit",
-	lh: "min-h-lh",
-}

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

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

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

@@ -1,12 +0,0 @@
-import type {
-	LibComponentBase,
-	LibSpacers,
-	LibAllColors,
-	LibMinHeight,
-} from "../../types"
-
-export interface ILibWrapper extends LibComponentBase<HTMLDivElement> {
-	gap?: LibSpacers
-	backgroundColor?: LibAllColors
-	minHeight?: LibMinHeight
-}

package/dist/lib/context/Theme.context.tsx

@@ -1,66 +0,0 @@
-import { useState, useEffect, createContext, useContext } from "react"
-import type { LibThemeNames, ReactChildren, DispatchState } from "../types"
-
-type ILibThemeContext = {
-	theme: LibThemeNames
-	setTheme: DispatchState<LibThemeNames>
-	switchTheme: () => void
-}
-
-const ThemeContext = createContext<ILibThemeContext | null>(null)
-
-interface ILibThemeProvider {
-	children?: ReactChildren
-}
-
-export const ThemeProviderWrapper = ({ children }: ILibThemeProvider) => {
-	const storedTheme = localStorage.getItem("theme") as LibThemeNames
-	const [theme, setTheme] = useState(storedTheme ?? "light")
-
-	const docEl = document.documentElement
-
-	const switchToLight = () => {
-		docEl.classList.add("light")
-		docEl.classList.remove("dark")
-		setTheme("light")
-		localStorage.setItem("theme", "light")
-	}
-
-	const switchToDark = () => {
-		docEl.classList.remove("light")
-		docEl.classList.add("dark")
-		setTheme("dark")
-		localStorage.setItem("theme", "dark")
-	}
-
-	useEffect(() => {
-		if (storedTheme) {
-			if (theme === "light") switchToLight()
-			else switchToDark()
-		} else {
-			if (window.matchMedia("(prefers-color-scheme: dark)").matches)
-				switchToDark()
-			else switchToLight()
-		}
-	}, [theme, localStorage.getItem("theme"), docEl])
-
-	const switchTheme = () => {
-		if (theme === "light") switchToDark()
-		else switchToLight()
-	}
-
-	return (
-		<ThemeContext.Provider value={{ theme, setTheme, switchTheme }}>
-			{children}
-		</ThemeContext.Provider>
-	)
-}
-
-/**
- * Custom hook to access the theme context.
- *
- * @returns {ILibThemeContext} The current theme, a setter for the theme, and a function to toggle between light and dark themes.
- * @example
- * const { theme, setTheme, switchTheme } = useLibTheme()
- */
-export const useLibTheme = () => useContext(ThemeContext) as ILibThemeContext

package/dist/lib/context/index.ts

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

package/dist/lib/hooks/index.ts

@@ -1,15 +0,0 @@
-export * from "./useClickOutside"
-export * from "./useCopyToClipboard"
-export * from "./useDebounce"
-export * from "./useExportData"
-export * from "./useFetch"
-export * from "./useForm"
-export * from "./useIsOverflow"
-export * from "./useKeyPress"
-export * from "./useMaxWidth"
-export * from "./useMergeRefs"
-export * from "./useMinWidth"
-export * from "./usePaginatedData"
-export * from "./usePagination"
-export * from "./useTouchScreen"
-export * from "./useTranslation"

package/dist/lib/hooks/useClickOutside.tsx

@@ -1,50 +0,0 @@
-import { useEffect, type RefObject } from "react"
-
-type Event = MouseEvent | TouchEvent
-
-/**
- * Hook to trigger a function when clicking outside a referenced element.
- *
- * @hook
- *
- * @example
- * const ref = useRef<HTMLDivElement>(null)
- * useClickOutside(ref, () => {
- *   console.log('Clicked outside!')
- *   setIsOpen(false)
- * })
- *
- * @template T - HTML element type that extends HTMLElement
- * @param {RefObject<T>} ref - React ref object pointing to the target element
- * @param {function} handler - Callback function to execute when clicking outside the element
- * @param {Event} handler.event - The mouse or touch event that triggered the outside click
- *
- * @returns {void} This hook doesn't return anything
- *
- * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useClickOutside
- */
-export const useClickOutside = <T extends HTMLElement = HTMLElement>(
-	ref: RefObject<T>,
-	handler: (event: Event) => void,
-) => {
-	useEffect(() => {
-		const listener = (e: Event) => {
-			const target = e.target as HTMLElement
-
-			if (target.getAttribute("href")) return false
-
-			const el = ref?.current
-			if (!el || el.contains((e?.target as Node) || null)) {
-				return
-			}
-
-			handler(e)
-		}
-
-		document.addEventListener("mousedown", listener)
-
-		return () => {
-			document.removeEventListener("mousedown", listener)
-		}
-	}, [ref, handler])
-}

package/dist/lib/hooks/useCopyToClipboard.tsx

@@ -1,50 +0,0 @@
-import { useState } from "react"
-
-type CopiedValue = string | null
-type CopyFn = (text: string) => Promise<boolean>
-
-/**
- * Hook to copy text to clipboard and track the copied value state.
- *
- * @hook
- *
- * @example
- * const [copiedText, copy] = useCopyToClipboard()
- *
- * const handleCopy = async () => {
- *   const success = await copy('Hello, World!')
- *   if (success) {
- *     console.log('Copied:', copiedText)
- *   }
- * }
- *
- * @returns {[CopiedValue, CopyFn]} Array containing the last copied text and copy function
- * @returns {string | null} returns[0] - The last successfully copied text, or null if no text copied or copy failed
- * @returns {function} returns[1] - Async function to copy text to clipboard
- * @returns {string} returns[1].text - Text to copy to clipboard
- * @returns {Promise<boolean>} returns[1].Promise - Promise that resolves to true if copy succeeded, false otherwise
- *
- * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useCopyToClipboard
- */
-export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
-	const [copiedText, setCopiedText] = useState<CopiedValue>(null)
-
-	const copy: CopyFn = async text => {
-		if (!navigator?.clipboard) {
-			console.warn("Clipboard not supported")
-			return false
-		}
-
-		try {
-			await navigator.clipboard.writeText(text)
-			setCopiedText(text)
-			return true
-		} catch (error) {
-			console.warn("Copy failed", error)
-			setCopiedText(null)
-			return false
-		}
-	}
-
-	return [copiedText, copy]
-}

package/dist/lib/hooks/useDebounce.tsx

@@ -1,37 +0,0 @@
-import { useState, useEffect } from "react"
-
-/**
- * Hook to delay the update of a value until after a specified delay period has passed without changes.
- *
- * @hook
- *
- * @example
- * const [searchTerm, setSearchTerm] = useState('')
- * const debouncedSearchTerm = useDebounce(searchTerm, 500)
- *
- * useEffect(() => {
- *   if (debouncedSearchTerm) {
- *     // Perform search API call
- *     searchAPI(debouncedSearchTerm)
- *   }
- * }, [debouncedSearchTerm])
- *
- * @template T - Type of the value being debounced
- * @param {T} value - The value to debounce
- * @param {number} [delay=1000] - Delay in milliseconds before updating the debounced value
- *
- * @returns {T} The debounced value that updates after the delay period
- *
- * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useDebounce
- */
-export const useDebounce = <T,>(value: T, delay: number = 1000) => {
-	const [debouncedValue, setDebouncedValue] = useState<T>(value)
-
-	useEffect(() => {
-		const timedValue = setTimeout(() => setDebouncedValue(value), delay)
-
-		return () => clearTimeout(timedValue)
-	}, [value, delay])
-
-	return debouncedValue
-}

package/dist/lib/hooks/useExportData.tsx

@@ -1,78 +0,0 @@
-interface IDownloadFile {
-	blob: Blob
-	fileName: string
-}
-
-const downloadFile = ({ blob, fileName }: IDownloadFile) => {
-	const a = document.createElement("a")
-	a.download = fileName
-	a.href = window.URL.createObjectURL(blob)
-	const clickEvt = new MouseEvent("click", {
-		view: window,
-		bubbles: true,
-		cancelable: true,
-	})
-	a.dispatchEvent(clickEvt)
-	a.remove()
-}
-
-/**
- * Hook to export data to JSON or CSV format with automatic file download functionality.
- *
- * @hook
- *
- * @example
- * const { exportToJson, exportToCsv } = useExportData()
- *
- * // Export to JSON
- * const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]
- * exportToJson(users, 'users-data')
- *
- * // Export to CSV
- * const headers = ['ID', 'Name']
- * exportToCsv(users, 'users-data', headers)
- *
- * @template T - Type of the data objects being exported
- *
- * @returns {object} Object containing export functions
- * @returns {function} returns.exportToJson - Function to export data as JSON file
- * @returns {Array<T>} returns.exportToJson.data - Array of data objects to export
- * @returns {string} returns.exportToJson.fileName - Name for the downloaded file (without extension)
- * @returns {function} returns.exportToCsv - Function to export data as CSV file
- * @returns {Array<T>} returns.exportToCsv.data - Array of data objects to export
- * @returns {string} returns.exportToCsv.fileName - Name for the downloaded file (without extension)
- * @returns {Array<string>} returns.exportToCsv.headers - Array of column headers for the CSV file
- *
- * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useExportData
- */
-export const useExportData = <T,>() => {
-	const exportToJson = (data: Array<T>, fileName: string) =>
-		downloadFile({
-			blob: new Blob([JSON.stringify(data)], {
-				type: "application/json",
-			}),
-			fileName: `${fileName}.json`,
-		})
-
-	const exportToCsv = (
-		data: Array<T>,
-		fileName: string,
-		headers: Array<string>,
-	) => {
-		const rows = [headers.join(","), ...data].join("\n")
-
-		const blob = new Blob([rows], {
-			type: "text/csv",
-		})
-
-		return downloadFile({
-			blob,
-			fileName: `${fileName}.csv`,
-		})
-	}
-
-	return {
-		exportToCsv,
-		exportToJson,
-	}
-}

package/dist/lib/hooks/useFetch.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "react"
-
-/**
- * Hook to fetch data from a Promise with loading and error state management.
- *
- * @hook
- *
- * @example
- * const { response, error, loading } = useFetch(
- *   fetch('/api/users').then(res => res.json()),
- *   [userId]
- * )
- *
- * if (loading) return <div>Loading...</div>
- * if (error) return <div>Error: {error.message}</div>
- * return <div>{response?.name}</div>
- *
- * @template T - Type of the data returned by the fetch function
- * @param {Promise<T>} fetchFunction - Promise that resolves to the data to be fetched
- * @param {any} [dependencies] - Dependency array to trigger re-fetching when values change
- *
- * @returns {object} Object containing fetch state
- * @returns {T | null} returns.response - The fetched data, or null if not yet loaded or failed
- * @returns {any} returns.error - Error object if the fetch failed, undefined otherwise
- * @returns {boolean} returns.loading - Whether the fetch operation is currently in progress
- *
- * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useFetch
- */
-export const useFetch = <T,>(fetchFunction: Promise<T>, dependencies?: any) => {
-	const [response, setResponse] = useState<T | null>(null)
-	const [loading, setLoading] = useState(true)
-	const [error, setError] = useState<any>(undefined)
-
-	useEffect(() => {
-		fetchFunction
-			.then((res: T) => setResponse(res))
-			.catch((err: any) => setError(err))
-			.finally(() => setLoading(false))
-	}, [dependencies])
-
-	return { response, error, loading } as const
-}