@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/ProgressBar/ProgressBar.tsx

@@ -1,87 +0,0 @@
-import { type FC } from "react"
-import { getPercentage } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import type { ILibProgressBar } from "./types"
-import type { LibColorsShort } from "../../types"
-
-/**
- * ProgressBar component for displaying progress with customizable colors and animations using a meter element.
- *
- * @component
- *
- * @example
- * <ProgressBar
- *   value={75}
- *   color="primary"
- *   max={100}
- * />
- *
- * @extends HTMLMeterElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the progress bar.
- * @prop {React.Ref<HTMLMeterElement>} [props.ref] - Ref to the progress bar element.
- * @prop {number} [props.value] - Current progress value.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the progress bar fill.
- * @prop {boolean} [props.noAnimation] - Whether to disable the progress animation.
- * @prop {number} [props.min=0] - Minimum value for the progress bar.
- * @prop {number} [props.max=100] - Maximum value for the progress bar.
- * @prop {string} [props.id] - Unique identifier for the progress bar element.
- *
- * @returns {JSX.Element} The rendered ProgressBar component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/progress-bar
- */
-export const ProgressBar: FC<ILibProgressBar> = ({
-	className,
-	ref,
-	value,
-	color = "primary",
-	noAnimation,
-	min = 0,
-	max = 100,
-	id,
-	...rest
-}) => {
-	const percent = getPercentage(value, Number(max))
-
-	return (
-		<meter
-			ref={ref}
-			id={id}
-			className={clsx(
-				"block relative bg-gray-200 border-none rounded-full w-full h-4 overflow-hidden",
-				"before:h-full before:absolute before:top-0 before:left-0 before:rounded-full before:transition-all before:ease-in-out before:duration-200",
-				"appearance-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:border-none",
-				"[&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-suboptimum-value]:bg-none [&::-webkit-meter-even-less-good-value]:bg-none",
-				"[&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:border-none",
-				!noAnimation &&
-					"before:animate-[progress-bar_calc(var(--progress-speed)*50ms)_ease_forwards]",
-				noAnimation && "before:w-(--meter-value)",
-				genProgressColor[color],
-				"progress-bar",
-				className,
-			)}
-			style={{
-				["--meter-value" as any]: `${percent}%`,
-				["--progress-speed" as any]: value,
-			}}
-			min={min}
-			max={max}
-			value={value}
-			{...rest}
-		/>
-	)
-}
-
-const genProgressColor: Record<
-	Exclude<LibColorsShort, "transparent" | "current" | "black" | "background">,
-	string
-> = {
-	primary: "before:bg-primary-500",
-	secondary: "before:bg-secondary-500",
-	success: "before:bg-success-500",
-	danger: "before:bg-danger-500",
-	warning: "before:bg-warning-500",
-	gray: "before:bg-gray-500",
-	white: "before:bg-white",
-}

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

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

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

@@ -1,14 +0,0 @@
-import type { MeterHTMLAttributes } from "react"
-import type { LibColorsShort, LibComponentBase } from "../../types"
-
-export interface ILibProgressBar
-	extends Omit<LibComponentBase<HTMLMeterElement>, "element">,
-		MeterHTMLAttributes<HTMLMeterElement> {
-	value: number
-	color?: Exclude<
-		LibColorsShort,
-		"transparent" | "current" | "black" | "background"
-	>
-	noAnimation?: boolean
-	children?: never
-}

package/dist/lib/components/ProgressCircle/ProgressCircle.tsx

@@ -1,146 +0,0 @@
-import { useEffect, useState, type FC } from "react"
-import { Text } from "../Text"
-import { COLORS } from "../../Variables"
-import { clsx, designTokens } from "../../utils"
-import type { ILibProgressCircle } from "./types"
-import type { LibColorsShort } from "../../types"
-
-/**
- * ProgressCircle component for displaying circular progress with customizable colors and smooth animations using SVG.
- *
- * @component
- *
- * @example
- * <ProgressCircle
- *   value={75}
- *   color="primary"
- *   size={120}
- *   showValue
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the progress circle.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the progress circle element.
- * @prop {number} [props.value] - Current progress value (0-100).
- * @prop {number} [props.size=48] - Size of the progress circle in pixels.
- * @prop {number} [props.strokeWidth=4] - Width of the progress stroke.
- * @prop {boolean} [props.noAnimation] - Whether to disable the progress animation.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the progress circle stroke.
- * @prop {boolean} [props.showValue] - Whether to display the percentage value in the center.
- * @prop {React.ReactNode} [props.icon] - Custom icon to display in the center instead of value.
- *
- * @returns {JSX.Element} The rendered ProgressCircle component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/progress-circle
- */
-export const ProgressCircle: FC<ILibProgressCircle> = ({
-	element = "div",
-	className,
-	ref,
-	value,
-	size = 48,
-	strokeWidth = 4,
-	noAnimation,
-	color = "primary",
-	showValue,
-	icon,
-	...rest
-}) => {
-	const Element = element
-
-	const [animatedValue, setAnimatedValue] = useState(noAnimation ? value : 0)
-	const radius = (size - strokeWidth) / 2
-	const circumference = 2 * Math.PI * radius
-	const strokeDashoffset =
-		circumference - (animatedValue / 100) * circumference
-	const backgroundColor = designTokens.libColors["gray-200"]
-	const strokeColor = genStrokeColor[color]
-
-	useEffect(() => {
-		if (!noAnimation) {
-			const timer = setTimeout(() => {
-				setAnimatedValue(value)
-			}, 50)
-			return () => clearTimeout(timer)
-		} else {
-			setAnimatedValue(value)
-		}
-	}, [value, noAnimation])
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-flex relative justify-center items-center",
-				"progress-circle-wrapper",
-				className,
-			)}
-			{...rest}
-		>
-			<svg
-				width={size}
-				height={size}
-				className="-rotate-90 transform progress-circle"
-			>
-				<circle
-					cx={size / 2}
-					cy={size / 2}
-					r={radius}
-					stroke={backgroundColor}
-					strokeWidth={strokeWidth}
-					fill="transparent"
-					className="progress-circle-background"
-				/>
-
-				<circle
-					cx={size / 2}
-					cy={size / 2}
-					r={radius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
-					fill="transparent"
-					strokeDasharray={circumference}
-					strokeLinecap="round"
-					style={{
-						strokeDashoffset: strokeDashoffset,
-						transition: noAnimation
-							? "none"
-							: `stroke-dashoffset ${value * 20}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-					}}
-					className="progress-circle-value"
-				/>
-			</svg>
-
-			{(showValue || icon) && (
-				<div className="absolute inset-0 flex justify-center items-center progress-circle-center">
-					{icon && icon}
-
-					{showValue && (
-						<Text
-							tag="small"
-							color="gray"
-							className="progress-circle-value"
-						>
-							{value}%
-						</Text>
-					)}
-				</div>
-			)}
-		</Element>
-	)
-}
-
-const genStrokeColor: Record<
-	Exclude<LibColorsShort, "transparent" | "current" | "black" | "background">,
-	string
-> = {
-	primary: COLORS.PRIMARY_500,
-	secondary: COLORS.SECONDARY_500,
-	success: COLORS.SUCCESS_500,
-	danger: COLORS.DANGER_500,
-	warning: COLORS.WARNING_500,
-	gray: COLORS.GRAY_500,
-	white: COLORS.WHITE,
-}

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

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

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

@@ -1,31 +0,0 @@
-import type {
-	LibColorsShort,
-	LibComponentBase,
-	ReactElement,
-} from "../../types"
-
-interface ILibProgressCircleBase extends LibComponentBase<HTMLDivElement> {
-	value: number
-	size?: number
-	strokeWidth?: number
-	noAnimation?: boolean
-	color?: Exclude<
-		LibColorsShort,
-		"transparent" | "current" | "black" | "background"
-	>
-	children?: never
-}
-
-interface ProgressCircleWithNumber extends ILibProgressCircleBase {
-	showValue?: true
-	icon?: never
-}
-
-interface ProgressCircleWithIcon extends ILibProgressCircleBase {
-	showValue?: never
-	icon?: ReactElement
-}
-
-export type ILibProgressCircle =
-	| ProgressCircleWithNumber
-	| ProgressCircleWithIcon

package/dist/lib/components/Rating/Rating.tsx

@@ -1,116 +0,0 @@
-import { type FC } from "react"
-import { BiStar, BiSolidStar } from "react-icons/bi"
-import { generateNumbers } from "@julseb-lib/utils"
-import { InputContainer } from "../InputContainer"
-import { clsx, genTextColorHover } from "../../utils"
-import type { ILibRating } from "./types"
-
-/**
- * Rating component for displaying and selecting star ratings with customizable icons, read-only mode, and validation states.
- *
- * @component
- *
- * @example
- * <Rating
- *   rating={3}
- *   setRating={setRating}
- *   label="Rate this product"
- * />
- * <Rating
- *   rating={4}
- *   readOnly
- *   icons={{ default: <BiHeart />, checked: <BiSolidHeart /> }}
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the rating container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the rating container div element.
- * @prop {number} [props.rating] - Current rating value (1-5 stars).
- * @prop {function} [props.setRating] - Function to update the rating value when not in read-only mode.
- * @prop {object} [props.icons] - Icon configuration object with default and checked icon variants.
- * @prop {boolean} [props.readOnly] - Whether the rating is in read-only mode (no interaction).
- * @prop {string} [props.label] - Label text to display above the rating.
- * @prop {string} [props.labelComment] - Additional comment text next to the label.
- * @prop {string} [props.helper] - Helper text to display below the label.
- * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the rating.
- * @prop {string} [props.id] - Unique identifier for the rating element.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {any} [props.rest] - Additional props spread to the rating container.
- *
- * @returns {JSX.Element} The rendered Rating component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/rating
- */
-export const Rating: FC<ILibRating> = ({
-	className,
-	ref,
-	rating,
-	setRating,
-	icons,
-	readOnly,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	id,
-	validation,
-	...rest
-}) => {
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			id={id}
-		>
-			<div
-				ref={ref}
-				id={id}
-				className={clsx("flex gap-2", "rating", className)}
-				{...rest}
-			>
-				{generateNumbers(0, 4).map(n => {
-					const Element = readOnly ? "span" : "button"
-
-					return (
-						<Element
-							key={n}
-							onClick={() => !readOnly && setRating!(n + 1)}
-							type="button"
-							className={clsx(
-								readOnly
-									? "text-primary-500"
-									: genTextColorHover["primary"],
-								validation?.status === false
-									? readOnly
-										? "text-danger-500"
-										: genTextColorHover["danger"]
-									: validation?.status === true &&
-											(readOnly
-												? "text-success-500"
-												: genTextColorHover["success"]),
-								"rating-item",
-							)}
-						>
-							{n >= rating
-								? (icons?.default ?? (
-										<BiStar
-											size={32}
-											className="rating-icon"
-										/>
-									))
-								: (icons?.checked ?? (
-										<BiSolidStar
-											size={32}
-											className="rating-icon"
-										/>
-									))}
-						</Element>
-					)
-				})}
-			</div>
-		</InputContainer>
-	)
-}

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

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

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

@@ -1,25 +0,0 @@
-import type { DispatchState, LibComponentBase, ReactElement } from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputWithValidation,
-} from "../InputComponents"
-
-type ILibRatingBase = Omit<LibComponentBase<HTMLDivElement>, "element"> &
-	Omit<ILibInputCommon, "inputVariant" | "inputBackground"> &
-	ILibInputWithValidation & {
-		rating: number
-		icons?: { default?: ReactElement; checked?: ReactElement }
-		children?: never
-	}
-
-type RatingEditable = ILibRatingBase & {
-	setRating: DispatchState<number>
-	readOnly?: never
-}
-
-type RatingReadOnly = ILibRatingBase & {
-	setRating?: never
-	readOnly?: true
-}
-
-export type ILibRating = RatingEditable | RatingReadOnly

package/dist/lib/components/Section/Section.tsx

@@ -1,51 +0,0 @@
-import { type FC } from "react"
-import { clsx, genGap } from "../../utils"
-import type { ILibSection } from "./types"
-
-/**
- * Section component for grouping related content in a flexible layout.
- *
- * @component
- * @example
- * <Section gap="lg">
- *   <h2>Section title</h2>
- *   <p>Section content</p>
- * </Section>
- *
- * @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 section container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the section container.
- * @prop {ReactNode} props.children - Section content.
- * @prop {"2xl"|"xl"|"lg"|"md"|"sm"|"xs"|"2xs"|"0px"} [props.gap="md"] - Gap between children (uses spacer tokens).
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered section container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/section
- */
-export const Section: FC<ILibSection> = ({
-	className,
-	element = "section",
-	ref,
-	children,
-	gap = "md",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col items-stretch",
-				genGap[gap],
-				"section",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

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

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

@@ -1,5 +0,0 @@
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibSection extends LibComponentBase<HTMLDivElement> {
-	gap?: LibSpacers
-}

package/dist/lib/components/Select/Select.tsx

@@ -1,191 +0,0 @@
-import { useRef, type FC } from "react"
-import { BiCaretDown } from "react-icons/bi"
-import { useClickOutside } from "../../hooks"
-import { useKeyboardNavigation } from "../../lib-utils"
-import { InputContainer } from "../InputContainer"
-import {
-	InputWithListWrapper,
-	InputList,
-	InputValidation,
-	InputIcon,
-	InputWrapper,
-	InputListItem,
-} from "../InputComponents"
-import { clsx } from "../../utils"
-import type { ILibSelect } from "./types"
-
-/**
- * Select component for creating dropdown selection inputs with keyboard navigation, validation states, and customizable styling.
- *
- * @component
- *
- * @example
- * <Select
- *   value={selectedValue}
- *   setValue={setSelectedValue}
- *   options={["Option 1", "Option 2", "Option 3"]}
- *   label="Choose an option"
- *   placeholder="Select..."
- * />
- *
- * @extends HTMLButtonElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the select container.
- * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
- * @prop {string} [props.value] - Currently selected value.
- * @prop {function} [props.setValue] - Function to update the selected value.
- * @prop {string[]} [props.options] - Array of options to display in the dropdown.
- * @prop {"up" | "down"} [props.listDirection] - Direction for the dropdown list to appear.
- * @prop {object} [props.icons] - Icon configuration object with left icon and caret icon.
- * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the select input.
- * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the select input.
- * @prop {string} [props.label] - Label text to display above the select.
- * @prop {string} [props.labelComment] - Additional comment text next to the label.
- * @prop {string} [props.helper] - Helper text to display below the label.
- * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the select.
- * @prop {string} [props.id] - Unique identifier for the select element.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {boolean} [props.disabled] - Whether the select is disabled.
- * @prop {any} [props.rest] - Additional props spread to the button element.
- *
- * @returns {JSX.Element} The rendered Select component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/select
- */
-export const Select: FC<ILibSelect> = ({
-	className,
-	ref,
-	value,
-	setValue,
-	options,
-	listDirection,
-	icons,
-	inputVariant,
-	inputBackground,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	id,
-	validation,
-	disabled,
-	...rest
-}) => {
-	const el = useRef<HTMLDivElement>(null)
-
-	useClickOutside(el as any, () => {
-		if (isOpen) setIsOpen(false)
-	})
-
-	const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation({
-		data: options || [],
-		value: value,
-		setValue: setValue,
-	})
-
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			hasListOpen={isOpen}
-			validation={validation}
-		>
-			<InputWithListWrapper ref={el} isOpen={isOpen}>
-				<InputWrapper
-					validation={validation}
-					inputBackground={inputBackground}
-					inputVariant={inputVariant}
-					className={clsx(
-						"z-10 relative",
-						isOpen &&
-							(validation?.status === false
-								? "border-danger-500 focus-within:border-danger-500"
-								: validation?.status === true
-									? "border-success-500 focus-within:border-success-500"
-									: "border-primary-500 focus-within:border-primary-500"),
-						className,
-					)}
-				>
-					<button
-						ref={ref}
-						id={id}
-						className={clsx(
-							"flex items-center gap-2 outline-none w-full",
-							inputBackground === "light"
-								? "bg-white"
-								: inputBackground === "dark"
-									? "bg-black"
-									: "bg-background",
-							validation?.status === false
-								? "bg-danger-50"
-								: validation?.status === true &&
-										"bg-success-50",
-							"select-button",
-							className,
-						)}
-						onClick={() => setIsOpen(!isOpen)}
-						onFocus={() => setIsOpen(true)}
-						disabled={disabled}
-						{...rest}
-					>
-						<InputIcon
-							icon={icons?.left}
-							inputVariant={inputVariant}
-							disabled={disabled}
-						/>
-
-						<span className="px-2 text-left select-value grow">
-							{value}
-						</span>
-
-						<InputValidation validation={validation} />
-
-						{icons?.caret ?? (
-							<span className="px-2 select-caret-container">
-								<BiCaretDown
-									size={16}
-									className={clsx(
-										validation?.status === false
-											? "text-danger-500"
-											: validation?.status === true
-												? "text-success-500"
-												: "text-primary-500",
-										"select-caret",
-									)}
-								/>
-							</span>
-						)}
-					</button>
-				</InputWrapper>
-
-				<InputList
-					listDirection={listDirection}
-					inputVariant={inputVariant}
-					inputBackground={inputBackground}
-					validation={validation}
-					isOpen={isOpen}
-					ref={listRef}
-				>
-					{options?.map((option, i) => (
-						<InputListItem
-							key={option}
-							content={option}
-							onClick={() => {
-								setValue(option)
-								setIsOpen(false)
-							}}
-							validationStatus={validation?.status}
-							value={value}
-							cursor={cursor}
-							index={i}
-							aria-label={option}
-							isActive={option === value}
-						/>
-					))}
-				</InputList>
-			</InputWithListWrapper>
-		</InputContainer>
-	)
-}

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

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