@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/InputComponents/classes.ts

@@ -1,101 +0,0 @@
-import { genTextColorHover } from "../../utils"
-import type {
-	LibInputBackground,
-	LibInputVariant,
-	LibInputValidation,
-	LibInputListDirection,
-} from "../../types"
-
-export const INPUT_COMMON_CLASSES = ({
-	inputBackground,
-	validationStatus,
-}: {
-	inputBackground: LibInputBackground | undefined
-	validationStatus: boolean | undefined
-}) => [
-	"relative z-10 text-font",
-	"grow h-full px-2",
-	"outline-none",
-	"placeholder:text-gray-500",
-	"disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500",
-	validationStatus === false
-		? "bg-danger-50 text-black"
-		: validationStatus === true
-			? "bg-success-50 text-black"
-			: inputBackground === "dark"
-				? "bg-black text-white"
-				: inputBackground === "light"
-					? "bg-white text-black"
-					: "bg-background text-font",
-]
-
-export const INPUT_VALIDATION_CONTAINER = ["px-2"]
-
-export const INPUT_BUTTON_CLASSES = ["px-2", genTextColorHover["primary"]]
-
-export const PREFIX_CLASSES = [
-	"px-2 bg-gray-100 h-full inline-flex items-center border-e-1 border-e-gray-200 text-black",
-]
-
-export const SUFFIX_CLASSES = [
-	"px-2 bg-gray-100 h-full inline-flex items-center border-s-1 border-s-gray-200 text-black",
-]
-
-export const INPUT_ICON_CONTAINER_CLASSES = [
-	"size-8 inline-flex items-center justify-center border-e-1 border-e-gray-200",
-]
-
-export const INPUT_CONTAINER_CLASSES = ({
-	validation,
-	inputVariant,
-	inputBackground,
-	hasListOpen,
-}: {
-	validation: LibInputValidation | undefined
-	inputVariant: LibInputVariant | undefined
-	inputBackground: LibInputBackground | undefined
-	hasListOpen?: boolean
-}) => [
-	"w-full h-8 border border-gray-200 flex items-center gap-1 rounded-md overflow-hidden relative bg-background",
-	"has-[input:focus]:border-primary-500",
-	"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-gray-100 has-[input:disabled]:text-gray-500",
-	validation &&
-		(validation.status === false
-			? "bg-danger-50 has-[input:focus]:border-danger-500 text-black"
-			: validation.status === true &&
-				"bg-success-50 has-[input:focus]:border-success-500 text-black"),
-	inputVariant === "pill" && "rounded-full",
-	inputBackground === "light" && "bg-white text-black",
-	inputBackground === "dark" && "bg-black text-white",
-	hasListOpen && "open",
-	"[&.open]:z-20",
-]
-
-export const INPUT_LIST_CLASSES = ({
-	isOpen,
-	listDirection,
-	inputVariant,
-	inputBackground,
-	validation,
-}: {
-	isOpen: boolean
-	listDirection: LibInputListDirection | undefined
-	inputVariant: LibInputVariant | undefined
-	inputBackground: LibInputBackground | undefined
-	validation: LibInputValidation | undefined
-}) => [
-	"left-0 absolute flex flex-col items-start opacity-0 border border-primary-500 rounded-md w-full max-h-0 overflow-hidden overflow-y-scroll transition-all duration-200 ease-in-out z-0",
-	isOpen && "open",
-	"[&.open]:opacity-100 [&.open]:max-h-[300px]",
-	(listDirection === "down" || !listDirection) && "top-0 [&.open]:pt-8",
-	listDirection === "up" && ["bottom-0 [&.open]:pt-2"],
-	inputVariant === "pill" && "rounded-l-2xl rounded-tr-2xl",
-	inputBackground === "dark"
-		? "bg-black text-white"
-		: inputBackground === "light"
-			? "bg-white text-black"
-			: "bg-background text-font",
-	validation?.status === false
-		? "bg-danger-50 border-danger-500"
-		: validation?.status === true && "bg-success-50 border-success-500",
-]

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

@@ -1,11 +0,0 @@
-export * from "./InputValidation"
-export * from "./types"
-export * from "./InputButton"
-export * from "./InputPrefix"
-export * from "./InputSuffix"
-export * from "./InputIcon"
-export * from "./InputWrapper"
-export * from "./InputList"
-export * from "./InputWithListWrapper"
-export * from "./classes"
-export * from "./InputListItem"

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

@@ -1,63 +0,0 @@
-import type { RefObject } from "react"
-import type {
-	ReactChildren,
-	LibInputValidation,
-	LibInputVariant,
-	LibInputBackground,
-	LibInputListDirection,
-} from "../../types"
-
-interface ILibInputBase {
-	ref?: RefObject<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>
-	helper?: ReactChildren
-	helperBottom?: ReactChildren
-	value?: any
-	inputVariant?: LibInputVariant
-	inputBackground?: LibInputBackground
-}
-
-interface InputWithLabel extends ILibInputBase {
-	label?: ReactChildren
-	labelComment?: ReactChildren
-}
-
-interface InputWithoutLabel extends ILibInputBase {
-	label?: undefined
-	labelComment?: never
-}
-
-export type ILibInputCommon = InputWithLabel | InputWithoutLabel
-
-type InputWithCounter = ILibInputCommon & {
-	counter?: true
-	maxLength?: number
-}
-
-type InputWithoutCounter = ILibInputCommon & {
-	counter?: false | undefined
-	maxLength?: never
-}
-
-export type ILibInputExtended = InputWithCounter | InputWithoutCounter
-
-export type ILibInputWithList = ILibInputExtended & {
-	listDirection?: LibInputListDirection
-}
-
-export type ILibValidationStatus = boolean | undefined
-
-export interface ILibInputWithValidation {
-	validation?: LibInputValidation
-}
-
-export interface ILibInputWithIcon {
-	icon?: ReactElement
-}
-
-export interface ILibInputWithPrefix {
-	prefix?: string
-}
-
-export interface ILibInputWithSuffix {
-	suffix?: string
-}

package/dist/lib/components/InputContainer/InputContainer.tsx

@@ -1,149 +0,0 @@
-import { type FC } from "react"
-import { BiXCircle, BiCheckCircle } from "react-icons/bi"
-import { Text } from "../Text"
-import { clsx } from "../../utils"
-import type { ILibInputContainer } from "./types"
-
-/**
- * InputContainer component for wrapping input elements with labels, helper text, validation messages, and character counters.
- *
- * @component
- *
- * @example
- * <InputContainer
- *   label="Email"
- *   helper="Enter your email address"
- *   validation={{ status: true, message: "Valid email" }}
- * >
- *   <input type="email" />
- * </InputContainer>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the container.
- * @prop {React.ComponentType | string} [props.element="div"] - The HTML element or component to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the container element.
- * @prop {React.ReactNode} [props.children] - Input elements or other content to display inside the container.
- * @prop {string} [props.label] - Label text to display above the input.
- * @prop {string} [props.labelComment] - Additional comment text next to the label in gray italic text.
- * @prop {string} [props.helper] - Helper text to display below the label.
- * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the container.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object with status, message, and custom icons.
- * @prop {string | number} [props.value] - Current value for character counter calculation.
- * @prop {boolean | object} [props.counter] - Whether to show character counter or counter configuration.
- * @prop {number} [props.maxLength] - Maximum character length for counter display.
- * @prop {boolean} [props.hasListOpen] - Whether a dropdown list is open (adds z-index styling).
- * @prop {string} [props.id] - Unique identifier to associate label with input element.
- * @prop {any} [props.rest] - Additional props spread to the container element.
- *
- * @returns {JSX.Element} The rendered InputContainer component or just children if no wrapper content is needed.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/input
- */
-export const InputContainer: FC<ILibInputContainer> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	validation,
-	value,
-	counter,
-	maxLength,
-	hasListOpen,
-	id,
-	...rest
-}) => {
-	const Element = element
-
-	if (!label && !helper && !helperBottom && !validation && !counter)
-		return children
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col gap-1",
-				hasListOpen && "z-40",
-				"input-container",
-				className,
-			)}
-			{...rest}
-		>
-			{label && (
-				<label
-					htmlFor={id}
-					className="font-bold text-primary-500 input-container-label"
-				>
-					{label}{" "}
-					{labelComment && (
-						<Text
-							tag="small"
-							color="gray"
-							className="italic input-container-label-comment"
-						>
-							{labelComment}
-						</Text>
-					)}
-				</label>
-			)}
-
-			{helper && <Text className="input-container-helper">{helper}</Text>}
-
-			{children}
-
-			{helperBottom && (
-				<Text tag="small" className="input-container-helper-bottom">
-					{helperBottom}
-				</Text>
-			)}
-
-			{validation &&
-				validation.status !== undefined &&
-				validation.message && (
-					<div className="flex items-start gap-1 input-container-validation-container">
-						<span
-							className={clsx(
-								"inline-flex items-center h-[21px]",
-								validation.status === false
-									? "text-danger-500"
-									: "text-success-500",
-								"input-container-validation-icon-container",
-							)}
-						>
-							{validation.status === false
-								? (validation.iconNotPassed ?? (
-										<BiXCircle
-											size={14}
-											className="input-container-validation-icon"
-										/>
-									))
-								: (validation.iconPassed ?? (
-										<BiCheckCircle
-											size={14}
-											className="input-container-validation-icon"
-										/>
-									))}
-						</span>
-
-						<Text
-							tag="small"
-							className="input-container-validation-message"
-						>
-							{validation.message}
-						</Text>
-					</div>
-				)}
-
-			{counter && (
-				<Text tag="small" className="input-container-counter">
-					{value?.length}
-					{maxLength && `/${maxLength}`}
-				</Text>
-			)}
-		</Element>
-	)
-}

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

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

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

@@ -1,11 +0,0 @@
-import type { LibComponentBase } from "../../types"
-import type {
-	ILibInputWithList,
-	ILibInputWithValidation,
-} from "../InputComponents/types"
-
-export type ILibInputContainer = LibComponentBase<HTMLDivElement> &
-	Omit<ILibInputWithList, "inputBackground" | "inputVariant"> &
-	ILibInputWithValidation & {
-		hasListOpen?: boolean
-	}

package/dist/lib/components/InputCounter/InputCounter.tsx

@@ -1,141 +0,0 @@
-import { type FC } from "react"
-import { BiPlus, BiMinus } from "react-icons/bi"
-import { clsx } from "../../utils"
-import { ButtonIcon } from "../ButtonIcon"
-import { InputContainer } from "../InputContainer"
-import type { ILibInputCounter } from "./types"
-
-/**
- * InputCounter component for numeric input with increment/decrement buttons and optional display-only mode.
- *
- * @component
- *
- * @example
- * <InputCounter
- *   value={count}
- *   setValue={setCount}
- *   min={0}
- *   max={10}
- *   label="Quantity"
- * />
- * <InputCounter
- *   value={amount}
- *   setValue={setAmount}
- *   noInput
- *   buttonsColor="secondary"
- * />
- *
- * @extends HTMLInputElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the counter container.
- * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input or span element.
- * @prop {number} [props.value] - Current numeric value of the counter.
- * @prop {function} [props.setValue] - Function to update the counter value.
- * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.buttonVariant] - Visual variant style of the increment/decrement buttons.
- * @prop {object} [props.icons] - Icon configuration object with minus and plus icons.
- * @prop {object} [props.labelButtons] - Aria labels and tooltip text for the buttons.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"} [props.buttonsColor="primary"] - Color theme of the increment/decrement buttons.
- * @prop {boolean} [props.showButtonsTooltip] - Whether to show tooltips on button hover.
- * @prop {boolean} [props.noInput] - Whether to display value as text instead of editable input.
- * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input field.
- * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input field.
- * @prop {string} [props.label] - Label text to display above the counter.
- * @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 counter.
- * @prop {string} [props.id] - Unique identifier for the input element.
- * @prop {number} [props.min=1] - Minimum allowed value for the counter.
- * @prop {number} [props.max=100] - Maximum allowed value for the counter.
- * @prop {number} [props.step=1] - Increment/decrement step value.
- * @prop {any} [props.rest] - Additional props spread to the input or span element.
- *
- * @returns {JSX.Element} The rendered InputCounter component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/input-counter
- */
-export const InputCounter: FC<ILibInputCounter> = ({
-	className,
-	ref,
-	value,
-	setValue,
-	buttonVariant,
-	icons,
-	labelButtons,
-	buttonsColor = "primary",
-	showButtonsTooltip,
-	noInput,
-	inputVariant,
-	inputBackground,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	id,
-	min = 1,
-	max = 100,
-	step = 1,
-	...rest
-}) => {
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			id={id}
-		>
-			<div
-				className={clsx(
-					"inline-flex items-center",
-					noInput ? "gap-4" : "gap-2",
-					"input-counter",
-					className,
-				)}
-			>
-				<ButtonIcon
-					icon={icons?.minus ?? <BiMinus />}
-					className="size-6 input-counter-button"
-					color={buttonsColor}
-					variant={buttonVariant}
-					aria-label={labelButtons?.minus}
-					tooltip={labelButtons?.minus}
-					showTooltip={showButtonsTooltip}
-					onClick={() => setValue(prev => prev - step)}
-					disabled={value === min}
-				/>
-
-				{noInput ? (
-					<span
-						ref={ref}
-						className="inline-flex items-center h-8 font-black text-2xl input-counter-number"
-						{...rest}
-					>
-						{value}
-					</span>
-				) : (
-					<input
-						ref={ref}
-						id={id}
-						value={value}
-						onChange={e => setValue(Number(e.target.value))}
-						className="px-2 border border-gray-200 focus:border-primary-500 rounded-md outline-none min-w-[calc(3ch+16px)] text-center input-counter-input"
-						size={value.toString().length + 1}
-						{...rest}
-					/>
-				)}
-
-				<ButtonIcon
-					icon={icons?.minus ?? <BiPlus />}
-					className="size-6 input-counter-button"
-					color={buttonsColor}
-					variant={buttonVariant}
-					aria-label={labelButtons?.plus}
-					tooltip={labelButtons?.plus}
-					showTooltip={showButtonsTooltip}
-					onClick={() => setValue(prev => prev + step)}
-					disabled={value === max}
-				/>
-			</div>
-		</InputContainer>
-	)
-}

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

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

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

@@ -1,45 +0,0 @@
-import type { InputHTMLAttributes } from "react"
-import type {
-	DispatchState,
-	LibButtonVariant,
-	LibColorsHover,
-	LibComponentBase,
-	LibInputBackground,
-	LibInputVariant,
-	ReactElement,
-} from "../../types"
-import type { ILibInputCommon } from "../InputComponents"
-
-type ILibInputCounterBase = Omit<
-	LibComponentBase<HTMLInputElement>,
-	"element"
-> &
-	InputHTMLAttributes<HTMLInputElement> &
-	ILibInputCommon & {
-		value: number
-		setValue: DispatchState<number>
-		buttonVariant?: LibButtonVariant
-		icons?: { minus?: ReactElement; plus?: ReactElement }
-		labelButtons?: { minus?: string; plus?: string }
-		buttonsColor?: LibColorsHover
-		showButtonsTooltip?: boolean
-		min?: number
-		max?: number
-		step?: number
-		type?: never
-		children?: never
-	}
-
-type CounterWithInput = ILibInputCounterBase & {
-	noInput?: false | undefined
-	inputVariant?: LibInputVariant
-	inputBackground?: LibInputBackground
-}
-
-type CounterWithoutInput = ILibInputCounterBase & {
-	noInput?: true
-	inputVariant?: never
-	inputBackground?: never
-}
-
-export type ILibInputCounter = CounterWithInput | CounterWithoutInput

package/dist/lib/components/InputImage/EmptyContainer.tsx

@@ -1,17 +0,0 @@
-import type { FC } from "react"
-import { BiImage } from "react-icons/bi"
-import { clsx } from "../../utils"
-import type { ILibEmptyContainer } from "./subtypes"
-
-export const EmptyContainer: FC<ILibEmptyContainer> = ({ icons }) => {
-	return (
-		<div
-			className={clsx(
-				"flex justify-center items-center w-full h-full",
-				"empty-container",
-			)}
-		>
-			{icons?.empty ?? <BiImage size={48} />}
-		</div>
-	)
-}

package/dist/lib/components/InputImage/HoverContainer.tsx

@@ -1,21 +0,0 @@
-import type { FC } from "react"
-import { BiEdit } from "react-icons/bi"
-import { clsx } from "../../utils"
-import type { ILibHoverContainer } from "./subtypes"
-
-export const HoverContainer: FC<ILibHoverContainer> = ({
-	icons,
-	isVisible,
-}) => {
-	return (
-		<div
-			className={clsx(
-				"inline-flex top-0 left-0 absolute justify-center items-center bg-overlay-white-80 w-full h-full transition-all duration-200 ease",
-				isVisible ? "opacity-100" : "opacity-0",
-				"hover-container",
-			)}
-		>
-			{icons?.hover ?? <BiEdit size={32} />}
-		</div>
-	)
-}

package/dist/lib/components/InputImage/InputImage.tsx

@@ -1,104 +0,0 @@
-import { useState, type FC } from "react"
-import { InputContainer } from "../InputContainer"
-import { HoverContainer } from "./HoverContainer"
-import { EmptyContainer } from "./EmptyContainer"
-import { clsx, genBorderRadius } from "../../utils"
-import type { ILibInputImage } from "./types"
-
-/**
- * InputImage component for uploading and displaying image files with hover interactions and validation states.
- *
- * @component
- *
- * @example
- * <InputImage
- *   id="profile-image"
- *   label="Profile Picture"
- *   value={imageUrl}
- *   icons={{ upload: <BiUpload />, edit: <BiEdit /> }}
- * />
- *
- * @extends HTMLInputElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the input image container.
- * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the label element.
- * @prop {string} [props.label] - Label text to display above the input.
- * @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 input.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {string} [props.value] - Current image URL or base64 string value.
- * @prop {object} [props.icons] - Icon configuration object for upload and edit states.
- * @prop {"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"} [props.borderRadius="md"] - Border radius of the image container.
- * @prop {boolean} [props.disabled] - Whether the input is disabled.
- * @prop {string} [props.id] - Unique identifier for the input element.
- * @prop {any} [props.rest] - Additional props spread to the file input element.
- *
- * @returns {JSX.Element} The rendered InputImage component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/input-image
- */
-export const InputImage: FC<ILibInputImage> = ({
-	className,
-	ref,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	validation,
-	value,
-	icons,
-	borderRadius = "md",
-	disabled,
-	id,
-	...rest
-}) => {
-	const [isHovered, setIsHovered] = useState(false)
-
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			validation={validation}
-		>
-			<label
-				htmlFor={id}
-				ref={ref}
-				className={clsx(
-					"relative flex justify-center items-center size-16 overflow-hidden text-primary-500 cursor-pointer",
-					validation?.status === false
-						? "bg-danger-50 text-danger-500"
-						: "bg-gray-100",
-					disabled && "cursor-not-allowed text-gray-500",
-					genBorderRadius[borderRadius],
-					"input-image-container",
-					className,
-				)}
-				onMouseEnter={() => !disabled && setIsHovered(true)}
-				onMouseLeave={() => !disabled && setIsHovered(false)}
-			>
-				{value === "" || !value ? (
-					<EmptyContainer icons={icons} />
-				) : (
-					<img
-						src={value}
-						alt="Image input"
-						className="input-image-image"
-					/>
-				)}
-
-				<HoverContainer isVisible={isHovered} icons={icons} />
-
-				<input
-					type="file"
-					id={id}
-					disabled={disabled}
-					className="hidden input-image-input"
-					{...rest}
-				/>
-			</label>
-		</InputContainer>
-	)
-}

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

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

package/dist/lib/components/InputImage/subtypes.ts

@@ -1,7 +0,0 @@
-import type { ILibInputImage } from "./types"
-
-export type ILibEmptyContainer = Pick<ILibInputImage, "icons">
-
-export type ILibHoverContainer = Pick<ILibInputImage, "icons"> & {
-	isVisible: boolean
-}