@julseb-lib/react 0.1.19 → 0.1.20

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

@@ -1,111 +0,0 @@
-import { useRef, useState, Fragment, type FC, type DragEvent } from "react"
-import { Hr } from "../Hr"
-import { DragListItem } from "./DragListItem"
-import { clsx } from "../../utils"
-import type { ILibDragList } from "./types"
-
-/**
- * DragList component for creating draggable and reorderable lists with customizable items and separators.
- *
- * @component
- *
- * @example
- * <DragList
- *   items={dragItems}
- *   setItems={setDragItems}
- *   iconDrag={<GripVertical />}
- *   hideSeparator={false}
- * />
- *
- * @extends HTMLDivElement
- *
- * @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<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.
- * @prop {Array} [props.items] - Array of draggable items with id, title, and body properties.
- * @prop {function} [props.setItems] - Function to update the items array when items are reordered.
- * @prop {boolean} [props.hideSeparator] - Whether to hide separators between draggable items.
- *
- * @returns {JSX.Element} The rendered DragList component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/drag-list
- */
-export const DragList: FC<ILibDragList> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	iconDrag,
-	borderRadius,
-	items,
-	setItems,
-	hideSeparator,
-	...rest
-}) => {
-	const Element = element
-
-	const [dragIndex, setDragIndex] = useState(-1)
-	const dragNode = useRef<HTMLDivElement>(null)
-
-	const handleDragStart = (e: DragEvent<HTMLDivElement>, i: number) => {
-		const { target } = e
-		setDragIndex(i)
-
-		if (dragNode && dragNode.current) {
-			dragNode.current = target as HTMLDivElement
-			e.dataTransfer.effectAllowed = "move"
-
-			if (target instanceof HTMLElement) {
-				e.dataTransfer.setData("text/html", target.outerHTML)
-			}
-		}
-	}
-
-	const handleDragOver = (e: DragEvent<HTMLDivElement>, i: number) => {
-		e.preventDefault()
-
-		if (dragNode.current !== e.target && items) {
-			const newItems = [...items]
-			newItems.splice(i, 0, newItems.splice(dragIndex, 1)[0])
-			setDragIndex(i)
-			setItems(newItems)
-		}
-	}
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col items-stretch gap-3 p-3 border border-gray-200 rounded-md w-full",
-				"drag-list",
-				className,
-			)}
-			{...rest}
-		>
-			{items
-				? items.map((item, i) => (
-						<Fragment key={item.id}>
-							<DragListItem
-								{...item}
-								key={item.id}
-								item={item}
-								id={item.id}
-								index={i}
-								handleDragStart={handleDragStart}
-								handleDragOver={handleDragOver}
-								iconDrag={iconDrag}
-								className={clsx(item.className)}
-							/>
-
-							{!hideSeparator && i !== items.length - 1 && (
-								<Hr className="drag-list-separator" />
-							)}
-						</Fragment>
-					))
-				: children}
-		</Element>
-	)
-}

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

@@ -1,114 +0,0 @@
-import { type FC, type DragEvent } from "react"
-import { BiDotsVerticalRounded } from "react-icons/bi"
-import { Text } from "../Text"
-import { clsx, genRingColor } from "../../utils"
-import type { ILibDragListItem } from "./types"
-
-/**
- * DragListItem component for rendering individual draggable items within a drag list with drag handles and content.
- *
- * @component
- *
- * @example
- * <DragListItem
- *   item={{ id: "1", title: "Item Title", body: "Item description" }}
- *   index={0}
- *   handleDragStart={handleDragStart}
- *   handleDragOver={handleDragOver}
- *   iconDrag={<GripVertical />}
- * />
- *
- * @extends HTMLDivElement
- *
- * @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<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.
- * @prop {function} [props.handleDragStart] - Function called when drag operation starts.
- * @prop {function} [props.handleDragOver] - Function called when dragging over this item.
- * @prop {object} [props.item] - Item object containing id, title, and body properties.
- * @prop {string} [props.id] - Unique identifier for the drag list item.
- * @prop {string} [props.iconLabel="Drag"] - Aria label for the drag handle button.
- *
- * @returns {JSX.Element} The rendered DragListItem component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/drag-list
- */
-export const DragListItem: FC<ILibDragListItem> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	index,
-	iconDrag = <BiDotsVerticalRounded size={24} />,
-	handleDragStart,
-	handleDragOver,
-	item,
-	id,
-	iconLabel = "Drag",
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex items-start gap-2 w-full cursor-grab active:cursor-grabbing",
-				"drag-list-item",
-				className,
-			)}
-			id={item?.id ?? id}
-			draggable
-			onDragStart={(e: DragEvent<HTMLDivElement>) =>
-				handleDragStart(e, index)
-			}
-			onDragOver={(e: DragEvent<HTMLDivElement>) =>
-				handleDragOver(e, index)
-			}
-		>
-			<button
-				role="button"
-				aria-label={iconLabel}
-				className={clsx(
-					"outline-none cursor-grab! active:cursor-grabbing",
-					"drag-list-item-button",
-					genRingColor["gray"],
-				)}
-			>
-				{iconDrag}
-			</button>
-
-			<div
-				className={clsx(
-					"flex flex-col gap-1 grow",
-					"drag-list-item-content",
-				)}
-			>
-				{item ? (
-					<>
-						{typeof item.title === "string" ? (
-							<Text tag="h6" className="drag-list-item-title">
-								{item.title}
-							</Text>
-						) : (
-							item.title
-						)}
-
-						{item.body &&
-							(typeof item.body === "string" ? (
-								<Text className="drag-list-item-body">
-									{item.body}
-								</Text>
-							) : (
-								item.body
-							))}
-					</>
-				) : (
-					children
-				)}
-			</div>
-		</Element>
-	)
-}

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

@@ -1,2 +0,0 @@
-export * from "./DragList"
-export * from "./DragListItem"

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

@@ -1,55 +0,0 @@
-import type { DragEvent } from "react"
-import type {
-	LibComponentBase,
-	ReactElement,
-	LibRadiuses,
-	LibDragListItem,
-	DispatchState,
-	ReactChildren,
-} from "../../types"
-
-/*====================== Draglist ======================*/
-
-interface ILibDragListBase extends LibComponentBase<HTMLDivElement> {
-	iconDrag?: ReactElement
-	borderRadius?: LibRadiuses
-}
-
-interface DragListWithItems extends ILibDragListBase {
-	items: Array<LibDragListItem>
-	setItems: DispatchState<Array<LibDragListItem>>
-	hideSeparator?: boolean
-	children?: never
-}
-
-interface DragListWithChildren extends ILibDragListBase {
-	items?: never
-	setItems?: never
-	hideSeparator?: never
-	children?: ReactChildren
-}
-
-export type ILibDragList = DragListWithItems | DragListWithChildren
-
-/*====================== DragListItem ======================*/
-
-interface ILibDragListItemBase
-	extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
-	index: number
-	iconDrag?: ReactElement
-	iconLabel?: string
-	handleDragStart: (e: DragEvent<HTMLDivElement>, i: number) => void
-	handleDragOver: (e: DragEvent<HTMLDivElement>, i: number) => void
-}
-
-interface DragListItemWithItem extends ILibDragListItemBase {
-	item: LibDragListItem
-	children?: never
-}
-
-interface DragListItemWithChildren extends ILibDragListItemBase {
-	item?: never
-	children?: ReactChildren
-}
-
-export type ILibDragListItem = DragListItemWithItem | DragListItemWithChildren

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

@@ -1,145 +0,0 @@
-import { useEffect, useRef, type FC } from "react"
-import { BiX } from "react-icons/bi"
-import { disableScroll, enableScroll, stringifyPx } from "@julseb-lib/utils"
-import { useClickOutside, useKeyPress } from "../../hooks"
-import { ButtonIcon } from "../ButtonIcon"
-import {
-	clsx,
-	genBgAllColors,
-	genBgAllColorsAndOverlays,
-	genButtonColor,
-	genGap,
-	genLinkColor,
-	genTextAllColor,
-} from "../../utils"
-import type { ILibDrawer } from "./types"
-
-/**
- * Drawer component for creating slide-out panels with customizable positioning, styling, and overlay functionality.
- *
- * @component
- *
- * @example
- * <Drawer
- *   isOpen={isDrawerOpen}
- *   setIsOpen={setIsDrawerOpen}
- *   position="right"
- *   backgroundColor="primary"
- *   contentColor="white"
- * >
- *   <h2>Drawer Content</h2>
- *   <p>This is the drawer content.</p>
- * </Drawer>
- *
- * @extends HTMLDivElement
- *
- * @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<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.
- * @prop {"left" | "right"} [props.position="right"] - Position of the drawer relative to the viewport.
- * @prop {boolean} [props.enableScrollingOpen] - Whether to allow page scrolling when drawer is open.
- * @prop {boolean} [props.disableEsc] - Whether to disable closing the drawer with the Escape key.
- * @prop {LibAllColors} [props.backgroundColor="primary"] - Background color for the drawer content area.
- * @prop {LibAllColors} [props.contentColor="white"] - Text color for the drawer content.
- * @prop {LibAllColors} [props.linksColor="white"] - Color for links and buttons within the drawer.
- * @prop {LibSpacers} [props.gap="md"] - Gap between child elements in the drawer.
- * @prop {number} [props.maxWidth=400] - Maximum width of the drawer in pixels.
- * @prop {LibAllColorsAndOverlays} [props.overlayColor="black-80"] - Background color for the overlay behind the drawer.
- * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the drawer.
- *
- * @returns {JSX.Element} The rendered Drawer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/drawer
- */
-export const Drawer: FC<ILibDrawer> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	isOpen,
-	setIsOpen,
-	position = "right",
-	enableScrollingOpen,
-	disableEsc,
-	backgroundColor = "primary",
-	contentColor = "white",
-	linksColor = "white",
-	gap = "md",
-	maxWidth = 400,
-	overlayColor = "black-80",
-	hideCloseButton,
-	...rest
-}) => {
-	const Element = element
-
-	const el = useRef<HTMLDivElement>(null)
-
-	useClickOutside(el as any, () => isOpen && setIsOpen(false))
-
-	useKeyPress("Escape", () => {
-		if (!disableEsc && isOpen) setIsOpen(false)
-	})
-
-	useEffect(() => {
-		if (!enableScrollingOpen && isOpen) disableScroll()
-		else enableScroll()
-	}, [enableScrollingOpen, isOpen])
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"invisible top-0 left-0 z-999 fixed opacity-0 w-full h-svh transition-all duration-200 ease-in-out",
-				isOpen && "open",
-				"[&.open]:opacity-100 [&.open]:visible [&.open]:transition-none",
-				"drawer",
-				className,
-			)}
-			{...rest}
-		>
-			<div
-				className={clsx(
-					genBgAllColorsAndOverlays[overlayColor],
-					"absolute top-0 left-0 z-0 w-full h-full transition-all duration-200 ease-in-out invisible opacity-0",
-					isOpen && "open",
-					"[&.open]:opacity-100 [&.open]:visible",
-					"overlay",
-				)}
-				onClick={() => setIsOpen(false)}
-			/>
-
-			<div
-				className={clsx(
-					"top-0 z-10 absolute flex flex-col items-stretch gap-2 p-4 w-full max-w-(--drawer-max-width) h-full [&>*]:text-left transition-all duration-200 ease-in-out",
-					genGap[gap],
-					genBgAllColors[backgroundColor],
-					genTextAllColor[contentColor],
-					genLinkColor[linksColor],
-					genButtonColor[linksColor],
-					isOpen && "open",
-					position === "left"
-						? "left-[calc(var(--drawer-max-width)*-1)] [&.open]:left-0"
-						: "right-[calc(var(--drawer-max-width)*-1)] [&.open]:right-0",
-					"drawer-content",
-				)}
-				style={{ ["--drawer-max-width" as any]: stringifyPx(maxWidth) }}
-				ref={el}
-			>
-				{children}
-
-				{!hideCloseButton && (
-					<ButtonIcon
-						icon={<BiX size={24} />}
-						color="white"
-						variant="transparent"
-						className="top-2 right-2 absolute size-12"
-						onClick={() => setIsOpen(false)}
-					/>
-				)}
-			</div>
-		</Element>
-	)
-}

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

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

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

@@ -1,24 +0,0 @@
-import type {
-	DispatchState,
-	LibAllColors,
-	LibAllColorsAndOverlays,
-	LibColorsHover,
-	LibComponentBase,
-	LibDrawerPosition,
-	LibSpacers,
-} from "../../types"
-
-export interface ILibDrawer extends LibComponentBase<HTMLDivElement> {
-	isOpen: boolean
-	setIsOpen: DispatchState<boolean>
-	position?: LibDrawerPosition
-	enableScrollingOpen?: boolean
-	disableEsc?: boolean
-	backgroundColor?: LibAllColors
-	contentColor?: LibAllColors
-	linksColor?: LibColorsHover
-	gap?: LibSpacers
-	maxWidth?: string | number
-	overlayColor?: LibAllColorsAndOverlays
-	hideCloseButton?: boolean
-}

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

@@ -1,89 +0,0 @@
-import { useRef, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { useClickOutside, useMergeRefs } from "../../hooks"
-import { DropdownItem } from "./DropdownItem"
-import { clsx, genBorderRadius, genBoxShadow } from "../../utils"
-import type { ILibDropdown } from "./types"
-
-/**
- * Dropdown component for creating contextual menus and popover content with customizable positioning and animations.
- *
- * @component
- *
- * @example
- * <Dropdown
- *   isOpen={isOpen}
- *   setIsOpen={setIsOpen}
- *   direction="down"
- *   shadow="lg"
- *   items={[
- *     { content: "Profile", onClick: handleProfile },
- *     { content: "Settings", onClick: handleSettings },
- *     { content: "Logout", onClick: handleLogout }
- *   ]}
- * />
- *
- * @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.
- * @prop {React.ReactNode} [props.children] - Child DropdownItem components to render when not using items prop.
- * @prop {boolean} [props.isOpen] - Whether the dropdown is currently visible.
- * @prop {function} [props.setIsOpen] - Function to control the dropdown open/closed state.
- * @prop {"up" | "down"} [props.direction="down"] - Direction for the dropdown to appear relative to its trigger.
- * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none"} [props.shadow] - Shadow variant to apply when dropdown is open.
- * @prop {Array} [props.items] - Array of dropdown item objects with content and click handlers.
- * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="md"] - Border radius size for the dropdown container.
- *
- * @returns {JSX.Element} The rendered Dropdown component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/dropdown
- */
-export const Dropdown: FC<ILibDropdown> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	isOpen,
-	setIsOpen,
-	direction = "down",
-	shadow,
-	items,
-	borderRadius = "md",
-	...rest
-}) => {
-	const Element = element
-	const el = useRef<HTMLDivElement>(null)
-
-	useClickOutside(el as any, () => {
-		if (isOpen) setIsOpen(false)
-	})
-
-	return (
-		<Element
-			ref={useMergeRefs([ref, el])}
-			className={clsx(
-				"left-0 absolute flex flex-col bg-background overflow-hidden overflow-y-scroll transition-all duration-200 ease no-scrollbar",
-				genBorderRadius[borderRadius],
-				isOpen && "open",
-				"max-h-0 [&.open]:max-h-100",
-				direction === "down" ? "top-[40px]" : "bottom-[40px]",
-				isOpen && shadow && genBoxShadow[shadow],
-				"dropdown",
-				className,
-			)}
-			{...rest}
-		>
-			{items?.map(item => (
-				<DropdownItem
-					{...(item as any)}
-					key={uuid()}
-					element={item.element ?? "button"}
-					content={undefined}
-				>
-					{item.content}
-				</DropdownItem>
-			)) ?? children}
-		</Element>
-	)
-}

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

@@ -1,49 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import type { ILibDropdownItem } from "./types"
-
-/**
- * DropdownItem component for rendering individual items within dropdown menus with hover states and customizable content.
- *
- * @component
- *
- * @example
- * <DropdownItem onClick={handleClick}>
- *   Menu Item
- * </DropdownItem>
- * <DropdownItem element="a" href="/profile">
- *   Profile
- * </DropdownItem>
- *
- * @extends HTMLButtonElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the dropdown item.
- * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the item container.
- * @prop {React.ReactNode} [props.children] - Content to display inside the dropdown item.
- *
- * @returns {JSX.Element} The rendered DropdownItem component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/dropdown
- */
-export const DropdownItem: FC<ILibDropdownItem> = ({
-	element = "button",
-	children,
-	className,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			className={clsx(
-				"inline-flex items-center gap-2 bg-background hover:bg-primary-300 active:bg-primary-600 disabled:hover:bg-background p-2 min-w-[300px] font-bold text-primary-500 disabled:text-gray-500",
-				"dropdown-item",
-				className,
-			)}
-			content={undefined}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

@@ -1,2 +0,0 @@
-export * from "./Dropdown"
-export * from "./DropdownItem"

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

@@ -1,35 +0,0 @@
-import type {
-	DispatchState,
-	LibComponentBase,
-	LibInputListDirection,
-	LibShadows,
-	LibDropdownItem,
-	ReactChildren,
-	LibRadiuses,
-} from "../../types"
-
-/*====================== Dropdown ======================*/
-
-interface ILibDropdownBase extends LibComponentBase<HTMLDivElement> {
-	isOpen: boolean
-	setIsOpen: DispatchState<boolean>
-	direction?: LibInputListDirection
-	shadow?: LibShadows
-	borderRadius?: LibRadiuses
-}
-
-interface DropdownWithItems extends ILibDropdownBase {
-	items?: Array<LibDropdownItem>
-	children?: never
-}
-
-interface DropdownWithChildren extends ILibDropdownBase {
-	items?: never
-	children?: ReactChildren
-}
-
-export type ILibDropdown = DropdownWithItems | DropdownWithChildren
-
-/*====================== DropdownItem ======================*/
-
-export interface ILibDropdownItem extends LibComponentBase<HTMLButtonElement> {}

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

@@ -1,62 +0,0 @@
-import { useState, useRef, type FC, useEffect } from "react"
-import { useMergeRefs } from "../../hooks"
-import { clsx } from "../../utils"
-import type { ILibFade } from "./types"
-
-/**
- * Fade component for creating smooth fade-in animations when elements enter the viewport.
- *
- * @component
- *
- * @example
- * <Fade>
- *   <h1>This content will fade in when visible</h1>
- * </Fade>
- *
- * @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<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
- */
-export const Fade: FC<ILibFade> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	...rest
-}) => {
-	const Element = element
-
-	const [isVisible, setIsVisible] = useState(true)
-	const fadeRef = useRef<Element>(null)
-
-	useEffect(() => {
-		const observer = new IntersectionObserver(entries => {
-			entries.forEach(entry => setIsVisible(entry.isIntersecting))
-		})
-
-		observer.observe((fadeRef as any).current)
-	}, [])
-
-	return (
-		<Element
-			ref={useMergeRefs([ref, fadeRef])}
-			className={clsx(
-				"opacity-0 transition-all -translate-x-6 duration-500 ease-out",
-				isVisible && "visible",
-				"[&.visible]:opacity-100 [&.visible]:translate-x-0",
-				"fade",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}