@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/Text/templates/Ol.tsx

@@ -1,41 +0,0 @@
-import type { FC } from "react"
-import { TEXT_BASE_CLASSES } from "../Text"
-import {
-	clsx,
-	genLinkColor,
-	genTextAlign,
-	genTextAllColor,
-	genButtonColor,
-} from "../../../utils"
-import type { ILibText } from "../types"
-
-export const Ol: FC<ILibText> = ({
-	element = "ol",
-	className,
-	children,
-	color = "currentColor",
-	linkColor = "primary",
-	textAlign = "left",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				TEXT_BASE_CLASSES,
-				"text-(length:--text-body)",
-				"list-decimal ps-8",
-				(genTextAlign as any)[textAlign],
-				(genTextAllColor as any)[color],
-				genLinkColor[linkColor],
-				genButtonColor[linkColor],
-				"ol",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Text/templates/P.tsx

@@ -1,40 +0,0 @@
-import type { FC } from "react"
-import { TEXT_BASE_CLASSES } from "../Text"
-import {
-	clsx,
-	genLinkColor,
-	genTextAlign,
-	genTextAllColor,
-	genButtonColor,
-} from "../../../utils"
-import type { ILibText } from "../types"
-
-export const P: FC<ILibText> = ({
-	element = "p",
-	className,
-	children,
-	color = "currentColor",
-	linkColor = "primary",
-	textAlign = "left",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				TEXT_BASE_CLASSES,
-				"text-(length:--text-body)",
-				(genTextAlign as any)[textAlign],
-				(genTextAllColor as any)[color],
-				genLinkColor[linkColor],
-				genButtonColor[linkColor],
-				"p",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Text/templates/Small.tsx

@@ -1,40 +0,0 @@
-import type { FC } from "react"
-import { TEXT_BASE_CLASSES } from "../Text"
-import {
-	clsx,
-	genLinkColor,
-	genTextAlign,
-	genTextAllColor,
-	genButtonColor,
-} from "../../../utils"
-import type { ILibText } from "../types"
-
-export const Small: FC<ILibText> = ({
-	element = "small",
-	className,
-	children,
-	color = "currentColor",
-	linkColor = "primary",
-	textAlign = "left",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				TEXT_BASE_CLASSES,
-				"text-(length:--text-small)",
-				(genTextAlign as any)[textAlign],
-				(genTextAllColor as any)[color],
-				genLinkColor[linkColor],
-				genButtonColor[linkColor],
-				"small",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Text/templates/Strong.tsx

@@ -1,40 +0,0 @@
-import type { FC } from "react"
-import { TEXT_BASE_CLASSES } from "../Text"
-import {
-	clsx,
-	genLinkColor,
-	genTextAlign,
-	genTextAllColor,
-	genButtonColor,
-} from "../../../utils"
-import type { ILibText } from "../types"
-
-export const Strong: FC<ILibText> = ({
-	element = "strong",
-	className,
-	children,
-	color = "currentColor",
-	linkColor = "primary",
-	textAlign = "left",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				TEXT_BASE_CLASSES,
-				"font-black",
-				(genTextAlign as any)[textAlign],
-				(genTextAllColor as any)[color],
-				genLinkColor[linkColor],
-				genButtonColor[linkColor],
-				"strong",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Text/templates/Ul.tsx

@@ -1,41 +0,0 @@
-import type { FC } from "react"
-import { TEXT_BASE_CLASSES } from "../Text"
-import {
-	clsx,
-	genLinkColor,
-	genTextAlign,
-	genTextAllColor,
-	genButtonColor,
-} from "../../../utils"
-import type { ILibText } from "../types"
-
-export const Ul: FC<ILibText> = ({
-	element = "ul",
-	className,
-	children,
-	color = "currentColor",
-	linkColor = "primary",
-	textAlign = "left",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				TEXT_BASE_CLASSES,
-				"text-(length:--text-body)",
-				"list-disc ps-8",
-				(genTextAlign as any)[textAlign],
-				(genTextAllColor as any)[color],
-				genLinkColor[linkColor],
-				genButtonColor[linkColor],
-				"ul",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

@@ -1,36 +0,0 @@
-import type { ElementType } from "react"
-import type {
-	CssTextAlign,
-	LibAllColors,
-	LibColorsHover,
-	LibComponentBase,
-	LibTextDisplay,
-	LibTextNoDisplay,
-} from "../../types"
-
-interface ILibTextBase
-	extends LibComponentBase<
-		HTMLHeadingElement &
-			HTMLParagraphElement &
-			HTMLQuoteElement &
-			HTMLDListElement &
-			HTMLOListElement &
-			HTMLUListElement
-	> {
-	element?: ElementType
-	color?: LibAllColors
-	linkColor?: LibColorsHover
-	textAlign?: CssTextAlign
-}
-
-interface TextDisplay extends ILibTextBase {
-	tag?: LibTextDisplay
-	display?: boolean
-}
-
-interface TextNoDisplay extends ILibTextBase {
-	tag?: LibTextNoDisplay
-	display?: never
-}
-
-export type ILibText = TextDisplay | TextNoDisplay

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

@@ -1,113 +0,0 @@
-import { type FC } from "react"
-import { BiX } from "react-icons/bi"
-import { Text } from "../Text"
-import { Loader } from "../Loader"
-import { clsx, genRingColor, genTextColorHover } from "../../utils"
-import { genToastColors } from "./utils"
-import type { ILibToast } from "./types"
-
-/**
- * Toast component for displaying temporary notification messages with different status types and optional close functionality.
- *
- * @component
- *
- * @example
- * <Toast
- *   title="Success!"
- *   body="Your changes have been saved."
- *   status="success"
- *   closeToast={handleClose}
- * />
- *
- * @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<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.
- * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the toast.
- * @prop {function} [props.closeToast] - Function to call when the close button is clicked.
- * @prop {React.ReactElement} [props.iconClose] - Custom icon for the close button.
- * @prop {1 | 2 | 3} [props.loaderVariant] - Variant of the loader shown when status is "loading".
- *
- * @returns {JSX.Element} The rendered Toast component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/toast
- */
-export const Toast: FC<ILibToast> = ({
-	className,
-	element = "div",
-	ref,
-	body,
-	title,
-	status = "success",
-	hideCloseButton,
-	closeToast,
-	iconClose,
-	loaderVariant,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"relative p-3 border rounded-lg w-full max-w-[400px] overflow-hidden text-black",
-				genToastColors[status],
-				"toast",
-				className,
-			)}
-			{...rest}
-		>
-			{!hideCloseButton || status === "loading" ? (
-				<div className="flex justify-between gap-2 w-full toast-content-wrapper">
-					{status === "loading" ? (
-						<span className="inline-flex items-center gap-2 toast-title-wrapper">
-							<Text tag="strong" className="toast-title">
-								{title}
-							</Text>
-							<Loader
-								className="border-2 size-4 toast-loader"
-								color="gray"
-								variant={loaderVariant}
-							/>
-						</span>
-					) : (
-						<Text tag="strong" className="toast-title">
-							{title}
-						</Text>
-					)}
-
-					{!hideCloseButton && (
-						<button
-							onClick={closeToast}
-							className={clsx(
-								"inline-flex justify-center items-center rounded-md outline-none size-6",
-								genTextColorHover["gray"],
-								genRingColor["gray"],
-								"toast-close-button",
-							)}
-						>
-							{iconClose ?? (
-								<BiX size={20} className="toast-close-icon" />
-							)}
-						</button>
-					)}
-				</div>
-			) : (
-				<Text tag="strong" className="toast-title">
-					{title}
-				</Text>
-			)}
-
-			{typeof body === "string" ? (
-				<Text className="toast-body">{body}</Text>
-			) : (
-				body
-			)}
-		</Element>
-	)
-}

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

@@ -1,43 +0,0 @@
-import type { FC } from "react"
-import {
-	ToastContainer as Container,
-	type ToastContainerProps,
-} from "react-toastify"
-
-/**
- * ToastContainer component for managing and displaying toast notifications with customizable positioning and behavior.
- *
- * @component
- *
- * @example
- * <ToastContainer
- *   position="top-right"
- *   autoClose={5000}
- *   hideProgressBar={false}
- * />
- *
- * @extends ToastContainerProps from "react-toastify"
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the toast container.
- * @prop {"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"} [props.position="bottom-right"] - Position where toasts will appear on the screen.
- * @prop {number | false} [props.autoClose] - Time in milliseconds before toasts auto-close, or false to disable.
- * @prop {boolean} [props.hideProgressBar] - Whether to hide the progress bar on toasts.
- * @prop {boolean} [props.newestOnTop] - Whether to display newest toasts at the top.
- * @prop {boolean} [props.closeOnClick] - Whether toasts close when clicked.
- * @prop {boolean} [props.rtl] - Whether to use right-to-left layout.
- * @prop {boolean} [props.pauseOnFocusLoss] - Whether to pause toast timers when window loses focus.
- * @prop {boolean} [props.draggable] - Whether toasts can be dragged to dismiss.
- * @prop {boolean} [props.pauseOnHover] - Whether to pause toast timers on hover.
- * @prop {"default" | "colored" | "dark"} [props.theme] - Visual theme for the toast container.
- * @prop {number} [props.limit] - Maximum number of toasts to display at once.
- *
- * @returns {JSX.Element} The rendered ToastContainer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/toast
- */
-export const ToastContainer: FC<ToastContainerProps> = ({
-	position = "bottom-right",
-	...rest
-}) => {
-	return <Container position={position} {...rest} />
-}

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

@@ -1,236 +0,0 @@
-import { toast as toastFn, type ToastOptions } from "react-toastify"
-import { Toast } from "./Toast"
-import type { ILibToast } from "./types"
-import type { LibLoaderVariant, ReactElement } from "../../types"
-
-/**
- * Toast utility functions for displaying different types of notification messages with customizable options and automatic styling.
- *
- * @namespace toast
- *
- * @example
- * // Success toast
- * toast.success("Operation completed!", {
- *   body: "Your changes have been saved.",
- *   duration: 5000
- * })
- *
- * // Error toast
- * toast.error("Something went wrong!", {
- *   body: "Please try again later."
- * })
- *
- * // Close all toasts
- * toast.close()
- *
- * @prop {function} success - Display a success toast notification with green styling.
- * @prop {function} error - Display an error toast notification with red styling.
- * @prop {function} warning - Display a warning toast notification with yellow styling.
- * @prop {function} info - Display an info toast notification with blue styling.
- * @prop {function} loading - Display a loading toast notification with gray styling.
- * @prop {function} close - Close/dismiss all active toast notifications.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/toast
- */
-export const toast = {
-	success: (
-		title: string,
-		options?: Omit<ILibToast, "status" | "closeToast" | "title"> &
-			Omit<
-				ToastOptions,
-				| "icon"
-				| "closeButton"
-				| "style"
-				| "autoClose"
-				| "className"
-				| "progressClassName"
-			> & { duration?: number; iconClose?: ReactElement },
-	) =>
-		toastFn.success(
-			({ closeToast }) => (
-				<Toast
-					{...options}
-					closeToast={closeToast}
-					title={title}
-					status="success"
-					iconClose={options?.iconClose}
-				/>
-			),
-			{
-				...options,
-				icon: false,
-				closeButton: false,
-				style: {
-					padding: 0,
-					height: "unset",
-					minHeight: "unset",
-					overflow: "hidden",
-				},
-				autoClose: options?.duration,
-				className: "!relative !overflow-hidden",
-				progressClassName: "!bg-success-500 absolute !left-0 !bottom-0",
-			},
-		),
-	error: (
-		title: string,
-		options?: Omit<ILibToast, "status" | "closeToast" | "title"> &
-			Omit<
-				ToastOptions,
-				| "icon"
-				| "closeButton"
-				| "style"
-				| "autoClose"
-				| "className"
-				| "progressClassName"
-			> & { duration?: number; iconClose?: ReactElement },
-	) =>
-		toastFn.error(
-			({ closeToast }) => (
-				<Toast
-					{...options}
-					closeToast={closeToast}
-					title={title}
-					status="error"
-					iconClose={options?.iconClose}
-				/>
-			),
-			{
-				...options,
-				icon: false,
-				closeButton: false,
-				style: {
-					padding: 0,
-					height: "unset",
-					minHeight: "unset",
-					overflow: "hidden",
-				},
-				hideProgressBar: false,
-				autoClose: options?.duration,
-				className: "!relative !overflow-hidden",
-				progressClassName: "!bg-danger-500 absolute !left-0 !bottom-0",
-			},
-		),
-	warning: (
-		title: string,
-		options?: Omit<ILibToast, "status" | "closeToast" | "title"> &
-			Omit<
-				ToastOptions,
-				| "icon"
-				| "closeButton"
-				| "style"
-				| "autoClose"
-				| "className"
-				| "progressClassName"
-			> & { duration?: number; iconClose?: ReactElement },
-	) =>
-		toastFn.warning(
-			({ closeToast }) => (
-				<Toast
-					{...options}
-					closeToast={closeToast}
-					title={title}
-					status="warning"
-					iconClose={options?.iconClose}
-				/>
-			),
-			{
-				...options,
-				icon: false,
-				closeButton: false,
-				style: {
-					padding: 0,
-					height: "unset",
-					minHeight: "unset",
-					overflow: "hidden",
-				},
-				hideProgressBar: false,
-				autoClose: options?.duration,
-				className: "!relative !overflow-hidden",
-				progressClassName: "!bg-warning-500 absolute !left-0 !bottom-0",
-			},
-		),
-	info: (
-		title: string,
-		options?: Omit<ILibToast, "status" | "closeToast" | "title"> &
-			Omit<
-				ToastOptions,
-				| "icon"
-				| "closeButton"
-				| "style"
-				| "autoClose"
-				| "className"
-				| "progressClassName"
-			> & { duration?: number; iconClose?: ReactElement },
-	) =>
-		toastFn.info(
-			({ closeToast }) => (
-				<Toast
-					{...options}
-					closeToast={closeToast}
-					title={title}
-					status="info"
-					iconClose={options?.iconClose}
-				/>
-			),
-			{
-				...options,
-				icon: false,
-				closeButton: false,
-				style: {
-					padding: 0,
-					height: "unset",
-					minHeight: "unset",
-					overflow: "hidden",
-				},
-				hideProgressBar: false,
-				autoClose: options?.duration,
-				className: "!relative !overflow-hidden",
-				progressClassName: "!bg-primary-500 absolute !left-0 !bottom-0",
-			},
-		),
-	loading: (
-		title: string,
-		options?: Omit<ILibToast, "status" | "closeToast" | "title"> &
-			Omit<
-				ToastOptions,
-				| "icon"
-				| "closeButton"
-				| "style"
-				| "autoClose"
-				| "className"
-				| "progressClassName"
-			> & {
-				duration?: number
-				iconClose?: ReactElement
-				loaderVariant?: LibLoaderVariant
-			},
-	) =>
-		toastFn.loading(
-			({ closeToast }) => (
-				<Toast
-					{...options}
-					closeToast={closeToast}
-					title={title}
-					status="loading"
-					loaderVariant={options?.loaderVariant}
-					iconClose={options?.iconClose}
-				/>
-			),
-			{
-				...options,
-				icon: false,
-				closeButton: false,
-				style: {
-					padding: 0,
-					height: "unset",
-					minHeight: "unset",
-					overflow: "hidden",
-				},
-				hideProgressBar: false,
-				autoClose: options?.duration,
-				className: "!relative !overflow-hidden",
-				progressClassName: "!bg-gray-500 absolute !left-0 !bottom-0",
-			},
-		),
-	close: () => toastFn.dismiss(),
-}

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

@@ -1,3 +0,0 @@
-export * from "./Toast"
-export * from "./ToastContainer"
-export * from "./ToastFn"

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

@@ -1,18 +0,0 @@
-import type {
-	LibComponentBase,
-	LibLoaderVariant,
-	LibToastStatus,
-	ReactChildren,
-	ReactElement,
-} from "../../types"
-
-export interface ILibToast
-	extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
-	title: ReactChildren
-	status?: LibToastStatus
-	body?: ReactChildren
-	hideCloseButton?: boolean
-	closeToast?: () => void
-	iconClose?: ReactElement
-	loaderVariant?: LibLoaderVariant
-}

package/dist/lib/components/Toast/utils.ts

@@ -1,9 +0,0 @@
-import type { LibToastStatus } from "../../types"
-
-export const genToastColors: Record<LibToastStatus, string> = {
-	success: "border-success-500 bg-success-50",
-	error: "border-danger-500 bg-danger-50",
-	warning: "border-warning-500 bg-warning-50",
-	info: "border-primary-500 bg-primary-50",
-	loading: "border-gray-500 bg-gray-50",
-}