@julseb-lib/react 0.1.19 → 0.1.20

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

@@ -1,23 +0,0 @@
-import type { ButtonHTMLAttributes } from "react"
-import type { DispatchState, LibComponentBase } from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputWithValidation,
-	ILibInputWithPrefix,
-	ILibInputWithList,
-} from "../InputComponents"
-
-export type ILibSelect = Omit<
-	LibComponentBase<HTMLButtonElement>,
-	"prefix" | "element"
-> &
-	ButtonHTMLAttributes<HTMLButtonElement> &
-	ILibInputCommon &
-	ILibInputWithValidation &
-	ILibInputWithPrefix &
-	ILibInputWithList & {
-		value: string
-		setValue: DispatchState<string>
-		options: Array<string>
-		icons?: { left?: ReactElement; caret?: ReactElement }
-	}

package/dist/lib/components/Skeleton/Skeleton.tsx

@@ -1,57 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgAllColors, genBorderRadius } from "../../utils"
-import type { ILibSkeleton } from "./types"
-import type { LibSkeletonAnimation } from "../../types"
-
-/**
- * Skeleton component for displaying a loading placeholder.
- *
- * @component
- * @extends HTMLDivElement
- *
- * @example
- * <Skeleton backgroundColor="gray-100" borderRadius="lg" animation="pulse" />
- *
- * @prop {LibAllColors} [backgroundColor] - Background color of the skeleton.
- * @prop {LibRadiuses} [borderRadius] - Border radius of the skeleton.
- * @prop {LibSkeletonAnimation} [animation] - Animation style for the skeleton. Possible values: "pulse", "shine".
- *
- * @returns {JSX.Element} The rendered Skeleton component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/skeleton
- */
-export const Skeleton: FC<ILibSkeleton> = ({
-	className,
-	element = "div",
-	ref,
-	animation = "none",
-	backgroundColor = "gray-200",
-	borderRadius = "lg",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"w-[100px] h-[100px]",
-				genBgAllColors[backgroundColor],
-				genAnimation[animation],
-				genBorderRadius[borderRadius],
-				"skeleton",
-				className,
-			)}
-			{...rest}
-		/>
-	)
-}
-
-const genAnimation: Record<LibSkeletonAnimation, string | Array<string>> = {
-	none: "animate-none",
-	pulse: "animate-pulse",
-	shine: [
-		"relative overflow-hidden",
-		"before:absolute before:-top-[200px] before:-bottom-[200px] before:bg-white before:opacity-70 before:blur-[20px] before:w-[100px] before:-skew-15 before:animate-[shine_2000ms_ease-in-out_infinite]",
-	],
-}

package/dist/lib/components/Skeleton/SkeletonCard.tsx

@@ -1,60 +0,0 @@
-import { Flexbox } from "../Flexbox"
-import { clsx, genBgAllColors, genBorderRadius } from "../../utils"
-import type { ILibSkeletonCard } from "./types"
-
-/**
- * SkeletonCard component for displaying a loading placeholder in the shape of a card.
- *
- * @component
- * @extends HTMLDivElement
- *
- * @example
- * <SkeletonCard isShiny backgroundColor="gray-100" borderRadius="lg" gap="md" />
- *
- * @prop {boolean} [inline] - Use inline-flex instead of flex for the skeleton card.
- * @prop {CssFlexDirection} [flexDirection] - Flex direction for the skeleton card content.
- * @prop {CssFlexWrap} [flexWrap] - Flex wrap for the skeleton card content.
- * @prop {CssJustifyContent} [justifyContent] - Justify content property for the skeleton card content.
- * @prop {CssAlignItems} [alignItems] - Align items property for the skeleton card content.
- * @prop {CssJustifyItems} [justifyItems] - Justify items property for the skeleton card content.
- * @prop {CssAlignContent} [alignContent] - Align content property for the skeleton card content.
- * @prop {LibSpacers} [gap] - Gap between skeleton card children.
- * @prop {LibSpacers} [colGap] - Column gap between skeleton card children.
- * @prop {LibSpacers} [rowGap] - Row gap between skeleton card children.
- * @prop {LibAllColors} [backgroundColor] - Background color of the skeleton card.
- * @prop {LibRadiuses} [borderRadius] - Border radius of the skeleton card.
- * @prop {boolean} [isShiny] - If true, applies a shiny animation to the skeleton card.
- *
- * @returns {JSX.Element} The rendered SkeletonCard component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/skeletoncard
- */
-export const SkeletonCard: FC<ILibSkeletonCard> = ({
-	element = "div",
-	className,
-	children,
-	isShiny,
-	backgroundColor = "background",
-	borderRadius = "lg",
-	...rest
-}) => {
-	return (
-		<Flexbox
-			element={element}
-			className={clsx(
-				"relative overflow-hidden",
-				isShiny && [
-					"relative overflow-hidden",
-					"before:absolute before:-top-[200px] before:-bottom-[200px] before:bg-white before:opacity-70 before:blur-[20px] before:w-[100px] before:-skew-15 before:animate-[shine_2000ms_ease-in-out_infinite]",
-				],
-				genBgAllColors[backgroundColor],
-				genBorderRadius[borderRadius],
-				"skeleton-card",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Flexbox>
-	)
-}

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

@@ -1,2 +0,0 @@
-export * from "./Skeleton"
-export * from "./SkeletonCard"

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

@@ -1,27 +0,0 @@
-import type {
-	LibAllColors,
-	LibComponentBase,
-	LibRadiuses,
-	LibSkeletonAnimation,
-} from "../../types"
-import type { ILibFlexbox } from "../Flexbox/types"
-
-interface ILibSkeletonCommon {
-	backgroundColor?: LibAllColors
-	borderRadius?: LibRadiuses
-}
-
-export interface ILibSkeletonCard extends ILibFlexbox, ILibSkeletonCommon {
-	isShiny?: boolean
-}
-
-export interface ILibSkeletonShine extends LibComponentBase<HTMLSpanElement> {
-	children?: never
-}
-
-export interface ILibSkeleton
-	extends LibComponentBase<HTMLDivElement>,
-		ILibSkeletonCommon {
-	animation?: LibSkeletonAnimation
-	children?: never
-}

package/dist/lib/components/Slideshow/Slideshow.tsx

@@ -1,324 +0,0 @@
-import {
-	Children,
-	useState,
-	useEffect,
-	useRef,
-	type FC,
-	type TouchEvent,
-} from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx, genObjectFit, genBorderRadius } from "../../utils"
-import { SlideshowButton } from "./SlideshowButton"
-import { SlideshowPagination } from "./SlideshowPagination"
-import type { ILibSlideshow } from "./types"
-
-/**
- * Slideshow component for displaying images or content with navigation controls, pagination, and touch/swipe support.
- *
- * @component
- *
- * @example
- * <Slideshow
- *   images={["image1.jpg", "image2.jpg", "image3.jpg"]}
- *   controls={{ prev: <BiChevronLeft />, next: <BiChevronRight /> }}
- *   pagination={{ type: "dots", position: "outside" }}
- *   options={{ autoPlay: 3000, speed: 500 }}
- *   imgFit="cover"
- *   borderRadius="md"
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the slideshow container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the slideshow element.
- * @prop {React.ReactNode} [props.children] - Child components to display as slides when not using images prop.
- * @prop {"cover" | "contain" | "fill"} [props.imgFit="cover"] - Object fit property for images in the slideshow.
- * @prop {object} [props.controls] - Configuration object for navigation control buttons.
- * @prop {boolean} [props.hideControls=false] - Whether to hide the navigation control buttons.
- * @prop {ILibPaginationOptions} [props.options] - Configuration options for autoplay timing and transition speed.
- * @prop {string[]} [props.images] - Array of image URLs to display in the slideshow.
- * @prop {object} [props.pagination] - Configuration object for pagination indicators and behavior.
- * @prop {boolean} [props.hidePagination] - Whether to hide the pagination indicators.
- * @prop {LibBorderRadius} [props.borderRadius] - Border radius variant for the slideshow container.
- *
- * @returns {JSX.Element} The rendered Slideshow component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/slideshow
- */
-export const Slideshow: FC<ILibSlideshow> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	imgFit = "cover",
-	controls,
-	hideControls = false,
-	options,
-	images,
-	pagination,
-	hidePagination,
-	borderRadius,
-	...rest
-}) => {
-	const Element = element
-	const childrenArray = Children.toArray(children)
-	const slides = images ?? childrenArray
-	const totalSlides = slides.length
-
-	const [currentSlide, setCurrentSlide] = useState(0)
-	const [isTransitioning, setIsTransitioning] = useState(false)
-
-	const touchStartX = useRef<number>(0)
-	const touchEndX = useRef<number>(0)
-	const touchStartY = useRef<number>(0)
-	const touchEndY = useRef<number>(0)
-
-	const [isDragging, setIsDragging] = useState(false)
-	const slidesRef = useRef<HTMLDivElement>(null)
-
-	useEffect(() => {
-		if (totalSlides > 1) {
-			let intervalId: NodeJS.Timeout | null = null
-
-			if (hideControls && hidePagination && !options?.autoPlay) {
-				intervalId = setInterval(() => handleNext(), 2000)
-			} else if (options?.autoPlay) {
-				intervalId = setInterval(() => handleNext(), options.autoPlay)
-			}
-
-			return () => {
-				if (intervalId) {
-					clearInterval(intervalId)
-				}
-			}
-		}
-	}, [options?.autoPlay, totalSlides, hideControls, hidePagination])
-
-	const handleNext = () => {
-		if (isTransitioning) return
-
-		setIsTransitioning(true)
-		setCurrentSlide(prev => (prev + 1) % totalSlides)
-
-		setTimeout(() => setIsTransitioning(false), options?.speed ?? 300)
-	}
-
-	const handlePrev = () => {
-		if (isTransitioning) return
-
-		setIsTransitioning(true)
-		setCurrentSlide(prev => (prev - 1 + totalSlides) % totalSlides)
-
-		setTimeout(() => setIsTransitioning(false), options?.speed ?? 300)
-	}
-
-	const goToSlide = (n: number) => {
-		if (isTransitioning || n === currentSlide) return
-
-		setIsTransitioning(true)
-		setCurrentSlide(n)
-
-		setTimeout(() => setIsTransitioning(false), options?.speed ?? 300)
-	}
-
-	const handleTouchStart = (e: TouchEvent) => {
-		const touch = e.touches[0]
-		touchStartX.current = touch.clientX
-		touchStartY.current = touch.clientY
-		setIsDragging(true)
-	}
-
-	const handleTouchMove = (e: TouchEvent) => {
-		if (!isDragging) return
-
-		const touch = e.touches[0]
-		touchEndX.current = touch.clientX
-		touchEndY.current = touch.clientY
-
-		const deltaX = Math.abs(touchEndX.current - touchStartX.current)
-		const deltaY = Math.abs(touchEndY.current - touchStartY.current)
-
-		if (deltaX > deltaY && deltaX > 10) {
-			e.preventDefault()
-		}
-	}
-
-	const handleTouchEnd = () => {
-		if (!isDragging) return
-
-		setIsDragging(false)
-
-		const deltaX = touchStartX.current - touchEndX.current
-		const deltaY = Math.abs(touchStartY.current - touchEndY.current)
-		const minSwipeDistance = 50
-
-		if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > minSwipeDistance) {
-			if (deltaX > 0) {
-				handleNext()
-			} else {
-				handlePrev()
-			}
-		}
-
-		touchStartX.current = 0
-		touchEndX.current = 0
-		touchStartY.current = 0
-		touchEndY.current = 0
-	}
-
-	const handleMouseDown = (e: React.MouseEvent) => {
-		touchStartX.current = e.clientX
-		touchStartY.current = e.clientY
-		setIsDragging(true)
-	}
-
-	const handleMouseMove = (e: React.MouseEvent) => {
-		if (!isDragging) return
-
-		touchEndX.current = e.clientX
-		touchEndY.current = e.clientY
-	}
-
-	const handleMouseUp = () => {
-		if (!isDragging) return
-
-		setIsDragging(false)
-
-		const deltaX = touchStartX.current - touchEndX.current
-		const deltaY = Math.abs(touchStartY.current - touchEndY.current)
-		const minSwipeDistance = 50
-
-		if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > minSwipeDistance) {
-			if (deltaX > 0) {
-				handleNext()
-			} else {
-				handlePrev()
-			}
-		}
-
-		touchStartX.current = 0
-		touchEndX.current = 0
-		touchStartY.current = 0
-		touchEndY.current = 0
-	}
-
-	if (totalSlides === 0) return null
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"relative flex flex-col gap-2",
-				"slideshow",
-				className,
-			)}
-			{...rest}
-		>
-			<div
-				className={clsx(
-					"relative w-full h-full overflow-hidden",
-					"slides-wrapper",
-				)}
-				onTouchStart={handleTouchStart}
-				onTouchMove={handleTouchMove}
-				onTouchEnd={handleTouchEnd}
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onMouseLeave={handleMouseUp}
-				style={{
-					touchAction: pagination?.hideOnTouch
-						? "pan-y"
-						: "pan-y pinch-zoom",
-					userSelect: "none",
-					WebkitUserSelect: "none",
-				}}
-			>
-				<div
-					ref={slidesRef}
-					className={clsx(
-						"z-0 relative flex h-full transition-transform duration-300 ease-in-out",
-						"slides-container",
-						isDragging && "transition-none",
-					)}
-					style={{
-						transform: `translateX(-${currentSlide * 100}%)`,
-						transitionDuration: `${options?.speed ?? 300}ms`,
-					}}
-				>
-					{images
-						? images.map((img, i) => (
-								<div
-									key={uuid()}
-									className={clsx(
-										"flex w-full h-full overflow-hidden shrink-0",
-										"slideshow-images-container",
-										borderRadius &&
-											genBorderRadius[borderRadius],
-									)}
-								>
-									<img
-										key={uuid()}
-										src={img}
-										alt={`Slideshow image ${i + 1}`}
-										className={clsx(
-											"w-full h-full",
-											genObjectFit[imgFit],
-											"slideshow-image",
-										)}
-										draggable={false}
-									/>
-								</div>
-							))
-						: childrenArray.map(child => (
-								<div
-									key={uuid()}
-									className={clsx(
-										"w-full h-full shrink-0",
-										"slideshow-images-container",
-										borderRadius &&
-											genBorderRadius[borderRadius],
-									)}
-								>
-									{child}
-								</div>
-							))}
-				</div>
-			</div>
-
-			{!hideControls && totalSlides > 1 && (
-				<>
-					<SlideshowButton
-						position="left"
-						onClick={handlePrev}
-						controls={controls}
-						hideControls={hideControls}
-					/>
-					<SlideshowButton
-						position="right"
-						onClick={handleNext}
-						controls={controls}
-						hideControls={hideControls}
-					/>
-				</>
-			)}
-
-			{!hidePagination && totalSlides > 1 && (
-				<SlideshowPagination
-					active={currentSlide}
-					setActive={setCurrentSlide}
-					contentLength={totalSlides}
-					handleClick={goToSlide}
-					pagination={{
-						type: (pagination?.type ?? "dots") as any,
-						hideOnTouch: pagination?.hideOnTouch ?? false,
-						position: pagination?.position ?? "outside",
-						color: pagination?.color ?? "primary",
-					}}
-					images={images}
-				/>
-			)}
-		</Element>
-	)
-}

package/dist/lib/components/Slideshow/SlideshowButton.tsx

@@ -1,63 +0,0 @@
-import { type FC } from "react"
-import { BiChevronLeft, BiChevronRight } from "react-icons/bi"
-import { useTouchScreen } from "../../hooks"
-import { clsx, genBgColorHover } from "../../utils"
-import type { ILibSlideshowButton } from "./subtypes"
-
-export const SlideshowButton: FC<ILibSlideshowButton> = ({
-	className,
-	controls,
-	position,
-	onClick,
-	hideControls,
-}) => {
-	const isTouchScreen = useTouchScreen()
-
-	if (hideControls || (isTouchScreen && controls?.hideOnTouch)) return null
-
-	return (
-		<button
-			className={clsx(
-				"top-[50%] z-10 absolute flex justify-center items-center -translate-y-[50%]",
-				genBgColorHover[controls?.color ?? "primary"],
-				controls?.color === "white" ? "text-primary-500" : "text-white",
-				controls?.size === "large" ? "size-12" : "size-8",
-				controls?.size === "large"
-					? position === "left"
-						? "rounded-r-md"
-						: "rounded-l-md"
-					: "rounded-full",
-				position === "left"
-					? controls?.size === "large"
-						? "left-0"
-						: "left-2"
-					: controls?.size === "large"
-						? "right-0"
-						: "right-2",
-				"slideshow-button",
-				controls?.className,
-				className,
-			)}
-			onClick={onClick}
-			aria-label={
-				position === "left"
-					? (controls?.labelPrev ?? "Previous")
-					: (controls?.labelNext ?? "Next")
-			}
-			type="button"
-			role="button"
-		>
-			{position === "left"
-				? (controls?.icons?.prev ?? (
-						<BiChevronLeft
-							size={controls?.size === "small" ? 24 : 32}
-						/>
-					))
-				: (controls?.icons?.next ?? (
-						<BiChevronRight
-							size={controls?.size === "small" ? 24 : 32}
-						/>
-					))}
-		</button>
-	)
-}

package/dist/lib/components/Slideshow/SlideshowPagination.tsx

@@ -1,111 +0,0 @@
-import { type FC } from "react"
-import { generateNumbers } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import { useTouchScreen } from "../../hooks"
-import type { ILibSlideshowPagination } from "./subtypes"
-import type { LibColorsHover } from "../../types"
-
-export const SlideshowPagination: FC<ILibSlideshowPagination> = ({
-	className,
-	pagination,
-	images,
-	active,
-	setActive,
-	contentLength,
-}) => {
-	const isTouchScreen = useTouchScreen()
-
-	if ((isTouchScreen && pagination?.hideOnTouch) || contentLength === 0)
-		return null
-
-	return (
-		<div
-			className={clsx(
-				"flex justify-center gap-2 mx-auto px-2 w-full max-w-[70%]",
-				pagination?.position === "outside"
-					? ""
-					: "absolute bottom-1 left-[50%] -translate-x-[50%]",
-				"slideshow-controls",
-				className,
-			)}
-		>
-			{pagination?.type === "thumbnails"
-				? images?.map((image, i) => (
-						<button
-							className={clsx(
-								"opacity-50 size-12",
-								"hover:opacity-70",
-								"[&.active]:opacity-100 [&.active]:hover:opacity-70",
-								active === i && "active",
-								"slideshow-thumbnail-container",
-							)}
-							onClick={() => setActive(i)}
-							key={image}
-						>
-							<img
-								src={image}
-								className={clsx(
-									"w-full h-full object-cover",
-									"slideshow-thumbnail",
-								)}
-							/>
-						</button>
-					))
-				: generateNumbers(0, contentLength - 1).map(n => (
-						<button
-							key={n}
-							className={clsx(
-								"",
-								pagination?.type === "dots-outline"
-									? outlineColor[
-											pagination?.color ?? "primary"
-										]
-									: genBgColor[
-											pagination?.color ?? "primary"
-										],
-								active === n && "active",
-								pagination?.type === "dots" && [
-									"size-2 rounded-full block",
-								],
-								pagination?.type === "dots-outline" && [
-									"size-2 rounded-full border-1",
-								],
-								pagination?.type === "bars" && [
-									"grow h-1 rounded-full",
-								],
-								"slideshow-control",
-							)}
-							onClick={() => setActive(n)}
-						/>
-					))}
-		</div>
-	)
-}
-
-const genBgColor: Record<LibColorsHover, string> = {
-	primary:
-		"bg-primary-300 hover:bg-primary-500 active:bg-primary-600 [&.active]:bg-primary-500 [&.active]:hover:bg-primary-300",
-	secondary:
-		"bg-secondary-300 hover:bg-secondary-500 active:bg-secondary-600 [&.active]:bg-secondary-500 [&.active]:hover:bg-secondary-300",
-	success:
-		"bg-success-300 hover:bg-success-500 active:bg-success-600 [&.active]:bg-success-500 [&.active]:hover:bg-success-300",
-	danger: "bg-danger-300 hover:bg-danger-500 active:bg-danger-600 [&.active]:bg-danger-500 [&.active]:hover:bg-danger-300",
-	warning:
-		"bg-warning-300 hover:bg-warning-500 active:bg-warning-600 [&.active]:bg-warning-500 [&.active]:hover:bg-warning-300",
-	gray: "bg-gray-300 hover:bg-gray-500 active:bg-gray-600 [&.active]:bg-gray-500 [&.active]:hover:bg-gray-300",
-	white: "bg-gray-200 hover:bg-gray-300 active:bg-gray-100 [&.active]:bg-white [&.active]:hover:bg-gray-100",
-}
-
-const outlineColor: Record<LibColorsHover, string> = {
-	primary:
-		"border-primary-500 hover:border-primary-300 active:border-primary-600 [&.active]:bg-primary-500 [&.active]:hover:bg-primary-300 [&.active]:active:bg-primary-600",
-	secondary:
-		"border-secondary-500 hover:border-secondary-300 active:border-secondary-600 [&.active]:bg-secondary-500 [&.active]:hover:bg-secondary-300 [&.active]:active:bg-secondary-600",
-	success:
-		"border-success-500 hover:border-success-300 active:border-success-600 [&.active]:bg-success-500 [&.active]:hover:bg-success-300 [&.active]:active:bg-success-600",
-	danger: "border-danger-500 hover:border-danger-300 active:border-danger-600 [&.active]:bg-danger-500 [&.active]:hover:bg-danger-300 [&.active]:active:bg-danger-600",
-	warning:
-		"border-warning-500 hover:border-warning-300 active:border-warning-600 [&.active]:bg-warning-500 [&.active]:hover:bg-warning-300 [&.active]:active:bg-warning-600",
-	gray: "border-gray-500 hover:border-gray-300 active:border-gray-600 [&.active]:bg-gray-500 [&.active]:hover:bg-gray-300 [&.active]:active:bg-gray-600",
-	white: "border-white hover:border-gray-300 active:border-gray-100 [&.active]:bg-white [&.active]:hover:bg-gray-300 [&.active]:active:bg-gray-100",
-}

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

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