@julseb-lib/react 0.1.18 → 0.1.20

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

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

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

@@ -1,21 +0,0 @@
-import type { DispatchState, LibComponentBase, ReactElement } from "../../types"
-
-interface ILibModalBase extends LibComponentBase<HTMLDivElement> {
-	isOpen: boolean
-	setIsOpen: DispatchState<boolean>
-	disableEsc?: boolean
-}
-
-interface ModalWithCloseButton extends ILibModalBase {
-	hideCloseButton?: false | undefined
-	closeIcon?: ReactElement
-	labelClose?: string
-}
-
-interface ModalWithoutCloseButton extends ILibModalBase {
-	hideCloseButton?: true
-	closeIcon?: never
-	labelClose?: never
-}
-
-export type ILibModal = ModalWithCloseButton | ModalWithoutCloseButton

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

@@ -1,64 +0,0 @@
-import { type FC } from "react"
-import { Meta } from "../Meta"
-import { Header } from "../Header"
-import { Wrapper } from "../Wrapper"
-import { Main } from "../Main"
-import { Footer } from "../Footer"
-import type { ILibPageLayout } from "./types"
-
-/**
- * PageLayout component for creating a complete page structure with optional header, footer, wrapper, and meta tags.
- *
- * @component
- *
- * @example
- * <PageLayout
- *   meta={{ title: "My Page", description: "Page description" }}
- *   header={{ logo: <Logo />, nav: <Nav /> }}
- *   footer={{ logo: <Logo />, items: [<Link href="/privacy">Privacy</Link>] }}
- *   wrapperProps={{ maxWidth: "px" }}
- *   mainProps={{ className: "large" }}
- * >
- *   <h1>Page Content</h1>
- * </PageLayout>
- *
- * @prop {React.ReactNode} [props.children] - The main content to be rendered inside the page layout.
- * @prop {ILibMeta} [props.meta] - Meta component props for HTML head metadata including SEO and social media tags.
- * @prop {ILibHeader} [props.header] - Header component props for displaying the page header with logo and navigation.
- * @prop {ILibWrapper} [props.wrapperProps] - Wrapper component props for controlling the page container styling and layout.
- * @prop {ILibMain} [props.mainProps] - Main component props for styling the main content area.
- * @prop {ILibFooter} [props.footer] - Footer component props for displaying the page footer with links and logo.
- * @prop {boolean} [props.noWrapper] - Whether to skip rendering the Wrapper component around the main content.
- * @prop {boolean} [props.noMain] - Whether to skip rendering the Main component wrapper around children.
- *
- * @returns {JSX.Element} The rendered PageLayout component with complete page structure.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/page-layout
- */
-export const PageLayout: FC<ILibPageLayout> = ({
-	children,
-	meta,
-	header,
-	wrapperProps,
-	mainProps,
-	footer,
-	noWrapper,
-	noMain,
-}) => {
-	return (
-		<>
-			{meta && <Meta {...meta} />}
-			{header && <Header {...header} />}
-			{!noWrapper && (
-				<Wrapper {...wrapperProps}>
-					{!noMain ? (
-						<Main {...mainProps}>{children}</Main>
-					) : (
-						children
-					)}
-				</Wrapper>
-			)}
-			{footer && <Footer {...footer} />}
-		</>
-	)
-}

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

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

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

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

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

@@ -1,64 +0,0 @@
-import { useEffect, type FC } from "react"
-import { disableScroll } from "@julseb-lib/utils"
-import { Loader } from "../Loader"
-import { clsx, genBgAllColors } from "../../utils"
-import type { ILibPageLoading } from "./types"
-
-/**
- * PageLoading component for displaying a full-screen loading overlay with customizable background and loader.
- *
- * @component
- *
- * @example
- * <PageLoading
- *   backgroundColor="primary-500"
- *   loaderColor="white"
- *   loaderVariant={2}
- *   stopScrolling
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the page loading container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the page loading element.
- * @prop {LibColors} [props.backgroundColor="primary-500"] - Background color for the loading overlay.
- * @prop {LibColorsShort} [props.loaderColor="white"] - Color of the loading spinner.
- * @prop {1 | 2 | 3} [props.loaderVariant=1] - Visual variant of the loading spinner.
- * @prop {boolean} [props.stopScrolling] - Whether to disable page scrolling while loading is visible.
- *
- * @returns {JSX.Element} The rendered PageLoading component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/page-loading
- */
-export const PageLoading: FC<ILibPageLoading> = ({
-	className,
-	element = "div",
-	ref,
-	backgroundColor = "primary-500",
-	loaderColor = "white",
-	loaderVariant = 1,
-	stopScrolling,
-	...rest
-}) => {
-	const Element = element
-
-	useEffect(() => {
-		if (stopScrolling) disableScroll()
-	}, [stopScrolling])
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"top-0 left-0 z-999 fixed flex justify-center items-center w-full h-svh",
-				genBgAllColors[backgroundColor],
-				"page-loading",
-				className,
-			)}
-			{...rest}
-		>
-			<Loader variant={loaderVariant} color={loaderColor} />
-		</Element>
-	)
-}

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

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

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

@@ -1,13 +0,0 @@
-import type {
-	LibAllColors,
-	LibComponentBase,
-	LibLoaderVariant,
-} from "../../types"
-
-export interface ILibPageLoading extends LibComponentBase<HTMLDivElement> {
-	backgroundColor?: LibAllColors
-	loaderColor?: LibAllColors
-	loaderVariant?: LibLoaderVariant
-	stopScrolling?: boolean
-	children?: never
-}

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

@@ -1,163 +0,0 @@
-import { type FC } from "react"
-import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"
-import { usePagination, useMaxWidth } from "../../hooks"
-import { PaginationButton } from "./PaginationButton"
-import { clsx } from "../../utils"
-import type { ILibPagination } from "./types"
-
-/**
- * Pagination component for navigating through multiple pages of content with customizable styling and navigation controls.
- *
- * @component
- *
- * @example
- * <Pagination
- *   currentPage={currentPage}
- *   setCurrentPage={setCurrentPage}
- *   totalPages={20}
- *   accentColor="primary"
- *   pageLimit={5}
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the pagination container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the pagination element.
- * @prop {React.ReactNode} [props.children] - Child components to render when not using totalPages prop.
- * @prop {LibAllColors} [props.accentColor="primary"] - Color theme for active page and hover states.
- * @prop {number} [props.totalPages] - Total number of pages available for navigation.
- * @prop {object} [props.icons] - Custom icons for previous and next navigation buttons.
- * @prop {React.ReactNode} [props.icons.prev] - Custom icon for the previous page button.
- * @prop {React.ReactNode} [props.icons.next] - Custom icon for the next page button.
- * @prop {number} [props.pageLimit=5] - Maximum number of page buttons to display at once.
- * @prop {number} [props.currentPage] - Current active page number.
- * @prop {function} [props.setCurrentPage] - Function to update the current page state.
- *
- * @returns {JSX.Element} The rendered Pagination component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/pagination
- */
-export const Pagination: FC<ILibPagination> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	accentColor = "primary",
-	totalPages,
-	icons,
-	pageLimit = 5,
-	currentPage,
-	setCurrentPage,
-	...rest
-}) => {
-	const Element = element
-
-	const { handlePrev, handlePage, handleNext } = usePagination({
-		currentPage: currentPage!,
-		setCurrentPage: setCurrentPage!,
-		totalPages,
-	})
-
-	const getPaginationGroup = () => {
-		const start = Math.floor((currentPage! - 1) / pageLimit) * pageLimit
-
-		return new Array(pageLimit)
-			.fill(totalPages)
-			.map((_, i) => start + i + 1)
-			.filter(item => item <= (totalPages || 0))
-	}
-
-	const paginationGroup = getPaginationGroup()
-
-	const isMobile = useMaxWidth(600)
-
-	if (totalPages && totalPages <= 1) return null
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex justify-center w-full",
-				isMobile ? "gap-1" : "gap-2",
-				"pagination",
-				className,
-			)}
-			{...rest}
-		>
-			{totalPages ? (
-				<>
-					<PaginationButton
-						onClick={handlePrev}
-						isActive={false}
-						disabled={currentPage === 1}
-						accentColor={accentColor}
-					>
-						{icons?.prev ?? <BiLeftArrowAlt size={24} />}
-					</PaginationButton>
-
-					{paginationGroup[0] !== 1 && (
-						<>
-							<PaginationButton
-								isActive={currentPage === 1}
-								onClick={() => handlePage(1)}
-								accentColor={accentColor}
-							>
-								1
-							</PaginationButton>
-
-							<PaginationButton
-								accentColor={accentColor}
-								readOnly
-							>
-								...
-							</PaginationButton>
-						</>
-					)}
-
-					{paginationGroup.map(n => (
-						<PaginationButton
-							isActive={n === currentPage}
-							onClick={() => handlePage(n)}
-							accentColor={accentColor}
-							key={n}
-						>
-							{n}
-						</PaginationButton>
-					))}
-
-					{paginationGroup[paginationGroup.length - 1] !==
-						totalPages && (
-						<>
-							<PaginationButton
-								accentColor={accentColor}
-								readOnly
-							>
-								...
-							</PaginationButton>
-
-							<PaginationButton
-								isActive={currentPage === totalPages}
-								onClick={() => handlePage(totalPages)}
-								accentColor={accentColor}
-							>
-								{totalPages}
-							</PaginationButton>
-						</>
-					)}
-
-					<PaginationButton
-						onClick={handleNext}
-						isActive={false}
-						disabled={currentPage === totalPages}
-						accentColor={accentColor}
-					>
-						{icons?.next ?? <BiRightArrowAlt size={24} />}
-					</PaginationButton>
-				</>
-			) : (
-				children
-			)}
-		</Element>
-	)
-}

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

@@ -1,65 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgColorHover, genTextColorHover } from "../../utils"
-import type { ILibPaginationButton } from "./types"
-
-/**
- * PaginationButton component for rendering individual page navigation buttons with active states and styling.
- *
- * @component
- *
- * @example
- * <PaginationButton
- *   accentColor="primary"
- *   isActive={currentPage === 5}
- *   onClick={() => handlePage(5)}
- * >
- *   5
- * </PaginationButton>
- *
- * @extends HTMLButtonElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the pagination button.
- * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the pagination button element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the button (usually page number).
- * @prop {LibAllColors} [props.accentColor="primary"] - Color theme for active and hover states.
- * @prop {boolean} [props.isActive] - Whether this button represents the current active page.
- * @prop {boolean} [props.readOnly] - Whether the button is in read-only mode (non-interactive).
- *
- * @returns {JSX.Element} The rendered PaginationButton component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/pagination
- */
-export const PaginationButton: FC<ILibPaginationButton> = ({
-	className,
-	element = "button",
-	ref,
-	children,
-	accentColor = "primary",
-	isActive,
-	readOnly,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-flex justify-center items-center rounded-full size-8 font-bold",
-				"disabled:text-gray-500",
-				readOnly && "readOnly",
-				isActive && "active",
-				!readOnly && !isActive && genTextColorHover[accentColor],
-				!readOnly &&
-					isActive && [genBgColorHover[accentColor], "text-white"],
-				"[&.readOnly]:cursor-default!",
-				"pagination-button",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

@@ -1,2 +0,0 @@
-export * from "./Pagination"
-export * from "./PaginationButton"

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

@@ -1,56 +0,0 @@
-import type { ButtonHTMLAttributes } from "react"
-import type {
-	DispatchState,
-	LibColorsHover,
-	LibComponentBase,
-	ReactChildren,
-	ReactElement,
-} from "../../types"
-
-/*====================== Pagination ======================*/
-
-interface ILibPaginationBase extends LibComponentBase<HTMLDivElement> {
-	accentColor?: LibColorsHover
-}
-
-interface PaginationWithItems extends ILibPaginationBase {
-	currentPage: number
-	setCurrentPage: DispatchState<number>
-	totalPages: number
-	pageLimit?: number
-	icons?: { prev?: ReactElement; next?: ReactElement }
-	children?: never
-}
-
-interface PaginationWithChildren extends ILibPaginationBase {
-	currentPage?: never
-	setCurrentPage?: never
-	totalPages?: never
-	pageLimit?: never
-	icons?: never
-	children: ReactChildren
-}
-
-export type ILibPagination = PaginationWithItems | PaginationWithChildren
-
-/*====================== PaginationButton ======================*/
-
-interface ILibPaginationButtonBase
-	extends LibComponentBase<HTMLButtonElement>,
-		ButtonHTMLAttributes<HTMLButtonElement> {
-	accentColor?: LibColorsHover
-}
-
-interface PaginationButtonActive extends ILibPaginationButtonBase {
-	isActive: boolean
-	readOnly?: never
-}
-
-interface PaginationButtonReadOnly extends ILibPaginationButtonBase {
-	isActive?: never
-	readOnly: true
-}
-
-export type ILibPaginationButton =
-	| PaginationButtonActive
-	| PaginationButtonReadOnly

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

@@ -1,136 +0,0 @@
-import { type FC, type ChangeEvent } from "react"
-import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"
-import { ButtonIcon } from "../ButtonIcon"
-import { Text } from "../Text"
-import { usePagination } from "../../hooks"
-import { clsx } from "../../utils"
-import type { ILibPaginator } from "./types"
-
-/**
- * Paginator component for simple page navigation with input field and next/previous buttons.
- *
- * @component
- *
- * @example
- * <Paginator
- *   currentPage={currentPage}
- *   setCurrentPage={setCurrentPage}
- *   totalPages={20}
- *   texts={{ page: "Page", of: "of" }}
- *   labels={{ prev: "Previous", next: "Next" }}
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the paginator container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the paginator element.
- * @prop {number} [props.totalPages] - Total number of pages available for navigation.
- * @prop {number} [props.currentPage] - Current active page number.
- * @prop {function} [props.setCurrentPage] - Function to update the current page state.
- * @prop {boolean} [props.noInput] - Whether to hide the page input field and show read-only text.
- * @prop {object} [props.texts] - Custom text labels for page display.
- * @prop {string} [props.texts.page="Page"] - Text label for "Page".
- * @prop {string} [props.texts.of="of"] - Text label for "of".
- * @prop {object} [props.icons] - Custom icons for navigation buttons.
- * @prop {React.ReactNode} [props.icons.prev] - Custom icon for the previous page button.
- * @prop {React.ReactNode} [props.icons.next] - Custom icon for the next page button.
- * @prop {object} [props.labels] - Custom aria labels and tooltips for navigation buttons.
- * @prop {string} [props.labels.prev="Previous"] - Label for the previous page button.
- * @prop {string} [props.labels.next="Next"] - Label for the next page button.
- * @prop {boolean} [props.hideButtonsTooltip] - Whether to hide tooltips on navigation buttons.
- * @prop {function} [props.handlePrev] - Custom handler for previous page navigation.
- * @prop {function} [props.handleNext] - Custom handler for next page navigation.
- * @prop {function} [props.handlePage] - Custom handler for direct page navigation.
- *
- * @returns {JSX.Element} The rendered Paginator component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/paginator
- */
-export const Paginator: FC<ILibPaginator> = ({
-	className,
-	element = "div",
-	ref,
-	totalPages,
-	currentPage,
-	setCurrentPage,
-	noInput,
-	texts,
-	icons,
-	labels,
-	hideButtonsTooltip,
-	handlePrev,
-	handleNext,
-	handlePage,
-	...rest
-}) => {
-	const Element = element
-
-	const {
-		handlePrev: handlePrevPage,
-		handlePage: handleNewPage,
-		handleNext: handleNextPage,
-	} = usePagination({ currentPage, setCurrentPage, totalPages })
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-		handlePage
-			? handlePage(Number(e.target.value))
-			: handleNewPage(Number(e.target.value))
-
-	if (totalPages && totalPages <= 1) return null
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx("flex gap-2", "paginator", className)}
-			{...rest}
-		>
-			{noInput ? (
-				<Text className="paginator-text">
-					{texts?.page ?? "Page"} {currentPage} {texts?.of ?? "of"}{" "}
-					{totalPages}
-				</Text>
-			) : (
-				<span className="paginator-text-wrapper">
-					{texts?.page ?? "Page"}{" "}
-					<input
-						value={currentPage}
-						onChange={handleChange}
-						type="number"
-						step={1}
-						min={1}
-						max={totalPages}
-						className={clsx(
-							"px-2 border border-gray-200 rounded-md outline-none w-[calc(2ch+20px)]",
-							"focus:border-primary-500",
-							"[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [appearance:textfield]",
-							"paginator-input",
-						)}
-						size={currentPage.toString().length + 1}
-					/>{" "}
-					{texts?.of ?? "of"} {totalPages}
-				</span>
-			)}
-
-			<ButtonIcon
-				icon={icons?.prev ?? <BiLeftArrowAlt />}
-				className="size-6 paginator-button"
-				disabled={currentPage === 1}
-				onClick={handlePrev ?? handlePrevPage}
-				aria-label={labels?.prev ?? "Previous"}
-				tooltip={labels?.prev ?? "Previous"}
-				showTooltip={!hideButtonsTooltip && { offset: "xs" }}
-			/>
-
-			<ButtonIcon
-				icon={icons?.next ?? <BiRightArrowAlt />}
-				className="size-6 paginator-button"
-				disabled={currentPage === totalPages}
-				onClick={handleNext ?? handleNextPage}
-				aria-label={labels?.next ?? "Next"}
-				tooltip={labels?.next ?? "Next"}
-				showTooltip={!hideButtonsTooltip && { offset: "xs" }}
-			/>
-		</Element>
-	)
-}

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

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

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

@@ -1,16 +0,0 @@
-import type { DispatchState, LibComponentBase, ReactElement } from "../../types"
-
-export interface ILibPaginator extends LibComponentBase<HTMLDivElement> {
-	totalPages: number
-	currentPage: number
-	setCurrentPage: DispatchState<number>
-	noInput?: boolean
-	texts?: { page?: string; of?: string }
-	icons?: { prev?: ReactElement; next?: ReactElement }
-	labels?: { prev?: string; next?: string }
-	hideButtonsTooltip?: boolean
-	handlePrev?: () => void
-	handleNext?: () => void
-	handlePage?: (n: number) => void
-	children?: never
-}